@extends('public.layouts.public')

@section('title', 'Data Akademik Terpadu (iPADUAN) - Universitas Cenderawasih')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="max-w-[85%] mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">

    <!-- Hero Section -->
    <div class="p-8 md:p-12 rounded-3xl bg-gradient-to-br from-indigo-900/90 via-slate-900 to-purple-900/90 border border-slate-800 text-center relative overflow-hidden shadow-2xl space-y-4">
        <img src="{{ asset('assets/images/uncen.ico') }}" alt="Logo UNCEN" class="w-20 h-20 mx-auto object-contain drop-shadow-2xl">
        <h1 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight">Data Akademik Terpadu</h1>
        <p class="text-slate-300 text-sm md:text-base max-w-75% mx-auto leading-relaxed">
            Informasi PISN, Rekapitulasi Penerimaan Mahasiswa Baru, Status Mahasiswa, dan Pelacakan Alumni
        </p>
    </div>

    <!-- Navigation Tabs -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-3 flex flex-wrap gap-2">
        <a href="{{ route('public.home', array_merge(request()->query(), ['tab' => 'wisudawan'])) }}" 
           class="flex-1 min-w-[140px] py-3 px-5 rounded-2xl text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $activeTab == 'wisudawan' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
            <i class="fas fa-graduation-cap"></i> Wisudawan
        </a>

        <a href="{{ route('public.home', array_merge(request()->query(), ['tab' => 'penerimaan'])) }}" 
           class="flex-1 min-w-[140px] py-3 px-5 rounded-2xl text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $activeTab == 'penerimaan' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
            <i class="fas fa-users"></i> Penerimaan
        </a>

        <a href="{{ route('public.home', array_merge(request()->query(), ['tab' => 'akademik'])) }}" 
           class="flex-1 min-w-[140px] py-3 px-5 rounded-2xl text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $activeTab == 'akademik' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
            <i class="fas fa-book"></i> Status Mahasiswa
        </a>

        <a href="{{ route('public.home', array_merge(request()->query(), ['tab' => 'statistik'])) }}" 
           class="flex-1 min-w-[140px] py-3 px-5 rounded-2xl text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $activeTab == 'statistik' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
            <i class="fas fa-chart-pie"></i> Statistik Grafis
        </a>
    </div>

    <!-- TAB 1: WISUDAWAN -->
    @if ($activeTab == 'wisudawan')
        <div class="space-y-6">
            <!-- Search Bar -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6">
                <form method="GET" action="{{ route('public.home') }}" class="flex flex-col md:flex-row gap-4">
                    <input type="hidden" name="tab" value="wisudawan">
                    <div class="flex-1 relative">
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
                        <input type="text" name="search_wisudawan" value="{{ request('search_wisudawan') }}" placeholder="Cari berdasarkan NIM, Nama Alumni, No Seri Ijazah..." class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-3 pl-11 pr-4 text-white text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
                    </div>
                    <div class="flex gap-2">
                        <button type="submit" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm rounded-2xl shadow-lg shadow-indigo-600/30 transition-all flex items-center gap-2">
                            <i class="fas fa-filter"></i> Cari Data
                        </button>
                        <a href="{{ route('public.home', ['tab' => 'wisudawan']) }}" class="px-4 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-2xl text-sm font-semibold transition-all">
                            Reset
                        </a>
                    </div>
                </form>
            </div>

            <!-- Data Table -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
                <div class="p-6 border-b border-slate-800 flex justify-between items-center">
                    <div>
                        <h3 class="text-lg font-bold text-white">Daftar Kelulusan Alumni & Wisudawan</h3>
                        <p class="text-xs text-slate-400">Total data terverifikasi pada pangkalan iPADUAN</p>
                    </div>
                    <span class="px-3 py-1 bg-indigo-500/10 text-indigo-400 rounded-full text-xs font-semibold border border-indigo-500/20">
                        {{ number_format($wisudawanList->total()) }} Wisudawan
                    </span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-300">
                        <thead class="bg-slate-950/70 text-xs uppercase font-bold text-slate-400 border-b border-slate-800">
                            <tr>
                                <th class="px-6 py-4">No. Alumni</th>
                                <th class="px-6 py-4">NIM</th>
                                <th class="px-6 py-4">Nama Lengkap</th>
                                <th class="px-6 py-4">Program Studi</th>
                                <th class="px-6 py-4">Tahun</th>
                                <th class="px-6 py-4">IPK</th>
                                <th class="px-6 py-4">Predikat</th>
                                <th class="px-6 py-4 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800/60">
                            @forelse ($wisudawanList as $w)
                                <tr class="hover:bg-slate-800/40 transition-all">
                                    <td class="px-6 py-4 font-mono font-bold text-indigo-400">{{ $w->no_alumni }}</td>
                                    <td class="px-6 py-4 font-mono text-slate-400">{{ $w->nim }}</td>
                                    <td class="px-6 py-4 font-bold text-white">{{ $w->nama_lengkap }}</td>
                                    <td class="px-6 py-4">{{ $w->prodi->nama_prodi ?? '-' }} ({{ $w->prodi->jenjang ?? 'S1' }})</td>
                                    <td class="px-6 py-4">{{ $w->tahun }}</td>
                                    <td class="px-6 py-4">
                                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                            {{ number_format($w->ipk, 2) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                                            {{ $w->predikat }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="inline-flex items-center gap-2">
                                            <a href="{{ route('public.tracer.login', ['nim' => $w->nim]) }}" class="px-3 py-1.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow-md shadow-emerald-600/30 transition-all inline-flex items-center gap-1.5" title="Isi Kuesioner Tracer Study">
                                                <i class="fas fa-edit"></i> Isi Tracer
                                            </a>
                                            <a href="{{ route('public.wisudawan_detail', $w->no_alumni) }}" class="px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs shadow-md shadow-indigo-600/30 transition-all inline-flex items-center gap-1.5" title="Lihat Detail Alumni">
                                                <i class="fas fa-id-card"></i> Detail
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-12 text-slate-500">
                                        Tidak ada data wisudawan yang sesuai dengan kriteria pencarian.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-6 border-t border-slate-800">
                    {{ $wisudawanList->appends(request()->query())->links() }}
                </div>
            </div>
        </div>

    <!-- TAB 2: PENERIMAAN -->
    @elseif ($activeTab == 'penerimaan')
        <div class="space-y-6">
            <!-- Filter Bar -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6">
                <form method="GET" action="{{ route('public.home') }}" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                    <input type="hidden" name="tab" value="penerimaan">
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Tahun Penerimaan</label>
                        <input type="number" name="filter_tahun_pen" value="{{ request('filter_tahun_pen') }}" placeholder="2026" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Program Studi</label>
                        <select name="filter_prodi_pen" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Prodi --</option>
                            @foreach ($prodiList as $p)
                                <option value="{{ $p->kode_prodi }}" {{ request('filter_prodi_pen') == $p->kode_prodi ? 'selected' : '' }}>
                                    {{ $p->nama_prodi }} ({{ $p->jenjang }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Jalur Seleksi</label>
                        <select name="filter_jalur_pen" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Jalur --</option>
                            @foreach ($jalurList as $j)
                                <option value="{{ $j->kode_jalur }}" {{ request('filter_jalur_pen') == $j->kode_jalur ? 'selected' : '' }}>
                                    {{ $j->nm_jalur }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end gap-2">
                        <button type="submit" class="w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm rounded-2xl shadow-lg shadow-indigo-600/30 transition-all flex items-center justify-center gap-2">
                            <i class="fas fa-filter"></i> Terapkan
                        </button>
                        <a href="{{ route('public.home', ['tab' => 'penerimaan']) }}" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-2xl text-sm font-semibold transition-all">
                            Reset
                        </a>
                    </div>
                </form>
            </div>

            <!-- Data Table -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
                <div class="p-6 border-b border-slate-800">
                    <h3 class="text-lg font-bold text-white">Rekapitulasi Penerimaan Mahasiswa Baru</h3>
                    <p class="text-xs text-slate-400">Daftar alokasi daya tampung, peserta seleksi, dan mahasiswa registrasi</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-300">
                        <thead class="bg-slate-950/70 text-xs uppercase font-bold text-slate-400 border-b border-slate-800">
                            <tr>
                                <th class="px-6 py-4">Tahun</th>
                                <th class="px-6 py-4">Program Studi</th>
                                <th class="px-6 py-4">Jalur Seleksi</th>
                                <th class="px-6 py-4 text-center">Daya Tampung</th>
                                <th class="px-6 py-4 text-center">Pendaftar</th>
                                <th class="px-6 py-4 text-center">Diterima</th>
                                <th class="px-6 py-4 text-center">Registrasi</th>
                                <th class="px-6 py-4 text-center">% Registrasi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800/60">
                            @forelse ($penerimaanList as $p)
                                <tr class="hover:bg-slate-800/40 transition-all">
                                    <td class="px-6 py-4 font-mono font-bold text-indigo-400">{{ $p->tahun }}</td>
                                    <td class="px-6 py-4 font-bold text-white">{{ $p->prodi->nama_prodi ?? '-' }} ({{ $p->prodi->jenjang ?? 'S1' }})</td>
                                    <td class="px-6 py-4">
                                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
                                            {{ $p->jalurMasuk->nm_jalur ?? $p->kode_jalur }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-center font-bold text-slate-300">{{ number_format($p->daya_tampung) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-blue-400">{{ number_format($p->jlh_pendaftar) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-indigo-400">{{ number_format($p->jlh_diterima) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-emerald-400">{{ number_format($p->jlh_registrasi) }}</td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                            {{ $p->persentase_registrasi }}%
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-12 text-slate-500">Belum ada data penerimaan.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-6 border-t border-slate-800">
                    {{ $penerimaanList->appends(request()->query())->links() }}
                </div>
            </div>
        </div>

    <!-- TAB 3: AKADEMIK (AKLUS) -->
    @elseif ($activeTab == 'akademik')
        <div class="space-y-6">
            <!-- Filter Bar -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6">
                <form method="GET" action="{{ route('public.home') }}" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                    <input type="hidden" name="tab" value="akademik">
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Tahun Akademik</label>
                        <input type="number" name="filter_tahun_ak" value="{{ request('filter_tahun_ak') }}" placeholder="2025" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Semester</label>
                        <select name="filter_semester_ak" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Semester --</option>
                            <option value="Ganjil" {{ request('filter_semester_ak') == 'Ganjil' ? 'selected' : '' }}>Ganjil</option>
                            <option value="Genap" {{ request('filter_semester_ak') == 'Genap' ? 'selected' : '' }}>Genap</option>
                            <option value="Pendek" {{ request('filter_semester_ak') == 'Pendek' ? 'selected' : '' }}>Pendek</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Program Studi</label>
                        <select name="filter_prodi_ak" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Prodi --</option>
                            @foreach ($prodiList as $p)
                                <option value="{{ $p->kode_prodi }}" {{ request('filter_prodi_ak') == $p->kode_prodi ? 'selected' : '' }}>
                                    {{ $p->nama_prodi }} ({{ $p->jenjang }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end gap-2">
                        <button type="submit" class="w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm rounded-2xl shadow-lg shadow-indigo-600/30 transition-all flex items-center justify-center gap-2">
                            <i class="fas fa-filter"></i> Terapkan
                        </button>
                        <a href="{{ route('public.home', ['tab' => 'akademik']) }}" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-2xl text-sm font-semibold transition-all">
                            Reset
                        </a>
                    </div>
                </form>
            </div>

            <!-- Data Table -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
                <div class="p-6 border-b border-slate-800">
                    <h3 class="text-lg font-bold text-white">Status Mahasiswa per Semester</h3>
                    <p class="text-xs text-slate-400">Rekapitulasi mahasiswa berstatus aktif, lulus, cuti akademik, dan non-aktif</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-300">
                        <thead class="bg-slate-950/70 text-xs uppercase font-bold text-slate-400 border-b border-slate-800">
                            <tr>
                                <th class="px-6 py-4">Tahun / Semester</th>
                                <th class="px-6 py-4">Program Studi</th>
                                <th class="px-6 py-4 text-center text-emerald-400">Aktif</th>
                                <th class="px-6 py-4 text-center text-indigo-400">Lulus</th>
                                <th class="px-6 py-4 text-center text-amber-400">Cuti</th>
                                <th class="px-6 py-4 text-center text-rose-400">Nonaktif</th>
                                <th class="px-6 py-4 text-center text-white">Total Mahasiswa</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800/60">
                            @forelse ($aklusList as $a)
                                <tr class="hover:bg-slate-800/40 transition-all">
                                    <td class="px-6 py-4 font-mono font-bold text-indigo-400">{{ $a->tahun }} ({{ $a->semester }})</td>
                                    <td class="px-6 py-4 font-bold text-white">{{ $a->prodi->nama_prodi ?? '-' }} ({{ $a->prodi->jenjang ?? 'S1' }})</td>
                                    <td class="px-6 py-4 text-center font-bold text-emerald-400">{{ number_format($a->mhs_aktif) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-indigo-400">{{ number_format($a->mhs_lulus) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-amber-400">{{ number_format($a->mhs_cuti) }}</td>
                                    <td class="px-6 py-4 text-center font-bold text-rose-400">{{ number_format($a->mhs_nonaktif) }}</td>
                                    <td class="px-6 py-4 text-center font-extrabold text-white">{{ number_format($a->total_mhs) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-12 text-slate-500">Belum ada data akademik status mahasiswa.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-6 border-t border-slate-800">
                    {{ $aklusList->appends(request()->query())->links() }}
                </div>
            </div>
        </div>

    <!-- TAB 4: STATISTIK GRAFIS (Mengadopsi contoh/univer/*.php dengan Hierarki Filter) -->
    @elseif ($activeTab == 'statistik')
        <div class="space-y-8">

            <!-- Filter Hierarki: Universitas -> Fakultas -> Prodi (Jenjang) -> Tahun -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
                <div class="flex flex-wrap items-center justify-between gap-3 mb-4 pb-4 border-b border-slate-800">
                    <h4 class="text-base font-bold text-white flex items-center gap-2">
                        <i class="fas fa-filter text-indigo-400"></i> Analisis Statistik & Data Akademik
                    </h4>
                    @if ($selectedProdi)
                        <span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
                            Prodi: {{ $selectedProdi->nama_prodi }} ({{ $selectedProdi->jenjang }}) - {{ $selectedProdi->fakultas->nama_fakultas ?? '' }}
                            @if ($filter_tahun) <span class="ml-1 px-2 py-0.5 rounded bg-indigo-600 text-white">Tahun {{ $filter_tahun }}</span> @endif
                        </span>
                    @elseif ($selectedFakultas)
                        <span class="px-3 py-1 rounded-full text-xs font-bold bg-blue-500/10 text-blue-400 border border-blue-500/20">
                            Fakultas: {{ $selectedFakultas->nama_fakultas }} ({{ $selectedFakultas->kode_fakultas }})
                            @if ($filter_tahun) <span class="ml-1 px-2 py-0.5 rounded bg-blue-600 text-white">Tahun {{ $filter_tahun }}</span> @endif
                        </span>
                    @else
                        <span class="px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                            Cakupan: Seluruh Universitas Cenderawasih
                            @if ($filter_tahun) <span class="ml-1 px-2 py-0.5 rounded bg-emerald-600 text-white">Tahun {{ $filter_tahun }}</span> @endif
                        </span>
                    @endif
                </div>

                <form method="GET" action="{{ route('public.home') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4 items-end">
                    <input type="hidden" name="tab" value="statistik">
                    <input type="hidden" name="stat_subtab" value="{{ $statSubTab }}">
                    <input type="hidden" name="inner_tab" value="{{ $innerTab }}">

                    <div class="lg:col-span-4">
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Pilih Fakultas</label>
                        <select name="filter_fakultas" id="filterFakultasPublic" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Seluruh Fakultas (Universitas) --</option>
                            @foreach ($fakultasList as $f)
                                <option value="{{ $f->kode_fakultas }}" {{ ($filter_fakultas ?? '') == $f->kode_fakultas ? 'selected' : '' }}>
                                    {{ $f->nama_fakultas }} ({{ $f->kode_fakultas }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="lg:col-span-4">
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Pilih Program Studi</label>
                        <select name="filter_prodi" id="filterProdiPublic" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Program Studi --</option>
                            @foreach ($prodiList as $p)
                                <option value="{{ $p->kode_prodi }}" data-fakultas="{{ $p->kode_fakultas }}" {{ ($filter_prodi ?? '') == $p->kode_prodi ? 'selected' : '' }}>
                                    {{ $p->nama_prodi }} ({{ $p->jenjang }}) - {{ $p->fakultas->nama_fakultas ?? $p->kode_fakultas }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="lg:col-span-2">
                        <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Filter Tahun</label>
                        <select name="filter_tahun" class="w-full bg-slate-950 border border-slate-800 rounded-2xl py-2.5 px-4 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <option value="">-- Semua Tahun --</option>
                            @foreach ($availableYears as $yrOpt)
                                <option value="{{ $yrOpt }}" {{ ($filter_tahun ?? '') == $yrOpt ? 'selected' : '' }}>
                                    {{ $yrOpt }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="lg:col-span-2 flex gap-2">
                        <button type="submit" class="w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm rounded-2xl shadow-lg shadow-indigo-600/30 transition-all flex items-center justify-center gap-2">
                            <i class="fas fa-search"></i> Terapkan
                        </button>
                        <a href="{{ route('public.home', ['tab' => 'statistik', 'stat_subtab' => $statSubTab]) }}" class="px-3.5 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-2xl text-sm font-semibold transition-all" title="Reset Filter">
                            <i class="fas fa-undo"></i>
                        </a>
                    </div>
                </form>
            </div>

            <!-- Kemdikbud Tracer Study Visual Analytics Section -->
            <div>
                <x-tracer-charts :data="$tracerStatistikData" title="Visualisasi Tracer Study (Masa Tunggu Lulusan)" />
            </div>


            <!-- Sub-Tabs Navigation (1. Fakultas & Prodi, 2. Ringkasan Tahunan, 3. Evaluasi Retensi) -->

            <div class="flex flex-wrap gap-2 p-1.5 bg-slate-900 border border-slate-800 rounded-2xl">
                <a href="{{ route('public.home', array_merge(
                    request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun']), 
                    ['tab' => 'statistik', 'stat_subtab' => 'fakultas', 'inner_tab' => $innerTab]
                )) }}" class="flex-1 min-w-[200px] py-2.5 px-4 rounded-xl text-xs sm:text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $statSubTab == 'fakultas' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
                    <i class="fas fa-university"></i> Analisis Statistik
                </a>

                <a href="{{ route('public.home', array_merge(
                    request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun']), 
                    ['tab' => 'statistik', 'stat_subtab' => 'ringkasan', 'inner_tab' => $innerTab]
                )) }}" class="flex-1 min-w-[200px] py-2.5 px-4 rounded-xl text-xs sm:text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $statSubTab == 'ringkasan' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
                    <i class="fas fa-chart-line"></i> Ringkasan & Tren Tahunan
                </a>

                <a href="{{ route('public.home', array_merge(
                    request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun']), 
                    ['tab' => 'statistik', 'stat_subtab' => 'retensi', 'inner_tab' => $innerTab]
                )) }}" class="flex-1 min-w-[200px] py-2.5 px-4 rounded-xl text-xs sm:text-sm font-bold text-center transition-all flex items-center justify-center gap-2 {{ $statSubTab == 'retensi' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800' }}">
                    <i class="fas fa-user-graduate"></i> Evaluasi & Retensi Mahasiswa
                </a>
            </div>

            @if ($statSubTab == 'fakultas')
                <!-- ========================================================================= -->
                <!-- SUB-TAB 1 (DEFAULT): KESELURUHAN UNIVERSITAS, FAKULTAS & PRODI (index.php) -->
                <!-- ========================================================================= -->

                <!-- 4 KPI Summary Cards Terfilter -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-indigo-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Total Wisudawan</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalWisudawan) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Rata-rata IPK: <strong class="text-emerald-400">{{ $rataIpk }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-emerald-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-emerald-400 uppercase tracking-wider">Penerimaan & Pendaftar</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalPendaftar) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Diterima: <strong class="text-indigo-400">{{ number_format($totalDiterima) }}</strong> | Reg: <strong class="text-emerald-400">{{ number_format($totalRegistrasi) }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-amber-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-amber-400 uppercase tracking-wider">Status Mahasiswa </span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalAktif) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Lulus: <strong class="text-emerald-400">{{ number_format($totalLulus) }}</strong> | Cuti: <strong class="text-amber-400">{{ number_format($totalCuti) }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-purple-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-purple-400 uppercase tracking-wider">Cakupan Analisis</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">
                            @if ($selectedProdi)
                                1 Program Studi
                            @elseif ($selectedFakultas)
                                1 Fakultas
                            @else
                                {{ $totalFakultasCount }} Fak / {{ $totalProdiCount }} Prodi
                            @endif
                        </h3>
                        <p class="text-xs text-slate-400 mt-1 truncate">{{ $visualTitleFilter }}</p>
                    </div>
                </div>

                <!-- 4 INNER SUB-TABS (contoh/univer/index.php) -->
                <div class="flex flex-wrap gap-2 p-1 bg-slate-950 border border-slate-800 rounded-2xl">
                    <a href="{{ route('public.home', array_merge(request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun', 'tab', 'stat_subtab']), ['inner_tab' => 'timeseries'])) }}" 
                       class="flex-1 min-w-[150px] py-2 px-3 rounded-xl text-xs font-bold text-center transition-all flex items-center justify-center gap-1.5 {{ $innerTab == 'timeseries' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200' }}">
                        <i class="fas fa-table"></i> Analisis Data
                    </a>
                    <a href="{{ route('public.home', array_merge(request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun', 'tab', 'stat_subtab']), ['inner_tab' => 'grafik'])) }}" 
                       class="flex-1 min-w-[150px] py-2 px-3 rounded-xl text-xs font-bold text-center transition-all flex items-center justify-center gap-1.5 {{ $innerTab == 'grafik' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200' }}">
                        <i class="fas fa-chart-bar"></i> Grafik Statistik
                    </a>
                    <a href="{{ route('public.home', array_merge(request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun', 'tab', 'stat_subtab']), ['inner_tab' => 'pie'])) }}" 
                       class="flex-1 min-w-[150px] py-2 px-3 rounded-xl text-xs font-bold text-center transition-all flex items-center justify-center gap-1.5 {{ $innerTab == 'pie' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200' }}">
                        <i class="fas fa-chart-pie"></i> Grafik Pie / Proporsi
                    </a>
                    <a href="{{ route('public.home', array_merge(request()->only(['filter_fakultas', 'filter_prodi', 'filter_tahun', 'tab', 'stat_subtab']), ['inner_tab' => 'deep_analysis'])) }}" 
                       class="flex-1 min-w-[150px] py-2 px-3 rounded-xl text-xs font-bold text-center transition-all flex items-center justify-center gap-1.5 {{ $innerTab == 'deep_analysis' ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30' : 'text-slate-400 hover:text-slate-200' }}">
                        <i class="fas fa-microscope"></i> Analisis Mendalam
                    </a>
                </div>

                @if ($innerTab == 'timeseries')
                    <!-- Kartu Fakultas & Program Studi -->
                    <div class="space-y-4">
                        <h4 class="text-lg font-bold text-white flex items-center gap-2">
                            <i class="fas fa-layer-group text-indigo-400"></i> Kartu Informasi Fakultas & Program Studi
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach ($fakultasStat as $f)
                                <div class="bg-slate-900 border border-slate-800 hover:border-indigo-500/50 rounded-3xl p-6 shadow-xl space-y-4 transition-all flex flex-col">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <span class="px-2.5 py-1 rounded-lg text-xs font-mono font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">{{ $f['kode'] }}</span>
                                            <h5 class="text-base font-bold text-white mt-2">{{ $f['nama'] }}</h5>
                                        </div>
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $f['status'] == 'aktif' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-800 text-slate-400' }}">
                                            {{ $f['status'] }}
                                        </span>
                                    </div>
                                    <p class="text-xs text-slate-400"><i class="fas fa-user-tie text-indigo-400 me-1"></i> Dekan: {{ $f['dekan'] }}</p>
                                    
                                    <div class="p-3 rounded-2xl bg-slate-950/80 border border-slate-800/80 flex justify-between items-center text-xs">
                                        <div>
                                            <span class="text-slate-400 block">Jumlah Prodi</span>
                                            <strong class="text-white text-sm">{{ $f['prodi_count'] }} Prodi</strong>
                                        </div>
                                        <div class="text-right">
                                            <span class="text-slate-400 block">Total Alumni</span>
                                            <strong class="text-indigo-400 text-sm">{{ number_format($f['wisudawan_count']) }} Wisudawan</strong>
                                        </div>
                                    </div>

                                    <div class="pt-2 border-t border-slate-800/60 mt-auto">
                                        <span class="text-[11px] font-bold text-slate-400 block mb-2">Program Studi (Jenjang):</span>
                                        <div class="flex flex-wrap gap-1.5">
                                            @foreach ($f['prodi_list'] as $pro)
                                                <a href="{{ route('public.home', ['tab' => 'statistik', 'stat_subtab' => 'fakultas', 'inner_tab' => 'timeseries', 'filter_fakultas' => $f['kode'], 'filter_prodi' => $pro->kode_prodi]) }}" 
                                                   class="px-2 py-1 rounded-lg text-[11px] font-semibold {{ ($filter_prodi ?? '') == $pro->kode_prodi ? 'bg-indigo-600 text-white' : 'bg-slate-950 text-slate-300 border border-slate-800 hover:border-slate-700' }}"
                                                   title="Klik untuk filter ke prodi ini">
                                                    {{ $pro->nama_prodi }} ({{ $pro->jenjang }})
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Tabel Detail Program Studi -->
                    <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
                        <div class="p-6 border-b border-slate-800">
                            <h4 class="text-lg font-bold text-white flex items-center gap-2">
                                <i class="fas fa-table text-emerald-400"></i> Rekapitulasi Data Program Studi & Alumni Wisudawan
                            </h4>
                            <p class="text-xs text-slate-400">Daftar lengkap program studi berdasarkan jenjang dan fakultas</p>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-sm text-slate-300">
                                <thead class="bg-slate-950/70 text-xs uppercase font-bold text-slate-400 border-b border-slate-800">
                                    <tr>
                                        <th class="px-6 py-4">No</th>
                                        <th class="px-6 py-4">Fakultas</th>
                                        <th class="px-6 py-4">Kode</th>
                                        <th class="px-6 py-4">Nama Program Studi</th>
                                        <th class="px-6 py-4 text-center">Jenjang</th>
                                        <th class="px-6 py-4 text-center">Akreditasi</th>
                                        <th class="px-6 py-4 text-center">Total Wisudawan</th>
                                        <th class="px-6 py-4 text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-800/60">
                                    @php $no = 1; @endphp
                                    @foreach ($fakultasStat as $f)
                                        @foreach ($f['prodi_list'] as $p)
                                            <tr class="hover:bg-slate-800/40 transition-all {{ ($filter_prodi ?? '') == $p->kode_prodi ? 'bg-indigo-950/40 border-l-4 border-indigo-500 font-bold' : '' }}">
                                                <td class="px-6 py-4 text-slate-400 text-xs">{{ $no++ }}</td>
                                                <td class="px-6 py-4 text-xs font-semibold text-slate-300">{{ $f['nama'] }}</td>
                                                <td class="px-6 py-4 font-mono font-bold text-indigo-400">{{ $p->kode_prodi }}</td>
                                                <td class="px-6 py-4 font-bold text-white">{{ $p->nama_prodi }} ({{ $p->jenjang }})</td>
                                                <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">{{ $p->jenjang }}</span></td>
                                                <td class="px-6 py-4 text-center"><span class="px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 text-xs font-bold border border-emerald-500/20">{{ $p->akreditasi ?? 'Aktif' }}</span></td>
                                                <td class="px-6 py-4 text-center font-bold text-indigo-400">{{ number_format($p->wisudawan_count ?? $p->wisudawan->count()) }} Alumni</td>
                                                <td class="px-6 py-4 text-center">
                                                    <a href="{{ route('public.home', ['tab' => 'statistik', 'stat_subtab' => 'fakultas', 'inner_tab' => 'timeseries', 'filter_prodi' => $p->kode_prodi]) }}" class="px-3 py-1 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs shadow-sm transition-all">
                                                        Analisis
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                @elseif ($innerTab == 'grafik')
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                        <div class="lg:col-span-7 bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                            <h4 class="text-base font-bold text-white"><i class="fas fa-chart-line text-indigo-400 me-2"></i> Tren Kelulusan per Tahun Angkatan - {{ $visualTitleFilter }}</h4>
                            <div class="h-80 relative">
                                <canvas id="chartTahunWisudaPub"></canvas>
                            </div>
                        </div>

                        <div class="lg:col-span-5 bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                            <h4 class="text-base font-bold text-white"><i class="fas fa-chart-bar text-emerald-400 me-2"></i> Penerimaan per Jalur - {{ $visualTitleFilter }}</h4>
                            <div class="h-80 relative">
                                <canvas id="chartJalurPub"></canvas>
                            </div>
                        </div>
                    </div>

                @elseif ($innerTab == 'pie')
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                            <h4 class="text-base font-bold text-white"><i class="fas fa-medal text-amber-400 me-2"></i> Sebaran Predikat Kelulusan - {{ $visualTitleFilter }}</h4>
                            <div class="h-72 relative flex items-center justify-center">
                                <canvas id="chartPiePredikatPub"></canvas>
                            </div>
                            <div class="grid grid-cols-3 gap-2 text-center pt-2 border-t border-slate-800 text-xs">
                                <div><strong class="text-amber-400 block fs-5">{{ $cumLaudeCount }}</strong><span class="text-slate-400 text-[10px]">Pujian</span></div>
                                <div><strong class="text-indigo-400 block fs-5">{{ $sangatMemuaskanCount }}</strong><span class="text-slate-400 text-[10px]">Sgt Memuaskan</span></div>
                                <div><strong class="text-slate-300 block fs-5">{{ $memuaskanCount }}</strong><span class="text-slate-400 text-[10px]">Memuaskan</span></div>
                            </div>
                        </div>

                        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                            <h4 class="text-base font-bold text-white"><i class="fas fa-venus-mars text-purple-400 me-2"></i> Rasio Gender Wisudawan - {{ $visualTitleFilter }}</h4>
                            <div class="h-72 relative flex items-center justify-center">
                                <canvas id="chartGenderPub"></canvas>
                            </div>
                            <div class="grid grid-cols-2 gap-2 text-center pt-2 border-t border-slate-800 text-xs">
                                <div><strong class="text-blue-400 block fs-5">{{ $lakiCount }} ({{ $persenLaki }}%)</strong><span class="text-slate-400 text-[10px]">Laki-laki</span></div>
                                <div><strong class="text-rose-400 block fs-5">{{ $perempuanCount }} ({{ $persenPerempuan }}%)</strong><span class="text-slate-400 text-[10px]">Perempuan</span></div>
                            </div>
                        </div>
                    </div>

                @elseif ($innerTab == 'deep_analysis')
                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 shadow-xl space-y-6">
                        <div>
                            <h4 class="text-xl font-extrabold text-white flex items-center gap-2">
                                <i class="fas fa-microscope text-indigo-400"></i> Analisis Mendalam => {{ $visualTitleFilter }}
                            </h4>
                            <p class="text-xs text-slate-400">Evaluasi efisiensi kuota, kapasitas kelulusan, dan rasio ketahanan mahasiswa berdasarkan data pangkalan.</p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="p-6 rounded-3xl bg-slate-950 border border-slate-800 text-center space-y-2">
                                <span class="text-xs text-slate-400 uppercase font-bold">Keketatan Seleksi</span>
                                <h3 class="text-3xl font-extrabold text-indigo-400">{{ $deepAnalysis['rasio_keketatan'] }}%</h3>
                                <p class="text-[11px] text-slate-500">Persentase peserta diterima dari total pendaftar</p>
                            </div>

                            <div class="p-6 rounded-3xl bg-slate-950 border border-slate-800 text-center space-y-2">
                                <span class="text-xs text-slate-400 uppercase font-bold">Konversi Registrasi</span>
                                <h3 class="text-3xl font-extrabold text-emerald-400">{{ $deepAnalysis['rasio_registrasi'] }}%</h3>
                                <p class="text-[11px] text-slate-500">Peserta diterima yang melakukan registrasi ulang</p>
                            </div>

                            <div class="p-6 rounded-3xl bg-slate-950 border border-slate-800 text-center space-y-2">
                                <span class="text-xs text-slate-400 uppercase font-bold">Efisiensi Daya Tampung</span>
                                <h3 class="text-3xl font-extrabold text-amber-400">{{ $deepAnalysis['efisiensi_daya_tampung'] }}%</h3>
                                <p class="text-[11px] text-slate-500">Kapasitas kuota terisi mahasiswa baru</p>
                            </div>

                            <div class="md:col-span-1.5 p-6 rounded-3xl bg-slate-950 border border-slate-800 text-center space-y-2">
                                <span class="text-xs text-slate-400 uppercase font-bold">Kelulusan vs Mahasiswa Aktif</span>
                                <h3 class="text-3xl font-extrabold text-cyan-400">{{ $deepAnalysis['rasio_lulus_aktif'] }}%</h3>
                                <p class="text-[11px] text-slate-500">Persentase alumni wisuda dibanding mahasiswa aktif</p>
                            </div>

                            <div class="md:col-span-1.5 p-6 rounded-3xl bg-slate-950 border border-slate-800 text-center space-y-2">
                                <span class="text-xs text-slate-400 uppercase font-bold">Risiko Non-Aktif / Drop-Out</span>
                                <h3 class="text-3xl font-extrabold text-rose-400">{{ $deepAnalysis['rasio_nonaktif'] }}%</h3>
                                <p class="text-[11px] text-slate-500">Proporsi mahasiswa berstatus cuti / non-aktif</p>
                            </div>
                        </div>
                    </div>
                @endif

            @elseif ($statSubTab == 'ringkasan')
                <!-- ========================================================================= -->
                <!-- SUB-TAB 2: RINGKASAN & TREN TAHUNAN                                       -->
                <!-- ========================================================================= -->

                <!-- 4 Top KPI Cards Terfilter Ringkasan -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-indigo-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Total Wisudawan</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalWisudawan) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Rata-rata IPK: <strong class="text-emerald-400">{{ $rataIpk }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-emerald-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-emerald-400 uppercase tracking-wider">Penerimaan & Pendaftar</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalPendaftar) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Registrasi: <strong class="text-emerald-400">{{ number_format($totalRegistrasi) }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-amber-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-amber-400 uppercase tracking-wider">Status Mahasiswa</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ number_format($totalAktif) }}</h3>
                        <p class="text-xs text-slate-400 mt-1">Nonaktif: <strong class="text-rose-400">{{ number_format($totalNonaktif) }}</strong></p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
                        <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-purple-500/10 rounded-full blur-xl"></div>
                        <span class="text-xs font-bold text-purple-400 uppercase tracking-wider">Cakupan Tren</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">
                            @if ($selectedProdi)
                                1 Prodi
                            @elseif ($selectedFakultas)
                                1 Fak
                            @else
                                Universitas
                            @endif
                        </h3>
                        <p class="text-xs text-slate-400 mt-1 truncate">{{ $visualTitleFilter }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    <!-- Chart Tren Animo vs Daya Tampung vs Mhs Baru -->
                    <div class="lg:col-span-7 bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 shadow-xl space-y-4">
                        <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                            <div>
                                <h4 class="text-base font-bold text-white flex items-center gap-2">
                                    <i class="fas fa-chart-area text-indigo-400"></i> Tren Animo Pendaftar vs Daya Tampung vs Mahasiswa Baru
                                </h4>
                                <p class="text-xs text-slate-400">Data historis multi-tahun - {{ $visualTitleFilter }}</p>
                            </div>
                            <span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
                                {{ count($tahunanUniver) }} Tahun
                            </span>
                        </div>
                        <div class="h-80 relative">
                            <canvas id="chartAnimoTahunanPub"></canvas>
                        </div>
                    </div>

                    <!-- Chart Status Mahasiswa Tahunan -->
                    <div class="lg:col-span-5 bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 shadow-xl space-y-4">
                        <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                            <div>
                                <h4 class="text-base font-bold text-white flex items-center gap-2">
                                    <i class="fas fa-users text-emerald-400"></i> Status Mahasiswa per Tahun
                                </h4>
                                <p class="text-xs text-slate-400">Mhs Aktif, Nonaktif & Wisudawan - {{ $visualTitleFilter }}</p>
                            </div>
                        </div>
                        <div class="h-80 relative">
                            <canvas id="chartStatusTahunanPub"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Tabel Komparasi Historis Tahunan Terfilter -->
                <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
                    <div class="p-6 border-b border-slate-800">
                        <h4 class="text-lg font-bold text-white flex items-center gap-2">
                            <i class="fas fa-table text-emerald-400"></i> Rekapitulasi Data Historis Akademik Tahunan
                        </h4>
                        <p class="text-xs text-slate-400">Cakupan Data: <strong class="text-indigo-400">{{ $visualTitleFilter }}</strong></p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-center text-sm text-slate-300">
                            <thead class="bg-slate-950/70 text-xs uppercase font-bold text-slate-400 border-b border-slate-800">
                                <tr>
                                    <th class="px-6 py-4">Tahun Angk.</th>
                                    <th class="px-6 py-4 text-indigo-400">Animo Pendaftar</th>
                                    <th class="px-6 py-4 text-slate-400">Daya Tampung</th>
                                    <th class="px-6 py-4 text-blue-400">Hasil Seleksi</th>
                                    <th class="px-6 py-4 text-emerald-400">Mhs Baru</th>
                                    <th class="px-6 py-4 text-emerald-300 font-bold">Mhs Aktif</th>
                                    <th class="px-6 py-4 text-amber-400">Mhs Cuti</th>
                                    <th class="px-6 py-4 text-rose-400">Mhs Nonaktif</th>
                                    <th class="px-6 py-4 text-indigo-400 font-bold">Wisudawan</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-800/60">
                                @forelse ($tahunanUniver as $th)
                                    <tr class="hover:bg-slate-800/40 transition-all">
                                        <td class="px-6 py-4 font-mono font-bold text-white">{{ $th['tahun'] }}</td>
                                        <td class="px-6 py-4 font-bold text-indigo-400">{{ number_format($th['animo']) }}</td>
                                        <td class="px-6 py-4 text-slate-300">{{ number_format($th['daya_tampung']) }}</td>
                                        <td class="px-6 py-4 text-blue-400">{{ number_format($th['hasil']) }}</td>
                                        <td class="px-6 py-4 font-bold text-emerald-400">{{ number_format($th['mhs_baru']) }}</td>
                                        <td class="px-6 py-4 font-bold text-emerald-300">{{ number_format($th['mhs_aktif']) }}</td>
                                        <td class="px-6 py-4 text-amber-400">{{ number_format($th['cuti']) }}</td>
                                        <td class="px-6 py-4 text-rose-400">{{ number_format($th['nonaktif']) }}</td>
                                        <td class="px-6 py-4 font-bold text-indigo-400">{{ number_format($th['wisuda']) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-12 text-slate-500">Tidak ada data historis untuk ditampilkan.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

            @elseif ($statSubTab == 'retensi')
                <!-- ========================================================================= -->
                <!-- SUB-TAB 3: EVALUASI & RETENSI MAHASISWA TERFILTER                        -->
                <!-- ========================================================================= -->

                <!-- 4 Retention KPI Cards Terfilter -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
                        <span class="text-xs font-bold text-emerald-400 uppercase">Tingkat Retensi</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ $retensiStat['avg_retention_rate'] }}%</h3>
                        <p class="text-xs text-slate-400 mt-1">Mahasiswa Melanjutkan Studi</p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
                        <span class="text-xs font-bold text-indigo-400 uppercase">Kelulusan Tepat Waktu</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ $retensiStat['avg_graduation_on_time'] }}%</h3>
                        <p class="text-xs text-slate-400 mt-1">Lulus &le; 4 Tahun (S1)</p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
                        <span class="text-xs font-bold text-amber-400 uppercase">Tingkat Selektivitas</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ $retensiStat['avg_selectivity'] }}%</h3>
                        <p class="text-xs text-slate-400 mt-1">Keketatan Penerimaan</p>
                    </div>

                    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl">
                        <span class="text-xs font-bold text-rose-400 uppercase">Tingkat Drop-Out</span>
                        <h3 class="text-3xl font-extrabold text-white mt-2">{{ $retensiStat['avg_dropout_rate'] }}%</h3>
                        <p class="text-xs text-slate-400 mt-1">Rasio Nonaktif / DO</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    <!-- Chart Retensi Trend -->
                    <div class="lg:col-span-8 bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 shadow-xl space-y-4">
                        <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                            <div>
                                <h4 class="text-base font-bold text-white flex items-center gap-2">
                                    <i class="fas fa-chart-line text-indigo-400"></i> Tren Indikator Retensi, Kelulusan & Drop-Out (2020 - {{ end($availableYears) }})
                                </h4>
                                <p class="text-xs text-slate-400">Grafik time-series performa retensi - {{ $visualTitleFilter }}</p>
                            </div>
                        </div>
                        <div class="h-80 relative">
                            <canvas id="chartRetensiPub"></canvas>
                        </div>
                    </div>

                    <!-- Predikat Breakdown -->
                    <div class="lg:col-span-4 bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                        <div class="border-b border-slate-800 pb-3">
                            <h4 class="text-base font-bold text-white flex items-center gap-2">
                                <i class="fas fa-medal text-amber-400"></i> Distribusi Predikat Kelulusan
                            </h4>
                            <p class="text-[11px] text-slate-400">{{ $visualTitleFilter }}</p>
                        </div>
                        <div class="h-56 relative flex items-center justify-center">
                            <canvas id="chartPredikatPub"></canvas>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-center pt-2 border-t border-slate-800 text-xs">
                            <div><strong class="text-amber-400 block">{{ $cumLaudeCount }}</strong><span class="text-slate-400 text-[10px]">Pujian</span></div>
                            <div><strong class="text-indigo-400 block">{{ $sangatMemuaskanCount }}</strong><span class="text-slate-400 text-[10px]">Sgt Memuaskan</span></div>
                            <div><strong class="text-slate-300 block">{{ $memuaskanCount }}</strong><span class="text-slate-400 text-[10px]">Memuaskan</span></div>
                        </div>
                    </div>
                </div>
            @endif

        </div>

        <!-- Render Script for Public Tab Statistics Charts -->
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Chart.defaults.color = '#94a3b8';
                Chart.defaults.borderColor = '#1e293b';

                // Cascading Filter: Fakultas -> Program Studi
                const fakultasSelect = document.getElementById('filterFakultasPublic');
                const prodiSelect = document.getElementById('filterProdiPublic');

                if (fakultasSelect && prodiSelect) {
                    const originalOptions = Array.from(prodiSelect.options);

                    function filterProdiOptions() {
                        const selectedFak = fakultasSelect.value;
                        const currentProdiVal = prodiSelect.value;

                        prodiSelect.innerHTML = '';
                        prodiSelect.appendChild(originalOptions[0].cloneNode(true));

                        let matched = false;
                        originalOptions.slice(1).forEach(option => {
                            const fak = option.getAttribute('data-fakultas');
                            if (!selectedFak || fak === selectedFak) {
                                const clonedOpt = option.cloneNode(true);
                                prodiSelect.appendChild(clonedOpt);
                                if (option.value === currentProdiVal) {
                                    matched = true;
                                }
                            }
                        });

                        if (matched) {
                            prodiSelect.value = currentProdiVal;
                        }
                    }

                    fakultasSelect.addEventListener('change', filterProdiOptions);
                    if (fakultasSelect.value) {
                        filterProdiOptions();
                    }
                }

                @if ($statSubTab == 'fakultas')
                    @if ($innerTab == 'grafik')
                        const ctxTahun = document.getElementById('chartTahunWisudaPub')?.getContext('2d');
                        if (ctxTahun) {
                            new Chart(ctxTahun, {
                                type: 'line',
                                data: {
                                    labels: {!! json_encode($chartTahunLabels) !!},
                                    datasets: [{
                                        label: 'Jumlah Wisudawan',
                                        data: {!! json_encode($chartTahunData) !!},
                                        borderColor: '#6366f1',
                                        backgroundColor: 'rgba(99, 102, 241, 0.15)',
                                        fill: true,
                                        tension: 0.35,
                                        borderWidth: 3,
                                        pointRadius: 5,
                                        pointBackgroundColor: '#6366f1'
                                    }]
                                },
                                options: { 
                                    responsive: true, 
                                    maintainAspectRatio: false, 
                                    scales: { 
                                        y: { beginAtZero: true, grid: { color: '#1e293b' } }, 
                                        x: { grid: { display: false } } 
                                    } 
                                }
                            });
                        }

                        const ctxJalur = document.getElementById('chartJalurPub')?.getContext('2d');
                        if (ctxJalur) {
                            new Chart(ctxJalur, {
                                type: 'bar',
                                data: {
                                    labels: {!! json_encode($chartJalurLabels) !!},
                                    datasets: [
                                        { label: 'Pendaftar', data: {!! json_encode($chartJalurPendaftar) !!}, backgroundColor: '#3b82f6', borderRadius: 4 },
                                        { label: 'Diterima', data: {!! json_encode($chartJalurDiterima) !!}, backgroundColor: '#6366f1', borderRadius: 4 },
                                        { label: 'Registrasi', data: {!! json_encode($chartJalurRegistrasi) !!}, backgroundColor: '#10b981', borderRadius: 4 }
                                    ]
                                },
                                options: { 
                                    responsive: true, 
                                    maintainAspectRatio: false, 
                                    scales: { 
                                        y: { beginAtZero: true, grid: { color: '#1e293b' } }, 
                                        x: { grid: { display: false } } 
                                    } 
                                }
                            });
                        }
                    @elseif ($innerTab == 'pie')
                        const ctxPie = document.getElementById('chartPiePredikatPub')?.getContext('2d');
                        if (ctxPie) {
                            new Chart(ctxPie, {
                                type: 'doughnut',
                                data: {
                                    labels: ['Pujian', 'Sangat Memuaskan', 'Memuaskan'],
                                    datasets: [{
                                        data: [{{ $cumLaudeCount }}, {{ $sangatMemuaskanCount }}, {{ $memuaskanCount }}],
                                        backgroundColor: ['#f59e0b', '#6366f1', '#64748b'],
                                        borderWidth: 0
                                    }]
                                },
                                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } }, cutout: '65%' }
                            });
                        }

                        const ctxGender = document.getElementById('chartGenderPub')?.getContext('2d');
                        if (ctxGender) {
                            new Chart(ctxGender, {
                                type: 'doughnut',
                                data: {
                                    labels: ['Laki-laki', 'Perempuan'],
                                    datasets: [{
                                        data: [{{ $lakiCount }}, {{ $perempuanCount }}],
                                        backgroundColor: ['#3b82f6', '#ec4899'],
                                        borderWidth: 0
                                    }]
                                },
                                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } }, cutout: '65%' }
                            });
                        }
                    @endif

                @elseif ($statSubTab == 'ringkasan')
                    const ctxAnimo = document.getElementById('chartAnimoTahunanPub')?.getContext('2d');
                    if (ctxAnimo) {
                        const tahunData = {!! json_encode(array_column($tahunanUniver, 'tahun')) !!};
                        const animoData = {!! json_encode(array_column($tahunanUniver, 'animo')) !!};
                        const dayaData = {!! json_encode(array_column($tahunanUniver, 'daya_tampung')) !!};
                        const mhsBaruData = {!! json_encode(array_column($tahunanUniver, 'mhs_baru')) !!};

                        const sortedIndices = tahunData.map((_, i) => i).sort((a, b) => tahunData[a] - tahunData[b]);
                        const sortedTahun = sortedIndices.map(i => tahunData[i]);
                        const sortedAnimo = sortedIndices.map(i => animoData[i]);
                        const sortedDaya = sortedIndices.map(i => dayaData[i]);
                        const sortedMhsBaru = sortedIndices.map(i => mhsBaruData[i]);

                        new Chart(ctxAnimo, {
                            type: 'line',
                            data: {
                                labels: sortedTahun,
                                datasets: [
                                    {
                                        label: 'Animo Pendaftar',
                                        data: sortedAnimo,
                                        borderColor: '#6366f1',
                                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
                                        fill: true,
                                        tension: 0.3,
                                        pointRadius: 5,
                                        pointBackgroundColor: '#6366f1'
                                    },
                                    {
                                        label: 'Daya Tampung',
                                        data: sortedDaya,
                                        borderColor: '#f59e0b',
                                        borderDash: [5, 5],
                                        tension: 0.3,
                                        pointRadius: 5,
                                        pointBackgroundColor: '#f59e0b'
                                    },
                                    {
                                        label: 'Mahasiswa Baru',
                                        data: sortedMhsBaru,
                                        borderColor: '#10b981',
                                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                        fill: true,
                                        tension: 0.3,
                                        pointRadius: 5,
                                        pointBackgroundColor: '#10b981'
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: { 
                                    y: { beginAtZero: true, grid: { color: '#1e293b' } }, 
                                    x: { grid: { display: false } } 
                                }
                            }
                        });
                    }

                    const ctxStatus = document.getElementById('chartStatusTahunanPub')?.getContext('2d');
                    if (ctxStatus) {
                        const tahunData = {!! json_encode(array_column($tahunanUniver, 'tahun')) !!};
                        const aktifData = {!! json_encode(array_column($tahunanUniver, 'mhs_aktif')) !!};
                        const nonaktifData = {!! json_encode(array_column($tahunanUniver, 'nonaktif')) !!};
                        const wisudaData = {!! json_encode(array_column($tahunanUniver, 'wisuda')) !!};

                        const sortedIndices = tahunData.map((_, i) => i).sort((a, b) => tahunData[a] - tahunData[b]);
                        const sortedTahun = sortedIndices.map(i => tahunData[i]);
                        const sortedAktif = sortedIndices.map(i => aktifData[i]);
                        const sortedNonaktif = sortedIndices.map(i => nonaktifData[i]);
                        const sortedWisuda = sortedIndices.map(i => wisudaData[i]);

                        new Chart(ctxStatus, {
                            type: 'bar',
                            data: {
                                labels: sortedTahun,
                                datasets: [
                                    { label: 'Mhs Aktif', data: sortedAktif, backgroundColor: '#10b981', borderRadius: 4 },
                                    { label: 'Mhs Nonaktif', data: sortedNonaktif, backgroundColor: '#ef4444', borderRadius: 4 },
                                    { label: 'Wisudawan', data: sortedWisuda, backgroundColor: '#6366f1', borderRadius: 4 }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: { 
                                    y: { beginAtZero: true, grid: { color: '#1e293b' } }, 
                                    x: { grid: { display: false } } 
                                }
                            }
                        });
                    }

                @elseif ($statSubTab == 'retensi')
                    const ctxRetensi = document.getElementById('chartRetensiPub')?.getContext('2d');
                    if (ctxRetensi) {
                        new Chart(ctxRetensi, {
                            type: 'line',
                            data: {
                                labels: {!! json_encode($retensiStat['years']) !!},
                                datasets: [
                                    { label: 'Tingkat Retensi (%)', data: {!! json_encode($retensiStat['retention_trend']) !!}, borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true, tension: 0.3, pointRadius: 5 },
                                    { label: 'Kelulusan Tepat Waktu (%)', data: {!! json_encode($retensiStat['graduation_trend']) !!}, borderColor: '#6366f1', tension: 0.3, pointRadius: 5 },
                                    { label: 'Tingkat Drop-Out (%)', data: {!! json_encode($retensiStat['dropout_trend']) !!}, borderColor: '#ef4444', tension: 0.3, pointRadius: 5 }
                                ]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: { y: { beginAtZero: true, max: 100, grid: { color: '#1e293b' } }, x: { grid: { display: false } } }
                            }
                        });
                    }

                    const ctxPredikat = document.getElementById('chartPredikatPub')?.getContext('2d');
                    if (ctxPredikat) {
                        new Chart(ctxPredikat, {
                            type: 'doughnut',
                            data: {
                                labels: ['Pujian', 'Sangat Memuaskan', 'Memuaskan'],
                                datasets: [{
                                    data: [{{ $cumLaudeCount }}, {{ $sangatMemuaskanCount }}, {{ $memuaskanCount }}],
                                    backgroundColor: ['#f59e0b', '#6366f1', '#64748b'],
                                    borderWidth: 0
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } },
                                cutout: '65%'
                            }
                        });
                    }
                @endif
            });
        </script>
    @endif

</div>
@endsection