<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">
                        Laporan Alokasi Pendaftaran
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="pie-chart" class="w-4 h-4 inline mr-2"></i>
                    Analisis pendaftaran dan perhitungan bagi hasil
                </p>
            </div>

            <div class="flex items-center gap-3">
                <button type="button" id="cetakSelectedBtn"
                    class="px-4 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl text-sm font-medium transition-all flex items-center gap-2">
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                    Cetak PDF
                </button>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 shadow-sm p-6 mb-8">
            <form method="GET" action="{{ route('laporan.alokasi-pendaftaran') }}" class="space-y-4" id="filterForm">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kampus</label>
                        <select name="kampus_id" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl" onchange="this.form.submit()">
                            <option value="">Semua Kampus</option>
                            @foreach($kampusList as $kampus)
                                <option value="{{ $kampus->id }}" {{ $kampusId == $kampus->id ? 'selected' : '' }}>{{ $kampus->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Program Studi</label>
                        <select name="prodi_id" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl" onchange="this.form.submit()">
                            <option value="">Semua Prodi</option>
                            @foreach($prodiOptions as $prodi)
                                <option value="{{ $prodi->id }}" {{ $prodiId == $prodi->id ? 'selected' : '' }}>{{ $prodi->nama }}</option>
                            @endforeach
                        </select>
                    </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-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl" onchange="this.form.submit()">
                            <option value="">Semua Tahun</option>
                            @foreach($tahunAjaranOptions as $tahun)
                                <option value="{{ $tahun }}" {{ $tahunAjaran == $tahun ? 'selected' : '' }}>{{ $tahun }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex items-end gap-2">
                        <button type="submit" class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium flex items-center gap-2">
                            <i data-lucide="search" class="w-4 h-4"></i>
                            Filter
                        </button>
                        <a href="{{ route('laporan.alokasi-pendaftaran') }}" class="px-4 py-2 bg-slate-500 text-white rounded-xl text-sm font-medium flex items-center gap-2">
                            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                            Reset
                        </a>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Mulai</label>
                        <input type="date" name="start_date" value="{{ $startDate }}" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Selesai</label>
                        <input type="date" name="end_date" value="{{ $endDate }}" class="w-full px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl">
                    </div>
                </div>
            </form>
        </div>

        <!-- Statistik Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Pendaftar</p>
                        <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $mahasiswas->total() }}</p>
                    </div>
                    <div class="w-12 h-12 bg-violet-100 dark:bg-violet-900/30 rounded-xl flex items-center justify-center">
                        <i data-lucide="users" class="w-6 h-6 text-violet-600"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Biaya Formulir</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">Rp {{ number_format($totalBiayaFormulir, 0, ',', '.') }}</p>
                    </div>
                    <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center">
                        <i data-lucide="wallet" class="w-6 h-6 text-emerald-600"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Bagi Hasil Kampus</p>
                        <p class="text-2xl font-bold text-violet-600">Rp {{ number_format($totalBagiHasilKampus, 0, ',', '.') }}</p>
                    </div>
                    <div class="w-12 h-12 bg-violet-100 dark:bg-violet-900/30 rounded-xl flex items-center justify-center">
                        <i data-lucide="building-2" class="w-6 h-6 text-violet-600"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Bagi Hasil K2</p>
                        <p class="text-2xl font-bold text-indigo-600">Rp {{ number_format($totalBagiHasilK2, 0, ',', '.') }}</p>
                    </div>
                    <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center">
                        <i data-lucide="users" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ringkasan Bagi Hasil per Kampus -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 shadow-sm overflow-hidden mb-8">
            <div class="p-6 border-b border-slate-200 dark:border-white/10">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                    <i data-lucide="percent" class="w-5 h-5 text-violet-500"></i>
                    Ringkasan Bagi Hasil per Kampus
                </h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
                            <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">Kampus</th>
                            <th class="text-center py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Jumlah Pendaftar</th>
                            <th class="text-center py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Total Biaya Formulir</th>
                            <th class="text-center py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Bagi Hasil Kampus</th>
                            <th class="text-center py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Bagi Hasil K2</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        @php $no = 1; @endphp
                        @forelse($ringkasanBagiHasil as $item)
                            <tr class="hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                <td class="py-3 px-4 text-sm">{{ $no++ }}</td>
                                <td class="py-3 px-4">
                                    <div class="font-medium text-gray-900 dark:text-white">{{ $item['kampus']->nama }}</div>
                                    <div class="text-xs text-slate-500">{{ $item['kampus']->singkatan ?? '' }}</div>
                                </td>
                                <td class="py-3 px-4 text-center text-sm font-semibold">{{ number_format($item['jumlah_pendaftar']) }}</td>
                                <td class="py-3 px-4 text-center text-sm">Rp {{ number_format($item['total_biaya'], 0, ',', '.') }}</td>
                                <td class="py-3 px-4 text-center text-sm font-bold text-violet-600">Rp {{ number_format($item['bagi_hasil_kampus'], 0, ',', '.') }}</td>
                                <td class="py-3 px-4 text-center text-sm font-bold text-indigo-600">Rp {{ number_format($item['bagi_hasil_k2'], 0, ',', '.') }}</td>
                            </tr>
                            @if(count($item['detail_jenjang']) > 0)
                                <tr class="bg-slate-50/50 dark:bg-white/5">
                                    <td colspan="6" class="py-2 px-4 pl-12">
                                        <div class="text-xs text-slate-500">
                                            <span class="font-medium">Detail per Jenjang:</span>
                                            @foreach($item['detail_jenjang'] as $jenjang => $detail)
                                                <span class="ml-3">{{ $jenjang }}: {{ $detail['jumlah'] }} mhs (Rp {{ number_format($detail['total_biaya'], 0, ',', '.') }})</span>
                                            @endforeach
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        @empty
                            <tr>
                                <td colspan="6" class="py-8 text-center text-slate-500">Tidak ada data pendaftaran</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Tabel Detail Mahasiswa dengan Checkbox -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-200 dark:border-white/10 flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                    <i data-lucide="list" class="w-5 h-5 text-violet-500"></i>
                    Detail Pendaftar
                </h3>
                <div class="flex items-center gap-4">
                    <label class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                        <input type="checkbox" id="selectAll" class="rounded border-slate-300 text-violet-600 focus:ring-violet-500">
                        Pilih Semua
                    </label>
                    <span class="text-sm text-slate-500" id="selectedCount">0 dipilih</span>
                </div>
            </div>
            <form id="cetakForm" action="{{ route('laporan.alokasi-pendaftaran.preview') }}" method="POST" target="_blank">
                @csrf
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
                                <th class="text-center py-4 px-2 text-xs font-semibold text-slate-500 uppercase w-10">
                                    <input type="checkbox" id="selectAllTable" class="rounded border-slate-300 text-violet-600 focus:ring-violet-500">
                                </th>
                                <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</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">Prodi</th>
                                <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Jenjang</th>
                                <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Tanggal Daftar</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 dark:hover:bg-white/5 transition-colors">
                                    <td class="text-center py-3 px-2">
                                        <input type="checkbox" name="selected_ids[]" value="{{ $mhs->id }}" class="row-checkbox rounded border-slate-300 text-violet-600 focus:ring-violet-500">
                                    </td>
                                    <td class="py-3 px-4 text-sm">{{ $mahasiswas->firstItem() + $index }}</td>
                                    <td class="py-3 px-4 text-sm font-medium">{{ $mhs->nim ?? '-' }}</td>
                                    <td class="py-3 px-4 text-sm">{{ $mhs->nama ?? '-' }}</td>
                                    <td class="py-3 px-4 text-sm">{{ $mhs->kampus->nama ?? '-' }}</td>
                                    <td class="py-3 px-4 text-sm">{{ $mhs->prodi->nama ?? '-' }}</td>
                                    <td class="py-3 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                            {{ $mhs->prodi->jenjang ?? '-' }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-4 text-sm">{{ $mhs->created_at ? $mhs->created_at->format('d/m/Y') : '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="py-12 text-center text-slate-500 dark:text-slate-400">
                                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
                                        <p>Tidak ada data pendaftaran</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <input type="hidden" name="selected_ids" id="selectedIdsInput">
            </form>
            <div class="p-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center">
                <div>
                    {{ $mahasiswas->appends(request()->query())->links() }}
                </div>
                <button type="button" id="cetakSelectedBtnFooter"
                    class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-xl text-sm font-medium transition-all flex items-center gap-2">
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                    Cetak PDF ({{ count($mahasiswas) }} Mahasiswa)
                </button>
            </div>
        </div>
    </div>

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

            // Select All functionality
            const selectAllTable = document.getElementById('selectAllTable');
            const rowCheckboxes = document.querySelectorAll('.row-checkbox');
            const selectedCountSpan = document.getElementById('selectedCount');
            const selectedIdsInput = document.getElementById('selectedIdsInput');
            const cetakForm = document.getElementById('cetakForm');

            function updateSelectedCount() {
                const checked = document.querySelectorAll('.row-checkbox:checked');
                const count = checked.length;
                if (selectedCountSpan) {
                    selectedCountSpan.textContent = count + ' dipilih';
                }
                // Update hidden input
                const selectedIds = Array.from(checked).map(cb => cb.value);
                selectedIdsInput.value = selectedIds.join(',');

                // Update button text
                const cetakBtn = document.getElementById('cetakSelectedBtnFooter');
                if (cetakBtn) {
                    if (count > 0) {
                        cetakBtn.innerHTML = '<i data-lucide="file-text" class="w-4 h-4"></i> Cetak PDF (' + count + ' Mahasiswa)';
                    } else {
                        cetakBtn.innerHTML = '<i data-lucide="file-text" class="w-4 h-4"></i> Cetak PDF (Semua Mahasiswa)';
                    }
                    lucide.createIcons();
                }
            }

            if (selectAllTable) {
                selectAllTable.addEventListener('change', function() {
                    rowCheckboxes.forEach(cb => {
                        cb.checked = selectAllTable.checked;
                    });
                    updateSelectedCount();
                });
            }

            rowCheckboxes.forEach(cb => {
                cb.addEventListener('change', updateSelectedCount);
            });

            updateSelectedCount();

            // Cetak PDF function
            function cetakPDF() {
                const checked = document.querySelectorAll('.row-checkbox:checked');
                const selectedIds = Array.from(checked).map(cb => cb.value);

                if (selectedIds.length === 0) {
                    // Jika tidak ada yang dipilih, cetak semua
                    const allIds = Array.from(rowCheckboxes).map(cb => cb.value);
                    selectedIdsInput.value = allIds.join(',');
                } else {
                    selectedIdsInput.value = selectedIds.join(',');
                }

                // Submit form ke target _blank (new tab)
                cetakForm.submit();
            }

            const cetakBtn = document.getElementById('cetakSelectedBtnFooter');
            if (cetakBtn) {
                cetakBtn.addEventListener('click', cetakPDF);
            }

            const cetakBtnTop = document.getElementById('cetakSelectedBtn');
            if (cetakBtnTop) {
                cetakBtnTop.addEventListener('click', cetakPDF);
            }
        });
    </script>
</x-app-layout>
