@extends('layouts.app')

@section('title', 'Set Kelas')

@section('content')
@php
    $membersUpdateUrl = $selectedClass
        ? route('pkbm.kelas.members.update', $selectedClass->id)
        : '';
@endphp
<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>Set Kelas</p>
            <h1 class="pkbm-dashboard__title">Manajemen pengaturan kelas</h1>
            <p class="pkbm-dashboard__subtitle">Atur rombongan belajar dan keanggotaan siswa pada periode akademik aktif.</p>
        </div>
        <div class="pkbm-period-chip">
            <span class="pkbm-period-chip__icon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-period-chip__label">Periode aktif</span>
                @if ($period)
                    <span class="pkbm-period-chip__value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                @else
                    <a href="{{ route('pkbm.settings.index') }}" class="pkbm-period-chip__value">Atur periode akademik</a>
                @endif
            </span>
        </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 (session('warning'))
        <div role="status" class="settings-notice settings-notice--warning">
            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i><span>{{ session('warning') }}</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

    @unless ($period)
        <div role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            Belum ada periode akademik aktif. Anda tetap dapat mengelola daftar kelas, tetapi jumlah siswa dan pengaturan anggota memerlukan periode aktif.
        </div>
    @endunless

    <div class="flex flex-wrap justify-end gap-2">
        <a href="{{ route('pkbm.kelas.print') }}" target="_blank" rel="noopener" class="sp-btn-secondary">
            <i class="bi bi-printer" aria-hidden="true"></i>Cetak semua siswa
        </a>
        @if ($period?->semester === 'Genap')
            <form method="POST" action="{{ route('pkbm.kelas.copy') }}" onsubmit="return confirm('Salin siswa dari semester Ganjil ke semester Genap untuk kelas yang sama?')">
                @csrf
                <button type="submit" class="sp-btn-secondary">
                    <i class="bi bi-arrow-repeat" aria-hidden="true"></i>Salin data semester Ganjil
                </button>
            </form>
        @elseif ($period?->semester === 'Ganjil')
            <form method="POST" action="{{ route('pkbm.kelas.promote') }}" onsubmit="return confirm('Naikkan siswa dari semester Genap tahun pelajaran sebelumnya? Rombel tujuan mengikuti nama kelas asal.')">
                @csrf
                <button type="submit" class="sp-btn-secondary">
                    <i class="bi bi-graph-up-arrow" aria-hidden="true"></i>Naikkan kelas
                </button>
            </form>
        @endif
        <button type="button" class="sp-btn-primary" data-open-class-form>
            <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah kelas
        </button>
    </div>

    <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 kelas</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($classes->count(), 0, ',', '.') }} kelas aktif</p>
            </div>
            <a href="{{ route('pkbm.kelas.print') }}" target="_blank" rel="noopener" class="sp-btn-secondary px-3 py-2 text-xs">
                <i class="bi bi-printer" aria-hidden="true"></i>Cetak daftar
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[60rem]">
                <thead>
                    <tr>
                        <th scope="col">Nama kelas</th>
                        <th scope="col" class="text-center">Tingkatan</th>
                        <th scope="col">Wali kelas</th>
                        <th scope="col" class="text-center">Jumlah siswa</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($classes as $class)
                        <tr>
                            <th scope="row" class="font-semibold text-slate-800">
                                {{ $class->nama_kelas ?: 'Kelas tanpa nama' }}
                                <span class="mt-1 block text-xs font-normal text-slate-500">Tingkat {{ $class->tingkatan }}</span>
                            </th>
                            <td class="text-center"><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">{{ $class->tingkatan }}</span></td>
                            <td>
                                @if ($class->wali_kelas_id)
                                    <span class="font-medium text-slate-700">{{ $class->wali_kelas_nama ?: 'Nama guru tidak tersedia' }}</span>
                                @else
                                    <span class="mb-1 block text-sm text-slate-500">Belum diatur</span>
                                    <button
                                        type="button"
                                        class="sp-btn-secondary px-3 py-2 text-xs"
                                        data-edit-class
                                        data-id="{{ $class->id }}"
                                        data-name="{{ $class->nama_kelas }}"
                                        data-grade="{{ $class->tingkatan }}"
                                        data-teacher=""
                                        aria-label="Atur wali kelas {{ $class->nama_kelas }}">
                                        Atur wali kelas
                                    </button>
                                @endif
                            </td>
                            <td class="text-center font-semibold text-slate-800">{{ number_format($class->student_count, 0, ',', '.') }} <span class="text-xs font-normal text-slate-500">siswa</span></td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <a href="{{ route('pkbm.kelas.print', $class->id) }}" target="_blank" rel="noopener" class="settings-icon-action" aria-label="Cetak siswa {{ $class->nama_kelas }}" title="Cetak daftar siswa">
                                        <i class="bi bi-printer" aria-hidden="true"></i>
                                    </a>
                                    <button
                                        type="button"
                                        class="settings-icon-action"
                                        data-edit-class
                                        data-id="{{ $class->id }}"
                                        data-name="{{ $class->nama_kelas }}"
                                        data-grade="{{ $class->tingkatan }}"
                                        data-teacher="{{ $class->wali_kelas_id }}"
                                        aria-label="Edit kelas {{ $class->nama_kelas }}"
                                        title="Edit kelas">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    <a href="{{ route('pkbm.kelas.index', ['kelas_id' => $class->id]) }}" class="sp-btn-secondary px-3 py-2 text-xs">
                                        Atur anggota
                                    </a>
                                    <form method="POST" action="{{ route('pkbm.kelas.destroy', $class->id) }}" onsubmit="return confirm('Hapus kelas {{ $class->nama_kelas }}? Kelas yang memiliki histori siswa akan dinonaktifkan, bukan dihapus permanen.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus kelas {{ $class->nama_kelas }}" title="Hapus kelas">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-10 text-center text-sm text-slate-500">Belum ada kelas. Tambahkan kelas pertama untuk mulai mengatur rombongan belajar.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="class-form-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="class-form-title">
    <form id="class-form" method="POST" action="{{ route('pkbm.kelas.store') }}" data-update-url="{{ route('pkbm.kelas.update', ['kelasId' => '__CLASS_ID__']) }}">
        @csrf
        <input id="class-form-method" type="hidden" name="_method" value="" disabled>
        <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-mortarboard"></i></span>
                <div>
                    <h2 id="class-form-title" class="sp-section-title">Tambah kelas</h2>
                    <p class="mt-1 text-xs text-slate-500">Isi nama rombongan belajar dan tingkatannya.</p>
                </div>
            </div>
            <button type="button" data-close-class-form 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="space-y-4 p-5">
            <div>
                <label for="class-name" class="sp-form-label">Nama kelas</label>
                <input id="class-name" name="nama_kelas" type="text" maxlength="100" required class="sp-form-control px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="class-grade" class="sp-form-label">Tingkatan</label>
                <select id="class-grade" name="tingkatan" required class="sp-form-control px-3 py-2.5 text-sm">
                    @for ($grade = 1; $grade <= 12; $grade++)
                        <option value="{{ $grade }}">{{ $grade }}</option>
                    @endfor
                </select>
            </div>
            <div>
                <label for="class-teacher" class="sp-form-label">Wali kelas</label>
                <select id="class-teacher" name="id_guru" class="sp-form-control px-3 py-2.5 text-sm" @disabled(! $period)>
                    <option value="">- Belum diatur -</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}">{{ $teacher->nama ?: 'Nama guru tidak tersedia' }}</option>
                    @endforeach
                </select>
                @unless ($period)
                    <p class="mt-1 text-xs text-amber-700">Atur periode akademik aktif untuk menetapkan wali kelas.</p>
                @endunless
            </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-class-form class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan</button>
        </div>
    </form>
</dialog>

@if ($selectedClass)
    <dialog id="class-members-dialog" class="pkbm-master-dialog pkbm-class-members__dialog" aria-labelledby="class-members-title">
        <div class="flex items-start justify-between gap-3 border-b border-slate-100 p-4">
            <div>
                <h2 id="class-members-title" class="sp-section-title">Atur anggota · {{ $selectedClass->nama_kelas }}</h2>
                <p class="mt-1 text-xs text-slate-500">
                    {{ $period ? $period->tahun_pelajaran.' · '.$period->semester : 'Periode akademik belum diatur' }}
                </p>
            </div>
            <a href="{{ route('pkbm.kelas.index') }}" class="grid size-8 shrink-0 place-items-center rounded-lg text-slate-500 hover:bg-slate-100" aria-label="Tutup pengaturan anggota">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </a>
        </div>
        <p id="members-update-error" class="hidden mx-5 mt-4 rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700" role="alert"></p>
        <div class="grid gap-3 p-3 lg:grid-cols-2">
            <section class="overflow-hidden rounded-xl border border-slate-200">
                <div class="flex flex-wrap items-center justify-between gap-2 border-b-2 border-emerald-500 bg-white p-3">
                    <div>
                        <h3 class="text-sm font-bold text-emerald-700">Terdaftar di kelas ini</h3>
                        <p class="mt-1 text-xs text-slate-500"><span id="member-count">{{ $members->count() }}</span> siswa</p>
                    </div>
                    <button type="button" data-members-action="remove" class="sp-btn-secondary px-3 py-2 text-xs" @disabled(! $period || $members->isEmpty())>
                        Keluarkan terpilih
                    </button>
                </div>
                <div class="pkbm-class-members__list">
                    @if (! $period)
                        <p class="p-5 text-sm text-slate-500">Atur periode akademik aktif untuk mengelola anggota kelas.</p>
                    @else
                        <table class="sp-table">
                            <thead><tr><th class="w-12"><input type="checkbox" data-select-all="members" aria-label="Pilih semua siswa di kelas"></th><th scope="col">Nama siswa</th></tr></thead>
                            <tbody id="members-list" data-roster-list="members">
                                @forelse ($members as $student)
                                    <tr draggable="true" data-id="{{ $student->id }}">
                                        <td><input type="checkbox" value="{{ $student->id }}" 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>
                                    </tr>
                                @empty
                                    <tr class="roster-empty"><td colspan="2" class="py-8 text-center text-sm text-slate-500">Belum ada siswa di kelas ini.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    @endif
                </div>
            </section>
            <section class="overflow-hidden rounded-xl border border-slate-200">
                <div class="border-b-2 border-rose-500 bg-white p-3">
                    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h3 class="text-sm font-bold text-rose-700">Siswa tanpa kelas</h3>
                            <p class="mt-1 text-xs text-slate-500"><span id="unassigned-count">{{ $unassignedStudents->count() }}</span> siswa</p>
                        </div>
                        <button type="button" data-members-action="add" class="sp-btn-primary px-3 py-2 text-xs" @disabled(! $period || $unassignedStudents->isEmpty())>
                            Masukkan terpilih
                        </button>
                    </div>
                    <label class="sr-only" for="unassigned-search">Cari nama atau kelas sebelumnya</label>
                    <input id="unassigned-search" type="search" class="sp-form-control px-3 py-2 text-sm" placeholder="Cari nama atau kelas sebelumnya...">
                </div>
                <div class="pkbm-class-members__list">
                    @if ($period)
                        <table class="sp-table">
                            <thead><tr><th class="w-12"><input type="checkbox" data-select-all="unassigned" aria-label="Pilih semua siswa tanpa kelas"></th><th scope="col">Nama siswa</th></tr></thead>
                            <tbody id="unassigned-list" data-roster-list="unassigned">
                                @forelse ($unassignedStudents as $student)
                                    <tr draggable="true" data-id="{{ $student->id }}">
                                        <td><input type="checkbox" value="{{ $student->id }}" 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>
                                            <span class="mt-1 inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600">{{ $student->rombel_lalu ? 'Sebelumnya: '.$student->rombel_lalu : 'Siswa baru' }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="roster-empty"><td colspan="2" class="py-8 text-center text-sm text-slate-500">Semua siswa sudah memiliki kelas pada periode ini.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    @endif
                </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">Pilih siswa untuk memindahkan beberapa sekaligus, atau seret baris antar daftar.</p>
            <a href="{{ route('pkbm.kelas.index') }}" class="sp-btn-secondary">Tutup</a>
        </div>
    </dialog>
@endif

@push('scripts')
    <script>
        const classDialog = document.querySelector('#class-form-dialog');
        const classForm = document.querySelector('#class-form');
        const classFormMethod = document.querySelector('#class-form-method');
        const classFormTitle = document.querySelector('#class-form-title');
        const className = document.querySelector('#class-name');
        const classGrade = document.querySelector('#class-grade');
        const classTeacher = document.querySelector('#class-teacher');

        document.querySelector('[data-open-class-form]')?.addEventListener('click', () => {
            classForm.action = '{{ route('pkbm.kelas.store') }}';
            classFormMethod.disabled = true;
            classFormTitle.textContent = 'Tambah kelas';
            className.value = '';
            classGrade.value = '1';
            classGrade.dispatchEvent(new Event('change', { bubbles: true }));
            classTeacher.value = '';
            classTeacher.dispatchEvent(new Event('change', { bubbles: true }));
            classDialog.showModal();
        });

        document.querySelectorAll('[data-edit-class]').forEach((button) => {
            button.addEventListener('click', () => {
                classForm.action = classForm.dataset.updateUrl.replace('__CLASS_ID__', button.dataset.id);
                classFormMethod.disabled = false;
                classFormMethod.value = 'PUT';
                classFormTitle.textContent = 'Edit kelas';
                className.value = button.dataset.name;
                classGrade.value = button.dataset.grade;
                classGrade.dispatchEvent(new Event('change', { bubbles: true }));
                classTeacher.value = button.dataset.teacher || '';
                classTeacher.dispatchEvent(new Event('change', { bubbles: true }));
                classDialog.showModal();
            });
        });

        document.querySelectorAll('[data-close-class-form]').forEach((button) => {
            button.addEventListener('click', () => classDialog.close());
        });

        const membersDialog = document.querySelector('#class-members-dialog');
        if (membersDialog) {
            membersDialog.showModal();
            membersDialog.addEventListener('close', () => {
                window.location.assign('{{ route('pkbm.kelas.index') }}');
            }, { once: true });

            const search = document.querySelector('#unassigned-search');
            search?.addEventListener('input', () => {
                const term = search.value.trim().toLocaleLowerCase('id');
                document.querySelectorAll('#unassigned-list tr[data-id]').forEach((row) => {
                    row.hidden = !row.textContent.toLocaleLowerCase('id').includes(term);
                });
            });

            document.querySelectorAll('[data-select-all]').forEach((selectAll) => {
                selectAll.addEventListener('change', () => {
                    const list = document.querySelector(`#${selectAll.dataset.selectAll}-list`);
                    list.querySelectorAll('tr[data-id] input[type="checkbox"]').forEach((checkbox) => {
                        if (!checkbox.closest('tr').hidden) {
                            checkbox.checked = selectAll.checked;
                        }
                    });
                });
            });

            const updateMembers = async (action, studentIds, draggedRow = null) => {
                const error = document.querySelector('#members-update-error');
                error.classList.add('hidden');

                try {
                    const response = await fetch(@json($membersUpdateUrl), {
                        method: 'PUT',
                        headers: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                        body: JSON.stringify({ action, siswa_ids: studentIds }),
                    });
                    if (!response.ok) {
                        const result = await response.json().catch(() => ({}));
                        throw new Error(result.message || Object.values(result.errors || {}).flat().join(' ') || 'Perubahan anggota gagal disimpan.');
                    }

                    if (draggedRow) {
                        draggedRow.querySelector('input[type="checkbox"]').checked = false;
                        const sourceList = document.querySelector(`#${action === 'add' ? 'unassigned' : 'members'}-list`);
                        const targetList = document.querySelector(`#${action === 'add' ? 'members' : 'unassigned'}-list`);
                        sourceList?.querySelector(`tr[data-id="${draggedRow.dataset.id}"]`)?.remove();
                        targetList?.querySelector('.roster-empty')?.remove();
                        targetList?.append(draggedRow);
                        document.querySelector('#member-count').textContent = document.querySelectorAll('#members-list tr[data-id]').length;
                        document.querySelector('#unassigned-count').textContent = document.querySelectorAll('#unassigned-list tr[data-id]').length;
                    } else {
                        window.location.reload();
                    }
                } catch (requestError) {
                    error.textContent = requestError.message;
                    error.classList.remove('hidden');
                }
            };

            document.querySelectorAll('[data-members-action]').forEach((button) => {
                button.addEventListener('click', () => {
                    const action = button.dataset.membersAction;
                    const listId = action === 'add' ? 'unassigned-list' : 'members-list';
                    const studentIds = [...document.querySelectorAll(`#${listId} input[type="checkbox"]:checked`)]
                        .map((checkbox) => checkbox.value);
                    if (studentIds.length) {
                        updateMembers(action, studentIds);
                    }
                });
            });

            let draggedRow = null;
            document.querySelectorAll('#members-list tr[data-id], #unassigned-list tr[data-id]').forEach((row) => {
                row.addEventListener('dragstart', (event) => {
                    draggedRow = row;
                    event.dataTransfer.setData('text/plain', row.dataset.id);
                    event.dataTransfer.effectAllowed = 'move';
                });
                row.addEventListener('dragend', () => {
                    draggedRow = null;
                });
            });

            document.querySelectorAll('[data-roster-list]').forEach((list) => {
                list.addEventListener('dragover', (event) => {
                    if (draggedRow && draggedRow.parentElement !== list) {
                        event.preventDefault();
                        event.dataTransfer.dropEffect = 'move';
                    }
                });
                list.addEventListener('drop', (event) => {
                    event.preventDefault();
                    if (!draggedRow || draggedRow.parentElement === list) {
                        return;
                    }
                    const action = list.dataset.rosterList === 'members' ? 'add' : 'remove';
                    updateMembers(action, [draggedRow.dataset.id], draggedRow);
                });
            });
        }
    </script>
@endpush
@endsection