@extends('layouts.app')

@section('title', 'Data Pendaftar SPMB')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen SPMB</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Data Pendaftar</p>
            <h1 class="pkbm-dashboard__title">Verifikasi Pendaftar</h1>
            <p class="pkbm-dashboard__subtitle">Periksa identitas dan verifikasi berkas sebelum menetapkan hasil penerimaan.</p>
        </div>
        <a href="{{ route('pkbm.spmb.applicants.print', request()->query()) }}" target="_blank" rel="noopener" class="sp-btn-secondary shrink-0"><i class="bi bi-printer" aria-hidden="true"></i>Cetak rekap</a>
    </header>
    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Permintaan belum dapat diproses.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <section class="grid gap-3 sm:grid-cols-3" aria-label="Ringkasan pendaftar">
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-11 place-items-center rounded-xl bg-blue-50 text-lg text-blue-600"><i class="bi bi-people" aria-hidden="true"></i></span><div><p class="text-xs text-slate-500">Total pendaftar</p><p class="text-xl font-bold text-slate-800">{{ $counts['total'] }}</p></div></article>
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-11 place-items-center rounded-xl bg-amber-50 text-lg text-amber-600"><i class="bi bi-hourglass-split" aria-hidden="true"></i></span><div><p class="text-xs text-slate-500">Menunggu verifikasi</p><p class="text-xl font-bold text-slate-800">{{ $counts['pending'] }}</p></div></article>
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-11 place-items-center rounded-xl bg-emerald-50 text-lg text-emerald-600"><i class="bi bi-person-check" aria-hidden="true"></i></span><div><p class="text-xs text-slate-500">Diterima</p><p class="text-xl font-bold text-slate-800">{{ $counts['accepted'] }}</p></div></article>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div><h2 class="sp-section-title">Daftar calon peserta</h2><p class="mt-1 text-xs text-slate-500">@if ($applicants->total()) Menampilkan {{ $applicants->firstItem() }}–{{ $applicants->lastItem() }} dari {{ $applicants->total() }} pendaftar @else Belum ada hasil @endif</p></div>
            <form method="GET" action="{{ route('pkbm.spmb.applicants') }}" class="grid gap-2 sm:grid-cols-[minmax(12rem,1fr)_12rem_11rem_auto]">
                <label for="applicant-query" class="sr-only">Cari nama, NIK, NISN, atau nomor HP</label><input id="applicant-query" name="q" value="{{ $filters['q'] ?? '' }}" class="sp-form-control px-3 py-2 text-sm" placeholder="Cari nama, NIK, NISN, HP">
                <label for="applicant-level" class="sr-only">Filter jenjang</label><select id="applicant-level" name="jenjang" class="sp-form-control px-3 py-2 text-sm"><option value="">Semua jenjang</option>@foreach ($levels as $level)<option value="{{ $level }}" @selected(($filters['jenjang'] ?? '') === $level)>{{ $level }}</option>@endforeach</select>
                <label for="applicant-status" class="sr-only">Filter status</label><select id="applicant-status" name="status" class="sp-form-control px-3 py-2 text-sm"><option value="">Semua status</option><option value="Pending" @selected(($filters['status'] ?? '') === 'Pending')>Pending</option><option value="Diterima" @selected(($filters['status'] ?? '') === 'Diterima')>Diterima</option></select>
                <button class="sp-btn-secondary justify-center" type="submit"><i class="bi bi-search" aria-hidden="true"></i>Filter</button>
            </form>
        </div>
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
            <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-600"><input id="select-ready-applicants" type="checkbox" class="size-4 rounded border-slate-300 text-blue-600">Pilih semua pendaftar yang memenuhi syarat (min. 2 berkas)</label>
            <button type="button" id="bulk-accept-button" class="sp-btn-primary" disabled><i class="bi bi-person-check" aria-hidden="true"></i>Terima yang dipilih</button>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[78rem]">
                <thead><tr><th scope="col" class="w-12 text-center">Pilih</th><th scope="col" class="w-14 text-center">No.</th><th scope="col">Identitas pendaftar</th><th scope="col">Jenjang</th><th scope="col" class="text-center">Verifikasi berkas</th><th scope="col">Status</th><th scope="col" class="text-right">Aksi</th></tr></thead>
                <tbody>
                    @forelse ($applicants as $applicant)
                        <tr>
                            <td class="text-center">
                                @if ($applicant->status_verifikasi !== 'Diterima' && $applicant->document_count >= 2)
                                    <input type="checkbox" class="applicant-select size-4 rounded border-slate-300 text-blue-600" value="{{ $applicant->id }}" aria-label="Pilih {{ $applicant->nama_siswa }}">
                                @else
                                    <span class="text-slate-300">—</span>
                                @endif
                            </td>
                            <td class="text-center text-sm text-slate-500">{{ $applicants->firstItem() + $loop->index }}</td>
                            <td class="max-w-sm">
                                <p class="font-semibold text-slate-800">{{ $applicant->nama_siswa }}</p>
                                <p class="mt-1 text-xs text-slate-500">NIK {{ $applicant->nik }} · {{ $applicant->hp }}</p>
                                <details class="mt-2 text-xs">
                                    <summary class="cursor-pointer font-semibold text-blue-700">Lihat detail</summary>
                                    <dl class="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-slate-50 p-3 text-slate-600 sm:grid-cols-3">
                                        @foreach (['nisn' => 'NISN', 'asal_sekolah' => 'Asal sekolah', 'tahun_lulus' => 'Tahun lulus', 'tempat_lahir' => 'Tempat lahir', 'tanggal_lahir' => 'Tanggal lahir', 'jenis_kelamin' => 'Jenis kelamin', 'agama' => 'Agama', 'alamat' => 'Alamat', 'nama_ayah' => 'Nama ayah', 'nama_ibu' => 'Nama ibu', 'pekerjaan_ayah' => 'Pekerjaan ayah', 'pekerjaan_ibu' => 'Pekerjaan ibu', 'wali' => 'Wali'] as $field => $label)
                                            <div><dt class="font-semibold text-slate-500">{{ $label }}</dt><dd class="break-words">{{ $applicant->{$field} ?: '-' }}</dd></div>
                                        @endforeach
                                    </dl>
                                </details>
                            </td>
                            <td><span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ $applicant->jenjang }}</span></td>
                            <td>
                                <div class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs sm:grid-cols-3">
                                    @foreach ($documents as $field => $label)
                                        <form method="POST" action="{{ route('pkbm.spmb.documents.update', [$applicant->id, $field]) }}" class="flex items-center gap-1.5">
                                            @csrf @method('PATCH')
                                            <input type="hidden" name="checked" value="0">
                                            <input type="checkbox" name="checked" value="1" class="size-3.5 rounded border-slate-300 text-blue-600" @checked((bool) $applicant->{$field}) @disabled($applicant->status_verifikasi === 'Diterima') onchange="this.form.requestSubmit()">
                                            <span class="text-slate-600">{{ $label }}</span>
                                        </form>
                                    @endforeach
                                </div>
                                <p class="mt-2 text-xs font-semibold {{ $applicant->document_count >= 2 ? 'text-emerald-700' : 'text-amber-700' }}">{{ $applicant->document_count }}/5 berkas terverifikasi{{ $applicant->document_count < 2 && $applicant->status_verifikasi !== 'Diterima' ? ' · minimal 2' : '' }}</p>
                            </td>
                            <td><span @class(['rounded-full px-2.5 py-1 text-xs font-semibold', 'bg-emerald-50 text-emerald-700' => $applicant->status_verifikasi === 'Diterima', 'bg-amber-50 text-amber-700' => $applicant->status_verifikasi !== 'Diterima'])>{{ $applicant->status_verifikasi ?: 'Pending' }}</span></td>
                            <td class="whitespace-nowrap text-right">
                                <div class="inline-flex items-center gap-1">
                                    <a class="settings-icon-action" href="{{ route('pkbm.spmb.applicants.form', $applicant->id) }}" target="_blank" rel="noopener" aria-label="Cetak formulir {{ $applicant->nama_siswa }}" title="Cetak formulir"><i class="bi bi-printer" aria-hidden="true"></i></a>
                                    @if ($applicant->status_verifikasi !== 'Diterima')
                                        <form method="POST" action="{{ route('pkbm.spmb.applicants.receive', $applicant->id) }}" onsubmit="return confirm('Tetapkan {{ addslashes($applicant->nama_siswa) }} sebagai pendaftar diterima? Data tetap terpisah dari tabel siswa.')">
                                            @csrf
                                            <button type="submit" class="settings-icon-action text-emerald-700" @disabled($applicant->document_count < 2) aria-label="Terima {{ $applicant->nama_siswa }}" title="{{ $applicant->document_count < 2 ? 'Minimal 2 berkas harus diverifikasi' : 'Terima pendaftar' }}"><i class="bi bi-person-check" aria-hidden="true"></i></button>
                                        </form>
                                        <form method="POST" action="{{ route('pkbm.spmb.applicants.destroy', $applicant->id) }}" onsubmit="return confirm('Hapus pendaftar {{ addslashes($applicant->nama_siswa) }}?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus {{ $applicant->nama_siswa }}" title="Hapus pendaftar"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-4 py-12 text-center"><span class="mx-auto grid size-12 place-items-center rounded-2xl bg-slate-100 text-xl text-slate-500"><i class="bi bi-person-lines-fill" aria-hidden="true"></i></span><p class="mt-3 text-sm font-semibold text-slate-700">Belum ada data pendaftar</p><p class="mt-1 text-xs text-slate-500">Pendaftar yang mengirim formulir SPMB akan muncul di halaman ini.</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($applicants->hasPages())
            <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"><p class="text-xs text-slate-500">Pilih halaman untuk melihat pendaftar berikutnya.</p>{{ $applicants->links() }}</div>
        @endif
    </section>
</div>
@push('scripts')
<script>
(() => {
    const selectAll = document.getElementById('select-ready-applicants');
    const checkboxes = [...document.querySelectorAll('.applicant-select')];
    const submitButton = document.getElementById('bulk-accept-button');
    const updateSelection = () => {
        const selected = checkboxes.filter((checkbox) => checkbox.checked);
        submitButton.disabled = selected.length === 0;
        selectAll.checked = checkboxes.length > 0 && selected.length === checkboxes.length;
    };
    selectAll.addEventListener('change', () => {
        checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; });
        updateSelection();
    });
    checkboxes.forEach((checkbox) => checkbox.addEventListener('change', updateSelection));
    submitButton.addEventListener('click', () => {
        const selected = checkboxes.filter((checkbox) => checkbox.checked);
        if (!selected.length || !confirm(`Terima ${selected.length} pendaftar terpilih? Data akan tetap terpisah dari tabel siswa.`)) return;
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = @json(route('pkbm.spmb.applicants.receive-selected'));
        const token = document.createElement('input');
        token.type = 'hidden';
        token.name = '_token';
        token.value = document.querySelector('meta[name=csrf-token]').content;
        form.append(token);
        selected.forEach((checkbox) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'applicant_ids[]';
            input.value = checkbox.value;
            form.append(input);
        });
        document.body.append(form);
        form.submit();
    });
    updateSelection();
})();
</script>
@endpush
@endsection