@extends('admin.layout')

@section('title', 'Kesesuaian Bidang Kerja')

@section('page-title', 'Laporan Kesesuaian Bidang Kerja')
@section('page-subtitle', 'Data Jumlah Lulusan Terlacak dengan Tingkat Kesesuaian Bidang Kerja')

@section('content')
    <div class="flex flex-col gap-6 overflow-x-hidden">
        <!-- Filter Card -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5 transition-colors duration-300">
            <form method="GET" action="{{ route('penilaian.bidang-kerja.index') }}"
                class="flex flex-col md:flex-row md:items-end gap-4">
                <div class="w-full md:max-w-xs">
                    <label for="filterprodi" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
                        Filter Program Studi
                    </label>
                    <select name="filterprodi" id="filterprodi"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white transition-all">
                        <option value="">Semua Program Studi</option>
                        @foreach ($prodis as $prodi)
                            <option value="{{ $prodi->KodeID }}" {{ ($selectedProdi == $prodi->KodeID) ? 'selected' : '' }}>
                                {{ $prodi->KodeID }} - {{ $prodi->Nama }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center gap-2 w-full md:w-auto">
                    <button type="submit"
                        class="flex-1 md:flex-none justify-center px-5 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md hover:shadow-lg transition-all flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <path d="m21 21-4.3-4.3" />
                        </svg>
                        Filter
                    </button>
                    @if ($selectedProdi)
                        <a href="{{ route('penilaian.bidang-kerja.index') }}"
                            class="flex-1 md:flex-none text-center px-5 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-all">
                            Reset
                        </a>
                    @endif
                    <a href="{{ route('penilaian.bidang-kerja.export', request()->query()) }}" 
                        class="flex-1 md:flex-none justify-center px-5 py-2.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg shadow-md hover:shadow-lg transition-all flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Excel
                    </a>
                </div>
            </form>
        </div>

        <!-- Table View -->
        <div
            class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-colors duration-300">
            <div class="p-6 border-b border-gray-50 dark:border-gray-700">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white">Statistik Kesesuaian Bidang Kerja</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full border-collapse">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase">
                                Tahun Lulus</th>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase">
                                Jumlah Lulusan</th>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase font-bold">
                                Jumlah Lulusan Terlacak</th>
                            <th rowspan="2"
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tabular-nums font-bold">
                                Persentase</th>
                            <th colspan="3"
                                class="border-b border-gray-200 dark:border-gray-600 px-4 py-3 text-center text-xs font-bold text-gray-600 dark:text-gray-300 uppercase">
                                Tingkat Kesesuaian</th>
                        </tr>
                        <tr>
                            <th
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-red-50 dark:bg-red-900/10 text-red-600 dark:text-red-400">
                                Rendah</th>
                            <th
                                class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-yellow-50 dark:bg-yellow-900/10 text-yellow-600 dark:text-yellow-400">
                                Sedang</th>
                            <th
                                class="border-b border-gray-200 dark:border-gray-600 px-4 py-2 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase bg-green-50 dark:bg-green-900/10 text-green-600 dark:text-green-400">
                                Tinggi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @foreach($years as $row)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
                                <td
                                    class="px-4 py-3 text-sm text-center font-bold text-gray-700 dark:text-white border-r border-gray-100 dark:border-gray-700 whitespace-nowrap">
                                    <span class="text-blue-600 dark:text-blue-400 mr-1">{{ $row['ts'] }}</span>
                                    {{ $row['period'] }}
                                </td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700">
                                    <button 
                                        type="button"
                                        data-year="{{ $row['year'] }}"
                                        data-prodi="{{ $selectedProdi ?? '' }}"
                                        data-type="sia"
                                        data-label="{{ $row['ts'] }} ({{ $row['period'] }})"
                                        onclick="openAlumniModal(this)"
                                        class="px-3 py-1 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-all border border-blue-100 dark:border-blue-900/30">
                                        {{ $row['countSia'] }}
                                    </button>
                                </td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700">
                                    {{ number_format($row['countTerlacak'], 0, ',', '.') }}
                                </td>
                                <td
                                    class="px-4 py-3 text-sm text-center font-bold text-gray-700 dark:text-white border-r border-gray-100 dark:border-gray-700 tabular-nums">
                                    {{ $row['prosentase'] }}%</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700 bg-red-50/30 dark:bg-red-900/5">
                                    {{ $row['rendah'] }}</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 border-r border-gray-100 dark:border-gray-700 bg-yellow-50/30 dark:bg-yellow-900/5">
                                    {{ $row['sedang'] }}</td>
                                <td
                                    class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-300 bg-green-50/30 dark:bg-green-900/5">
                                    {{ $row['tinggi'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-gray-50 dark:bg-gray-700/50 font-bold divide-y divide-gray-200 dark:divide-gray-600">
                        @php
                            $totalSia = array_sum(array_column($years, 'countSia'));
                            $totalTerlacak = array_sum(array_column($years, 'countTerlacak'));
                            $totalRendah = array_sum(array_column($years, 'rendah'));
                            $totalSedang = array_sum(array_column($years, 'sedang'));
                            $totalTinggi = array_sum(array_column($years, 'tinggi'));
                            $totalPercentage = $totalSia > 0 ? round(($totalTerlacak / $totalSia) * 100, 2) : 0;
                        @endphp
                        <tr>
                            <td class="px-4 py-3 text-sm text-center text-gray-800 dark:text-white border-r border-gray-200 dark:border-gray-600 uppercase">
                                Jumlah
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-gray-800 dark:text-white border-r border-gray-200 dark:border-gray-600">
                                {{ $totalSia }}
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-gray-800 dark:text-white border-r border-gray-200 dark:border-gray-600 font-bold">
                                {{ $totalTerlacak }}
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-blue-600 dark:text-blue-400 border-r border-gray-200 dark:border-gray-600 tabular-nums font-bold">
                                {{ $totalPercentage }}%
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-red-600 dark:text-red-400 border-r border-gray-200 dark:border-gray-600 bg-red-50/30 dark:bg-red-900/10">
                                {{ $totalRendah }}
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-yellow-600 dark:text-yellow-400 border-r border-gray-200 dark:border-gray-600 bg-yellow-50/30 dark:bg-yellow-900/10">
                                {{ $totalSedang }}
                            </td>
                            <td class="px-4 py-3 text-sm text-center text-green-600 dark:text-green-400 bg-green-50/30 dark:bg-green-900/10">
                                {{ $totalTinggi }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- Chart Card -->
        <div
            class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-colors duration-300">
            <div
                class="p-6 border-b border-gray-50 dark:border-gray-700 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white">Grafik Kesesuaian Bidang Kerja</h3>
                <div class="flex items-center gap-2">
                    <span
                        class="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-bold rounded-full">
                        Data Lulusan 6 Tahun Terakhir
                    </span>
                </div>
            </div>
            <div class="p-6">
                <div id="chart-container" class="w-full h-[300px] sm:h-[400px]" data-series='@json($chartSeries)'></div>
            </div>
        </div>
    </div>

    <!-- Alumni Details Modal -->
    <div id="alumniModal" class="fixed inset-0 z-[60] hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Overlay -->
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="hideModal()"></div>

            <!-- Center modal -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full border border-gray-200 dark:border-gray-700">
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                    <div class="flex items-center justify-between mb-6 border-b dark:border-gray-700 pb-4">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 dark:text-white" id="modalTitle">
                                    Daftar Alumni
                                </h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400" id="modalYearLabel"></p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4">
                            <!-- Entries per page dropdown -->
                            <div class="flex items-center gap-2 bg-gray-50 dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600">
                                <label for="pageSizeSelect" class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase">Tampilkan:</label>
                                <select id="pageSizeSelect" onchange="changePageSize(this.value)" class="bg-transparent text-sm font-bold text-gray-700 dark:text-gray-200 focus:outline-none cursor-pointer">
                                    <option value="25" selected>25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="all">Semua</option>
                                </select>
                            </div>

                            <button onclick="hideModal()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-4 relative bg-gray-50 dark:bg-gray-900/50 rounded-xl overflow-hidden border border-gray-100 dark:border-gray-800">
                        <div class="max-h-[50vh] overflow-y-auto custom-scrollbar">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-100 dark:bg-gray-800 sticky top-0 z-10 shadow-sm">
                                    <tr>
                                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">No</th>
                                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">NIM</th>
                                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Nama</th>
                                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Program Studi</th>
                                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">No HP</th>
                                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">L/P</th>
                                        <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status Pengisian</th>
                                    </tr>
                                </thead>
                                <tbody id="alumniTableBody" class="divide-y divide-gray-100 dark:divide-gray-800">
                                    <!-- Data populated via JS -->
                                </tbody>
                            </table>
                            
                            <!-- Loading indicator -->
                            <div id="modalLoading" class="flex flex-col justify-center items-center py-20 hidden">
                                <svg class="animate-spin h-10 w-10 text-blue-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Mengambil data alumni...</span>
                            </div>
                            
                            <!-- Empty state -->
                            <div id="modalEmpty" class="text-center py-20 hidden">
                                <div class="bg-gray-100 dark:bg-gray-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                    </svg>
                                </div>
                                <p class="text-gray-500 dark:text-gray-400 font-medium">Tidak ada data alumni ditemukan untuk kategori ini.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50/50 dark:bg-gray-800/50 px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4 border-t dark:border-gray-700">
                    <div id="paginationInfo" class="text-sm text-gray-500 dark:text-gray-400 font-medium order-2 sm:order-1">
                        Menampilkan <span id="startEntry" class="font-bold text-gray-700 dark:text-gray-200">0</span> sampai <span id="endEntry" class="font-bold text-gray-700 dark:text-gray-200">0</span> dari <span id="totalEntries" class="font-bold text-gray-700 dark:text-gray-200">0</span> data
                    </div>
                    <div class="flex items-center gap-2 order-1 sm:order-2">
                        <button id="prevPageBtn" onclick="changePage(-1)" class="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 text-xs font-bold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-600 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                            Sebelumnya
                        </button>
                        <button id="nextPageBtn" onclick="changePage(1)" class="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 text-xs font-bold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-600 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1">
                            Selanjutnya
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                        <button type="button" onclick="hideModal()" class="px-6 py-2 bg-blue-600 text-white text-sm font-bold rounded-xl hover:bg-blue-700 transition-all shadow-md ml-4">
                            Tutup
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/export-data.js') }}"></script>
    <script src="{{ asset('js/highcharts/modules/accessibility.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chartSeries = JSON.parse(document.getElementById('chart-container').dataset.series);

            function getColors() {
                const isDark = document.documentElement.classList.contains('dark');
                return {
                    text: isDark ? '#9CA3AF' : '#4B5563',
                    grid: isDark ? '#374151' : '#E5E7EB',
                    legendText: isDark ? '#E5E7EB' : '#1F2937',
                    bg: 'transparent'
                };
            }

            let colors = getColors();

            const chart = Highcharts.chart('chart-container', {
                chart: {
                    type: 'column',
                    backgroundColor: colors.bg,
                    style: { fontFamily: 'Inter, system-ui, sans-serif' }
                },
                title: { text: null },
                xAxis: {
                    categories: ['Jumlah Lulusan', 'Jumlah Lulusan Terlacak', 'Rendah', 'Sedang', 'Tinggi'],
                    crosshair: true,
                    labels: { style: { color: colors.text } },
                    lineColor: colors.grid,
                    tickColor: colors.grid
                },
                yAxis: {
                    min: 0,
                    title: { text: 'Jumlah Lulusan', style: { color: colors.text } },
                    labels: { style: { color: colors.text } },
                    gridLineColor: colors.grid
                },
                tooltip: {
                    shared: true,
                    useHTML: true,
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderWidth: 0,
                    borderRadius: 12,
                    shadow: true,
                    headerFormat: '<span style="font-size:11px; font-weight: bold; color: #4B5563">{point.key}</span><br/>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.1,
                        borderWidth: 0,
                        borderRadius: 4,
                        dataLabels: {
                            enabled: true,
                            style: { fontSize: '10px', color: colors.text, textOutline: 'none' }
                        }
                    }
                },
                legend: {
                    itemStyle: { color: colors.legendText, fontWeight: '500', fontSize: '12px' },
                    itemHoverStyle: { color: '#3B82F6' }
                },
                series: chartSeries,
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom',
                                itemStyle: {
                                    fontSize: '10px'
                                }
                            },
                            xAxis: {
                                labels: {
                                    style: {
                                        fontSize: '9px'
                                    }
                                }
                            }
                        }
                    }]
                },
                credits: { enabled: false }
            });

            // Theme change observer
            const observer = new MutationObserver(() => {
                const newColors = getColors();
                chart.update({
                    chart: { backgroundColor: newColors.bg },
                    xAxis: {
                        labels: { style: { color: newColors.text } },
                        lineColor: newColors.grid,
                        tickColor: newColors.grid
                    },
                    yAxis: {
                        title: { style: { color: newColors.text } },
                        labels: { style: { color: newColors.text } },
                        gridLineColor: newColors.grid
                    },
                    legend: { itemStyle: { color: newColors.legendText } },
                    plotOptions: { column: { dataLabels: { style: { color: newColors.text } } } }
                });
            });
            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
        });

        // Global state for alumni modal
        let currentAlumniData = [];
        let currentPage = 1;
        let pageSize = 25;

        function openAlumniModal(btn) {
            showAlumniDetails(btn.dataset.year, btn.dataset.prodi, btn.dataset.label, btn.dataset.type);
        }

        function showAlumniDetails(year, prodi, label, type = 'sia') {
            const modal = document.getElementById('alumniModal');
            const tableBody = document.getElementById('alumniTableBody');
            const loading = document.getElementById('modalLoading');
            const empty = document.getElementById('modalEmpty');
            const titleLabel = document.getElementById('modalYearLabel');
            const paginationInfo = document.getElementById('paginationInfo');

            // Reset state
            currentPage = 1;
            const sizeVal = document.getElementById('pageSizeSelect').value;
            pageSize = sizeVal === 'all' ? 'all' : (parseInt(sizeVal) || 25);
            currentAlumniData = [];

            // Show modal and loading
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            titleLabel.textContent = `Tahun Lulus: ${label}`;
            tableBody.innerHTML = '';
            loading.classList.remove('hidden');
            empty.classList.add('hidden');
            paginationInfo.classList.add('invisible');

            // Fetch data
            const url = `{{ route('penilaian.bidang-kerja.details') }}?year=${year}&filterprodi=${prodi}&type=${type}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    loading.classList.add('hidden');
                    currentAlumniData = data;

                    if (data.length === 0) {
                        empty.classList.remove('hidden');
                        paginationInfo.classList.add('invisible');
                    } else {
                        renderAlumniTable();
                    }
                })
                .catch(error => {
                    console.error('Error fetching alumni details:', error);
                    loading.classList.add('hidden');
                    empty.querySelector('p').textContent = 'Terjadi kesalahan saat mengambil data dari server.';
                    empty.classList.remove('hidden');
                    paginationInfo.classList.add('invisible');
                });
        }

        function renderAlumniTable() {
            const tableBody = document.getElementById('alumniTableBody');
            const paginationInfo = document.getElementById('paginationInfo');
            const startEntry = document.getElementById('startEntry');
            const endEntry = document.getElementById('endEntry');
            const totalEntries = document.getElementById('totalEntries');
            const prevBtn = document.getElementById('prevPageBtn');
            const nextBtn = document.getElementById('nextPageBtn');

            tableBody.innerHTML = '';
            paginationInfo.classList.remove('invisible');

            const total = currentAlumniData.length;
            const actualPageSize = pageSize === 'all' ? total : parseInt(pageSize);
            const totalPages = Math.ceil(total / actualPageSize);
            
            // Adjust current page if needed
            if (currentPage > totalPages) currentPage = totalPages;
            if (currentPage < 1) currentPage = 1;

            const startIdx = (currentPage - 1) * actualPageSize;
            const endIdx = Math.min(startIdx + actualPageSize, total);
            const pagedData = currentAlumniData.slice(startIdx, endIdx);

            pagedData.forEach((alumni, index) => {
                const globalIndex = startIdx + index;
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors';
                
                tr.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-medium">${globalIndex + 1}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-medium font-mono"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-800 dark:text-gray-200"></td>
                    <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-center font-medium"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400 text-center font-bold"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-center"></td>
                `;
                
                const cells = tr.querySelectorAll('td');
                cells[1].textContent = alumni.NIM || '-';
                cells[2].textContent = alumni.Nama || '-';
                cells[3].textContent = alumni.NamaProdi || '-';
                
                if (alumni.Handphone) {
                    const waLink = `https://wa.me/${alumni.Handphone.replace(/\D/g, '').replace(/^0/, '62')}`;
                    cells[4].innerHTML = `<a href="${waLink}" target="_blank" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                        ${alumni.Handphone}
                    </a>`;
                } else {
                    cells[4].textContent = '-';
                }

                cells[5].textContent = alumni.JenisKelamin || '-';
                
                if (alumni.StatusMengisi) {
                    cells[6].innerHTML = '<span class="inline-flex items-center justify-center px-3 py-1 space-x-1 text-xs font-bold text-green-700 bg-green-100 rounded-full dark:bg-green-900/40 dark:text-green-400"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg><span>Sudah</span></span>';
                } else {
                    cells[6].innerHTML = '<span class="inline-flex items-center justify-center px-3 py-1 space-x-1 text-xs font-bold text-red-700 bg-red-100 rounded-full dark:bg-red-900/40 dark:text-red-400"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path></svg><span>Belum</span></span>';
                }
                
                tableBody.appendChild(tr);
            });

            // Update info
            startEntry.textContent = total > 0 ? startIdx + 1 : 0;
            endEntry.textContent = endIdx;
            totalEntries.textContent = total;

            // Update buttons
            prevBtn.disabled = currentPage === 1;
            nextBtn.disabled = currentPage === totalPages || total === 0;
        }

        function changePage(direction) {
            currentPage += direction;
            renderAlumniTable();
            // Scroll modal content to top
            document.querySelector('.max-h-\\[50vh\\]').scrollTop = 0;
        }

        function changePageSize(size) {
            pageSize = size === 'all' ? 'all' : parseInt(size);
            currentPage = 1;
            renderAlumniTable();
        }

        function hideModal() {
            const modal = document.getElementById('alumniModal');
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    </script>
@endpush