@extends('layouts.app')

@section('title', 'Set Guru Mapel')

@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>Set Kelas dan Tugas</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Set Guru Mapel</p>
            <h1 class="pkbm-dashboard__title">Manajemen guru pengampu</h1>
            <p class="pkbm-dashboard__subtitle">Atur penugasan guru untuk mata pelajaran di setiap kelas pada periode akademik.</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 ($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">
            Atur periode akademik aktif terlebih dahulu untuk mengelola penugasan.
        </div>
    @endunless

    <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 guru pengampu</h2>
                <p class="mt-1 text-xs text-slate-500">{{ $assignments->count() }} grup penugasan pada periode aktif</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <button type="button" class="sp-btn-primary px-3 py-2 text-xs" data-open-create @disabled(! $period || $classes->isEmpty() || $teachers->isEmpty() || $subjects->isEmpty())>
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah penugasan
                </button>
                <form method="GET" action="{{ route('pkbm.guru-mapel.index') }}">
                    <label for="subject-filter" class="sr-only">Filter mata pelajaran</label>
                    <select id="subject-filter" name="filter_id_mapel" onchange="this.form.submit()" class="sp-form-control px-3 py-2 text-xs">
                        <option value="">Semua mata pelajaran</option>
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected((string) request('filter_id_mapel') === (string) $subject->id)>{{ $subject->nama_mapel }}</option>
                        @endforeach
                    </select>
                </form>
                <button type="button" class="sp-btn-secondary px-3 py-2 text-xs" data-open-copy @disabled(! $period || $sourcePeriods->isEmpty())>
                    <i class="bi bi-arrow-repeat" aria-hidden="true"></i>Salin periode
                </button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[36rem]">
                <thead>
                    <tr>
                        <th scope="col">Guru</th>
                        <th scope="col">Mata pelajaran</th>
                        <th scope="col">Kelas</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($assignments as $assignment)
                        <tr>
                            <th scope="row" class="font-semibold text-slate-800">{{ $assignment->nama_guru }}</th>
                            <td>{{ $assignment->nama_mapel }}</td>
                            <td>{{ $assignment->grades->implode(', ') ?: '-' }}</td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-edit-group
                                            data-teacher="{{ $assignment->id_guru }}" data-subject="{{ $assignment->id_mapel }}"
                                            data-classes="{{ $assignment->class_ids->implode(',') }}"
                                            aria-label="Edit kelas yang diampu {{ $assignment->nama_mapel }} oleh {{ $assignment->nama_guru }}" title="Edit penugasan">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    <form method="POST" action="{{ route('pkbm.guru-mapel.group.destroy', [$assignment->id_guru, $assignment->id_mapel]) }}" onsubmit="return confirm('Hapus semua kelas yang diampu untuk guru dan mata pelajaran ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus penugasan {{ $assignment->nama_mapel }} oleh {{ $assignment->nama_guru }}" title="Hapus penugasan">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-10 text-center text-sm text-slate-500">Belum ada penugasan guru mapel pada periode aktif.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="create-assignment-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-assignment-title">
    <form method="POST" action="{{ route('pkbm.guru-mapel.store') }}">
        @csrf
        <input type="hidden" name="_form" value="create">
        <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-plus"></i></span>
                <div>
                    <h2 id="create-assignment-title" class="sp-section-title">Tambah penugasan</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih guru, mata pelajaran, dan satu atau beberapa kelas.</p>
                </div>
            </div>
            <button type="button" data-close-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="space-y-4 p-5">
            <fieldset @disabled(! $period) class="space-y-4">
                <div>
                    <label for="new-teacher" class="sp-form-label">Guru pengampu</label>
                    <select id="new-teacher" name="id_guru" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                        <option value="">Pilih guru</option>
                        @foreach ($teachers as $teacher)
                            <option value="{{ $teacher->id }}" @selected((string) old('id_guru') === (string) $teacher->id)>{{ $teacher->nama ?: 'Nama guru tidak tersedia' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="new-subject" class="sp-form-label">Mata pelajaran</label>
                    <select id="new-subject" name="id_mapel" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                        <option value="">Pilih mata pelajaran</option>
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected((string) old('id_mapel') === (string) $subject->id)>{{ $subject->nama_mapel ?: 'Mata pelajaran tanpa nama' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="new-skk" class="sp-form-label">SKK <span class="font-normal text-slate-400">(opsional)</span></label>
                    <input id="new-skk" name="skk" type="number" min="0" step="0.01" value="{{ old('skk', 0) }}" class="sp-form-control w-full px-3 py-2.5 text-sm">
                </div>
                <fieldset class="rounded-xl border border-slate-200 p-3">
                    <legend class="px-1 text-sm font-semibold text-slate-700">Pilih kelas</legend>
                    @if ($classes->isEmpty())
                        <p class="text-sm text-slate-500">Belum ada kelas aktif untuk PKBM ini.</p>
                    @else
                        <div class="grid max-h-56 gap-2 overflow-y-auto sm:grid-cols-2">
                            @foreach ($classes as $class)
                                <label class="flex items-center gap-2 rounded-lg border border-slate-100 px-3 py-2 text-sm hover:bg-slate-50">
                                    <input type="checkbox" name="id_kelas[]" value="{{ $class->id }}" @checked(in_array((string) $class->id, array_map('strval', (array) old('id_kelas', [])), true)) class="rounded border-slate-300 text-blue-600">
                                    <span>{{ $class->nama_kelas ?: 'Kelas tanpa nama' }} <span class="text-xs text-slate-500">· Tingkat {{ $class->tingkatan }}</span></span>
                                </label>
                            @endforeach
                        </div>
                    @endif
                </fieldset>
            </fieldset>
        </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 class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary" @disabled(! $period || $classes->isEmpty() || $teachers->isEmpty() || $subjects->isEmpty())>
                <i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan penugasan
            </button>
        </div>
    </form>
</dialog>

<dialog id="edit-group-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-group-title">
    <form id="edit-group-form" method="POST" data-update-url="{{ route('pkbm.guru-mapel.group.update', ['teacherId' => '__TEACHER_ID__', 'subjectId' => '__SUBJECT_ID__']) }}">
        @csrf
        @method('PUT')
        <input type="hidden" name="_form" value="edit">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="edit-group-title" class="sp-section-title">Edit penugasan</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih kelas yang diampu oleh guru untuk mata pelajaran ini.</p>
            </div>
            <button type="button" data-close-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="space-y-4 p-5">
            <div>
                <label for="edit-teacher" class="sp-form-label">Guru pengampu</label>
                <select id="edit-teacher" name="id_guru" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}">{{ $teacher->nama ?: 'Nama guru tidak tersedia' }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="edit-subject" class="sp-form-label">Mata pelajaran</label>
                <select id="edit-subject" name="id_mapel" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    @foreach ($subjects as $subject)
                        <option value="{{ $subject->id }}">{{ $subject->nama_mapel ?: 'Mata pelajaran tanpa nama' }}</option>
                    @endforeach
                </select>
            </div>
            <fieldset class="rounded-xl border border-slate-200 p-3">
                <legend class="px-1 text-sm font-semibold text-slate-700">Kelas yang diampu</legend>
                <div class="grid max-h-56 gap-2 overflow-y-auto sm:grid-cols-2">
                    @foreach ($classes as $class)
                        <label class="flex items-center gap-2 rounded-lg border border-slate-100 px-3 py-2 text-sm hover:bg-slate-50">
                            <input type="checkbox" name="id_kelas[]" value="{{ $class->id }}" class="edit-group-class rounded border-slate-300 text-blue-600">
                            <span>{{ $class->nama_kelas ?: 'Kelas tanpa nama' }} <span class="text-xs text-slate-500">· Tingkat {{ $class->tingkatan }}</span></span>
                        </label>
                    @endforeach
                </div>
            </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 class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan perubahan</button>
        </div>
    </form>
</dialog>

<dialog id="copy-period-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="copy-period-title">
    <form method="POST" action="{{ route('pkbm.guru-mapel.copy') }}">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div>
                <h2 id="copy-period-title" class="sp-section-title">Salin penugasan</h2>
                <p class="mt-1 text-xs text-slate-500">Penugasan yang sudah ada tidak akan digandakan.</p>
            </div>
            <button type="button" data-close-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="space-y-4 p-5">
            <div>
                <label for="source-period" class="sp-form-label">Salin dari periode</label>
                <select id="source-period" name="periode_asal" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    @foreach ($sourcePeriods as $sourcePeriod)
                        <option value="{{ $sourcePeriod->tahun_pelajaran }}|{{ $sourcePeriod->semester }}">{{ $sourcePeriod->tahun_pelajaran }} · {{ $sourcePeriod->semester }}</option>
                    @endforeach
                </select>
                <input id="source-year" type="hidden" name="tahun_pelajaran_asal">
                <input id="source-semester" type="hidden" name="semester_asal">
            </div>
            <p class="text-xs text-slate-500">Tujuan: {{ $period?->tahun_pelajaran }} · {{ $period?->semester }}</p>
        </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 class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-arrow-repeat" aria-hidden="true"></i>Salin penugasan</button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        const createDialog = document.querySelector('#create-assignment-dialog');
        document.querySelector('[data-open-create]')?.addEventListener('click', () => createDialog.showModal());

        const editDialog = document.querySelector('#edit-group-dialog');
        const editForm = document.querySelector('#edit-group-form');
        document.querySelectorAll('[data-edit-group]').forEach((button) => {
            button.addEventListener('click', () => {
                editForm.action = editForm.dataset.updateUrl
                    .replace('__TEACHER_ID__', button.dataset.teacher)
                    .replace('__SUBJECT_ID__', button.dataset.subject);
                document.querySelector('#edit-teacher').value = button.dataset.teacher;
                document.querySelector('#edit-subject').value = button.dataset.subject;
                const selectedClasses = button.dataset.classes.split(',').filter(Boolean);
                document.querySelectorAll('.edit-group-class').forEach((checkbox) => {
                    checkbox.checked = selectedClasses.includes(checkbox.value);
                });
                editDialog.showModal();
            });
        });

        const copyDialog = document.querySelector('#copy-period-dialog');
        document.querySelector('[data-open-copy]')?.addEventListener('click', () => copyDialog.showModal());
        const sourcePeriod = document.querySelector('#source-period');
        const updateSourcePeriod = () => {
            const [year, semester] = (sourcePeriod.value || '|').split('|');
            document.querySelector('#source-year').value = year;
            document.querySelector('#source-semester').value = semester;
        };
        sourcePeriod?.addEventListener('change', updateSourcePeriod);
        updateSourcePeriod();

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

        @if (old('_form') === 'create')
            createDialog.showModal();
        @elseif (old('_form') === 'edit')
            editDialog.showModal();
        @endif
    </script>
@endpush
@endsection