@extends('layouts.app')

@section('title', 'Statistik Grafis & Analitik Universitas')

@section('content')
<div class="row">
    <!-- Header Toolbar -->
    <div class="col-12 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            <img src="{{ asset('assets/images/uncen.ico') }}" alt="Logo UNCEN" style="width: 48px; height: 48px; object-fit: contain;">
            <div>
                <h3 class="font-bold text-dark m-0">Data Statistik Universitas Cenderawasih</h3>
                <p class="text-muted small m-0">Pangkalan Data Terpadu Akademik, Fakultas, Program Studi & Retensi Mahasiswa</p>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3 shadow-sm" onclick="window.location.reload()">
                <i class="fas fa-sync-alt me-1"></i> Refresh Data
            </button>
        </div>
    </div>

    <!-- Filter Card Berdasarkan Hierarki: Universitas -> Fakultas -> Program Studi (Jenjang) -->
    <div class="col-12 mb-4">
        <div class="card card-custom bg-white p-4 shadow-sm border-0">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="font-bold text-dark m-0"><i class="fas fa-filter text-primary me-2"></i> Filter Analisis Statistik</h6>
                @if ($selectedProdi)
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1 font-bold">
                        <i class="fas fa-check-circle me-1"></i> Prodi: {{ $selectedProdi->nama_prodi }} ({{ $selectedProdi->jenjang }}) - {{ $selectedProdi->fakultas->nama_fakultas ?? '' }}
                        @if ($filter_tahun) <span class="badge bg-primary text-white ms-1">Tahun {{ $filter_tahun }}</span> @endif
                    </span>
                @elseif ($selectedFakultas)
                    <span class="badge bg-info-subtle text-info border border-info-subtle px-3 py-1 font-bold">
                        <i class="fas fa-university me-1"></i> Fakultas: {{ $selectedFakultas->nama_fakultas }} ({{ $selectedFakultas->kode_fakultas }})
                        @if ($filter_tahun) <span class="badge bg-info text-white ms-1">Tahun {{ $filter_tahun }}</span> @endif
                    </span>
                @else
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 font-bold">
                        <i class="fas fa-globe me-1"></i> Cakupan: Seluruh Universitas Cenderawasih
                        @if ($filter_tahun) <span class="badge bg-success text-white ms-1">Tahun {{ $filter_tahun }}</span> @endif
                    </span>
                @endif
            </div>

            <form method="GET" action="{{ route('statistik.index') }}" class="row g-3 align-items-end">
                <input type="hidden" name="subtab" value="{{ $activeSubTab }}">
                <input type="hidden" name="inner_tab" value="{{ $innerTab }}">

                <div class="col-md-3">
                    <label class="form-label small font-bold text-uppercase text-muted">Filter Fakultas</label>
                    <select name="kode_fakultas" id="filterFakultasDashboard" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Fakultas --</option>
                        @foreach ($fakultasList as $f)
                            <option value="{{ $f->kode_fakultas }}" {{ $kode_fakultas == $f->kode_fakultas ? 'selected' : '' }}>
                                {{ $f->nama_fakultas }} ({{ $f->kode_fakultas }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label small font-bold text-uppercase text-muted">Filter Program Studi</label>
                    <select name="kode_prodi" id="filterProdiDashboard" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Program Studi --</option>
                        @foreach ($prodiList as $p)
                            <option value="{{ $p->kode_prodi }}" data-fakultas="{{ $p->kode_fakultas }}" {{ $kode_prodi == $p->kode_prodi ? 'selected' : '' }}>
                                {{ $p->nama_prodi }} ({{ $p->jenjang }}) - {{ $p->fakultas->nama_fakultas ?? $p->kode_fakultas }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label small font-bold text-uppercase text-muted">Filter Tahun</label>
                    <select name="filter_tahun" class="form-select form-select-sm rounded-3">
                        <option value="">-- Semua Tahun --</option>
                        @foreach ($availableYears as $yrOpt)
                            <option value="{{ $yrOpt }}" {{ ($filter_tahun ?? '') == $yrOpt ? 'selected' : '' }}>
                                {{ $yrOpt }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm rounded-3 w-100 font-bold">
                        <i class="fas fa-search me-1"></i> Terapkan Filter
                    </button>
                    <a href="{{ route('statistik.index', ['subtab' => $activeSubTab]) }}" class="btn btn-outline-secondary btn-sm rounded-3" title="Reset Filter">
                        <i class="fas fa-undo"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Kemdikbud Tracer Study Visual Analytics Section -->
    <div class="col-12 mb-4">
        <x-tracer-charts :data="$tracerStatistikData" title="Visualisasi Tracer Study Kemdikbud (IKU 1 & Masa Tunggu Kerja)" />
    </div>

    <!-- Sub-Navigation Tabs matching contoh/univer/*.php (First Tab is Fakultas & Prodi) -->

    <div class="col-12 mb-4">
        <ul class="nav nav-pills nav-fill bg-white p-2 rounded-4 shadow-sm">
            <li class="nav-item">
                <a class="nav-link rounded-3 font-bold {{ $activeSubTab == 'fakultas' ? 'active bg-primary shadow-sm' : 'text-dark' }}" 
                   href="{{ route('statistik.index', array_merge(request()->query(), ['subtab' => 'fakultas'])) }}">
                    <i class="fas fa-university me-2"></i> Analisis Statistik
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-3 font-bold {{ $activeSubTab == 'ringkasan' ? 'active bg-primary shadow-sm' : 'text-dark' }}" 
                   href="{{ route('statistik.index', array_merge(request()->query(), ['subtab' => 'ringkasan'])) }}">
                    <i class="fas fa-chart-line me-2"></i> Ringkasan & Tren Tahunan
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link rounded-3 font-bold {{ $activeSubTab == 'retensi' ? 'active bg-primary shadow-sm' : 'text-dark' }}" 
                   href="{{ route('statistik.index', array_merge(request()->query(), ['subtab' => 'retensi'])) }}">
                    <i class="fas fa-user-graduate me-2"></i> Evaluasi & Retensi Mahasiswa
                </a>
            </li>
        </ul>
    </div>

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

        <!-- 4 Top KPI Cards Terfilter -->
        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-primary border-4 shadow-sm">
                <span class="text-muted text-uppercase small font-bold">Total Alumni Wisudawan</span>
                <h2 class="font-bold text-primary mt-2">{{ number_format($totalWisudawan) }}</h2>
                <small class="text-muted">Rata-rata IPK: <strong class="text-success">{{ $rataIpk }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-success border-4 shadow-sm">
                <span class="text-muted text-uppercase small font-bold">Penerimaan & Pendaftar</span>
                <h2 class="font-bold text-success mt-2">{{ number_format($totalPendaftar) }}</h2>
                <small class="text-muted">Diterima: <strong class="text-primary">{{ number_format($totalDiterima) }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-warning border-4 shadow-sm">
                <span class="text-muted text-uppercase small font-bold">Status Mahasiswa</span>
                <h2 class="font-bold text-warning mt-2">{{ number_format($totalAktif) }}</h2>
                <small class="text-muted">Lulus: <strong class="text-success">{{ number_format($totalLulus) }}</strong> | Cuti: <strong>{{ number_format($totalCuti) }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-info border-4 shadow-sm">
                <span class="text-muted text-uppercase small font-bold">Cakupan Analisis</span>
                <h2 class="font-bold text-info mt-2">
                    @if ($selectedProdi)
                        1 Program Studi
                    @elseif ($selectedFakultas)
                        1 Fakultas
                    @else
                        {{ $totalFakultasCount }} Fak / {{ $totalProdiCount }} Prodi
                    @endif
                </h2>
                <small class="text-muted truncate d-block">{{ $visualTitleFilter }}</small>
            </div>
        </div>

        <!-- 4 INNER SUB-TABS SESUAI contoh/univer/index.php -->
        <div class="col-12 mb-4">
            <div class="card card-custom bg-white p-3 shadow-sm border-0">
                <ul class="nav nav-tabs nav-fill font-bold">
                    <li class="nav-item">
                        <a class="nav-link {{ $innerTab == 'timeseries' ? 'active text-primary border-primary border-bottom-0' : 'text-muted' }}" 
                           href="{{ route('statistik.index', array_merge(request()->query(), ['inner_tab' => 'timeseries'])) }}">
                            <i class="fas fa-table me-2"></i>Analisis Data
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $innerTab == 'grafik' ? 'active text-primary border-primary border-bottom-0' : 'text-muted' }}" 
                           href="{{ route('statistik.index', array_merge(request()->query(), ['inner_tab' => 'grafik'])) }}">
                            <i class="fas fa-chart-bar me-2"></i>Grafik Statistik
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $innerTab == 'pie' ? 'active text-primary border-primary border-bottom-0' : 'text-muted' }}" 
                           href="{{ route('statistik.index', array_merge(request()->query(), ['inner_tab' => 'pie'])) }}">
                            <i class="fas fa-chart-pie me-2"></i>Grafik Pie / Proporsi
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $innerTab == 'deep_analysis' ? 'active text-primary border-primary border-bottom-0' : 'text-muted' }}" 
                           href="{{ route('statistik.index', array_merge(request()->query(), ['inner_tab' => 'deep_analysis'])) }}">
                            <i class="fas fa-microscope me-2"></i>Analisis Mendalam
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 1. INNER TAB: TABEL TIME SERIES -->
        @if ($innerTab == 'timeseries')
            <!-- Kartu Fakultas & Program Studi (Mengadopsi faculty-menu contoh/univer/index.php) -->
            <div class="col-12 mb-4">
                <h5 class="font-bold text-dark mb-3"><i class="fas fa-layer-group text-primary me-2"></i> Kartu Informasi Fakultas & Program Studi (Jenjang)</h5>
                <div class="row g-4">
                    @foreach ($fakultasStat as $f)
                        <div class="col-md-6 col-lg-4">
                            <div class="card card-custom bg-white p-4 h-100 border-top border-4 {{ $kode_fakultas == $f['kode'] ? 'border-success shadow' : 'border-primary' }}">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <span class="badge bg-primary-subtle text-primary font-mono font-bold">{{ $f['kode'] }}</span>
                                        <h5 class="font-bold text-dark mt-2 mb-1">{{ $f['nama'] }}</h5>
                                    </div>
                                    <span class="badge {{ $f['status'] == 'aktif' ? 'bg-success' : 'bg-secondary' }}">{{ ucfirst($f['status']) }}</span>
                                </div>
                                <p class="text-muted small mb-3"><i class="fas fa-user-tie me-1"></i> Dekan: {{ $f['dekan'] }}</p>
                                
                                <div class="p-3 bg-light rounded-3 d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <small class="text-muted d-block">Jumlah Prodi</small>
                                        <strong class="text-dark fs-5">{{ $f['prodi_count'] }} Prodi</strong>
                                    </div>
                                    <div class="text-end">
                                        <small class="text-muted d-block">Total Alumni</small>
                                        <strong class="text-primary fs-5">{{ number_format($f['wisudawan_count']) }} Wisudawan</strong>
                                    </div>
                                </div>

                                <div class="mt-auto">
                                    <small class="text-muted font-bold d-block mb-1">Daftar Program Studi (Jenjang):</small>
                                    <div class="d-flex flex-wrap gap-1">
                                        @foreach ($f['prodi_list'] as $pro)
                                            <a href="{{ route('statistik.index', ['subtab' => 'fakultas', 'inner_tab' => 'timeseries', 'kode_fakultas' => $f['kode'], 'kode_prodi' => $pro->kode_prodi]) }}" 
                                               class="badge {{ $kode_prodi == $pro->kode_prodi ? 'bg-primary text-white shadow-sm' : 'bg-white text-dark border' }} text-decoration-none small py-1 px-2" 
                                               title="Klik untuk filter data prodi ini">
                                                {{ $pro->nama_prodi }} ({{ $pro->jenjang }})
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Tabel Komprehensif Data Fakultas & Program Studi -->
            <div class="col-12 mb-4">
                <div class="card card-custom bg-white p-4">
                    <h5 class="font-bold text-dark mb-3"><i class="fas fa-table text-primary me-2"></i> Tabel Rekapitulasi Data Program Studi & Jumlah Lulusan</h5>
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle">
                            <thead class="table-dark text-center">
                                <tr class="small text-uppercase">
                                    <th width="5%">No</th>
                                    <th>Fakultas</th>
                                    <th>Kode</th>
                                    <th>Nama Program Studi</th>
                                    <th width="10%">Jenjang</th>
                                    <th width="12%">Akreditasi</th>
                                    <th width="15%">Total Wisudawan</th>
                                    <th width="10%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $no = 1; @endphp
                                @foreach ($fakultasStat as $f)
                                    @foreach ($f['prodi_list'] as $p)
                                        <tr class="{{ $kode_prodi == $p->kode_prodi ? 'table-primary font-bold' : '' }}">
                                            <td class="text-center">{{ $no++ }}</td>
                                            <td>{{ $f['nama'] }}</td>
                                            <td class="font-mono text-center">{{ $p->kode_prodi }}</td>
                                            <td class="font-bold text-dark">{{ $p->nama_prodi }} ({{ $p->jenjang }})</td>
                                            <td class="text-center"><span class="badge bg-secondary">{{ $p->jenjang }}</span></td>
                                            <td class="text-center"><span class="badge bg-success-subtle text-success border">{{ $p->akreditasi ?? 'Aktif' }}</span></td>
                                            <td class="text-center font-bold text-primary">{{ number_format($p->wisudawan_count ?? $p->wisudawan->count()) }} Alumni</td>
                                            <td class="text-center">
                                                <a href="{{ route('statistik.index', ['subtab' => 'fakultas', 'inner_tab' => 'timeseries', 'kode_prodi' => $p->kode_prodi]) }}" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                                                    <i class="fas fa-chart-pie me-1"></i> Analisis
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        <!-- 2. INNER TAB: GRAFIK STATISTIK (contoh/univer/index.php) -->
        @elseif ($innerTab == 'grafik')
            <div class="col-lg-7 mb-4">
                <div class="card card-custom bg-white p-4">
                    <h5 class="font-bold text-dark mb-3">
                        <i class="fas fa-chart-line text-primary me-2"></i> 
                        Tren Kelulusan Wisudawan Tahun Angkatan - {{ $visualTitleFilter }}
                    </h5>
                    <div style="height: 340px; position: relative;">
                        <canvas id="chartTahunWisuda"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 mb-4">
                <div class="card card-custom bg-white p-4">
                    <h5 class="font-bold text-dark mb-3">
                        <i class="fas fa-chart-bar text-success me-2"></i> 
                        Penerimaan per Jalur Masuk - {{ $visualTitleFilter }}
                    </h5>
                    <div style="height: 340px; position: relative;">
                        <canvas id="chartJalurPenerimaan"></canvas>
                    </div>
                </div>
            </div>

        <!-- 3. INNER TAB: GRAFIK PIE / PROPORSI (contoh/univer/index.php) -->
        @elseif ($innerTab == 'pie')
            <div class="col-lg-6 mb-4">
                <div class="card card-custom bg-white p-4">
                    <h5 class="font-bold text-dark mb-3"><i class="fas fa-medal text-warning me-2"></i> Sebaran Predikat Kelulusan - {{ $visualTitleFilter }}</h5>
                    <div style="height: 280px; position: relative;">
                        <canvas id="chartPiePredikat"></canvas>
                    </div>
                    <div class="mt-3 small d-flex justify-content-around text-center border-top pt-2">
                        <div><span class="d-block font-bold text-warning fs-5">{{ $cumLaudeCount }}</span><span class="text-muted">Pujian</span></div>
                        <div><span class="d-block font-bold text-primary fs-5">{{ $sangatMemuaskanCount }}</span><span class="text-muted">Sgt Memuaskan</span></div>
                        <div><span class="d-block font-bold text-secondary fs-5">{{ $memuaskanCount }}</span><span class="text-muted">Memuaskan</span></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card card-custom bg-white p-4">
                    <h5 class="font-bold text-dark mb-3"><i class="fas fa-venus-mars text-primary me-2"></i> Rasio Gender Wisudawan - {{ $visualTitleFilter }}</h5>
                    <div style="height: 280px; position: relative;">
                        <canvas id="chartGender"></canvas>
                    </div>
                    <div class="mt-3 small d-flex justify-content-around text-center border-top pt-2">
                        <div><span class="d-block font-bold text-primary fs-5">{{ $lakiCount }} ({{ $persenLaki }}%)</span><span class="text-muted">Laki-laki</span></div>
                        <div><span class="d-block font-bold text-danger fs-5">{{ $perempuanCount }} ({{ $persenPerempuan }}%)</span><span class="text-muted">Perempuan</span></div>
                    </div>
                </div>
            </div>

        <!-- 4. INNER TAB: DEEP ANALYSIS (contoh/univer/index.php) -->
        @elseif ($innerTab == 'deep_analysis')
            <div class="col-12 mb-4">
                <div class="card card-custom bg-white p-4 border-top border-4 border-primary">
                    <h4 class="font-bold text-dark mb-3"><i class="fas fa-microscope text-primary me-2"></i> Analisis Mendalam (Deep Analysis) — {{ $visualTitleFilter }}</h4>
                    <p class="text-muted">Evaluasi komprehensif performa akademik, rasio efisiensi kapasitas, dan tingkat ketahanan mahasiswa.</p>
                    
                    <div class="row g-4 my-2">
                        <div class="col-md-4">
                            <div class="p-4 rounded-4 bg-light text-center border">
                                <span class="text-muted small text-uppercase font-bold">Rasio Keketatan Seleksi</span>
                                <h2 class="font-bold text-primary mt-2">{{ $deepAnalysis['rasio_keketatan'] }}%</h2>
                                <small class="text-muted">Persentase peserta diterima dari total pendaftar</small>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="p-4 rounded-4 bg-light text-center border">
                                <span class="text-muted small text-uppercase font-bold">Rasio Konversi Registrasi</span>
                                <h2 class="font-bold text-success mt-2">{{ $deepAnalysis['rasio_registrasi'] }}%</h2>
                                <small class="text-muted">Persentase pendaftar diterima yang melakukan registrasi ulang</small>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="p-4 rounded-4 bg-light text-center border">
                                <span class="text-muted small text-uppercase font-bold">Efisiensi Daya Tampung</span>
                                <h2 class="font-bold text-warning mt-2">{{ $deepAnalysis['efisiensi_daya_tampung'] }}%</h2>
                                <small class="text-muted">Kapasitas kuota terisi oleh mahasiswa baru</small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-4 rounded-4 bg-light text-center border">
                                <span class="text-muted small text-uppercase font-bold">Rasio Kelulusan terhadap Mahasiswa Aktif</span>
                                <h2 class="font-bold text-info mt-2">{{ $deepAnalysis['rasio_lulus_aktif'] }}%</h2>
                                <small class="text-muted">Persentase alumni wisuda per semester dibandingkan mahasiswa aktif</small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-4 rounded-4 bg-light text-center border">
                                <span class="text-muted small text-uppercase font-bold">Rasio Mahasiswa Non-Aktif / Risiko Drop-Out</span>
                                <h2 class="font-bold text-danger mt-2">{{ $deepAnalysis['rasio_nonaktif'] }}%</h2>
                                <small class="text-muted">Proporsi mahasiswa berstatus cuti / non-aktif terhadap total populasi</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    @elseif ($activeSubTab == 'ringkasan')
        <!-- ========================================================================= -->
        <!-- SUB-TAB 2: RINGKASAN & TREN TAHUNAN (Replicating univer_1.php)            -->
        <!-- ========================================================================= -->

        <!-- 4 Top KPI Cards Terfilter -->
        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-primary border-4">
                <span class="text-muted text-uppercase small font-bold">Total Alumni Wisudawan</span>
                <h2 class="font-bold text-primary mt-2">{{ number_format($totalWisudawan) }}</h2>
                <small class="text-muted">Rata-rata IPK: <strong class="text-success">{{ $rataIpk }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-success border-4">
                <span class="text-muted text-uppercase small font-bold">Penerimaan & Pendaftar</span>
                <h2 class="font-bold text-success mt-2">{{ number_format($totalPendaftar) }}</h2>
                <small class="text-muted">Registrasi: <strong class="text-success">{{ number_format($totalRegistrasi) }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-warning border-4">
                <span class="text-muted text-uppercase small font-bold">Mahasiswa Aktif </span>
                <h2 class="font-bold text-warning mt-2">{{ number_format($totalAktif) }}</h2>
                <small class="text-muted">Nonaktif: <strong class="text-danger">{{ number_format($totalNonaktif) }}</strong></small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-info border-4">
                <span class="text-muted text-uppercase small font-bold">Cakupan Tren</span>
                <h2 class="font-bold text-info mt-2">
                    @if ($selectedProdi)
                        1 Prodi
                    @elseif ($selectedFakultas)
                        1 Fak
                    @else
                        Universitas
                    @endif
                </h2>
                <small class="text-muted truncate d-block">{{ $visualTitleFilter }}</small>
            </div>
        </div>

        <!-- Chart Tren Animo vs Daya Tampung vs Mhs Baru -->
        <div class="col-lg-7 mb-4">
            <div class="card card-custom p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h5 class="font-bold text-white mb-1">
                            <i class="fas fa-chart-line text-primary me-2"></i> 
                            Tren Animo Pendaftar vs Daya Tampung vs Mahasiswa Baru
                        </h5>
                        <p class="text-muted small m-0">Data historis multi-tahun - {{ $visualTitleFilter }}</p>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border px-3 py-1 font-bold">
                        {{ count($tahunanUniver) }} Tahun
                    </span>
                </div>
                <div style="height: 320px; position: relative;">
                    <canvas id="chartAnimoTahunanPub"></canvas>
                </div>
            </div>
        </div>

        <!-- Chart Status Mahasiswa Tahunan -->
        <div class="col-lg-5 mb-4">
            <div class="card card-custom p-4">
                <h5 class="font-bold text-white mb-3">
                    <i class="fas fa-users text-info me-2"></i> 
                    Status Mahasiswa per Tahun (Aktif, Nonaktif, Wisuda)
                </h5>
                <div style="height: 320px; position: relative;">
                    <canvas id="chartStatusTahunanPub"></canvas>
                </div>
            </div>
        </div>

        <!-- Tabel Komparasi Historis Tahunan Terfilter -->
        <div class="col-12 mb-4">
            <div class="card card-custom bg-white p-4">
                <h5 class="font-bold text-dark mb-3">
                    <i class="fas fa-table text-success me-2"></i> 
                    Rekapitulasi Data Historis Akademik Tahunan Terfilter 
                    <span class="badge bg-success-subtle text-success ms-2">{{ $visualTitleFilter }}</span>
                </h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle text-center">
                        <thead class="table-dark">
                            <tr class="small text-uppercase">
                                <th>Tahun Angk</th>
                                <th class="text-primary-emphasis bg-primary-subtle">Animo Pendaftar</th>
                                <th class="text-secondary bg-light">Daya Tampung</th>
                                <th class="text-info bg-info-subtle">Hasil Seleksi</th>
                                <th class="text-success bg-success-subtle">Mhs Baru</th>
                                <th class="text-success font-bold">Mhs Aktif</th>
                                <th class="text-warning">Mhs Cuti</th>
                                <th class="text-danger">Mhs Nonaktif</th>
                                <th class="text-primary font-bold">Wisudawan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($tahunanUniver as $th)
                                <tr>
                                    <td class="font-bold font-mono">{{ $th['tahun'] }}</td>
                                    <td class="font-bold text-primary">{{ number_format($th['animo']) }}</td>
                                    <td>{{ number_format($th['daya_tampung']) }}</td>
                                    <td>{{ number_format($th['hasil']) }}</td>
                                    <td class="font-bold text-success">{{ number_format($th['mhs_baru']) }}</td>
                                    <td class="font-bold text-success">{{ number_format($th['mhs_aktif']) }}</td>
                                    <td class="text-warning font-semibold">{{ number_format($th['cuti']) }}</td>
                                    <td class="text-danger font-semibold">{{ number_format($th['nonaktif']) }}</td>
                                    <td class="font-bold text-primary">{{ number_format($th['wisuda']) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4 text-muted">
                                        Tidak ada data historis untuk filter yang dipilih.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    @elseif ($activeSubTab == 'retensi')
        <!-- ========================================================================= -->
        <!-- SUB-TAB 3: EVALUASI & RETENSI MAHASISWA TERFILTER (contoh/univer/univer_2) -->
        <!-- ========================================================================= -->

        <!-- 4 Retention KPI Summary Cards Terfilter -->
        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-success border-4">
                <span class="text-muted text-uppercase small font-bold">Rata-rata Tingkat Retensi</span>
                <h2 class="font-bold text-success mt-2">{{ $retensiStat['avg_retention_rate'] }}%</h2>
                <small class="text-muted">Mahasiswa Melanjutkan Studi</small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-primary border-4">
                <span class="text-muted text-uppercase small font-bold">Kelulusan Tepat Waktu</span>
                <h2 class="font-bold text-primary mt-2">{{ $retensiStat['avg_graduation_on_time'] }}%</h2>
                <small class="text-muted">Lulus &le; 4 Tahun (S1)</small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-warning border-4">
                <span class="text-muted text-uppercase small font-bold">Tingkat Selektivitas</span>
                <h2 class="font-bold text-warning mt-2">{{ $avg_selectivity ?? 0 }}%</h2>
                <small class="text-muted">Keketatan Penerimaan</small>
            </div>
        </div>

        <div class="col-md-3 mb-4">
            <div class="card card-custom bg-white p-4 border-start border-danger border-4">
                <span class="text-muted text-uppercase small font-bold">Tingkat Drop-Out / Nonaktif</span>
                <h2 class="font-bold text-danger mt-2">{{ $retensiStat['avg_dropout_rate'] }}%</h2>
                <small class="text-muted">Rasio Nonaktif / DO</small>
            </div>
        </div>

        <!-- Chart Evaluasi Retensi Multi-Tahun (univer_2.php) -->
        <div class="col-lg-8 mb-4">
            <div class="card card-custom bg-white p-4">
                <h5 class="font-bold text-dark mb-3">
                    <i class="fas fa-chart-line text-primary me-2"></i> 
                    Tren Indikator Retensi, Kelulusan & Drop-Out (2020 - {{ !empty($availableYears) ? max($availableYears) : date('Y') }})
                    <span class="badge bg-primary-subtle text-primary ms-2">{{ $visualTitleFilter }}</span>
                </h5>
                <div style="height: 320px; position: relative;">
                    <canvas id="chartRetensiTrend"></canvas>
                </div>
            </div>
        </div>

        <!-- Predikat & Gender Breakdown -->
        <div class="col-lg-4 mb-4">
            <div class="card card-custom bg-white p-4">
                <h5 class="font-bold text-dark mb-3"><i class="fas fa-medal text-warning me-2"></i> Sebaran Predikat Kelulusan</h5>
                <div style="height: 220px; position: relative;">
                    <canvas id="chartPiePredikat"></canvas>
                </div>
                <div class="mt-3 small d-flex justify-content-around text-center border-top pt-2">
                    <div><span class="d-block font-bold text-warning">{{ $cumLaudeCount }}</span><span class="text-muted">Pujian</span></div>
                    <div><span class="d-block font-bold text-primary">{{ $sangatMemuaskanCount }}</span><span class="text-muted">Sgt Memuaskan</span></div>
                    <div><span class="d-block font-bold text-secondary">{{ $memuaskanCount }}</span><span class="text-muted">Memuaskan</span></div>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chart.js Dark Mode Defaults
    if (typeof Chart !== 'undefined') {
        Chart.defaults.color = '#94a3b8';
        Chart.defaults.borderColor = '#1e293b';
    }

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

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

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

            // Clear current options except the first placeholder
            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 ($activeSubTab == 'fakultas')
        @if ($innerTab == 'grafik')
            // Chart Tahun Wisuda
            const ctxTahun = document.getElementById('chartTahunWisuda')?.getContext('2d');
            if (ctxTahun) {
                new Chart(ctxTahun, {
                    type: 'line',
                    data: {
                        labels: {!! json_encode($chartTahunLabels) !!},
                        datasets: [{
                            label: 'Jumlah Wisudawan',
                            data: {!! json_encode($chartTahunData) !!},
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.15)',
                            fill: true,
                            tension: 0.35,
                            borderWidth: 3
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
                });
            }

            // Chart Jalur Penerimaan
            const ctxJalur = document.getElementById('chartJalurPenerimaan')?.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 } } }
                });
            }
        @elseif ($innerTab == 'pie')
            // Chart Pie Predikat
            const ctxPie = document.getElementById('chartPiePredikat')?.getContext('2d');
            if (ctxPie) {
                new Chart(ctxPie, {
                    type: 'doughnut',
                    data: {
                        labels: ['Pujian', 'Sangat Memuaskan', 'Memuaskan'],
                        datasets: [{
                            data: [{{ $cumLaudeCount }}, {{ $sangatMemuaskanCount }}, {{ $memuaskanCount }}],
                            backgroundColor: ['#f59e0b', '#3b82f6', '#94a3b8'],
                            borderWidth: 2
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
                });
            }

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

    @elseif ($activeSubTab == 'ringkasan')
        // 1. Chart Animo Tahunan - DATA MURNI DARI DATABASE
        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: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            fill: true,
                            tension: 0.3,
                            pointRadius: 5,
                            pointBackgroundColor: '#3b82f6'
                        },
                        {
                            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,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        }
                    },
                    scales: {
                        y: { 
                            beginAtZero: true,
                            grid: { color: 'rgba(255,255,255,0.08)' },
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000) {
                                        return (value / 1000) + 'k';
                                    }
                                    return value;
                                }
                            }
                        },
                        x: { 
                            grid: { display: false },
                            ticks: {
                                autoSkip: false,
                                maxRotation: 0,
                                font: { weight: 'bold' }
                            }
                        }
                    }
                }
            });
        }

        // 2. Chart Status Mahasiswa
        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: '#3b82f6',
                            borderRadius: 4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        }
                    },
                    scales: {
                        y: { 
                            beginAtZero: true,
                            grid: { color: 'rgba(255,255,255,0.08)' },
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000) {
                                        return (value / 1000) + 'k';
                                    }
                                    return value;
                                }
                            }
                        },
                        x: { 
                            grid: { display: false },
                            ticks: {
                                autoSkip: false,
                                maxRotation: 0,
                                font: { weight: 'bold' }
                            }
                        }
                    }
                }
            });
        }

    @elseif ($activeSubTab == 'retensi')
        // Chart Retensi Trend (univer_2.php)
        const ctxRetensi = document.getElementById('chartRetensiTrend')?.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
                        },
                        {
                            label: 'Kelulusan Tepat Waktu (%)',
                            data: {!! json_encode($retensiStat['graduation_trend']) !!},
                            borderColor: '#3b82f6',
                            tension: 0.3
                        },
                        {
                            label: 'Tingkat Drop-Out (%)',
                            data: {!! json_encode($retensiStat['dropout_trend']) !!},
                            borderColor: '#ef4444',
                            tension: 0.3
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true, max: 100 } }
                }
            });
        }

        // Pie Predikat Chart
        const ctxPiePredikat = document.getElementById('chartPiePredikat')?.getContext('2d');
        if (ctxPiePredikat) {
            new Chart(ctxPiePredikat, {
                type: 'doughnut',
                data: {
                    labels: ['Pujian', 'Sangat Memuaskan', 'Memuaskan'],
                    datasets: [{
                        data: [{{ $cumLaudeCount }}, {{ $sangatMemuaskanCount }}, {{ $memuaskanCount }}],
                        backgroundColor: ['#f59e0b', '#3b82f6', '#94a3b8']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } }
                }
            });
        }
    @endif
});
</script>
@endsection