@extends('layouts.app')

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

@section('content')
<div class="pkbm-master-page 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>Siswa Keluar</p>
            <h1 class="pkbm-dashboard__title">Siswa Keluar</h1>
            <p class="pkbm-dashboard__subtitle">Lihat riwayat siswa keluar dan masukkan kembali ke kelas pada periode aktif.</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

    @unless ($period)
        <div role="status" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <span>Atur periode akademik aktif sebelum memasukkan kembali siswa.</span>
        </div>
    @endunless

    <section class="sp-card overflow-hidden">
        <div class="flex flex-wrap items-end justify-between gap-3 border-b border-slate-100 p-4">
            <div>
                <h2 class="sp-section-title">Riwayat siswa keluar</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($records->total(), 0, ',', '.') }} siswa · riwayat tetap tersimpan setelah siswa diaktifkan kembali.</p>
            </div>
            <form method="GET" action="{{ route('pkbm.siswa.exited') }}" class="flex w-full gap-2 sm:w-auto">
                <label for="exited-student-search" class="sr-only">Cari nama, NIS, atau NISN</label>
                <input id="exited-student-search" type="search" name="q" value="{{ request('q') }}" placeholder="Cari nama, NIS, NISN..." class="sp-form-control min-w-0 flex-1 px-3 py-2 text-sm sm:w-64">
                <button type="submit" class="sp-btn-secondary shrink-0"><i class="bi bi-search" aria-hidden="true"></i>Cari</button>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="sp-table min-w-[900px]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        <th scope="col">Nama siswa</th>
                        <th scope="col">Identitas</th>
                        <th scope="col">Tanggal keluar</th>
                        <th scope="col">Periode keluar</th>
                        <th scope="col">Alasan</th>
                        <th scope="col">Keterangan</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $index => $record)
                        <tr>
                            <td class="text-slate-500">{{ $records->firstItem() + $index }}</td>
                            <td>
                                <span class="block font-bold text-slate-900">{{ $record->nama_siswa }}</span>
                            </td>
                            <td class="leading-5 text-slate-600">NIS: {{ $record->nis ?: '-' }}<br>NISN: {{ $record->nisn ?: '-' }}</td>
                            <td class="text-slate-600">{{ $record->tgl_keluar ? \Illuminate\Support\Carbon::parse($record->tgl_keluar)->format('d/m/Y') : '-' }}</td>
                            <td class="text-slate-600">{{ $record->tahun_keluar ?: '-' }}<br><span class="text-xs">{{ $record->semester_keluar ?: 'Semester tidak dicatat' }}</span></td>
                            <td><span class="rounded-full border border-amber-100 bg-amber-50 px-2 py-1 text-[11px] font-semibold text-amber-800">{{ $record->alasan ?: 'Keluar' }}</span></td>
                            <td class="max-w-56 text-slate-600"><span class="line-clamp-2">{{ $record->keterangan ?: '-' }}</span></td>
                            <td class="text-right">
                                @if ($period && $classes->isNotEmpty())
                                    <button type="button" class="sp-btn-primary whitespace-nowrap" data-reinstate-button
                                        data-action="{{ route('pkbm.siswa.reinstate', $record->id) }}"
                                        data-student="{{ $record->nama_siswa }}">
                                        <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>Aktifkan kembali
                                    </button>
                                @else
                                    <button type="button" disabled class="sp-btn-primary whitespace-nowrap opacity-50" title="Periode atau kelas aktif belum tersedia">
                                        <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>Aktifkan kembali
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="border-b-0 px-4 py-12 text-center text-sm text-slate-500">
                                {{ request()->filled('q') ? 'Data siswa keluar tidak ditemukan.' : 'Tidak ada siswa keluar yang perlu ditindaklanjuti.' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())
            <div class="border-t border-slate-100 p-4">{{ $records->links() }}</div>
        @endif
    </section>
</div>

<dialog id="reinstate-student-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="reinstate-student-title">
    <form id="reinstate-student-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-person-check"></i></span>
                <div>
                    <h2 id="reinstate-student-title" class="sp-section-title">Masukkan kembali siswa</h2>
                    <p id="reinstate-student-name" class="mt-1 text-xs text-slate-500"></p>
                </div>
            </div>
            <button type="button" id="close-reinstate-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">
            <p class="text-xs leading-5 text-slate-500">Periode penempatan: <strong class="text-slate-700">{{ $period?->tahun_pelajaran }} · {{ $period?->semester }}</strong>. Riwayat siswa keluar akan tetap tersimpan.</p>
            <div>
                <label for="reinstate-grade" class="sp-form-label">Tingkatan tujuan <span class="text-rose-500">*</span></label>
                <select id="reinstate-grade" name="tingkatan" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <option value="">Pilih tingkatan</option>
                    @foreach ($levels as $level)
                        <option value="{{ $level }}">Tingkatan {{ $level }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="reinstate-class" class="sp-form-label">Kelas tujuan <span class="text-rose-500">*</span></label>
                <select id="reinstate-class" name="id_kelas" required disabled class="sp-form-control w-full px-3 py-2.5 text-sm disabled:bg-slate-100">
                    <option value="">Pilih tingkatan terlebih dahulu</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id }}" data-level="{{ $class->tingkatan }}" hidden>{{ $class->nama_kelas }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" id="cancel-reinstate-dialog" class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-person-check" aria-hidden="true"></i>Masukkan ke siswa aktif</button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('reinstate-student-dialog');
    const form = document.getElementById('reinstate-student-form');
    const grade = document.getElementById('reinstate-grade');
    const classSelect = document.getElementById('reinstate-class');

    document.querySelectorAll('[data-reinstate-button]').forEach(button => {
        button.addEventListener('click', () => {
            form.action = button.dataset.action;
            document.getElementById('reinstate-student-name').textContent = button.dataset.student;
            grade.value = '';
            classSelect.value = '';
            classSelect.disabled = true;
            Array.from(classSelect.options).forEach(option => {
                if (option.value) option.hidden = true;
            });
            dialog.showModal();
        });
    });

    grade.addEventListener('change', () => {
        classSelect.value = '';
        classSelect.disabled = !grade.value;
        Array.from(classSelect.options).forEach(option => {
            if (option.value) option.hidden = option.dataset.level !== grade.value;
        });
        classSelect.options[0].textContent = grade.value ? 'Pilih kelas' : 'Pilih tingkatan terlebih dahulu';
    });

    document.getElementById('close-reinstate-dialog').addEventListener('click', () => dialog.close());
    document.getElementById('cancel-reinstate-dialog').addEventListener('click', () => dialog.close());
    dialog.addEventListener('click', event => {
        if (event.target === dialog) dialog.close();
    });
});
</script>
@endpush
@endsection