@extends('layouts.app')

@section('title', 'Input TP')

@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"><span>Standar Penilaian</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Raport<i class="bi bi-chevron-right" aria-hidden="true"></i>Input Tujuan Pembelajaran</p>
            <h1 class="pkbm-dashboard__title">Input Tujuan Pembelajaran</h1>
            <p class="pkbm-dashboard__subtitle">Kelola tujuan pembelajaran berdasarkan mata pelajaran dan kelas pada periode aktif.</p>
        </div>
        @if ($period)
            <div class="pkbm-settings__period">
                <span class="pkbm-settings__period-icon"><i class="bi bi-calendar2-week" aria-hidden="true"></i></span>
                <span>
                    <span class="pkbm-settings__period-label">@if ($activePeriod && $activePeriod->tahun_pelajaran === $period->tahun_pelajaran && $activePeriod->semester === $period->semester) Periode aktif @else Periode dipilih @endif</span>
                    <span class="pkbm-settings__period-value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                </span>
            </div>
        @endif
    </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 tujuan pembelajaran.</p>
                <ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        </div>
    @endif

    @include('pkbm.partials.period-selector', [
        'periods' => $periods,
        'period' => $period,
        'activePeriod' => $activePeriod,
    ])

    @if (! $period)
        <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            <i class="bi bi-exclamation-triangle mr-2" aria-hidden="true"></i>Periode akademik aktif belum diatur. Atur periode terlebih dahulu sebelum mengelola tujuan pembelajaran.
        </section>
    @else
        <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 Tujuan Pembelajaran</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $groups->sum(fn ($group) => $group->items->count()) }} tujuan pembelajaran · {{ $period->tahun_pelajaran }} {{ $period->semester }}</p>
                </div>
                @if ($context->level === 'pkbm' || $subjects->isNotEmpty())
                    <div class="flex flex-wrap items-center gap-2">
                        @if ($sourcePeriods->isNotEmpty())
                            <button class="sp-btn-secondary" type="button" data-open-copy>
                                <i class="bi bi-copy" aria-hidden="true"></i>Salin TP Periode Sebelumnya
                            </button>
                        @endif
                        <button class="sp-btn-primary" type="button" data-open-create>
                            <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah TP Baru
                        </button>
                    </div>
                @endif
            </div>

            <form method="GET" action="{{ route('pkbm.raport.input-tp') }}" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)_auto_auto] sm:items-end">
                <div>
                    <label class="sp-form-label" for="filter-tingkatan">Tingkatan</label>
                    <select class="sp-form-control w-full px-3 py-2 text-sm" id="filter-tingkatan" name="tingkatan">
                        <option value="">Semua tingkatan</option>
                        @foreach ($tingkatans as $tingkatan)
                            <option value="{{ $tingkatan }}" @selected(request('tingkatan') == $tingkatan)>Tingkatan {{ $tingkatan }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="filter-mapel">Mata pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2 text-sm" id="filter-mapel" name="mapel">
                        <option value="">Semua mata pelajaran</option>
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected(request('mapel') == $subject->id)>{{ $subject->nama_mapel }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="sp-btn-secondary justify-center" type="submit"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                @if (request()->filled('tingkatan') || request()->filled('mapel'))
                    <a class="sp-btn-secondary justify-center" href="{{ route('pkbm.raport.input-tp') }}"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>Reset</a>
                @endif
            </form>

            @if ($context->level !== 'pkbm' && $subjects->isEmpty())
                <div class="flex flex-col items-center px-5 py-12 text-center">
                    <span class="mb-4 grid size-12 place-items-center rounded-2xl bg-amber-50 text-xl text-amber-600"><i class="bi bi-journal-x" aria-hidden="true"></i></span>
                    <h3 class="sp-section-title">Belum ada mata pelajaran yang ditugaskan</h3>
                    <p class="mt-2 max-w-lg text-sm leading-6 text-slate-500">Mata pelajaran yang dapat dikelola akan tampil setelah penugasan pada periode aktif tersedia.</p>
                </div>
            @elseif ($groups->isEmpty())
                <div class="flex flex-col items-center px-5 py-12 text-center">
                    <span class="mb-4 grid size-12 place-items-center rounded-2xl bg-blue-50 text-xl text-blue-600"><i class="bi bi-bullseye" aria-hidden="true"></i></span>
                    <h3 class="sp-section-title">Belum ada tujuan pembelajaran</h3>
                    <p class="mt-2 max-w-lg text-sm leading-6 text-slate-500">Tambahkan tujuan pembelajaran untuk mata pelajaran dan kelas pada periode aktif.</p>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="sp-table min-w-[52rem]">
                        <thead>
                            <tr>
                                <th class="w-[20%]">Mata pelajaran / Tingkatan</th>
                                <th class="w-[45%]">Deskripsi tujuan pembelajaran</th>
                                <th class="w-[23%]">Kelas</th>
                                <th class="w-[12%] text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($groups as $group)
                                @foreach ($group->items as $index => $tp)
                                    <tr>
                                        @if ($index === 0)
                                            <td rowspan="{{ $group->items->count() }}" class="align-top">
                                                <strong class="block text-slate-800">{{ $group->nama_mapel }}</strong>
                                                <span class="mt-1 inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">Tingkatan {{ $group->tingkatan }}</span>
                                                <span class="mt-1 inline-flex rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{{ $group->items->count() }} TP</span>
                                            </td>
                                        @endif
                                        <td class="whitespace-normal">{{ $tp->deskripsi }}</td>
                                        <td class="whitespace-normal text-sm text-slate-600">{{ $tp->kelas_terkait }}</td>
                                        <td>
                                            <div class="flex items-center justify-center gap-2">
                                                <button class="settings-icon-action" type="button"
                                                    data-edit-tp
                                                    data-update-url="{{ route('pkbm.raport.input-tp.update', $tp->id) }}"
                                                    data-mapel="{{ $tp->id_mapel }}"
                                                    data-tingkatan="{{ $tp->tingkatan }}"
                                                    data-class-ids="{{ implode(',', $tp->class_ids) }}"
                                                    data-description="{{ $tp->deskripsi }}"
                                                    aria-label="Edit tujuan pembelajaran" title="Edit">
                                                    <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                                </button>
                                                <form method="POST" action="{{ route('pkbm.raport.input-tp.delete', $tp->id) }}" onsubmit="return confirm('Hapus tujuan pembelajaran ini?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="settings-icon-action settings-icon-action--danger" type="submit" aria-label="Hapus tujuan pembelajaran" title="Hapus">
                                                        <i class="bi bi-trash3" aria-hidden="true"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </section>
    @endif
</div>

@if ($period && ($context->level === 'pkbm' || $subjects->isNotEmpty()))
    <dialog id="tp-dialog" class="pkbm-master-dialog pkbm-class-form-dialog tp-dialog" aria-labelledby="tp-dialog-title">
        <form id="tp-form" method="POST" action="{{ route('pkbm.raport.input-tp.store') }}" class="text-sm">
            @csrf
            <input id="tp-method" type="hidden" name="_method" value="">
            <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-bullseye"></i></span>
                    <div>
                        <h2 class="sp-section-title" id="tp-dialog-title">Tambah TP</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $period->tahun_pelajaran }} · Semester {{ $period->semester }}</p>
                    </div>
                </div>
                <button class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" type="button" data-close-dialog aria-label="Tutup">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                </button>
            </div>

            <div class="space-y-4 p-5">
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="sp-form-label" for="tp-mapel">Mata pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="tp-mapel" name="mapel_id" required>
                        <option value="">Pilih mata pelajaran</option>
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject->id }}">{{ $subject->nama_mapel }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="tp-tingkatan">Tingkatan kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="tp-tingkatan" name="tingkatan" required>
                        <option value="">Pilih tingkatan</option>
                        @foreach ($tingkatans as $tingkatan)
                            <option value="{{ $tingkatan }}">Tingkatan {{ $tingkatan }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <fieldset>
                <legend class="sp-form-label">Cakupan kelas</legend>
                <div id="tp-classes" class="min-h-14 rounded-xl border border-slate-200 bg-slate-50 p-3">
                    <p class="text-xs text-slate-500">Pilih tingkatan. TP akan berlaku untuk semua kelas aktif pada tingkatan tersebut.</p>
                </div>
            </fieldset>

            <fieldset>
                <legend class="mb-2 flex w-full items-center justify-between gap-3">
                    <span class="sp-form-label mb-0">Deskripsi TP</span>
                    <button id="tp-add-row" class="text-xs font-semibold text-blue-700 hover:text-blue-800" type="button"><i class="bi bi-plus-lg" aria-hidden="true"></i> Tambah baris</button>
                </legend>
                <div id="tp-descriptions" class="space-y-2"></div>
            </fieldset>
            </div>
            <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                <button class="sp-btn-secondary" type="button" data-close-dialog>Batal</button>
                <button class="sp-btn-primary" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan TP</button>
            </div>
        </form>
    </dialog>

    @if ($sourcePeriods->isNotEmpty())
        <dialog id="tp-copy-dialog" class="pkbm-master-dialog pkbm-class-form-dialog tp-dialog" aria-labelledby="tp-copy-dialog-title">
            <form method="POST" action="{{ route('pkbm.raport.input-tp.copy') }}">
                @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-copy"></i></span>
                        <div>
                            <h2 class="sp-section-title" id="tp-copy-dialog-title">Salin TP Periode Sebelumnya</h2>
                            <p class="mt-1 text-xs text-slate-500">TP disalin berdasarkan mata pelajaran dan tingkatan ke semua kelas aktif yang sesuai.</p>
                        </div>
                    </div>
                    <button class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" type="button" data-close-dialog aria-label="Tutup">
                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="space-y-4 p-5">
                    <div>
                        <label class="sp-form-label" for="tp-source-period">Salin dari periode</label>
                        <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="tp-source-period" name="source_period" required>
                            <option value="">Pilih periode sebelumnya</option>
                            @foreach ($sourcePeriods as $sourcePeriod)
                                <option value="{{ $sourcePeriod->tahun_pelajaran }}|{{ $sourcePeriod->semester }}" @selected(old('source_period') === $sourcePeriod->tahun_pelajaran.'|'.$sourcePeriod->semester)>
                                    {{ $sourcePeriod->tahun_pelajaran }} · Semester {{ $sourcePeriod->semester }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <p class="text-xs text-slate-500">TP pada periode aktif yang sama tidak akan dibuat ulang; cakupan kelasnya akan disegarkan.</p>
                </div>
                <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                    <button class="sp-btn-secondary" type="button" data-close-dialog>Batal</button>
                    <button class="sp-btn-primary" type="submit"><i class="bi bi-copy" aria-hidden="true"></i>Salin TP</button>
                </div>
            </form>
        </dialog>
    @endif

    <script>
        (() => {
            const dialog = document.getElementById('tp-dialog');
            const copyDialog = document.getElementById('tp-copy-dialog');
            const form = document.getElementById('tp-form');
            const method = document.getElementById('tp-method');
            const title = document.getElementById('tp-dialog-title');
            const subject = document.getElementById('tp-mapel');
            const grade = document.getElementById('tp-tingkatan');
            const classArea = document.getElementById('tp-classes');
            const descriptions = document.getElementById('tp-descriptions');
            const addRowButton = document.getElementById('tp-add-row');
            const classData = @js($classesByTingkatan);
            const oldGrade = @js(old('tingkatan', ''));
            const oldMapel = @js(old('mapel_id', ''));
            const oldDescriptions = @js((array) old('deskripsi', ['']));
            const oldSourcePeriod = @js(old('source_period', ''));
            const createUrl = @js(route('pkbm.raport.input-tp.store'));

            function renderClasses() {
                classArea.replaceChildren();
                const classes = classData[grade.value] || [];
                if (!classes.length) {
                    const message = document.createElement('p');
                    message.className = 'text-xs text-slate-500';
                    message.textContent = grade.value
                        ? 'Tidak ada kelas aktif pada tingkatan ini.'
                        : 'Pilih tingkatan terlebih dahulu.';
                    classArea.append(message);
                    return;
                }

                const note = document.createElement('p');
                note.className = 'mb-2 text-xs text-slate-500';
                note.textContent = `TP berlaku untuk ${classes.length} kelas aktif pada tingkatan ini:`;
                const names = document.createElement('p');
                names.className = 'text-sm font-medium text-slate-700';
                names.textContent = classes.map((item) => item.nama_kelas).join(', ');
                classArea.append(note, names);
            }

            function addDescription(value = '') {
                const row = document.createElement('div');
                row.className = 'flex items-start gap-2';
                const textarea = document.createElement('textarea');
                textarea.className = 'sp-form-control min-h-20 w-full px-3 py-2 text-sm';
                textarea.name = 'deskripsi[]';
                textarea.maxLength = 5000;
                textarea.placeholder = 'Tulis deskripsi tujuan pembelajaran...';
                textarea.value = value;
                const remove = document.createElement('button');
                remove.className = 'sp-btn-secondary shrink-0 px-3';
                remove.type = 'button';
                remove.setAttribute('aria-label', 'Hapus baris deskripsi');
                remove.innerHTML = '<i class="bi bi-x-lg" aria-hidden="true"></i>';
                remove.addEventListener('click', () => row.remove());
                row.append(textarea, remove);
                descriptions.append(row);
            }

            function resetForm() {
                form.reset();
                form.action = createUrl;
                method.value = '';
                title.textContent = 'Tambah TP';
                subject.value = '';
                grade.value = '';
                classArea.replaceChildren();
                const hint = document.createElement('p');
                hint.className = 'text-xs text-slate-500';
                hint.textContent = 'Pilih tingkatan terlebih dahulu.';
                classArea.append(hint);
                descriptions.replaceChildren();
                addDescription();
                addRowButton.hidden = false;
            }

            document.querySelector('[data-open-create]')?.addEventListener('click', () => {
                resetForm();
                dialog.showModal();
            });
            document.querySelectorAll('[data-edit-tp]').forEach((button) => {
                button.addEventListener('click', () => {
                    resetForm();
                    form.action = button.dataset.updateUrl;
                    method.value = 'PUT';
                    title.textContent = 'Edit TP';
                    subject.value = button.dataset.mapel;
                    grade.value = button.dataset.tingkatan;
                    renderClasses(button.dataset.classIds.split(',').filter(Boolean).map(Number));
                    descriptions.replaceChildren();
                    addDescription(button.dataset.description);
                    addRowButton.hidden = true;
                    dialog.showModal();
                });
            });
            grade.addEventListener('change', renderClasses);
            addRowButton.addEventListener('click', () => addDescription());
            dialog.querySelectorAll('[data-close-dialog]').forEach((button) => {
                button.addEventListener('click', () => dialog.close());
            });
            document.querySelector('[data-open-copy]')?.addEventListener('click', () => copyDialog?.showModal());
            copyDialog?.querySelectorAll('[data-close-dialog]').forEach((button) => {
                button.addEventListener('click', () => copyDialog.close());
            });
            resetForm();
            if (oldGrade || oldMapel || oldDescriptions.some((description) => description !== '')) {
                subject.value = String(oldMapel);
                grade.value = String(oldGrade);
                renderClasses();
                descriptions.replaceChildren();
                oldDescriptions.forEach((description) => addDescription(description || ''));
                dialog.showModal();
            }
            if (oldSourcePeriod) {
                copyDialog?.showModal();
            }
        })();
    </script>
@endif
@endsection