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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Paket Lelang</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 ── */
        .page-content { padding:1.75rem 2rem 3rem; }
        @keyframes riseIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
        .page-content { animation:riseIn 0.5s ease 0.1s both; }

        /* ── Breadcrumb ── */
        .breadcrumb {
            display: flex; align-items: center; gap: 6px;
            font-size: 0.65rem; color: var(--muted);
            margin-bottom: 1.25rem; letter-spacing: 0.05em;
        }
        .breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
        .breadcrumb a:hover { color: var(--gold-light); }
        .breadcrumb i { font-size: 0.5rem; opacity: 0.4; }
        .breadcrumb span { color: var(--gold); }

        /* ── Info panel ── */
        .info-panel {
            background: var(--ink-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden; position: relative;
            margin-bottom: 1.25rem;
        }
        .info-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%);
        }
        .info-panel-header {
            padding: 0.9rem 1.4rem;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .info-panel-header-left { display: flex; align-items: center; gap: 8px; }
        .info-panel-title {
            font-size: 0.6rem; letter-spacing: 0.18em;
            color: var(--gold); text-transform: uppercase; font-weight: 500;
        }
        .info-panel-body { padding: 1.2rem 1.4rem; }

        /* ── Info grid ── */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }
        .info-grid-full { grid-column: 1 / -1; }
        .info-item { display: flex; flex-direction: column; gap: 4px; }
        .info-label {
            font-size: 0.58rem; letter-spacing: 0.14em;
            color: var(--muted); text-transform: uppercase; font-weight: 500;
        }
        .info-value {
            font-size: 0.85rem; color: var(--white); font-weight: 300;
        }
        .info-value.highlight { color: var(--gold-light); font-weight: 500; }

        /* ── 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.9rem 1.4rem;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .table-panel-header-left { 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; }
        tbody td:first-child { color: var(--muted); font-size: 0.75rem; }

        /* ── 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-danger  { background:rgba(200,114,114,0.12); color:#C87272; border:1px solid rgba(200,114,114,0.25); }
        .badge-secondary { background:rgba(100,100,110,0.12); color:#9090A0; border:1px solid rgba(100,100,110,0.2); }

        /* ── Progress bar ── */
        .persen-wrap { display:flex; align-items:center; gap:7px; min-width:90px; }
        .persen-bar  { flex:1; height:4px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
        .persen-fill { height:100%; border-radius:4px; }
        .persen-fill-success { background:linear-gradient(90deg,#2e7d5e,#4CAF82); }
        .persen-fill-warning { background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); }
        .persen-fill-danger  { background:linear-gradient(90deg,#7a2e2e,#C87272); }
        .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:4px;
            padding:4px 10px; border-radius:7px;
            font-size:0.67rem; 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;
        }
        .act-btn i { font-size:0.58rem; }
        .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-danger { background:rgba(200,114,114,0.1); color:#C87272; border-color:rgba(200,114,114,0.2); }
        .act-danger:hover { background:rgba(200,114,114,0.2); color:#E09090; }
        .act-sec    { background:rgba(100,100,110,0.1); color:#9090A0; border-color:rgba(100,100,110,0.18); }
        .act-sec:hover    { background:rgba(100,100,110,0.2); color:var(--white); }

        /* ── Buttons ── */
        .btn-gold {
            display:inline-flex; align-items:center; gap:7px;
            padding:9px 20px;
            background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);
            border:none; border-radius:10px;
            color:#0D0B07;
            font-family:'DM Sans',sans-serif;
            font-size:0.82rem; font-weight:600; letter-spacing:0.06em;
            cursor:pointer; transition:all 0.2s;
            box-shadow:0 4px 16px rgba(201,168,76,0.25);
            text-decoration:none;
        }
        .btn-gold:hover { filter:brightness(1.08); transform:translateY(-1px); }
        .btn-gold i { font-size:0.72rem; }

        .btn-muted {
            display:inline-flex; align-items:center; gap:7px;
            padding:9px 18px;
            background:rgba(255,255,255,0.04);
            border:1px solid var(--border-md);
            border-radius:10px;
            color:var(--muted);
            font-family:'DM Sans',sans-serif;
            font-size:0.82rem; font-weight:400;
            cursor:pointer; transition:all 0.2s;
            text-decoration:none;
        }
        .btn-muted:hover { color:var(--white); background:rgba(255,255,255,0.07); }
        .btn-muted i { font-size:0.72rem; }

        .btn-warn {
            display:inline-flex; align-items:center; gap:7px;
            padding:7px 16px;
            background:rgba(201,168,76,0.1);
            border:1px solid rgba(201,168,76,0.25);
            border-radius:9px;
            color:var(--gold-light);
            font-family:'DM Sans',sans-serif;
            font-size:0.78rem; font-weight:500;
            cursor:pointer; transition:all 0.2s;
            text-decoration:none;
        }
        .btn-warn:hover { background:rgba(201,168,76,0.2); color:#F5E08A; }
        .btn-warn i { font-size:0.65rem; }

        .page-actions { display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; margin-bottom:1.25rem; }

        .text-muted-cell { color:var(--muted); font-size:0.75rem; font-style:italic; }
    </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">Detail <span>Paket Lelang</span></div>
                <div class="topbar-sub">Informasi & Daftar Personil Paket</div>
            </div>
            <div class="topbar-right">
                <span class="topbar-dot"></span>
                <span class="topbar-user">Sistem Aktif</span>
            </div>
        </div>

        <div class="page-content">

            {{-- Breadcrumb --}}
            <div class="breadcrumb">
                <a href="{{ route('dashboard') }}"><i class="fas fa-chart-line"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <a href="{{ route('paket-lelangs.index') }}">Paket Lelang</a>
                <i class="fas fa-chevron-right"></i>
                <span>Detail Paket</span>
            </div>

            {{-- ── Info Paket ── --}}
            <div class="info-panel">
                <div class="info-panel-header">
                    <div class="info-panel-header-left">
                        <i class="fas fa-file-contract" style="color:var(--gold);font-size:0.7rem;opacity:0.65;"></i>
                        <span class="info-panel-title">Info Paket</span>
                    </div>
                    <a href="{{ route('paket-lelangs.edit', $paketLelang) }}" class="btn-warn">
                        <i class="fas fa-pen"></i> Edit Paket
                    </a>
                </div>
                <div class="info-panel-body">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">ID Paket</span>
                            <span class="info-value highlight">{{ $paketLelang->id_paket }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Nama Paket</span>
                            <span class="info-value">{{ $paketLelang->nama_paket }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Tahun</span>
                            <span class="info-value">{{ $paketLelang->tahun }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Deadline</span>
                            <span class="info-value">{{ $paketLelang->deadline ? $paketLelang->deadline->format('d/m/Y') : '-' }}</span>
                        </div>
                        <div class="info-item info-grid-full">
                            <span class="info-label">Catatan</span>
                            <span class="info-value">{{ $paketLelang->catatan ?? '-' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Tambah Personil ── --}}
            <div class="page-actions">
                <a href="{{ route('paket-lelangs.personils.create', $paketLelang) }}" class="btn-gold">
                    <i class="fas fa-user-plus"></i> Tambah Personil ke Paket Ini
                </a>
            </div>

            {{-- ── Tabel Personil ── --}}
            <div class="table-panel">
                <div class="table-panel-header">
                    <div class="table-panel-header-left">
                        <i class="fas fa-table-list" style="color:var(--gold);font-size:0.7rem;opacity:0.65;"></i>
                        <span class="table-panel-title">Daftar Personil Paket</span>
                    </div>
                </div>
                <div class="table-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>ID Personil</th>
                                <th>Nama Personil</th>
                                <th>Posisi Diusulkan</th>
                                <th>Jenjang Minimal</th>
                                <th>Jenjang Personil</th>
                                <th>Kes. Jenjang</th>
                                <th>Kes. Subklasifikasi</th>
                                <th>SKK Aktif</th>
                                <th>CV Lelang</th>
                                <th>Ijazah</th>
                                <th>KTP</th>
                                <th>NPWP</th>
                                <th>Pengalaman</th>
                                <th>Srt Kesediaan</th>
                                <th>Srt Kuasa</th>
                                <th>Pakta Integritas</th>
                                <th>Bukti Verifikasi</th>
                                <th>DRH TTD</th>
                                <th>Folder Lelang</th>
                                <th>Srt Kesediaan</th>
                                <th>CV Lelang</th>
                                <th>% Kelengkapan</th>
                                <th>Status Lelang</th>
                                <th>PIC</th>
                                <th>Deadline</th>
                                <th>Catatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($paketLelang->lelangPersonils as $index => $lp)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td style="color:var(--gold-light);font-weight:400;">{{ $lp->personil->id_personil ?? '-' }}</td>
                                    <td style="font-weight:400;">{{ $lp->personil->nama_personil ?? '-' }}</td>
                                    <td>{{ $lp->posisi_diusulkan }}</td>
                                    <td>{{ $lp->jenjang_minimal }}</td>
                                    <td>{{ $lp->jenjang_personil }}</td>
                                    <td>{{ $lp->kesesuaian_jenjang }}</td>
                                    <td>{{ $lp->kesesuaian_subklasifikasi }}</td>
                                    <td>{{ $lp->skk_aktif }}</td>
                                    <td>{{ $lp->cv_format_lelang }}</td>
                                    <td>{{ $lp->ijazah }}</td>
                                    <td>{{ $lp->ktp }}</td>
                                    <td>{{ $lp->npwp }}</td>
                                    <td>{{ $lp->pengalaman_referensi }}</td>
                                    <td>{{ $lp->surat_kesediaan_personil }}</td>
                                    <td>{{ $lp->surat_kuasa_penggunaan_data }}</td>
                                    <td>{{ $lp->pakta_integritas }}</td>
                                    <td>{{ $lp->bukti_verifikasi_qr_siki }}</td>
                                    <td>{{ $lp->daftar_riwayat_hidup_ttd }}</td>
                                    <td>
                                        @if($lp->link_folder_lelang)
                                            <a href="{{ $lp->link_folder_lelang }}" target="_blank" class="act-btn act-sec">
                                                <i class="fas fa-folder-open"></i> Buka
                                            </a>
                                        @else
                                            <span class="text-muted-cell">Belum ada link</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($lp->link_surat_kesediaan)
                                            <a href="{{ $lp->link_surat_kesediaan }}" target="_blank" class="act-btn act-sec">
                                                <i class="fas fa-file-lines"></i> Buka
                                            </a>
                                        @else
                                            <span class="text-muted-cell">Belum ada link</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($lp->link_cv_lelang)
                                            <a href="{{ $lp->link_cv_lelang }}" target="_blank" class="act-btn act-sec">
                                                <i class="fas fa-file-user"></i> Buka
                                            </a>
                                        @else
                                            <span class="text-muted-cell">Belum ada link</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $persen = number_format($lp->persen_kelengkapan_lelang * 100, 0);
                                            $fillClass = $lp->status_siap_lelang == 'Siap Lelang' ? 'persen-fill-success' : ($lp->status_siap_lelang == 'Hampir Siap' ? 'persen-fill-warning' : 'persen-fill-danger');
                                        @endphp
                                        <div class="persen-wrap">
                                            <div class="persen-bar">
                                                <div class="persen-fill {{ $fillClass }}" style="width:{{ $persen }}%"></div>
                                            </div>
                                            <span class="persen-text">{{ $persen }}%</span>
                                        </div>
                                    </td>
                                    <td>
                                        @php
                                            $badgeClass = 'secondary';
                                            if ($lp->status_siap_lelang == 'Siap Lelang') $badgeClass = 'success';
                                            elseif ($lp->status_siap_lelang == 'Hampir Siap') $badgeClass = 'warning';
                                            else $badgeClass = 'danger';
                                        @endphp
                                        <span class="badge badge-{{ $badgeClass }}">{{ $lp->status_siap_lelang }}</span>
                                    </td>
                                    <td>{{ $lp->pic }}</td>
                                    <td>{{ $lp->deadline ? $lp->deadline->format('d/m/Y') : '-' }}</td>
                                    <td>{{ Str::limit($lp->catatan, 20) }}</td>
                                    <td>
                                        <div class="act-group">
                                            <a href="{{ route('paket-lelangs.personils.edit', [$paketLelang, $lp]) }}" class="act-btn act-edit">
                                                <i class="fas fa-pen"></i> Edit
                                            </a>
                                            <form method="POST" action="{{ route('paket-lelangs.personils.destroy', [$paketLelang, $lp]) }}" style="display:inline;" onsubmit="return confirm('Yakin ingin menghapus?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="act-btn act-danger">
                                                    <i class="fas fa-trash"></i> Hapus
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- ── Kembali ── --}}
            <div>
                <a href="{{ route('paket-lelangs.index') }}" class="btn-muted">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
            </div>

        </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>