@extends('layouts.app')

@section('title', 'Data Siswa')

@section('content')
<div class="pkbm-master-page pkbm-students mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Data Utama</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Data Master<i class="bi bi-chevron-right" aria-hidden="true"></i>Data Siswa</p>
            <h1 class="pkbm-dashboard__title">Manajemen Data Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Kelola identitas, rombongan belajar, dan status peserta didik.</p>
        </div>
        <div class="pkbm-students__period">
            <span class="pkbm-students__period-label">Periode aktif</span>
            <strong>{{ $period ? $period->tahun_pelajaran.' · '.$period->semester : 'Belum diatur' }}</strong>
        </div>
    </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">Periksa kembali data yang diisi.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="grid gap-4 xl:grid-cols-3">
        <section class="sp-card p-4" aria-labelledby="student-actions-title">
            <h2 id="student-actions-title" class="sp-section-title mb-3">Aksi data siswa</h2>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('pkbm.master.create', 'siswa') }}" class="sp-btn-primary">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah
                </a>
                <a id="student-edit-selected" href="#" aria-disabled="true" tabindex="-1" class="sp-btn-secondary pointer-events-none opacity-50">
                    <i class="bi bi-pencil" aria-hidden="true"></i>Perbaiki
                </a>
                <button id="student-exit-selected" type="button" disabled class="sp-btn-danger disabled:cursor-not-allowed disabled:opacity-50">
                    <i class="bi bi-box-arrow-right" aria-hidden="true"></i>Keluarkan
                </button>
            </div>
            <p class="mt-2 text-xs text-slate-500">Pilih satu baris untuk memperbaiki atau mengeluarkan siswa.</p>
        </section>

        <section class="sp-card p-4" aria-labelledby="student-import-title">
            <h2 id="student-import-title" class="sp-section-title mb-1">Import siswa</h2>
            <p class="mb-3 text-xs text-slate-500">Unggah ekspor Dapodik (.xlsx), lalu periksa nama rombel dan tingkat sebelum konfirmasi. Siswa lama dicocokkan agar tidak dibuat ulang.</p>
            <form action="{{ route('pkbm.siswa.import-dapodik') }}" method="POST" enctype="multipart/form-data" class="space-y-2">
                @csrf
                <label for="student-dapodik-file" class="sr-only">Pilih file ekspor Dapodik</label>
                <input id="student-dapodik-file" type="file" name="file_dapodik" accept=".xlsx" required class="sp-form-control min-w-0 px-2 py-1.5 text-xs">
                <button type="submit" class="sp-btn-primary w-full">
                    <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i>Import data siswa
                </button>
            </form>
        </section>

        <section class="sp-card p-4" aria-labelledby="student-search-title">
            <h2 id="student-search-title" class="sp-section-title mb-3">Pencarian dan filter</h2>
            <form id="student-filter-form" method="GET" action="{{ route('pkbm.master.index', 'siswa') }}" class="grid gap-2 sm:grid-cols-2 xl:grid-cols-1 2xl:grid-cols-2">
                <label for="student-search" class="sr-only">Cari nama atau identitas siswa</label>
                <input id="student-search" type="search" name="q" value="{{ request('q') }}" placeholder="Cari nama, NIS, NISN..."
                       class="sp-form-control min-w-0 px-3 py-2 text-sm sm:col-span-2 xl:col-span-1 2xl:col-span-2">
                <label for="student-class-filter" class="sr-only">Filter kelas</label>
                <select id="student-class-filter" name="kelas" class="sp-form-control min-w-0 px-2 py-2 text-xs">
                    <option value="">Semua Kelas</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id }}" @selected((string) request('kelas') === (string) $class->id)>{{ $class->nama_kelas }}</option>
                    @endforeach
                </select>
                <label for="student-village-filter" class="sr-only">Filter desa atau kelurahan</label>
                <select id="student-village-filter" name="desa" class="sp-form-control min-w-0 px-2 py-2 text-xs">
                    <option value="">Semua Desa/Kelurahan</option>
                    @foreach ($villages as $village)
                        <option value="{{ $village }}" @selected(request('desa') === $village)>{{ $village }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="per_page" value="{{ request('per_page', '10') }}">
                <button type="submit" class="sp-btn-secondary sm:col-span-2 xl:col-span-1 2xl:col-span-2">
                    <i class="bi bi-search" aria-hidden="true"></i>Terapkan filter
                </button>
            </form>
        </section>
    </div>

    <section class="sp-card overflow-hidden">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 p-4">
            <div class="flex flex-wrap items-center gap-2">
                <label for="student-per-page" class="sr-only">Jumlah data per halaman</label>
                <select id="student-per-page" class="sp-form-control w-auto px-2 py-1.5 text-xs">
                    @foreach (['10', '25', '50', '100', 'all'] as $pageSize)
                        <option value="{{ $pageSize }}" @selected(request('per_page', '10') === $pageSize)>{{ $pageSize === 'all' ? 'Semua' : $pageSize }}</option>
                    @endforeach
                </select>
                <span class="text-xs text-slate-500">data per halaman · {{ number_format($total, 0, ',', '.') }} siswa</span>
            </div>
            @if ($records instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
                <div class="flex items-center gap-2" aria-label="Navigasi halaman">
                    <a href="{{ $records->previousPageUrl() ?: '#' }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => ! $records->previousPageUrl()]) aria-label="Halaman sebelumnya">
                        <i class="bi bi-chevron-left" aria-hidden="true"></i>
                    </a>
                    <span class="min-w-16 text-center text-xs font-semibold text-slate-600">{{ $records->currentPage() }} / {{ $records->lastPage() }}</span>
                    <a href="{{ $records->nextPageUrl() ?: '#' }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => ! $records->nextPageUrl()]) aria-label="Halaman berikutnya">
                        <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    </a>
                </div>
            @else
                <span class="text-xs font-semibold text-slate-500">1 / 1</span>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[1050px]" id="student-table">
                <thead>
                    <tr>
                        <th scope="col" class="w-10">
                            <input id="student-check-all" type="checkbox" class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" aria-label="Pilih semua siswa di halaman ini">
                        </th>
                        <th scope="col" class="w-12">No</th>
                        <th scope="col">Nama lengkap</th>
                        <th scope="col">Identitas</th>
                        <th scope="col">L/P</th>
                        <th scope="col">Tempat, tanggal lahir</th>
                        <th scope="col">Alamat</th>
                        <th scope="col">Rombel</th>
                        <th scope="col" class="text-center">Foto</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $index => $record)
                        <tr data-student-id="{{ $record->id }}" data-class-id="{{ $record->id_kelas ?? '' }}" data-village="{{ $record->desa_kelurahan ?? '' }}" tabindex="0" class="cursor-pointer">
                            <td>
                                <input type="checkbox" class="student-row-check size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                                       value="{{ $record->id }}" aria-label="Pilih {{ $record->nama_siswa }}">
                            </td>
                            <td class="text-slate-500">{{ $records instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator ? $records->firstItem() + $index : $index + 1 }}</td>
                            <td>
                                <span class="block font-bold text-slate-900">{{ $record->nama_siswa }}</span>
                                <span class="mt-0.5 block text-xs text-slate-500">Orang tua: {{ $record->nama_ayah ?: '-' }} · {{ $record->nama_ibu ?: '-' }}</span>
                            </td>
                            <td class="leading-5 text-slate-600">NISN: {{ $record->nisn ?: '-' }}<br>NIS: {{ $record->nis ?: '-' }}</td>
                            <td>{{ in_array($record->jenis_kelamin, ['L', 'Laki-laki'], true) ? 'L' : ($record->jenis_kelamin ? 'P' : '-') }}</td>
                            <td class="text-slate-600">
                                {{ $record->tempat_lahir ?: '-' }}<br>
                                {{ $record->tanggal_lahir ? \Illuminate\Support\Carbon::parse($record->tanggal_lahir)->format('d/m/Y') : '-' }}
                            </td>
                            <td class="max-w-56 text-slate-600">
                                <span class="line-clamp-2">{{ $record->alamat ?: '-' }}</span>
                                <span class="mt-0.5 block font-semibold text-slate-500">{{ $record->desa_kelurahan ?: '-' }}</span>
                            </td>
                            <td>
                                @if ($record->nama_kelas)
                                    <span class="rounded-full border border-sky-100 bg-sky-50 px-2 py-1 text-[11px] font-semibold text-sky-700">{{ $record->nama_kelas }}</span>
                                @else
                                    <span class="rounded-full border border-rose-100 bg-rose-50 px-2 py-1 text-[11px] font-semibold text-rose-700">Belum terploting</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($record->foto)
                                    <img src="{{ route('pkbm.siswa.photo', $record->id) }}" alt="Foto {{ $record->nama_siswa }}" loading="lazy" class="mx-auto size-9 rounded-lg border border-slate-200 object-cover">
                                @else
                                    <i class="bi bi-person-circle text-2xl text-slate-400" aria-hidden="true"></i>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="border-b-0 px-4 py-12 text-center text-sm text-slate-500">
                                {{ request()->hasAny(['q', 'kelas', 'desa']) ? 'Data siswa tidak ditemukan untuk filter ini.' : 'Belum ada data siswa di periode ini.' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator && $records->hasPages())
            <div class="border-t border-slate-100 p-4">{{ $records->links() }}</div>
        @endif
    </section>
</div>

<button id="student-export-button" type="button" class="pkbm-students__export hidden">
    <i class="bi bi-file-earmark-excel-fill" aria-hidden="true"></i>
    Download Excel (<span id="student-export-count">0</span>)
</button>
<form id="student-export-form" action="{{ route('pkbm.siswa.export') }}" method="POST" target="_blank" class="hidden">
    @csrf
</form>

<dialog id="student-exit-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="student-exit-title">
    <form id="student-exit-form" method="POST" action="#">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-box-arrow-right"></i></span>
                <div>
                    <h2 id="student-exit-title" class="sp-section-title">Konfirmasi siswa keluar</h2>
                    <p id="student-exit-name" class="mt-1 text-xs text-slate-500"></p>
                </div>
            </div>
            <button type="button" data-close-dialog="student-exit-dialog" class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="pkbm-class-form-dialog__body space-y-4 p-5">
            <div>
                <label for="student-exit-date" class="sp-form-label">Tanggal keluar <span class="text-rose-500">*</span></label>
                <input id="student-exit-date" type="date" name="tgl_keluar" value="{{ now()->format('Y-m-d') }}" required class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="student-exit-reason" class="sp-form-label">Alasan keluar <span class="text-rose-500">*</span></label>
                <select id="student-exit-reason" name="alasan" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <option value="Lulus">Lulus</option>
                    <option value="Mutasi/Pindah Sekolah">Mutasi/Pindah Sekolah</option>
                    <option value="Dikeluarkan">Dikeluarkan (Drop Out)</option>
                    <option value="Mengundurkan Diri">Mengundurkan Diri</option>
                    <option value="Lainnya">Lainnya</option>
                </select>
            </div>
            <div>
                <label for="student-exit-note" class="sp-form-label">Keterangan tambahan</label>
                <textarea id="student-exit-note" name="keterangan" rows="3" maxlength="2000" placeholder="Contoh: Pindah ke satuan pendidikan lain..." class="sp-form-control w-full px-3 py-2.5 text-sm"></textarea>
            </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog="student-exit-dialog" class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-danger"><i class="bi bi-box-arrow-right" aria-hidden="true"></i>Proses keluar</button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const table = document.querySelector('#student-table tbody');
    const editButton = document.getElementById('student-edit-selected');
    const exitButton = document.getElementById('student-exit-selected');
    const exitDialog = document.getElementById('student-exit-dialog');
    const exitForm = document.getElementById('student-exit-form');
    const checkAll = document.getElementById('student-check-all');
    const exportButton = document.getElementById('student-export-button');
    const exportCount = document.getElementById('student-export-count');
    const exportForm = document.getElementById('student-export-form');
    const perPage = document.getElementById('student-per-page');
    const filterForm = document.getElementById('student-filter-form');
    let selectedRow = null;

    const updateExportButton = () => {
        const selected = table.querySelectorAll('.student-row-check:checked');
        exportButton.classList.toggle('hidden', selected.length === 0);
        exportCount.textContent = selected.length;
        const checkboxes = table.querySelectorAll('.student-row-check');
        checkAll.checked = checkboxes.length > 0 && selected.length === checkboxes.length;
        checkAll.indeterminate = selected.length > 0 && selected.length < checkboxes.length;
    };

    table.addEventListener('click', event => {
        if (event.target.closest('input[type="checkbox"]')) return;
        const row = event.target.closest('tr[data-student-id]');
        if (!row) return;
        const rowCheckbox = row.querySelector('.student-row-check');
        rowCheckbox.checked = !rowCheckbox.checked;
        updateExportButton();
        table.querySelectorAll('tr.is-selected').forEach(item => item.classList.remove('is-selected'));
        row.classList.add('is-selected');
        selectedRow = row;
        editButton.href = `${@json(url('/pkbm/data-master/siswa'))}/${row.dataset.studentId}/edit`;
        editButton.removeAttribute('aria-disabled');
        editButton.removeAttribute('tabindex');
        editButton.classList.remove('pointer-events-none', 'opacity-50');
        exitButton.disabled = false;
    });

    table.addEventListener('keydown', event => {
        if ((event.key === 'Enter' || event.key === ' ') && event.target.matches('tr[data-student-id]')) {
            event.preventDefault();
            event.target.click();
        }
    });

    table.addEventListener('change', event => {
        if (event.target.matches('.student-row-check')) updateExportButton();
    });

    checkAll.addEventListener('change', () => {
        table.querySelectorAll('.student-row-check').forEach(checkbox => checkbox.checked = checkAll.checked);
        updateExportButton();
    });

    exitButton.addEventListener('click', () => {
        if (!selectedRow) return;
        exitForm.action = `${@json(url('/pkbm/data-siswa'))}/${selectedRow.dataset.studentId}/keluar`;
        document.getElementById('student-exit-name').textContent = selectedRow.cells[2].querySelector('span').textContent;
        exitDialog.showModal();
    });

    exportButton.addEventListener('click', () => {
        exportForm.querySelectorAll('input[name="ids[]"]').forEach(input => input.remove());
        table.querySelectorAll('.student-row-check:checked').forEach(checkbox => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = checkbox.value;
            exportForm.append(input);
        });
        if (exportForm.querySelector('input[name="ids[]"]')) exportForm.submit();
    });

    perPage.addEventListener('change', () => {
        const current = filterForm.querySelector('input[name="per_page"]');
        current.value = perPage.value;
        filterForm.requestSubmit();
    });

    document.querySelectorAll('[data-open-dialog]').forEach(button => {
        button.addEventListener('click', () => document.getElementById(button.dataset.openDialog).showModal());
    });
    document.querySelectorAll('[data-close-dialog]').forEach(button => {
        button.addEventListener('click', () => document.getElementById(button.dataset.closeDialog).close());
    });
    document.querySelectorAll('dialog').forEach(dialog => {
        dialog.addEventListener('click', event => {
            if (event.target === dialog) dialog.close();
        });
    });
    updateExportButton();
});
</script>
@endpush
@endsection