<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Personil</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --gold:       #C9A84C;
            --gold-light: #E8C96D;
            --gold-dark:  #8B6914;
            --gold-dim:   rgba(201,168,76,0.08);
            --ink:        #060503;
            --ink-card:   rgba(12,9,4,0.92);
            --white:      #F8F6F0;
            --muted:      #6A6A5E;
            --border:     rgba(201,168,76,0.18);
            --border-md:  rgba(201,168,76,0.32);
        }

        html, body { min-height: 100%; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--ink);
            color: var(--white);
            min-height: 100vh;
            position: relative;
        }

        #particleCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

        .bg-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
        .bg-layer::before {
            content: ''; position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
            background-size: 56px 56px;
        }

        .glow { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 1; }
        .glow-1 { width:600px; height:500px; opacity:0.10; background:radial-gradient(ellipse,#C9A84C 0%,transparent 68%); top:-200px; left:-140px; }
        .glow-2 { width:480px; height:420px; opacity:0.07; background:radial-gradient(ellipse,#8B6914 0%,transparent 68%); bottom:-160px; right:-100px; }

        .corner { position:fixed; width:120px; height:120px; pointer-events:none; opacity:0.1; z-index:1; }
        .corner-tl { top:0; left:0;     border-top:1px solid var(--gold-light); border-left:1px solid var(--gold-light); }
        .corner-tr { top:0; right:0;    border-top:1px solid var(--gold-light); border-right:1px solid var(--gold-light); }
        .corner-bl { bottom:0; left:0;  border-bottom:1px solid var(--gold-light); border-left:1px solid var(--gold-light); }
        .corner-br { bottom:0; right:0; border-bottom:1px solid var(--gold-light); border-right:1px solid var(--gold-light); }

        /* ── Sidebar ── */
        .sidebar {
            position: fixed; top:0; left:0;
            width: 240px; height: 100vh;
            background: rgba(6,5,3,0.97);
            border-right: 1px solid var(--border);
            z-index: 10;
            display: flex; flex-direction: column;
        }
        .sidebar::after {
            content: ''; position:absolute; top:0; right:0;
            width:1px; height:100%;
            background: linear-gradient(180deg,transparent 0%,var(--gold-dark) 20%,var(--gold-light) 50%,var(--gold-dark) 80%,transparent 100%);
            opacity: 0.5;
        }
        .sidebar-brand {
            padding: 1.5rem 1.4rem 1.3rem;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 0.85rem;
            flex-shrink: 0;
        }
        .sidebar-logo {
            width:36px; height:36px; object-fit:contain;
            filter: drop-shadow(0 0 10px rgba(201,168,76,0.4));
            flex-shrink: 0;
        }
        .sidebar-brand-text { display:flex; flex-direction:column; }
        .sidebar-brand-pt   { font-size:0.55rem; letter-spacing:0.35em; color:var(--gold); text-transform:uppercase; font-weight:500; }
        .sidebar-brand-name { font-family:'Playfair Display',serif; font-size:0.9rem; font-weight:700; color:var(--white); line-height:1.2; }
        .sidebar-brand-sub  { font-size:0.58rem; color:var(--muted); font-style:italic; margin-top:1px; }

        .sidebar-nav { flex:1; padding:1rem 0; overflow-y:auto; }
        .nav-section-label {
            font-size:0.55rem; letter-spacing:0.2em;
            color:rgba(201,168,76,0.4); text-transform:uppercase;
            padding:0.7rem 1.4rem 0.25rem; font-weight:500;
        }
        .nav-item {
            display:flex; align-items:center; gap:10px;
            padding:0.6rem 1.4rem;
            font-size:0.8rem; font-weight:400;
            color:var(--muted);
            text-decoration:none;
            transition:all 0.15s;
            position:relative;
            cursor:pointer;
        }
        .nav-item i { font-size:0.75rem; width:16px; text-align:center; flex-shrink:0; }
        .nav-item:hover { color:var(--white); background:rgba(201,168,76,0.04); }
        .nav-item.active { color:var(--gold-light); background:rgba(201,168,76,0.07); }
        .nav-item.active::before {
            content:''; position:absolute; left:0; top:0; bottom:0;
            width:2px; background:linear-gradient(180deg,var(--gold-dark),var(--gold-light));
        }
        .sidebar-footer {
            padding:1rem 1.4rem;
            border-top:1px solid var(--border);
            font-size:0.58rem; letter-spacing:0.1em;
            color:rgba(201,168,76,0.35); text-transform:uppercase;
            flex-shrink:0;
        }

        /* ── Layout ── */
        .layout { position:relative; z-index:2; margin-left:240px; min-height:100vh; }

        /* ── Topbar ── */
        .topbar {
            position:sticky; top:0; z-index:9;
            background:rgba(6,5,3,0.92);
            backdrop-filter:blur(20px);
            border-bottom:1px solid var(--border);
            padding:0.85rem 2rem;
            display:flex; align-items:center; justify-content:space-between;
        }
        .topbar-left { display:flex; flex-direction:column; }
        .topbar-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--white); }
        .topbar-title span { color:var(--gold); }
        .topbar-sub { font-size:0.6rem; letter-spacing:0.15em; color:var(--muted); text-transform:uppercase; margin-top:1px; }
        .topbar-right { display:flex; align-items:center; gap:1rem; }
        .topbar-dot {
            width:7px; height:7px; border-radius:50%;
            background:var(--gold); box-shadow:0 0 8px rgba(201,168,76,0.6);
            animation:pulse 2s ease infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
        .topbar-user { font-size:0.72rem; color:var(--muted); font-weight:300; }

        /* ── Page content ── */
        @keyframes riseIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
        .page-content { padding: 1.75rem 2rem 3rem; animation: riseIn 0.5s ease 0.1s both; }

        /* ── Page heading ── */
        .page-heading {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.75rem; flex-wrap: wrap; gap: 0.75rem;
        }
        .page-heading-left { display: flex; flex-direction: column; }
        .page-heading-eyebrow {
            font-size: 0.55rem; letter-spacing: 0.25em; color: var(--gold);
            text-transform: uppercase; font-weight: 500; margin-bottom: 4px;
        }
        .page-heading-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.45rem; font-weight: 700; color: var(--white); line-height: 1.2;
        }
        .page-heading-title span { color: var(--gold); }
        .page-heading-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

        /* ── Detail Cards ── */
        .detail-card {
            background: var(--ink-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            position: relative;
            margin-bottom: 1.25rem;
        }
        .detail-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent 5%, var(--gold-dark) 25%, var(--gold-light) 50%, var(--gold-dark) 75%, transparent 95%);
        }
        .detail-card-header {
            padding: 0.85rem 1.4rem;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 8px;
        }
        .detail-card-header i { color: var(--gold); font-size: 0.7rem; opacity: 0.65; }
        .detail-card-title {
            font-size: 0.6rem; letter-spacing: 0.18em;
            color: var(--gold); text-transform: uppercase; font-weight: 500;
        }
        .detail-card-body { padding: 1.4rem; }

        /* ── Field rows ── */
        .fields-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 2.5rem;
        }
        @media (max-width: 680px) { .fields-grid { grid-template-columns: 1fr; } }

        .field-item {
            display: flex; flex-direction: column;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(201,168,76,0.07);
        }
        .field-item:last-child { border-bottom: none; }
        .field-label {
            font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em;
            color: var(--muted); text-transform: uppercase; margin-bottom: 3px;
        }
        .field-value {
            font-size: 0.84rem; font-weight: 300; color: var(--white); line-height: 1.4;
        }
        .field-value a {
            color: var(--gold-light); text-decoration: none;
            display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem;
            transition: color 0.15s;
        }
        .field-value a:hover { color: var(--white); }
        .field-value a i { font-size: 0.62rem; }
        .field-value.highlight { color: var(--gold-light); font-weight: 400; }
        .field-value.muted-val { color: var(--muted); }

        /* ── Badges ── */
        .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 9px; border-radius: 100px;
            font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
            text-transform: uppercase; white-space: nowrap;
        }
        .badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.7; }
        .badge-success   { background: rgba(76,175,130,0.12);  color: #4CAF82;          border: 1px solid rgba(76,175,130,0.25); }
        .badge-warning   { background: rgba(201,168,76,0.12);  color: var(--gold-light); border: 1px solid rgba(201,168,76,0.25); }
        .badge-info      { background: rgba(74,157,191,0.12);  color: #7EC8E3;          border: 1px solid rgba(74,157,191,0.2); }
        .badge-danger    { background: rgba(200,114,114,0.12); color: #C87272;          border: 1px solid rgba(200,114,114,0.25); }
        .badge-dark      { background: rgba(100,100,110,0.12); color: #9090A0;          border: 1px solid rgba(100,100,110,0.2); }
        .badge-secondary { background: rgba(100,100,110,0.10); color: #8080A0;          border: 1px solid rgba(100,100,110,0.18); }

        /* ── Progress bar ── */
        .persen-wrap { display: flex; align-items: center; gap: 10px; }
        .persen-bar  { flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; max-width: 200px; }
        .persen-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
        .persen-text { font-size: 0.78rem; color: var(--white); font-weight: 400; min-width: 34px; }

        /* ── Checklist grid ── */
        .checklist-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem 1rem;
            margin-top: 1rem;
        }
        @media (max-width: 680px) { .checklist-grid { grid-template-columns: 1fr; } }

        .checklist-item {
            display: flex; flex-direction: column;
            padding: 0.65rem 0.85rem;
            background: rgba(201,168,76,0.03);
            border: 1px solid var(--border);
            border-radius: 9px;
            gap: 3px;
        }
        .checklist-item-label {
            font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase;
            font-weight: 600; color: var(--muted);
        }
        .checklist-item-value { font-size: 0.8rem; font-weight: 300; color: var(--white); }
        .checklist-item-link a {
            font-size: 0.72rem; color: var(--gold-light); text-decoration: none;
            display: inline-flex; align-items: center; gap: 4px;
            transition: color 0.15s;
        }
        .checklist-item-link a:hover { color: var(--white); }

        /* ── Table panel ── */
        .table-panel {
            background: var(--ink-card); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden; position: relative;
            margin-bottom: 1.25rem;
        }
        .table-panel::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent 5%, var(--gold-dark) 25%, var(--gold-light) 50%, var(--gold-dark) 75%, transparent 95%);
        }
        .table-panel-header {
            padding: 0.85rem 1.4rem; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 8px;
        }
        .table-panel-title { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; font-weight: 500; }
        .table-scroll { overflow-x: auto; }

        table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
        thead tr { background: rgba(201,168,76,0.04); border-bottom: 1px solid var(--border-md); }
        thead th { padding: 10px 14px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; white-space: nowrap; text-align: left; }
        tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
        tbody tr:last-child { border-bottom: none; }
        tbody tr:hover { background: rgba(201,168,76,0.03); }
        tbody td { padding: 10px 14px; color: var(--white); font-weight: 300; vertical-align: middle; white-space: nowrap; }

        /* ── lelang progress ── */
        .lel-persen-wrap { display: flex; align-items: center; gap: 7px; min-width: 90px; }
        .lel-persen-bar  { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
        .lel-persen-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
        .lel-persen-text { font-size: 0.7rem; color: var(--muted); min-width: 28px; text-align: right; }

        /* ── Action buttons ── */
        .act-group { display: flex; flex-wrap: wrap; gap: 4px; }
        .act-btn {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 13px; border-radius: 8px;
            font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em;
            text-decoration: none; transition: all 0.15s;
            white-space: nowrap; border: 1px solid transparent;
            cursor: pointer; font-family: 'DM Sans', sans-serif; background: none;
        }
        .act-btn i { font-size: 0.62rem; }
        .act-back  { background: rgba(100,100,110,0.1); color: #9090A0;          border-color: rgba(100,100,110,0.18); }
        .act-back:hover  { background: rgba(100,100,110,0.2); color: var(--white); }
        .act-edit  { background: rgba(201,168,76,0.1);  color: var(--gold-light); border-color: rgba(201,168,76,0.2); }
        .act-edit:hover  { background: rgba(201,168,76,0.2); color: #F5E08A; }
        .act-lihat { background: rgba(74,157,191,0.1);  color: #7EC8E3;          border-color: rgba(74,157,191,0.2); }
        .act-lihat:hover { background: rgba(74,157,191,0.2); color: #B0E4F5; }

        /* ── Meta row ── */
        .meta-row {
            display: flex; gap: 1.75rem; flex-wrap: wrap;
            padding: 0.75rem 0; margin-top: 0.5rem;
            border-top: 1px solid var(--border);
        }
        .meta-item { display: flex; flex-direction: column; gap: 2px; }
        .meta-label { font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
        .meta-value { font-size: 0.8rem; color: var(--white); font-weight: 300; }
    </style>
</head>

<body>

    <canvas id="particleCanvas"></canvas>
    <div class="bg-layer"></div>
    <div class="glow glow-1"></div>
    <div class="glow glow-2"></div>
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    {{-- ══ SIDEBAR ══ --}}
    <aside class="sidebar">
        <div class="sidebar-brand">
            <img src="{{ asset('images/logo fix2.png') }}" alt="Logo" class="sidebar-logo">
            <div class="sidebar-brand-text">
                <span class="sidebar-brand-pt">PT.</span>
                <div class="sidebar-brand-name">MANDAJAYA</div>
                <span class="sidebar-brand-sub">Rekayasa Konstruksi</span>
            </div>
        </div>

        <nav class="sidebar-nav">
            <div class="nav-section-label">Utama</div>

            <a href="{{ route('dashboard') }}" class="nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                <i class="fas fa-chart-line"></i> Dashboard
            </a>

            <a href="{{ route('personils.index') }}" class="nav-item {{ request()->routeIs('personils.*') ? 'active' : '' }}">
                <i class="fas fa-users"></i> Personil
            </a>

            <a href="{{ route('paket-lelangs.index') }}" class="nav-item {{ request()->routeIs('paket-lelangs.*') ? 'active' : '' }}">
                <i class="fas fa-gavel"></i> Paket Lelang
            </a>

            <div class="nav-section-label" style="margin-top:0.4rem;">Lainnya</div>

            <a href="{{ route('panduan-gdrive') }}" class="nav-item {{ request()->routeIs('panduan-gdrive') ? 'active' : '' }}">
                <i class="fas fa-book"></i> Panduan GDrive
            </a>

            <div class="nav-section-label" style="margin-top:0.4rem;">Akun</div>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="nav-item" style="width:100%; background:none; border:none; text-align:left;">
                    <i class="fas fa-right-from-bracket"></i> Logout
                </button>
            </form>
        </nav>

        <div class="sidebar-footer">
            © 2022 PT. Mandajaya
        </div>
    </aside>

    {{-- ══ MAIN ══ --}}
    <div class="layout">

        {{-- Topbar --}}
        <div class="topbar">
            <div class="topbar-left">
                <div class="topbar-title"><span>Detail</span> Personil</div>
                <div class="topbar-sub">Data SKK & Kelengkapan Berkas</div>
            </div>
            <div class="topbar-right">
                <span class="topbar-dot"></span>
                <span class="topbar-user">Sistem Aktif</span>
            </div>
        </div>

        <div class="page-content">

            {{-- ── Page Heading ── --}}
            <div class="page-heading">
                <div class="page-heading-left">
                    <span class="page-heading-eyebrow"><i class="fas fa-id-badge"></i> &nbsp;Personil</span>
                    <h1 class="page-heading-title">Detail <span>Personil</span></h1>
                </div>
                <div class="page-heading-actions">
                    <a href="{{ route('personils.index') }}" class="act-btn act-back">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                    <a href="{{ route('personils.edit', $personil) }}" class="act-btn act-edit">
                        <i class="fas fa-pen"></i> Edit
                    </a>
                </div>
            </div>

            {{-- ── Card: Data SKK ── --}}
            <div class="detail-card">
                <div class="detail-card-header">
                    <i class="fas fa-id-card"></i>
                    <span class="detail-card-title">Data SKK</span>
                </div>
                <div class="detail-card-body">
                    <div class="fields-grid">

                        {{-- Kolom Kiri --}}
                        <div>
                            <div class="field-item">
                                <span class="field-label">ID Personil</span>
                                <span class="field-value highlight">{{ $personil->id_personil }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Nama Personil</span>
                                <span class="field-value">{{ $personil->nama_personil }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">NIK</span>
                                <span class="field-value">{{ $personil->nik }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Email</span>
                                <span class="field-value">{{ $personil->email }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">No HP</span>
                                <span class="field-value">{{ $personil->no_hp }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Perusahaan Pemilik Data</span>
                                <span class="field-value">{{ $personil->perusahaan_pemilik_data }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Posisi Usulan</span>
                                <span class="field-value">{{ $personil->posisi_usulan }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Klasifikasi</span>
                                <span class="field-value">{{ $personil->klasifikasi }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Subklasifikasi</span>
                                <span class="field-value">{{ $personil->subklasifikasi }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Kualifikasi</span>
                                <span class="field-value">{{ $personil->kualifikasi }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Jenjang</span>
                                <span class="field-value">{{ $personil->jenjang }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Okupasi</span>
                                <span class="field-value">{{ $personil->okupasi }}</span>
                            </div>
                        </div>

                        {{-- Kolom Kanan --}}
                        <div>
                            <div class="field-item">
                                <span class="field-label">No Sertifikat</span>
                                <span class="field-value">{{ $personil->no_sertifikat }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">No Registrasi</span>
                                <span class="field-value">{{ $personil->no_registrasi }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">No Blanko</span>
                                <span class="field-value">{{ $personil->no_blanko }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">LSP</span>
                                <span class="field-value">{{ $personil->lsp }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Tanggal Ditetapkan</span>
                                <span class="field-value">{{ $personil->tanggal_ditetapkan ? $personil->tanggal_ditetapkan->format('d/m/Y') : '-' }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Masa Berlaku (Tahun)</span>
                                <span class="field-value">{{ $personil->masa_berlaku_tahun }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Tanggal Habis Berlaku</span>
                                <span class="field-value">{{ $personil->tanggal_habis_berlaku ? $personil->tanggal_habis_berlaku->format('d/m/Y') : '-' }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Sisa Hari</span>
                                <span class="field-value">{{ $personil->sisa_hari }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Status SKK</span>
                                <span class="field-value">
                                    @php
                                        $badgeClass = 'secondary';
                                        if ($personil->status_skk == 'AKTIF') $badgeClass = 'success';
                                        elseif ($personil->status_skk == 'WARNING H-180') $badgeClass = 'warning';
                                        elseif ($personil->status_skk == 'SIAGA H-90') $badgeClass = 'info';
                                        elseif ($personil->status_skk == 'KRITIS H-30') $badgeClass = 'danger';
                                        elseif ($personil->status_skk == 'EXPIRED') $badgeClass = 'dark';
                                    @endphp
                                    <span class="badge badge-{{ $badgeClass }}">{{ $personil->status_skk }}</span>
                                </span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Status Verifikasi</span>
                                <span class="field-value">{{ $personil->status_verifikasi }}</span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Link Folder Personil</span>
                                <span class="field-value">
                                    {!! $personil->link_folder_personil
                                        ? '<a href="'.$personil->link_folder_personil.'" target="_blank"><i class="fas fa-folder-open"></i> Buka Folder</a>'
                                        : '<span class="muted-val">-</span>' !!}
                                </span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Link File SKK</span>
                                <span class="field-value">
                                    {!! $personil->link_file_skk
                                        ? '<a href="'.$personil->link_file_skk.'" target="_blank"><i class="fas fa-file-alt"></i> Buka File SKK</a>'
                                        : '<span class="muted-val">-</span>' !!}
                                </span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Link Bukti Verifikasi</span>
                                <span class="field-value">
                                    {!! $personil->link_bukti_verifikasi
                                        ? '<a href="'.$personil->link_bukti_verifikasi.'" target="_blank"><i class="fas fa-stamp"></i> Buka Bukti</a>'
                                        : '<span class="muted-val">-</span>' !!}
                                </span>
                            </div>
                            <div class="field-item">
                                <span class="field-label">Catatan</span>
                                <span class="field-value">{{ $personil->catatan ?: '-' }}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- ── Card: Checklist Berkas Personal ── --}}
            @if($personil->personilChecklist)
            <div class="detail-card">
                <div class="detail-card-header">
                    <i class="fas fa-folder-check"></i>
                    <span class="detail-card-title">Checklist Berkas Personal</span>
                </div>
                <div class="detail-card-body">

                    {{-- Progress + Status --}}
                    <div style="display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
                        <div style="flex:1; min-width:220px;">
                            <div class="field-label" style="margin-bottom:6px;">Persentase Kelengkapan</div>
                            <div class="persen-wrap">
                                <div class="persen-bar">
                                    <div class="persen-fill" style="width:{{ $personil->personilChecklist->persen_kelengkapan_personal * 100 }}%"></div>
                                </div>
                                <span class="persen-text">{{ number_format($personil->personilChecklist->persen_kelengkapan_personal * 100, 0) }}%</span>
                            </div>
                        </div>
                        <div>
                            <div class="field-label" style="margin-bottom:6px;">Status Berkas</div>
                            @php
                                $personalBadge = 'secondary';
                                if ($personil->personilChecklist->status_berkas_personal == 'Lengkap') $personalBadge = 'success';
                                elseif ($personil->personilChecklist->status_berkas_personal == 'Hampir Lengkap') $personalBadge = 'warning';
                            @endphp
                            <span class="badge badge-{{ $personalBadge }}">{{ $personil->personilChecklist->status_berkas_personal }}</span>
                        </div>
                    </div>

                    {{-- Checklist Item Grid --}}
                    <div class="checklist-grid">
                        @foreach(['ktp', 'npwp', 'ijazah', 'cv_terbaru', 'pas_foto', 'skk', 'bukti_verifikasi_qr_siki', 'portofolio_pengalaman', 'referensi_kerja', 'surat_pernyataan'] as $field)
                        <div class="checklist-item">
                            <span class="checklist-item-label">{{ ucwords(str_replace('_', ' ', $field)) }}</span>
                            <span class="checklist-item-value">{{ $personil->personilChecklist->$field ?? '-' }}</span>
                            @if($personil->personilChecklist->{'link_'.$field})
                            <div class="checklist-item-link">
                                <a href="{{ $personil->personilChecklist->{'link_'.$field} }}" target="_blank">
                                    <i class="fas fa-external-link-alt"></i> Buka Link
                                </a>
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>

                    {{-- Meta --}}
                    <div class="meta-row">
                        <div class="meta-item">
                            <span class="meta-label">PIC Update</span>
                            <span class="meta-value">{{ $personil->personilChecklist->pic_update ?: '-' }}</span>
                        </div>
                        <div class="meta-item">
                            <span class="meta-label">Tanggal Update</span>
                            <span class="meta-value">{{ $personil->personilChecklist->tanggal_update ? $personil->personilChecklist->tanggal_update->format('d/m/Y') : '-' }}</span>
                        </div>
                        <div class="meta-item" style="flex:1;">
                            <span class="meta-label">Catatan</span>
                            <span class="meta-value">{{ $personil->personilChecklist->catatan ?: '-' }}</span>
                        </div>
                    </div>

                </div>
            </div>
            @endif

            {{-- ── Table: Riwayat Lelang ── --}}
            @if($personil->lelangPersonils->count() > 0)
            <div class="table-panel">
                <div class="table-panel-header">
                    <i class="fas fa-gavel" style="color:var(--gold);font-size:0.7rem;opacity:0.65;"></i>
                    <span class="table-panel-title">Riwayat Lelang</span>
                </div>
                <div class="table-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>ID Paket</th>
                                <th>Nama Paket</th>
                                <th>Posisi</th>
                                <th>% Kelengkapan Lelang</th>
                                <th>Status Siap Lelang</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($personil->lelangPersonils as $lp)
                            <tr>
                                <td style="color:var(--gold-light);font-weight:400;">{{ $lp->paketLelang->id_paket }}</td>
                                <td style="font-weight:400;">{{ $lp->paketLelang->nama_paket }}</td>
                                <td>{{ $lp->posisi_diusulkan }}</td>
                                <td>
                                    <div class="lel-persen-wrap">
                                        <div class="lel-persen-bar">
                                            <div class="lel-persen-fill" style="width:{{ $lp->persen_kelengkapan_lelang * 100 }}%"></div>
                                        </div>
                                        <span class="lel-persen-text">{{ number_format($lp->persen_kelengkapan_lelang * 100, 0) }}%</span>
                                    </div>
                                </td>
                                <td>
                                    @php
                                        $lelangBadge = 'secondary';
                                        if ($lp->status_siap_lelang == 'Siap Lelang') $lelangBadge = 'success';
                                        elseif ($lp->status_siap_lelang == 'Hampir Siap') $lelangBadge = 'warning';
                                    @endphp
                                    <span class="badge badge-{{ $lelangBadge }}">{{ $lp->status_siap_lelang }}</span>
                                </td>
                                <td>
                                    <div class="act-group">
                                        <a href="{{ route('paket-lelangs.show', $lp->paketLelang) }}" class="act-btn act-lihat">
                                            <i class="fas fa-eye"></i> Lihat Paket
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

        </div>{{-- /page-content --}}
    </div>{{-- /layout --}}

    <script>
        (function () {
            const canvas = document.getElementById('particleCanvas');
            const ctx    = canvas.getContext('2d');
            const COLORS = [[201,168,76],[232,201,109],[245,213,107],[180,140,50],[220,185,80]];
            const COUNT = 220, FPS_TARGET = 30, FRAME_MS = 1000 / FPS_TARGET;
            let W, H, particles, lastFrame = 0;

            function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
            function rand(a, b) { return Math.random() * (b - a) + a; }
            function makeParticle() {
                const c = COLORS[Math.floor(Math.random() * COLORS.length)];
                const angle = rand(0, Math.PI * 2), spd = rand(0.06, 0.3);
                return { x:rand(0,W), y:rand(0,H), vx:Math.cos(angle)*spd, vy:Math.sin(angle)*spd,
                         r:rand(0.6,2.5), baseAlpha:rand(0.2,0.6), phase:rand(0,Math.PI*2), phaseSpeed:rand(0.015,0.04), color:c };
            }
            function initParticles() { particles = []; for (let i=0;i<COUNT;i++) particles.push(makeParticle()); }
            function draw(p, alpha) {
                if (alpha < 0.01) return;
                const [r,g,b] = p.color;
                ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
                ctx.fillStyle = `rgba(${r},${g},${b},${alpha.toFixed(3)})`; ctx.fill();
                if (p.r > 1.5) {
                    const grad = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.r*4);
                    grad.addColorStop(0,`rgba(${r},${g},${b},${(alpha*0.2).toFixed(3)})`);
                    grad.addColorStop(1,`rgba(${r},${g},${b},0)`);
                    ctx.beginPath(); ctx.arc(p.x,p.y,p.r*4,0,Math.PI*2);
                    ctx.fillStyle = grad; ctx.fill();
                }
            }
            function update(p) {
                p.x+=p.vx; p.y+=p.vy;
                if(p.x<-5) p.x=W+5; if(p.x>W+5) p.x=-5;
                if(p.y<-5) p.y=H+5; if(p.y>H+5) p.y=-5;
                p.phase+=p.phaseSpeed; if(p.phase>Math.PI*2) p.phase-=Math.PI*2;
                draw(p, p.baseAlpha*((Math.sin(p.phase)+1)/2));
            }
            function loop(ts) {
                requestAnimationFrame(loop);
                if(ts-lastFrame<FRAME_MS) return; lastFrame=ts;
                ctx.clearRect(0,0,W,H);
                for(let i=0;i<particles.length;i++) update(particles[i]);
            }
            resize(); initParticles(); requestAnimationFrame(loop);
            let t;
            window.addEventListener('resize',function(){ clearTimeout(t); t=setTimeout(function(){resize();initParticles();},200); });
            document.addEventListener('visibilitychange',function(){ lastFrame=document.hidden?Infinity:0; });
        })();
    </script>

</body>
</html>