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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Daftar 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 ── */
        .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; }

        /* ── Page header (judul + tombol tambah) ── */
        .page-header {
            display:flex; align-items:center; justify-content:space-between;
            flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;
        }
        .page-header h1 {
            font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700;
            color:var(--white); margin:0;
        }
        .page-header h1 span { color:var(--gold); }

        .btn-add {
            display:inline-flex; align-items:center; gap:7px;
            padding:10px 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; text-decoration:none;
            box-shadow:0 4px 16px rgba(201,168,76,0.25);
        }
        .btn-add:hover { filter:brightness(1.08); transform:translateY(-1px); }

        /* ── Filter Panel ── */
        .filter-panel {
            background:var(--ink-card); border:1px solid var(--border);
            border-radius:14px; padding:1.2rem 1.4rem;
            margin-bottom:1.5rem; position:relative;
        }
        .filter-panel::before {
            content:''; position:absolute; top:0; left:0; right:0; height:1px;
            border-radius:14px 14px 0 0;
            background:linear-gradient(90deg,transparent 5%,var(--gold-dark) 25%,var(--gold-light) 50%,var(--gold-dark) 75%,transparent 95%);
        }
        .filter-heading {
            font-size:0.6rem; letter-spacing:0.18em; color:var(--gold);
            text-transform:uppercase; font-weight:500;
            margin-bottom:0.85rem; display:flex; align-items:center; gap:7px;
        }
        .filter-heading i { opacity:0.7; font-size:0.65rem; }
        .filter-row { display:flex; gap:0.7rem; flex-wrap:wrap; align-items:flex-end; }
        .filter-row .f-field { flex:1; min-width:180px; }

        .f-input, .f-select {
            width:100%; background:rgba(255,255,255,0.025);
            border:1px solid var(--border); border-radius:10px;
            padding:10px 14px; color:var(--white);
            font-family:'DM Sans',sans-serif; font-size:0.85rem; font-weight:300;
            outline:none; transition:border-color 0.2s, box-shadow 0.2s; appearance:none;
        }
        .f-input::placeholder { color:rgba(106,106,94,0.5); }
        .f-input:focus, .f-select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.1); }
        .f-select {
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236A6A5E' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
        }
        .f-select option { background:#0D0B07; color:var(--white); }

        .btn-filter {
            padding:10px 22px;
            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;
            display:flex; align-items:center; gap:6px; white-space:nowrap;
            box-shadow:0 4px 16px rgba(201,168,76,0.25);
        }
        .btn-filter:hover { filter:brightness(1.08); transform:translateY(-1px); }
        .btn-filter:active { transform:translateY(0); }

        /* ── Table Panel ── */
        .table-panel {
            background:var(--ink-card); border:1px solid var(--border);
            border-radius:14px; overflow:hidden; position:relative;
        }
        .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; 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-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); }

        /* ── 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-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; }
        .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-hapus { background:rgba(200,114,114,0.1); color:#C87272;        border-color:rgba(200,114,114,0.2); }
        .act-hapus:hover { background:rgba(200,114,114,0.2); color:#E09090; }
        .act-group form { display:inline; }
    </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>

    
    <aside class="sidebar">
        <div class="sidebar-brand">
            <img src="<?php echo e(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="<?php echo e(route('dashboard')); ?>" class="nav-item <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                <i class="fas fa-chart-line"></i> Dashboard
            </a>

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

            <a href="<?php echo e(route('paket-lelangs.index')); ?>" class="nav-item <?php echo e(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="<?php echo e(route('panduan-gdrive')); ?>" class="nav-item <?php echo e(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="<?php echo e(route('logout')); ?>">
                <?php echo csrf_field(); ?>
                <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>

    
    <div class="layout">

        
        <div class="topbar">
            <div class="topbar-left">
                <div class="topbar-title"><span>Daftar</span> Personil</div>
                <div class="topbar-sub">Manajemen Data Personil</div>
            </div>
            <div class="topbar-right">
                <span class="topbar-dot"></span>
                <span class="topbar-user">Sistem Aktif</span>
            </div>
        </div>

        <div class="page-content">

            
            <div class="page-header">
                <h1>Daftar <span>Personil</span></h1>
                <a href="<?php echo e(route('personils.create')); ?>" class="btn-add">
                    <i class="fas fa-plus"></i> Tambah Personil
                </a>
            </div>

            
            <div class="filter-panel">
                <div class="filter-heading">
                    <i class="fas fa-sliders"></i> Filter & Pencarian
                </div>
                <form method="GET">
                    <div class="filter-row">
                        <div class="f-field">
                            <input type="text" name="search" class="f-input"
                                placeholder="Cari nama atau ID personil..."
                                value="<?php echo e($search); ?>">
                        </div>
                        <div class="f-field">
                            <select name="status_skk" class="f-select">
                                <option value="">Semua Status SKK</option>
                                <option value="AKTIF"         <?php echo e($statusSkk == 'AKTIF'         ? 'selected' : ''); ?>>AKTIF</option>
                                <option value="WARNING H-180" <?php echo e($statusSkk == 'WARNING H-180' ? 'selected' : ''); ?>>WARNING H-180</option>
                                <option value="SIAGA H-90"    <?php echo e($statusSkk == 'SIAGA H-90'   ? 'selected' : ''); ?>>SIAGA H-90</option>
                                <option value="KRITIS H-30"   <?php echo e($statusSkk == 'KRITIS H-30'  ? 'selected' : ''); ?>>KRITIS H-30</option>
                                <option value="EXPIRED"       <?php echo e($statusSkk == 'EXPIRED'      ? 'selected' : ''); ?>>EXPIRED</option>
                                <option value="Belum Input"   <?php echo e($statusSkk == 'Belum Input'  ? 'selected' : ''); ?>>Belum Input</option>
                            </select>
                        </div>
                        <div>
                            <button type="submit" class="btn-filter">
                                <i class="fas fa-magnifying-glass"></i> Filter
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            
            <div class="table-panel">
                <div class="table-panel-header">
                    <i class="fas fa-table-list" style="color:var(--gold);font-size:0.7rem;opacity:0.65;"></i>
                    <span class="table-panel-title">Data Personil</span>
                </div>
                <div class="table-scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>ID Personil</th>
                                <th>Nama</th>
                                <th>Okupasi</th>
                                <th>Status SKK</th>
                                <th>Jumlah Lelang</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__currentLoopData = $personils; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $personil): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td><?php echo e($personils->firstItem() + $index); ?></td>
                                    <td style="color:var(--gold-light);font-weight:400;"><?php echo e($personil->id_personil); ?></td>
                                    <td style="font-weight:400;"><?php echo e($personil->nama_personil); ?></td>
                                    <td><?php echo e($personil->okupasi); ?></td>
                                    <td>
                                        <?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';
                                        ?>
                                        <span class="badge badge-<?php echo e($badgeClass); ?>"><?php echo e($personil->status_skk); ?></span>
                                    </td>
                                    <td><?php echo e($personil->lelang_personils_count); ?></td>
                                    <td>
                                        <div class="act-group">
                                            <a href="<?php echo e(route('personils.show', $personil)); ?>" class="act-btn act-lihat">
                                                <i class="fas fa-eye"></i> Lihat
                                            </a>
                                            <a href="<?php echo e(route('personils.edit', $personil)); ?>" class="act-btn act-edit">
                                                <i class="fas fa-pen"></i> Edit
                                            </a>
                                            <form method="POST" action="<?php echo e(route('personils.destroy', $personil)); ?>" style="display: inline;" onsubmit="return confirm('Yakin ingin menghapus?')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="act-btn act-hapus">
                                                    <i class="fas fa-trash"></i> Hapus
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
                
                <?php if($personils->hasPages()): ?>
                    <div class="table-panel-header" style="border-top:1px solid var(--border);">
                        <div style="display:flex;gap:0.5rem;margin-left:1.4rem;">
                            <?php if($personils->onFirstPage()): ?>
                                <span class="act-btn act-edit" style="opacity:0.5;cursor:not-allowed;">
                                    <i class="fas fa-chevron-left"></i>
                                </span>
                            <?php else: ?>
                                <a href="<?php echo e($personils->previousPageUrl()); ?>" class="act-btn act-edit">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            <?php endif; ?>

                            <?php $__currentLoopData = $personils->links()->elements; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $element): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php if(is_string($element)): ?>
                                    <span class="act-btn act-edit" style="opacity:0.5;"><?php echo e($element); ?></span>
                                <?php endif; ?>

                                <?php if(is_array($element)): ?>
                                    <?php $__currentLoopData = $element; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php if($page == $personils->currentPage()): ?>
                                            <span class="act-btn act-edit" style="opacity:1;"><?php echo e($page); ?></span>
                                        <?php else: ?>
                                            <a href="<?php echo e($url); ?>" class="act-btn act-edit" style="opacity:0.6;"><?php echo e($page); ?></a>
                                        <?php endif; ?>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                            <?php if($personils->hasMorePages()): ?>
                                <a href="<?php echo e($personils->nextPageUrl()); ?>" class="act-btn act-edit">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            <?php else: ?>
                                <span class="act-btn act-edit" style="opacity:0.5;cursor:not-allowed;">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

        </div>
    </div>

    <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><?php /**PATH C:\laragon\www\SKK\resources\views/personils/index.blade.php ENDPATH**/ ?>