{{-- resources/views/log-aktivitas/index.blade.php --}}
<x-app-layout>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div
                    class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-violet-500/10 to-indigo-600/10 rounded-full blur-xl">
                </div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                        Log Aktivitas
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="activity" class="w-4 h-4 inline mr-2"></i>
                    Tracking lengkap aktivitas mahasiswa (pendaftaran, validasi, angsuran, pembayaran)
                </p>
            </div>
        </div>

        <!-- Filter Section -->
        <div
            class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden mb-6">
            <div class="p-6 border-b border-slate-100 dark:border-white/5">
                <div class="flex items-center gap-3">
                    <div
                        class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500/10 to-indigo-600/10 text-violet-500 flex items-center justify-center">
                        <i data-lucide="filter" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900 dark:text-white">Filter Data</h3>
                        <p class="text-xs text-slate-500">Filter berdasarkan kampus, prodi, tahun ajaran, dan tanggal
                        </p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <form method="GET" action="{{ route('log-aktivitas.index') }}" id="filterForm">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Kampus
                            </label>
                            <select name="kampus_id" id="kampus_id" class="w-full">
                                <option value="">-- Semua Kampus --</option>
                                @foreach ($kampusList as $kampus)
                                    <option value="{{ $kampus->id }}"
                                        {{ request('kampus_id') == $kampus->id ? 'selected' : '' }}>
                                        {{ $kampus->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Prodi Filter -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Program Studi
                            </label>
                            <div class="relative">
                                <i data-lucide="book-open"
                                    class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 z-10 pointer-events-none"></i>
                                <select name="prodi_id" id="prodi_id"
                                    class="w-full pl-12 pr-10 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all appearance-none cursor-pointer"
                                    disabled>
                                    <option value="">-- Pilih Kampus Terlebih Dahulu --</option>
                                </select>
                                <i data-lucide="chevron-down"
                                    class="absolute right-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tahun Ajaran
                            </label>
                            <select name="tahun_ajaran"
                                class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-violet-500">
                                <option value="">-- Semua Tahun --</option>
                                @foreach ($tahunAjaranOptions as $tahun)
                                    <option value="{{ $tahun }}"
                                        {{ request('tahun_ajaran') == $tahun ? 'selected' : '' }}>
                                        {{ $tahun }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Tgl Awal
                                </label>
                                <input type="date" name="tanggal_awal" value="{{ request('tanggal_awal') }}"
                                    class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-violet-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Tgl Akhir
                                </label>
                                <input type="date" name="tanggal_akhir" value="{{ request('tanggal_akhir') }}"
                                    class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-violet-500">
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <button type="submit"
                            class="px-4 py-2.5 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all flex items-center gap-2">
                            <i data-lucide="search" class="w-4 h-4"></i>
                            Filter
                        </button>
                        <a href="{{ route('log-aktivitas.index') }}"
                            class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 transition-all flex items-center gap-2">
                            <i data-lucide="x" class="w-4 h-4"></i>
                            Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Table Section -->
        <div
            class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">
            <div class="p-6 border-b border-slate-100 dark:border-white/5">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Data Log Aktivitas</h3>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Klik tombol Detail untuk melihat
                            informasi lengkap</p>
                    </div>
                    <div class="text-sm text-slate-500 dark:text-slate-400">
                        Total: <span
                            class="font-bold text-violet-600 dark:text-violet-400">{{ $mahasiswas->total() }}</span>
                        mahasiswa
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50/50 dark:bg-white/5 border-b border-slate-100 dark:border-white/5">
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">No</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">NIM</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Nama
                                Mahasiswa</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Kampus</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Aksi</th>
                        <tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        @forelse($mahasiswas as $index => $mhs)
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                <td class="py-4 px-4">
                                    <span
                                        class="inline-flex items-center justify-center w-8 h-8 bg-slate-100 dark:bg-gray-800 text-slate-600 rounded-lg text-xs font-bold">
                                        {{ $mahasiswas->firstItem() + $index }}
                                    </span>
                                </td>
                                <td class="py-4 px-4 font-mono text-sm">{{ $mhs->nim }}</td>
                                <td class="py-4 px-4">
                                    <div class="font-medium text-gray-900 dark:text-white">{{ $mhs->nama }}</div>
                                    <div class="text-xs text-slate-500">{{ $mhs->prodi->nama ?? '-' }}</div>
                                </td>
                                <td class="py-4 px-4">{{ $mhs->kampus->nama ?? '-' }}</td>
                                <td class="py-4 px-4">
                                    <button onclick="showDetailLog({{ $mhs->id }})"
                                        class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all flex items-center gap-2">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                        Detail
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-12 px-6 text-center">
                                    <div
                                        class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
                                        <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
                                    </div>
                                    <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Tidak ada data
                                    </h4>
                                    <p class="text-slate-500 dark:text-slate-400">Belum ada data mahasiswa yang
                                        terdaftar</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if ($mahasiswas->hasPages())
                <div class="p-6 border-t border-slate-100 dark:border-white/5">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div class="text-sm text-slate-500">
                            Menampilkan {{ $mahasiswas->firstItem() }} - {{ $mahasiswas->lastItem() }} dari
                            {{ $mahasiswas->total() }} data
                        </div>
                        <div>{{ $mahasiswas->appends(request()->query())->links('vendor.pagination.tailwind') }}</div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Modal Detail Lengkap -->
    <div id="detailModal" class="fixed inset-0 z-50 hidden overflow-y-auto" role="dialog">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity"
                onclick="closeDetailModal()"></div>
            <div
                class="inline-block align-bottom bg-white dark:bg-[#1a1a2e] rounded-3xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Detail Log Aktivitas Mahasiswa</h3>
                        <button onclick="closeDetailModal()" class="text-slate-400 hover:text-slate-500">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                    <div id="detailModalContent" class="space-y-4 max-h-[80vh] overflow-y-auto">
                        <div class="text-center py-8">
                            <i data-lucide="loader-2" class="w-8 h-8 animate-spin text-violet-500 mx-auto"></i>
                            <p class="text-sm text-slate-500 mt-2">Memuat data...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let detailModal = document.getElementById('detailModal');
        let detailContent = document.getElementById('detailModalContent');

        async function showDetailLog(id) {
            detailModal.classList.remove('hidden');
            detailContent.innerHTML =
                `<div class="text-center py-8"><i data-lucide="loader-2" class="w-8 h-8 animate-spin text-violet-500 mx-auto"></i><p class="text-sm text-slate-500 mt-2">Memuat data...</p></div>`;
            lucide.createIcons();

            try {
                const response = await fetch(`/log-aktivitas/${id}/detail`);
                const data = await response.json();

                if (data.success) {
                    const m = data.data.mahasiswa;
                    const angsuranDetails = data.data.angsuran_detail || [];

                    let angsuranHtml = '';
                    if (angsuranDetails.length > 0) {
                        angsuranHtml = `
                            <div class="border-t border-slate-200 dark:border-white/10 pt-4">
                                <div class="flex justify-between items-center mb-3">
                                    <h4 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                                        <i data-lucide="credit-card" class="w-4 h-4 text-violet-500"></i>
                                        Detail Angsuran
                                    </h4>
                                    <div class="text-sm">
                                        <span class="text-slate-500">Total Tagihan:</span>
                                        <span class="font-bold text-violet-600">Rp ${new Intl.NumberFormat('id-ID').format(data.data.total_tagihan)}</span>
                                        <span class="text-slate-500 ml-3">Sisa:</span>
                                        <span class="font-bold ${data.data.sisa_tagihan > 0 ? 'text-red-600' : 'text-green-600'}">Rp ${new Intl.NumberFormat('id-ID').format(data.data.sisa_tagihan)}</span>
                                    </div>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-xs">
                                        <thead class="bg-slate-100 dark:bg-gray-800 sticky top-0">
                                            <tr>
                                                <th class="px-2 py-2 text-left">Sem</th>
                                                <th class="px-2 py-2 text-left">Komponen</th>
                                                <th class="px-2 py-2 text-left">Kode</th>
                                                <th class="px-2 py-2 text-right">Total</th>
                                                <th class="px-2 py-2 text-right">Dibayar</th>
                                                <th class="px-2 py-2 text-right">Sisa</th>
                                                <th class="px-2 py-2 text-left">Tgl Jatuh Tempo</th>
                                                <th class="px-2 py-2 text-left">Tgl Bayar</th>
                                                <th class="px-2 py-2 text-left">Status Rencana</th>
                                                <th class="px-2 py-2 text-left">Tgl Validasi Rencana</th>
                                                <th class="px-2 py-2 text-left">Status Bayar</th>
                                                <th class="px-2 py-2 text-left">Tgl Validasi Bayar</th>
                                                <th class="px-2 py-2 text-left">Status Potongan</th>
                                                <th class="px-2 py-2 text-left">Tgl Validasi Potongan</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-slate-100 dark:divide-gray-800">
                                            ${angsuranDetails.map(p => `
                                                        <tr class="hover:bg-slate-50 dark:hover:bg-gray-800/50">
                                                            <td class="px-2 py-2 text-center">${p.semester}</td>
                                                            <td class="px-2 py-2">${p.komponen.length > 30 ? p.komponen.substring(0, 30) + '...' : p.komponen}</td>
                                                            <td class="px-2 py-2 font-mono">${p.kode_biaya}</td>
                                                            <td class="px-2 py-2 text-right">${new Intl.NumberFormat('id-ID').format(p.total)}</td>
                                                            <td class="px-2 py-2 text-right ${p.dibayar > 0 ? 'text-green-600 font-semibold' : 'text-slate-500'}">${new Intl.NumberFormat('id-ID').format(p.dibayar)}</td>
                                                            <td class="px-2 py-2 text-right ${p.sisa > 0 ? 'text-red-600 font-semibold' : 'text-green-600'}">${new Intl.NumberFormat('id-ID').format(p.sisa)}</td>
                                                            <td class="px-2 py-2">${p.tanggal_angsuran ? new Date(p.tanggal_angsuran).toLocaleDateString('id-ID') : '-'}</td>
                                                            <td class="px-2 py-2">${p.tanggal_bayar ? new Date(p.tanggal_bayar).toLocaleDateString('id-ID') : '-'}</td>
                                                            <td class="px-2 py-2">
                                                                <span class="px-1.5 py-0.5 rounded-full text-xs ${p.rencana_valid === 'valid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}">
                                                                    ${p.rencana_valid || '-'}
                                                                </span>
                                                            </td>
                                                            <td class="px-2 py-2">${p.rencana_valid_at ? new Date(p.rencana_valid_at).toLocaleString('id-ID') : '-'}</td>
                                                            <td class="px-2 py-2">
                                                                <span class="px-1.5 py-0.5 rounded-full text-xs ${p.pembayaran_valid === 'valid' ? 'bg-green-100 text-green-700' : p.pembayaran_valid === 'pending' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500'}">
                                                                    ${p.pembayaran_valid || '-'}
                                                                </span>
                                                            </td>
                                                            <td class="px-2 py-2">${p.pembayaran_valid_at ? new Date(p.pembayaran_valid_at).toLocaleString('id-ID') : '-'}</td>
                                                            <td class="px-2 py-2">
                                                                <span class="px-1.5 py-0.5 rounded-full text-xs ${p.potongan_valid === 'valid' ? 'bg-green-100 text-green-700' : p.potongan_valid === 'pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-500'}">
                                                                    ${p.potongan_valid || '-'}
                                                                </span>
                                                            </td>
                                                            <td class="px-2 py-2">${p.potongan_valid_at ? new Date(p.potongan_valid_at).toLocaleString('id-ID') : '-'}</td>
                                                        </tr>
                                                    `).join('')}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        `;
                    } else {
                        angsuranHtml = `
                            <div class="border-t border-slate-200 dark:border-white/10 pt-4">
                                <div class="p-4 bg-slate-50 dark:bg-white/5 rounded-xl text-center text-slate-500">
                                    <i data-lucide="credit-card" class="w-8 h-8 mx-auto mb-2 opacity-50"></i>
                                    <p>Belum ada data angsuran</p>
                                </div>
                            </div>
                        `;
                    }

                    detailContent.innerHTML = `
                        <div class="space-y-4">
                            <!-- Informasi Mahasiswa -->
                            <div class="bg-slate-50 dark:bg-white/5 p-4 rounded-xl">
                                <h4 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                                    <i data-lucide="user" class="w-4 h-4 text-blue-500"></i>
                                    Data Mahasiswa
                                </h4>
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                                    <div>
                                        <div class="text-xs text-slate-500">NIM</div>
                                        <div class="font-mono font-medium">${m.nim}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-slate-500">Nama Lengkap</div>
                                        <div class="font-medium">${m.nama}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-slate-500">Kampus</div>
                                        <div>${m.kampus?.nama || '-'}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-slate-500">Program Studi</div>
                                        <div>${m.prodi?.nama || '-'}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-slate-500">Jenjang</div>
                                        <div>${m.prodi?.jenjang || '-'}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-slate-500">Tahun Ajaran</div>
                                        <div>${m.tahun_ajaran || '-'}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Pendaftaran & Validasi Mahasiswa -->
                            <div class="bg-slate-50 dark:bg-white/5 p-4 rounded-xl">
                                <h4 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                                    <i data-lucide="calendar" class="w-4 h-4 text-emerald-500"></i>
                                    Pendaftaran & Validasi Mahasiswa
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="space-y-2">
                                        <div class="flex justify-between items-center border-b border-slate-200 dark:border-white/10 pb-1">
                                            <span class="text-sm text-slate-500">Tanggal Daftar:</span>
                                            <span class="font-medium">${new Date(m.created_at).toLocaleString('id-ID')}</span>
                                        </div>
                                        <div class="flex justify-between items-center border-b border-slate-200 dark:border-white/10 pb-1">
                                            <span class="text-sm text-slate-500">Status Validasi:</span>
                                            <span class="px-2 py-0.5 rounded-full text-xs ${m.validasi_status === 'valid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}">
                                                ${m.validasi_status || 'Pending'}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="space-y-2">
                                        <div class="flex justify-between items-center border-b border-slate-200 dark:border-white/10 pb-1">
                                            <span class="text-sm text-slate-500">Tanggal Validasi Mahasiswa:</span>
                                            <span class="font-medium">${m.validasi_at ? new Date(m.validasi_at).toLocaleString('id-ID') : '-'}</span>
                                        </div>
                                        <div class="flex justify-between items-center border-b border-slate-200 dark:border-white/10 pb-1">
                                            <span class="text-sm text-slate-500">User Validasi:</span>
                                            <span class="font-medium">${m.validasi_by || '-'}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            ${angsuranHtml}
                        </div>
                    `;
                } else {
                    detailContent.innerHTML = `<div class="text-center py-8 text-red-500">Gagal memuat data</div>`;
                }
                lucide.createIcons();
            } catch (error) {
                detailContent.innerHTML =
                    `<div class="text-center py-8 text-red-500">Terjadi kesalahan: ${error.message}</div>`;
            }
        }

        function closeDetailModal() {
            detailModal.classList.add('hidden');
        }

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && !detailModal.classList.contains('hidden')) {
                closeDetailModal();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            // Inisialisasi Select2 untuk filter kampus
            if (typeof $ !== 'undefined' && $.fn.select2) {
                $('#kampus_id').select2({
                    theme: 'default',
                    width: '100%',
                    placeholder: 'Cari kampus...',
                    allowClear: true,
                    language: {
                        noResults: function() {
                            return 'Tidak ada kampus ditemukan';
                        },
                        searching: function() {
                            return 'Mencari...';
                        }
                    }
                });
            }

            // Dynamic prodi berdasarkan kampus dengan format jenjang
            const kampusSelect = document.getElementById('kampus_id');
            const prodiSelect = document.getElementById('prodi_id');
            const currentProdiId = '{{ request('prodi_id') }}';

            if (kampusSelect) {
                function loadProdiByKampus(kampusId) {
                    if (!kampusId || kampusId === '') {
                        // Reset ke opsi awal (semua prodi dari server)
                        fetch(`/get-all-prodi`)
                            .then(response => response.json())
                            .then(data => {
                                prodiSelect.innerHTML = '<option value="">-- Semua Prodi --</option>';
                                data.forEach(prodi => {
                                    const option = document.createElement('option');
                                    option.value = prodi.id;
                                    const jenjangText = prodi.jenjang ? `[${prodi.jenjang}] ` : '';
                                    option.textContent = jenjangText + prodi.nama;
                                    if (currentProdiId == prodi.id) {
                                        option.selected = true;
                                    }
                                    prodiSelect.appendChild(option);
                                });
                            });
                        return;
                    }

                    prodiSelect.innerHTML = '<option value="">Memuat...</option>';
                    prodiSelect.disabled = true;

                    fetch(`/get-prodi/${kampusId}`)
                        .then(response => response.json())
                        .then(data => {
                            prodiSelect.innerHTML = '<option value="">-- Semua Prodi --</option>';
                            data.forEach(prodi => {
                                const option = document.createElement('option');
                                option.value = prodi.id;
                                const jenjangText = prodi.jenjang ? `[${prodi.jenjang}] ` : '';
                                option.textContent = jenjangText + prodi.nama;
                                if (currentProdiId == prodi.id) {
                                    option.selected = true;
                                }
                                prodiSelect.appendChild(option);
                            });
                            prodiSelect.disabled = false;
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            prodiSelect.innerHTML = '<option value="">-- Semua Prodi --</option>';
                            prodiSelect.disabled = false;
                        });
                }

                // Event change untuk kampus
                $(kampusSelect).on('change', function() {
                    const kampusId = $(this).val();
                    loadProdiByKampus(kampusId);
                });

                // Load awal jika ada kampus terpilih
                const initialKampusId = '{{ request('kampus_id') }}';
                if (initialKampusId) {
                    loadProdiByKampus(initialKampusId);
                }
            }
        });
    </script>
</x-app-layout>