@extends('layouts.app')

@section('content')

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>

/* ================= ROOT / RESET ================= */

:root{
    --navy-950:#050B1A;
    --navy-900:#0A1730;
    --navy-800:#0F2247;
    --navy-700:#15316B;
    --navy-600:#1D4090;
    --navy-500:#2955B8;
    --accent:#3D6FE0;
    --accent-light:#6E93F2;
    --accent-100:#E7EFFD;
    --gold:#E3B341;
    --ink:#0A1730;
    --muted:#5C6B8A;
    --line:#E1E7F5;
    --sky:#F2F6FE;
    --paper:#F7F9FE;
    --radius-lg:24px;
    --radius-md:16px;
    --shadow-sm:0 8px 24px rgba(5,11,26,.06);
    --shadow-md:0 24px 60px rgba(5,11,26,.14);
    --font-display:'Plus Jakarta Sans',sans-serif;
    --font-body:'Inter',sans-serif;
}

a{ color:inherit; }

body{
    background:
        radial-gradient(1100px 480px at 10% -10%, rgba(61,111,224,.08), transparent 60%),
        radial-gradient(900px 460px at 100% 0%, rgba(227,179,65,.05), transparent 55%),
        var(--paper);
    font-family:var(--font-body);
    color:var(--ink);
}

.eyebrow{
    font-family:var(--font-display);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:10px;
}

.eyebrow::before{
    content:"";
    width:16px;
    height:2px;
    background:var(--accent);
    display:inline-block;
    border-radius:2px;
}

.eyebrow.on-dark{ color:var(--gold); }
.eyebrow.on-dark::before{ background:var(--gold); }


/* ================= PAGE WRAP ================= */

.admin-wrap{
    padding:110px 5% 60px;
    max-width:1280px;
    margin:0 auto;
}

/* ---- page header banner ---- */

.admin-header{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(560px 380px at 95% 0%, rgba(110,147,242,.24), transparent 60%),
        radial-gradient(420px 340px at 0% 110%, rgba(227,179,65,.10), transparent 55%),
        linear-gradient(150deg,var(--navy-950) 0%,var(--navy-900) 45%,var(--navy-700) 100%);
    padding:36px 38px;
    border-radius:var(--radius-lg);
    margin-bottom:26px;
    box-shadow:var(--shadow-md);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    color:#fff;
}

.admin-header::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:radial-gradient(circle at 25% 20%, black, transparent 70%);
    pointer-events:none;
}

.admin-header > *{ position:relative; z-index:1; }

.admin-header h1{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-.015em;
    color:#fff;
    font-size:27px;
    margin-bottom:6px;
}

.admin-header p{
    color:rgba(255,255,255,.72);
    font-size:14.5px;
}

.btn-export{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:linear-gradient(135deg, #fff 0%, #EFF3FE 100%);
    color:var(--navy-800);
    padding:14px 26px;
    border-radius:13px;
    text-decoration:none;
    font-family:var(--font-display);
    font-weight:700;
    font-size:14.5px;
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    transition:.25s;
}

.btn-export:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(0,0,0,.28);
}

/* ---- stat cards ---- */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:26px;
}

.stat-card{
    position:relative;
    background:#fff;
    padding:26px 24px;
    border-radius:var(--radius-md);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    transition:.3s;
    overflow:hidden;
}

.stat-card::after{
    content:"";
    position:absolute;
    right:-30px;
    bottom:-30px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(61,111,224,.06), transparent 70%);
    pointer-events:none;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:transparent;
    box-shadow:var(--shadow-md);
}

.stat-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
    position:relative;
    z-index:1;
}

.stat-icon{
    width:48px;
    height:48px;
    border-radius:13px;
    background:linear-gradient(150deg, var(--accent-100), #fff);
    color:var(--navy-700);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border:1px solid var(--line);
}

.stat-mod{
    font-family:var(--font-display);
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--muted);
    margin-top:8px;
}

.stat-card h3{
    font-size:13.5px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:8px;
    position:relative;
    z-index:1;
}

.stat-card p{
    font-family:var(--font-display);
    font-size:32px;
    font-weight:800;
    color:var(--navy-900);
    position:relative;
    z-index:1;
}

/* ---- table card ---- */

.table-card{
    background:#fff;
    padding:30px 30px 26px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
}

.table-card-header{
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:14px;
}

.table-card-header h2{
    font-family:var(--font-display);
    font-weight:800;
    color:var(--navy-900);
    font-size:19px;
    letter-spacing:-.01em;
}

.table-scroll{
    overflow-x:auto;
    border-radius:14px;
    border:1px solid var(--line);
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:760px;
}

thead th{
    padding:14px 16px;
    text-align:left;
    background:linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 100%);
    color:#fff;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}

tbody td{
    padding:13px 16px;
    border-bottom:1px solid var(--line);
    font-size:14px;
    color:var(--ink);
    background:#fff;
}

tbody tr:nth-child(even) td{ background:rgba(21,49,107,.015); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--sky); }

.cell-strong{ font-weight:700; color:var(--navy-800); }
.cell-mono{ font-size:13px; color:var(--muted); }

.empty-row{
    text-align:center;
    color:var(--muted);
    padding:28px 16px !important;
}

/* ================= RESPONSIVE ================= */

@media(max-width:820px){
    header{ padding:14px 6%; }
}

@media (max-width:640px){
    .admin-wrap{ padding:96px 5% 48px; }
    .admin-header{ padding:26px 24px; }
    .table-card{ padding:20px; }
}

</style>

<div class="admin-wrap">

    <div class="admin-header">
        <div>
            <div class="eyebrow on-dark">Panel Admin</div>
            <h1>Dashboard Admin</h1>
            <p>Sistem Informasi Data Kunjungan Tamu SMKN 7 Palembang</p>
        </div>

        <div class="admin-actions">
            <a href="/laporan/export/excel" class="btn-export">
                <span>⬇</span> Download Excel
            </a>
        </div>
    </div>

    <div class="stats-grid">

        <div class="stat-card">
            <div class="stat-top">
                <span class="stat-icon">👥</span>
                <span class="stat-mod">DATA.01</span>
            </div>
            <h3>Total Pengunjung</h3>
            <p>{{ $totalPengunjung }}</p>
        </div>

        <div class="stat-card">
            <div class="stat-top">
                <span class="stat-icon">📅</span>
                <span class="stat-mod">DATA.02</span>
            </div>
            <h3>Pengunjung Hari Ini</h3>
            <p>{{ $pengunjungHariIni }}</p>
        </div>

        <div class="stat-card">
            <div class="stat-top">
                <span class="stat-icon">🗓️</span>
                <span class="stat-mod">DATA.03</span>
            </div>
            <h3>Pengunjung Bulan Ini</h3>
            <p>{{ $pengunjungBulanIni }}</p>
        </div>

        <div class="stat-card">
            <div class="stat-top">
                <span class="stat-icon">💬</span>
                <span class="stat-mod">DATA.04</span>
            </div>
            <h3>Pesan & Kesan</h3>
            <p>{{ $totalPesan }}</p>
        </div>

    </div>

    <div class="table-card">

        <div class="table-card-header">
            <div>
                <div class="eyebrow">Aktivitas Terbaru</div>
                <h2>Pengunjung Terbaru (5 Data Terakhir)</h2>
            </div>
        </div>

        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Instansi</th>
                        <th>Tujuan</th>
                        <th>Bertemu Dengan</th>
                        <th>Pesan</th>
                        <th>Kesan</th>
                        <th>Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengunjungTerbaru as $tamu)
                        <tr>
                            <td class="cell-mono">{{ $loop->iteration }}</td>
                            <td class="cell-strong">{{ $tamu->nama }}</td>
                            <td>{{ $tamu->instansi }}</td>
                            <td>{{ $tamu->tujuan }}</td>
                            <td>{{ $tamu->bertemu_dengan ?? '-' }}</td>
                            <td>{{ $tamu->pesan ?? '-' }}</td>
                            <td>{{ $tamu->kesan ?? '-' }}</td>
                            <td class="cell-mono">{{ $tamu->tanggal ?? $tamu->created_at->format('d-m-Y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="empty-row">Belum ada data pengunjung.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>

</div>

@endsection