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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panduan Struktur Folder GDrive</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;
            --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 heading ── */
        .page-heading { margin-bottom:1.5rem; }
        .page-heading-eyebrow {
            font-size:0.55rem; letter-spacing:0.22em; text-transform:uppercase;
            color:var(--gold); font-weight:500;
            display:flex; align-items:center; gap:6px;
            margin-bottom:4px;
        }
        .page-heading-eyebrow::before {
            content:''; display:inline-block; width:16px; height:1px;
            background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
        }
        .page-heading-title {
            font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
            color:var(--white); line-height:1.2;
        }
        .page-heading-title span { color:var(--gold); }

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

        /* ── Folder tree (pre) ── */
        .folder-tree {
            font-family: 'DM Sans', monospace;
            font-size: 0.82rem;
            font-weight: 300;
            color: var(--white);
            line-height: 1.8;
            background: rgba(201,168,76,0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.2rem 1.4rem;
            overflow-x: auto;
            white-space: pre;
        }

        /* ── Keterangan list ── */
        .keterangan-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }
        .keterangan-list li {
            font-size: 0.83rem;
            font-weight: 300;
            color: var(--white);
            line-height: 1.6;
            padding-left: 1rem;
            border-left: 2px solid var(--border);
        }
        .keterangan-list li strong {
            color: var(--gold-light);
            font-weight: 500;
        }
        .keterangan-list ul {
            list-style: none;
            margin-top: 0.45rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            padding-left: 1rem;
            border-left: 1px solid rgba(201,168,76,0.1);
        }
        .keterangan-list ul li {
            font-size: 0.78rem;
            color: var(--muted);
            border-left: none;
            padding-left: 0;
        }
        .keterangan-list ul li strong {
            color: var(--gold);
        }

        /* ── Back button ── */
        .btn-secondary {
            display:inline-flex; align-items:center; gap:7px;
            padding:10px 20px;
            background:rgba(255,255,255,0.04);
            border:1px solid var(--border); border-radius:10px; color:var(--muted);
            font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:400;
            cursor:pointer; transition:all 0.15s;
            text-decoration:none;
        }
        .btn-secondary:hover { border-color:var(--border-md); color:var(--white); background:rgba(255,255,255,0.06); }
        .btn-secondary i { font-size:0.72rem; }
    </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>Panduan</span> Google Drive</div>
                <div class="topbar-sub">Struktur Folder yang Direkomendasikan</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-eyebrow">
                    <i class="fas fa-book" style="font-size:0.6rem;"></i> Panduan
                </div>
                <div class="page-heading-title">
                    Panduan Struktur Folder <span>Google Drive</span>
                </div>
            </div>

            {{-- Card 1: Struktur Folder --}}
            <div class="content-card">
                <div class="content-card-header">
                    <i class="fas fa-folder-tree" style="color:var(--gold);font-size:0.65rem;opacity:0.7;"></i>
                    <span class="content-card-title">Struktur Folder yang Direkomendasikan</span>
                </div>
                <div class="content-card-body">
                    <pre class="folder-tree">
Root Folder/
├── 00_Master_Dashboard/
├── 01_Personil/
│   ├── [ID Personil] [Nama Personil]/
│   │   ├── 01_Identitas/
│   │   ├── 02_Pendidikan_CV/
│   │   ├── 03_SKK_Verifikasi/
│   │   └── 04_Pengalaman_Referensi/
└── 02_Lelang/
    ├── [ID Paket] [Nama Paket]/
        └── Personil_Usulan/
            └── [Nama Personil]/
                    </pre>
                </div>
            </div>

            {{-- Card 2: Keterangan --}}
            <div class="content-card">
                <div class="content-card-header">
                    <i class="fas fa-circle-info" style="color:var(--gold);font-size:0.65rem;opacity:0.7;"></i>
                    <span class="content-card-title">Keterangan Folder</span>
                </div>
                <div class="content-card-body">
                    <ul class="keterangan-list">
                        <li><strong>00_Master_Dashboard:</strong> Folder untuk file master dashboard dan dokumen pendukung</li>
                        <li><strong>01_Personil:</strong> Folder untuk semua data personil
                            <ul>
                                <li><strong>01_Identitas:</strong> KTP, NPWP, dan dokumen identitas lainnya</li>
                                <li><strong>02_Pendidikan_CV:</strong> Ijazah, transkrip nilai, dan CV terbaru</li>
                                <li><strong>03_SKK_Verifikasi:</strong> File SKK dan bukti verifikasi QR SIKI</li>
                                <li><strong>04_Pengalaman_Referensi:</strong> Portofolio pengalaman dan surat referensi kerja</li>
                            </ul>
                        </li>
                        <li><strong>02_Lelang:</strong> Folder untuk semua paket lelang
                            <ul>
                                <li><strong>Personil_Usulan:</strong> Folder untuk setiap personil yang diusulkan ke paket tersebut</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <a href="{{ route('dashboard') }}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
            </a>

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