<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kebolehpasaran • Statistik Graduan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <style>
        :root{
            --bg:linear-gradient(135deg,#0f172a,#1d4ed8);
            --sidebar-w:260px;
            --topbar-h:56px;
            --border:rgba(15,23,42,.15);
        }
        body{ font-family:Figtree,ui-sans-serif,system-ui,sans-serif; background:var(--bg); background-attachment:fixed; min-height:100vh; }
        .app{
            min-height:100vh;
            display:grid;
            grid-template-columns: var(--sidebar-w) 1fr;
            grid-template-rows: var(--topbar-h) 1fr;
            grid-template-areas: "sidebar topbar" "sidebar main";
        }
        .topbar{
            grid-area:topbar;
            height:var(--topbar-h);
            background:rgba(15,23,42,.88);
            backdrop-filter:blur(12px);
            border-bottom:1px solid rgba(148,163,184,.45);
            display:flex;
            align-items:center;
            padding:0 14px;
            position:sticky;
            top:0;
            z-index:10;
        }
        .btn-icon{
            width:34px;height:34px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid rgba(148,163,184,.7);
            background:rgba(15,23,42,.75);
            color:#e5e7eb;
            cursor:pointer;
            border-radius:999px;
        }
        .brand-badge{
            width:160px;height:55px;
            border-radius:999px;
            border:1px solid rgba(191,219,254,1);
            display:grid;
            place-items:center;
            font-weight:800;
            font-size:12px;
            color:#dbeafe;
            background:radial-gradient(circle at 0 0,#60a5fa,#1d4ed8);
            box-shadow:0 12px 30px rgba(37,99,235,.65);
        }
        .brand-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#e5e7eb; }
        .main{ grid-area:main; padding:1.5rem; }

        /* Sidebar menu – sama seperti paparan Dashboard / Pelajar / Pensyarah (Bootstrap tidak override) */
        .sidebar{
            grid-area:sidebar;
            background:rgba(15,23,42,.96);
            border-right:1px solid rgba(30,64,175,.7);
            display:flex;
            flex-direction:column;
            position:sticky;
            top:0;
            height:120vh;
            z-index:20;
        }
        .sidebar .sidebar-header{
            height:var(--topbar-h);
            border-bottom:1px solid var(--border);
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 14px;
        }
        .sidebar .sidebar-header .title{
            font-weight:700;
            font-size:14px;
            text-transform:uppercase;
            letter-spacing:.12em;
            color:#9ca3af;
        }
        .sidebar .nav{
            padding:10px;
            overflow:auto;
            display:flex;
            flex-direction:column;
        }
        .sidebar .nav a{
            display:flex;
            align-items:center;
            gap:10px;
            padding:10px 10px;
            border-radius:8px;
            border:1px solid transparent;
            color:#e5e7eb !important;
            text-decoration:none !important;
            margin-bottom:10px;
            background:transparent;
            transition:background .16s ease,border-color .16s ease,transform .16s ease;
        }
        .sidebar .nav a .dot{
            width:12px;
            height:12px;
            border-radius:4px;
            border:none;
            display:inline-block;
            background:rgba(148,163,184,.9);
        }
        .sidebar .nav a.active{
            background:rgba(37,99,235,.18);
            border-color:rgba(59,130,246,.8);
            box-shadow:0 10px 25px rgba(15,23,42,.55);
            transform:translateX(2px);
        }
        .sidebar .nav a.active .dot{
            background:linear-gradient(135deg,#60a5fa,#bae6fd);
        }
        .sidebar .nav a:hover:not(.active){
            background:rgba(15,23,42,.9);
            border-color:rgba(51,65,85,.9);
            transform:translateX(1px);
        }
        @media (max-width: 860px){
            .app{ grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
            .topbar{ border-left:1px solid rgba(148,163,184,.45); }
            .sidebar{
                position:fixed;
                left:0;
                top:0;
                height:100vh;
                width:min(var(--sidebar-w), 92vw);
                transform:translateX(-105%);
                transition:transform .18s ease-in-out;
                box-shadow:12px 0 0 rgba(0,0,0,.06);
            }
            .sidebar.open{ transform:translateX(0); }
        }
    </style>
</head>
<body>
<div class="app" data-app>
    @include('partials.sidebar')

    <header class="topbar" role="banner">
        <div class="d-flex align-items-center gap-2">
            <button class="btn-icon" type="button" aria-label="Buka menu" data-open-sidebar>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>
            <div class="d-flex align-items-center gap-2">
                <div class="brand-badge"><img src="{{ asset('image/logo_kv_sepang.png') }}" alt="Logo" style="width:100%;height:100%;object-fit:contain;"></div>
                <span class="brand-title">System Dashboard</span>
            </div>
        </div>
    </header>

    <main class="main" role="main">
        <div class="container-fluid px-0">
            {{-- Page head & filter --}}
            <div class="card border shadow-sm mb-4">
                <div class="card-body">
                    <h1 class="h5 card-title mb-1">Kebolehpasaran</h1>
                    <p class="text-muted small mb-3">Statistik kebolehpasaran graduan.</p>
                    <form method="get" action="{{ route('employability.info') }}" class="d-flex flex-wrap gap-2 align-items-center">
                        <select name="tahun_bergraduat" id="select-year" class="form-select form-select-sm" style="width:auto;min-width:160px;">
                            <option value="">Tahun Bergraduat</option>
                            @foreach($yearOptions as $y)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-primary btn-sm">Tapis</button>
                        <a href="{{ route('employability.info') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
                    </form>
                </div>
            </div>

            {{-- KPI cards --}}
            <div class="row g-3 mb-4">
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Jumlah Graduan</div>
                            <div class="fw-bold fs-4">{{ number_format($totalGraduan) }}</div>
                            <div class="small text-muted">{{ $year ? 'Graduan ' . $year : 'Semua tahun' }} · Kadar {{ $kadarUmum }}%</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Graduan Bekerja</div>
                            <div class="fw-bold fs-4">{{ number_format($graduanBekerja) }}</div>
                            <div class="small text-muted">{{ $totalGraduan > 0 ? number_format(($graduanBekerja / $totalGraduan) * 100, 2) : '0.00' }}%</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Melanjutkan pengajian</div>
                            <div class="fw-bold fs-4">{{ number_format($sambungBelajar) }}</div>
                            <div class="small text-muted">{{ $totalGraduan > 0 ? number_format(($sambungBelajar / $totalGraduan) * 100, 2) : '0.00' }}%</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Tidak Bekerja</div>
                            <div class="fw-bold fs-4">{{ number_format($tidakBekerja) }}</div>
                            <div class="small text-muted">{{ $totalGraduan > 0 ? number_format(($tidakBekerja / $totalGraduan) * 100, 2) : '0.00' }}%</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Usahawan</div>
                            <div class="fw-bold fs-4">{{ number_format($usahawan) }}</div>
                            <div class="small text-muted">{{ $totalGraduan > 0 ? number_format(($usahawan / $totalGraduan) * 100, 2) : '0.00' }}%</div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card h-100 border shadow-sm">
                        <div class="card-body">
                            <div class="text-muted small text-uppercase">Bekerja dalam bidang</div>
                            <div class="fw-bold fs-4">{{ number_format($bekerjaDalamBidang) }}</div>
                            <div class="small text-muted">{{ $totalGraduan > 0 ? number_format(($bekerjaDalamBidang / $totalGraduan) * 100, 2) : '0.00' }}%</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Pekerjaan mengikut program --}}
            <div class="card border shadow-sm mb-4">
                <div class="card-header bg-light fw-semibold">Pekerjaan Mengikut Program</div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge bg-primary">Graduan Bekerja</span>
                        <span class="badge bg-secondary">Melanjutkan pengajian</span>
                        <span class="badge bg-warning text-dark">Tidak Bekerja</span>
                        <span class="badge bg-success">Usahawan</span>
                        <span class="badge bg-info">Bekerja dalam bidang</span>
                    </div>
                    @if($byProgramBreakdown->count())
                        <div class="table-responsive rounded border">
                            <table class="table table-hover table-striped align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Program Pengajian</th>
                                        <th class="text-end">Jumlah</th>
                                        <th class="text-end">Graduan Bekerja</th>
                                        <th class="text-end">Melanjutkan pengajian</th>
                                        <th class="text-end">Tidak Bekerja</th>
                                        <th class="text-end">Usahawan</th>
                                        <th class="text-end">Dalam bidang</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($byProgramBreakdown as $row)
                                        <tr>
                                            <td>{{ $row->program_pengajian ?: 'Tidak dinyatakan' }}</td>
                                            <td class="text-end">{{ $row->total }}</td>
                                            <td class="text-end">{{ $row->cnt_bekerja }}</td>
                                            <td class="text-end">{{ $row->cnt_sambung }}</td>
                                            <td class="text-end">{{ $row->cnt_tidak_bekerja }}</td>
                                            <td class="text-end">{{ $row->cnt_usahawan }}</td>
                                            <td class="text-end">{{ $row->cnt_dalam_bidang }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted small mb-0">Tiada rekod kebolehpasaran atau pilih tahun bergraduat.</p>
                    @endif
                </div>
            </div>

            {{-- Sektor & Pendapatan --}}
            <div class="row g-4 mb-4">
                <div class="col-lg-7">
                    <div class="card border shadow-sm h-100">
                        <div class="card-header bg-light fw-semibold">Sektor Pekerjaan</div>
                        <div class="card-body">
                            @forelse($bySektor as $row)
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between small mb-1">
                                        <span class="fw-medium">{{ $row->bekerja_sektor_pekerjaan }}</span>
                                        <span>{{ $row->pct }}% · {{ $row->total }} graduan</span>
                                    </div>
                                    <div class="progress" style="height:10px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width:{{ $row->pct }}%"></div>
                                    </div>
                                </div>
                            @empty
                                <p class="text-muted small mb-0">Tiada rekod sektor pekerjaan.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="card border shadow-sm h-100">
                        <div class="card-header bg-light fw-semibold">Bilangan Mengikut Range Pendapatan Bulanan</div>
                        <div class="card-body">
                            @if(!empty($byPendapatanRange) && collect($byPendapatanRange)->sum('total') > 0)
                                @foreach($byPendapatanRange as $r)
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <span class="small" style="min-width:140px;">{{ $r['label'] }}</span>
                                        <div class="progress flex-grow-1" style="height:22px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width:{{ $maxPendapatanCount > 0 ? round(($r['total'] / $maxPendapatanCount) * 100) : 0 }}%"></div>
                                        </div>
                                        <span class="fw-semibold small" style="min-width:2rem;">{{ $r['total'] }}</span>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted small mb-0">Tiada data pendapatan bulanan (graduan yang bekerja sahaja).</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center text-white small">© {{ date('Y') }} • System Dashboard</div>
        </div>
    </main>
</div>

@include('partials.chatbot')
<div class="backdrop" data-backdrop aria-hidden="true"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
    var s=document.querySelector('[data-sidebar]'),o=document.querySelector('[data-open-sidebar]'),c=document.querySelector('[data-close-sidebar]'),b=document.querySelector('[data-backdrop]');
    function openSidebar(){if(s&&b){s.classList.add('open');b.classList.add('show');b.setAttribute('aria-hidden','false');}}
    function closeSidebar(){if(s&&b){s.classList.remove('open');b.classList.remove('show');b.setAttribute('aria-hidden','true');}}
    o&&o.addEventListener('click',openSidebar);
    c&&c.addEventListener('click',closeSidebar);
    b&&b.addEventListener('click',closeSidebar);
})();
</script>
</body>
</html>
