@extends('layouts.app')

@section('title', 'Atur Ruang Ujian')

@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">Standar Penilaian <i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Ujian</p>
            <h1 class="pkbm-dashboard__title">Atur Ruang Ujian</h1>
            <p class="pkbm-dashboard__subtitle">Kelola ruang dan peserta berdasarkan tahun pelajaran serta jenis ujian.</p>
        </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">Perubahan belum berhasil disimpan.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
        </div>
    @endif

    <section class="sp-card">
        <div class="sp-card-header"><h2 class="sp-section-title">Pilih periode dan ujian</h2></div>
        <form id="room-filters" method="GET" action="{{ route('pkbm.ujian.rooms') }}" class="grid gap-4 p-5 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
            <label class="block">
                <span class="sp-form-label">Tahun pelajaran</span>
                <select id="room-year" name="tahun_pelajaran" class="sp-form-control px-3">
                    @foreach ($years as $year)<option value="{{ $year }}" @selected($selectedYear === $year)>{{ $year }}</option>@endforeach
                </select>
            </label>
            <label class="block">
                <span class="sp-form-label">Jenis ujian</span>
                <select id="room-exam" name="ujian" class="sp-form-control px-3">
                    <option value="">Pilih jenis ujian</option>
                    @foreach ($exams as $exam)<option value="{{ $exam }}" @selected($selectedExam === $exam)>{{ $exam }}</option>@endforeach
                </select>
            </label>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-search" aria-hidden="true"></i>Tampilkan ruang</button>
        </form>
    </section>

    @if ($selectedExam)
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="sp-section-title">Daftar ruang · {{ $selectedExam }}</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $selectedYear }}@if (! $isEditable) · Riwayat, hanya dapat dilihat @endif</p>
                </div>
                @if ($isEditable)
                    <button type="button" class="sp-btn-primary" data-open-room-form><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah ruang</button>
                @endif
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-full">
                    <thead><tr><th class="w-14">No.</th><th>Nama ruang</th><th>Jumlah siswa</th><th class="w-60 text-right">Aksi</th></tr></thead>
                    <tbody>
                        @forelse ($rooms as $room)
                            @php($assignedIds = $roomAssignments->get($room->nama_ruang, collect()))
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td class="font-semibold text-slate-800">{{ $room->nama_ruang }}</td>
                                <td>{{ $isEditable ? $roomCounts->get($room->nama_ruang, 0).' siswa' : '—' }}</td>
                                <td>
                                    @if ($isEditable)
                                        <div class="flex justify-end gap-2">
                                            <button type="button" class="sp-btn-secondary px-3 py-1.5" data-open-students
                                                data-room-name="{{ $room->nama_ruang }}"
                                                data-room-id="{{ $room->id }}"
                                                data-room-action="{{ route('pkbm.ujian.rooms.students', $room->id) }}"
                                                data-student-ids="{{ $assignedIds->implode(',') }}">
                                                <i class="bi bi-people" aria-hidden="true"></i>Atur siswa
                                            </button>
                                            <form method="POST" action="{{ route('pkbm.ujian.rooms.destroy', $room->id) }}" onsubmit="return confirm('Hapus ruang ini? Ruang harus kosong terlebih dahulu.')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="sp-btn-danger px-3 py-1.5" aria-label="Hapus {{ $room->nama_ruang }}"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                            </form>
                                        </div>
                                    @else
                                        <span class="block text-right text-xs text-slate-400">Riwayat</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">Belum ada ruang untuk jenis ujian ini. Tambahkan ruang untuk mulai mengatur peserta.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @else
        <section class="sp-card p-5 text-sm text-slate-500">Pilih tahun pelajaran dan jenis ujian untuk melihat daftar ruang.</section>
    @endif
</div>

@if ($selectedExam && $isEditable)
    <dialog id="add-room-dialog" class="pkbm-master-dialog" aria-labelledby="add-room-title">
        <form method="POST" action="{{ route('pkbm.ujian.rooms.store') }}">
            @csrf
            <input type="hidden" name="tahun_pelajaran" value="{{ $selectedYear }}">
            <input type="hidden" name="ujian" value="{{ $selectedExam }}">
            <div class="flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                <div><h2 id="add-room-title" class="sp-section-title">Tambah ruang ujian</h2><p class="mt-1 text-xs text-slate-500">{{ $selectedExam }} · {{ $selectedYear }}</p></div>
                <button type="button" class="grid size-8 shrink-0 place-items-center rounded-lg text-slate-500 hover:bg-slate-100" data-close-dialog="add-room-dialog" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
            <div class="space-y-3 p-5">
                <div class="flex items-center justify-between gap-3">
                    <span class="sp-form-label mb-0">Daftar nama ruang</span>
                    <button type="button" class="sp-btn-secondary px-3 py-2 text-xs" id="add-room-name"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah ruang lagi</button>
                </div>
                <div id="room-name-fields" class="space-y-2">
                    @php($oldRoomNames = old('nama_ruang', ['']))
                    @if (! is_array($oldRoomNames) || $oldRoomNames === [])
                        @php($oldRoomNames = [''])
                    @endif
                    @foreach ($oldRoomNames as $roomName)
                        <div class="flex items-center gap-2" data-room-name-row>
                            <label class="sr-only" for="room-name-{{ $loop->index }}">Nama ruang {{ $loop->iteration }}</label>
                            <input id="room-name-{{ $loop->index }}" name="nama_ruang[]" required maxlength="50" class="sp-form-control px-3" placeholder="Contoh: Ruang 01" value="{{ $roomName }}" @if ($loop->first) autofocus @endif>
                            <button type="button" class="sp-btn-secondary px-3 py-2" data-remove-room-name aria-label="Hapus baris nama ruang"><i class="bi bi-dash-lg" aria-hidden="true"></i></button>
                        </div>
                    @endforeach
                </div>
                <p class="text-xs text-slate-500">Tambahkan beberapa nama ruang, lalu simpan semuanya sekaligus.</p>
                <template id="room-name-field-template">
                    <div class="flex items-center gap-2" data-room-name-row>
                        <label class="sr-only" data-room-name-label></label>
                        <input name="nama_ruang[]" required maxlength="50" class="sp-form-control px-3" placeholder="Contoh: Ruang 02">
                        <button type="button" class="sp-btn-secondary px-3 py-2" data-remove-room-name aria-label="Hapus baris nama ruang"><i class="bi bi-dash-lg" aria-hidden="true"></i></button>
                    </div>
                </template>
            </div>
            <div class="flex justify-end gap-2 border-t border-slate-100 p-5">
                <button type="button" class="sp-btn-secondary" data-close-dialog="add-room-dialog">Batal</button>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan semua ruang</button>
            </div>
        </form>
    </dialog>

    <dialog id="room-students-dialog" class="pkbm-master-dialog pkbm-exam-room-dialog" aria-labelledby="room-students-title">
        <form id="room-students-form" method="POST">
            @csrf
            <div class="flex items-start justify-between gap-3 border-b border-slate-100 p-4">
                <div><h2 id="room-students-title" class="sp-section-title">Atur siswa</h2><p id="room-students-subtitle" class="mt-1 text-xs text-slate-500"></p></div>
                <button type="button" class="grid size-8 shrink-0 place-items-center rounded-lg text-slate-500 hover:bg-slate-100" data-close-dialog="room-students-dialog" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
            <div class="grid min-h-0 flex-1 gap-3 overflow-hidden p-3 lg:grid-cols-2">
                <section class="flex min-h-0 flex-col overflow-hidden rounded-xl border border-slate-200">
                    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 bg-slate-50 p-4">
                        <div><h3 class="pkbm-exam-room__panel-title text-emerald-700">Siswa di ruang ini</h3><p class="mt-1 text-xs text-slate-500"><span id="room-selected-count">0</span> siswa</p></div>
                        <button type="button" class="sp-btn-secondary px-3 py-2 text-xs" id="remove-room-students" disabled>Keluarkan pilihan</button>
                    </div>
                    <div class="pkbm-exam-room-dialog__list">
                        <table class="sp-table min-w-full"><thead><tr><th class="w-12"><input type="checkbox" data-select-room="selected" aria-label="Pilih semua siswa di ruang"></th><th>Nama siswa</th></tr></thead><tbody id="room-selected-list"></tbody></table>
                        <p id="room-selected-empty" class="hidden p-5 text-center text-sm text-slate-500">Belum ada siswa yang dipilih.</p>
                    </div>
                </section>
                <section class="flex min-h-0 flex-col overflow-hidden rounded-xl border border-slate-200">
                    <div class="border-b border-slate-200 bg-slate-50 p-4">
                        <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
                            <div><h3 class="pkbm-exam-room__panel-title text-slate-800">Daftar siswa</h3><p class="mt-1 text-xs text-slate-500"><span id="room-candidate-count">{{ $students->count() }}</span> siswa</p></div>
                            <button type="button" class="sp-btn-primary px-3 py-2 text-xs" id="add-room-students" disabled>Masukkan pilihan</button>
                        </div>
                        <label class="block"><span class="sr-only">Filter kelas</span>
                            <select id="room-class-filter" class="sp-form-control px-3 py-2 text-sm"><option value="">Semua kelas</option>@foreach ($classFilters as $class)<option value="{{ $class->id }}">{{ $class->nama_kelas }}</option>@endforeach</select>
                        </label>
                    </div>
                    <div class="pkbm-exam-room-dialog__list">
                        <table class="sp-table min-w-full"><thead><tr><th class="w-12"><input type="checkbox" data-select-room="candidates" aria-label="Pilih semua siswa yang ditampilkan"></th><th>Nama siswa</th><th>Kelas</th></tr></thead>
                            <tbody id="room-candidate-list">
                                @forelse ($students as $student)
                                    <tr data-candidate-row data-student-id="{{ $student->id }}" data-class-id="{{ $student->id_kelas }}">
                                        <td><input type="checkbox" value="{{ $student->id }}" data-room-candidate aria-label="Pilih {{ $student->nama_siswa }}"></td>
                                        <td><span class="font-semibold text-slate-800">{{ $student->nama_siswa }}</span><span class="mt-0.5 block text-xs text-slate-500">NISN: {{ $student->nisn ?: '-' }}</span></td>
                                        <td class="whitespace-nowrap text-xs text-slate-500">{{ $student->nama_kelas }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="py-8 text-center text-sm text-slate-500">Tidak ada siswa aktif yang terjadwal untuk ujian ini.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3">
                <p class="text-xs text-slate-500">Siswa yang dipindahkan ke ruang lain akan mengikuti pilihan terbaru.</p>
                <div class="flex gap-2"><button type="button" class="sp-btn-secondary" data-close-dialog="room-students-dialog">Batal</button><button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan siswa</button></div>
            </div>
        </form>
    </dialog>
@endif

<script>
    const roomFilterForm = document.getElementById('room-filters');
    const roomYearSelect = document.getElementById('room-year');
    const roomExamSelect = document.getElementById('room-exam');
    roomYearSelect?.addEventListener('change', () => {
        roomExamSelect.value = '';
        roomFilterForm.requestSubmit();
    });

    const addRoomDialog = document.getElementById('add-room-dialog');
    document.querySelector('[data-open-room-form]')?.addEventListener('click', () => addRoomDialog.showModal());

    const roomNameFields = document.getElementById('room-name-fields');
    const roomNameTemplate = document.getElementById('room-name-field-template');
    let roomNameIndex = roomNameFields?.querySelectorAll('[data-room-name-row]').length ?? 0;
    document.getElementById('add-room-name')?.addEventListener('click', () => {
        const row = roomNameTemplate.content.firstElementChild.cloneNode(true);
        const input = row.querySelector('input');
        const label = row.querySelector('[data-room-name-label]');
        input.id = `room-name-${roomNameIndex}`;
        label.htmlFor = input.id;
        label.textContent = `Nama ruang ${roomNameIndex + 1}`;
        roomNameFields.append(row);
        roomNameIndex += 1;
        input.focus();
    });
    roomNameFields?.addEventListener('click', (event) => {
        const removeButton = event.target.closest('[data-remove-room-name]');
        if (!removeButton || roomNameFields.querySelectorAll('[data-room-name-row]').length <= 1) return;
        removeButton.closest('[data-room-name-row]').remove();
    });
    @if ($errors->any())
        addRoomDialog?.showModal();
    @endif

    document.querySelectorAll('[data-close-dialog]').forEach((button) => {
        button.addEventListener('click', () => document.getElementById(button.dataset.closeDialog)?.close());
    });

    const roomDialog = document.getElementById('room-students-dialog');
    if (roomDialog) {
        const roomForm = document.getElementById('room-students-form');
        const selectedList = document.getElementById('room-selected-list');
        const candidateList = document.getElementById('room-candidate-list');
        const classFilter = document.getElementById('room-class-filter');
        const addButton = document.getElementById('add-room-students');
        const removeButton = document.getElementById('remove-room-students');
        const selectedCount = document.getElementById('room-selected-count');
        const selectedEmpty = document.getElementById('room-selected-empty');

        const updateSelectedState = () => {
            const count = selectedList.querySelectorAll('input[name="siswa_ids[]"]').length;
            selectedCount.textContent = String(count);
            selectedEmpty.classList.toggle('hidden', count > 0);
            removeButton.disabled = !selectedList.querySelector('[data-selected-student]:checked');
        };

        const syncCandidateRow = (studentId) => {
            const row = candidateList.querySelector(`[data-student-id="${studentId}"]`);
            if (row) {
                row.hidden = Boolean(selectedList.querySelector(`[name="siswa_ids[]"][value="${studentId}"]`))
                    || (classFilter.value !== '' && row.dataset.classId !== classFilter.value);
                row.querySelector('[data-room-candidate]').checked = false;
            }
        };

        const openRoomDialog = (button) => {
            roomForm.action = button.dataset.roomAction;
            document.getElementById('room-students-title').textContent = `Atur siswa · ${button.dataset.roomName}`;
            document.getElementById('room-students-subtitle').textContent = '{{ $selectedExam }} · {{ $selectedYear }}';
            selectedList.replaceChildren();
            classFilter.value = '';
            roomDialog.querySelectorAll('[data-select-room]').forEach((checkbox) => { checkbox.checked = false; });
            candidateList.querySelectorAll('[data-room-candidate]').forEach((checkbox) => { checkbox.checked = false; });
            candidateList.querySelectorAll('[data-candidate-row]').forEach((row) => { row.hidden = false; });
            addButton.disabled = true;
            (button.dataset.studentIds || '').split(',').filter(Boolean).forEach((studentId) => {
                const candidateRow = candidateList.querySelector(`[data-student-id="${studentId}"]`);
                if (!candidateRow) return;
                const row = document.createElement('tr');
                row.dataset.selectedStudent = '';
                const selectCell = document.createElement('td');
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.dataset.selectedStudent = '';
                checkbox.setAttribute('aria-label', `Pilih ${candidateRow.cells[1].querySelector('span').textContent}`);
                selectCell.append(checkbox);
                const nameCell = document.createElement('td');
                nameCell.innerHTML = candidateRow.cells[1].innerHTML;
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'siswa_ids[]';
                hiddenInput.value = studentId;
                nameCell.append(hiddenInput);
                row.append(selectCell, nameCell);
                selectedList.append(row);
                syncCandidateRow(studentId);
            });
            updateSelectedState();
            roomDialog.showModal();
        };

        document.querySelectorAll('[data-open-students]').forEach((button) => {
            button.addEventListener('click', () => openRoomDialog(button));
        });
        document.getElementById('add-room-students').addEventListener('click', () => {
            candidateList.querySelectorAll('[data-room-candidate]:checked').forEach((checkbox) => {
                const candidateRow = checkbox.closest('[data-candidate-row]');
                const studentId = checkbox.value;
                const row = document.createElement('tr');
                row.dataset.selectedStudent = '';
                const selectCell = document.createElement('td');
                const selectedCheckbox = document.createElement('input');
                selectedCheckbox.type = 'checkbox';
                selectedCheckbox.dataset.selectedStudent = '';
                selectedCheckbox.setAttribute('aria-label', `Pilih ${candidateRow.cells[1].querySelector('span').textContent}`);
                selectCell.append(selectedCheckbox);
                const nameCell = document.createElement('td');
                nameCell.innerHTML = candidateRow.cells[1].innerHTML;
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'siswa_ids[]';
                hiddenInput.value = studentId;
                nameCell.append(hiddenInput);
                row.append(selectCell, nameCell);
                selectedList.append(row);
                syncCandidateRow(studentId);
            });
            updateSelectedState();
        });
        document.getElementById('remove-room-students').addEventListener('click', () => {
            selectedList.querySelectorAll('[data-selected-student]:checked').forEach((checkbox) => {
                const studentId = checkbox.closest('tr').querySelector('[name="siswa_ids[]"]').value;
                checkbox.closest('tr').remove();
                syncCandidateRow(studentId);
            });
            updateSelectedState();
        });
        document.addEventListener('change', (event) => {
            if (event.target.matches('[data-room-candidate]')) {
                addButton.disabled = !candidateList.querySelector('[data-room-candidate]:checked');
            } else if (event.target.matches('[data-selected-student]')) {
                removeButton.disabled = !selectedList.querySelector('[data-selected-student]:checked');
            } else if (event.target === classFilter) {
                candidateList.querySelectorAll('[data-candidate-row]').forEach((row) => {
                    row.hidden = Boolean(selectedList.querySelector(`[name="siswa_ids[]"][value="${row.dataset.studentId}"]`))
                        || (classFilter.value !== '' && row.dataset.classId !== classFilter.value);
                    if (row.hidden) row.querySelector('[data-room-candidate]').checked = false;
                });
                addButton.disabled = !candidateList.querySelector('[data-room-candidate]:checked');
            } else if (event.target.matches('[data-select-room="candidates"]')) {
                candidateList.querySelectorAll('[data-room-candidate]').forEach((checkbox) => {
                    if (!checkbox.closest('tr').hidden) checkbox.checked = event.target.checked;
                });
                addButton.disabled = !candidateList.querySelector('[data-room-candidate]:checked');
            } else if (event.target.matches('[data-select-room="selected"]')) {
                selectedList.querySelectorAll('[data-selected-student]').forEach((checkbox) => { checkbox.checked = event.target.checked; });
                removeButton.disabled = !event.target.checked || !selectedList.querySelector('[data-selected-student]');
            }
        });

        const reopenRoomButton = document.querySelector('[data-open-students][data-room-id="{{ $selectedRoomId }}"]');
        if (reopenRoomButton && {{ $selectedRoomId > 0 ? 'true' : 'false' }}) openRoomDialog(reopenRoomButton);
    }
</script>
@endsection