@extends('layouts.app')

@section('title', 'Kalender Pendidikan')

@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>Standar Isi</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Kalender Pendidikan</p>
            <h1 class="pkbm-dashboard__title">Kalender Pendidikan</h1>
            <p class="pkbm-dashboard__subtitle">Kelola agenda akademik, hari libur, dan jadwal penting lembaga untuk satu tahun pelajaran.</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">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

    <section class="sp-card">
        <div class="flex flex-col gap-4 p-4 sm:flex-row sm:items-end sm:justify-between sm:p-5">
            <form method="GET" action="{{ route('pkbm.kalender-pendidikan.index') }}" class="w-full max-w-sm">
                <label for="tahun-pelajaran" class="sp-form-label">Tahun pelajaran</label>
                <select id="tahun-pelajaran" name="tahun_pelajaran" class="sp-form-control w-full px-3 py-2.5 text-sm" onchange="this.form.submit()">
                    <option value="">Pilih tahun pelajaran</option>
                    @foreach ($years as $year)
                        <option value="{{ $year }}" @selected($selectedYear === $year)>Tahun Pelajaran {{ $year }}</option>
                    @endforeach
                </select>
                <noscript><button type="submit" class="sp-btn-secondary mt-2">Tampilkan</button></noscript>
            </form>

            @if ($selectedYear)
                <div class="flex flex-wrap gap-2">
                    <a class="sp-btn-secondary" target="_blank" rel="noopener" href="{{ route('pkbm.kalender-pendidikan.print-description', ['tahun_pelajaran' => $selectedYear]) }}">
                        <i class="bi bi-printer" aria-hidden="true"></i>Cetak uraian
                    </a>
                    <a class="sp-btn-secondary" target="_blank" rel="noopener" href="{{ route('pkbm.kalender-pendidikan.print-calendar', ['tahun_pelajaran' => $selectedYear]) }}">
                        <i class="bi bi-calendar-month" aria-hidden="true"></i>Cetak kalender
                    </a>
                    <a class="sp-btn-secondary" target="_blank" rel="noopener" href="{{ route('pkbm.kalender-pendidikan.print-effective-days', ['tahun_pelajaran' => $selectedYear]) }}">
                        <i class="bi bi-calendar-check" aria-hidden="true"></i>Cetak hari efektif
                    </a>
                </div>
            @endif
        </div>
    </section>

    @if (! $selectedYear)
        <section class="sp-card px-6 py-12 text-center">
            <span class="mx-auto grid size-14 place-items-center rounded-2xl bg-blue-50 text-2xl text-blue-600">
                <i class="bi bi-calendar2-week" aria-hidden="true"></i>
            </span>
            <h2 class="mt-4 text-base font-bold text-slate-800">
                {{ $years->isEmpty() ? 'Tahun pelajaran belum tersedia' : 'Pilih tahun pelajaran' }}
            </h2>
            <p class="mx-auto mt-2 max-w-lg text-sm leading-6 text-slate-500">
                {{ $years->isEmpty()
                    ? 'Atur periode semester ganjil terlebih dahulu di Pengaturan Akademik.'
                    : 'Pilih tahun pelajaran untuk mengelola agenda dan melihat kalender lembaga.' }}
            </p>
        </section>
    @else
        <div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(24rem,0.85fr)]">
            <div class="space-y-5">
                @php
                    $calendarMonth = collect($months)->firstWhere('number', $selectedMonth);
                    $today = now()->toDateString();
                @endphp
                <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">{{ $calendarMonth['first_day']->locale('id')->translatedFormat('F Y') }}</h2>
                            <p class="mt-1 text-xs text-slate-500">Klik atau seret tanggal untuk mengisi rentang agenda.</p>
                        </div>
                        <div class="flex gap-2">
                            @if ($previousMonth)
                                <a class="kaldik-nav-btn" aria-label="Bulan sebelumnya" href="{{ route('pkbm.kalender-pendidikan.index', ['tahun_pelajaran' => $selectedYear, 'month' => $previousMonth]) }}"><i class="bi bi-chevron-left" aria-hidden="true"></i></a>
                            @else
                                <span class="kaldik-nav-btn kaldik-nav-btn--disabled" aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
                            @endif
                            @if ($nextMonth)
                                <a class="kaldik-nav-btn" aria-label="Bulan berikutnya" href="{{ route('pkbm.kalender-pendidikan.index', ['tahun_pelajaran' => $selectedYear, 'month' => $nextMonth]) }}"><i class="bi bi-chevron-right" aria-hidden="true"></i></a>
                            @else
                                <span class="kaldik-nav-btn kaldik-nav-btn--disabled" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
                            @endif
                        </div>
                    </div>
                    <div class="p-4 pt-3 sm:p-5 sm:pt-3">
                        <div class="kaldik-grid kaldik-grid-head mb-2">
                            @foreach (['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'] as $weekday)
                                <div @class(['kaldik-head-cell', 'kaldik-sunday' => $loop->first])>{{ $weekday }}</div>
                            @endforeach
                        </div>
                        <div class="kaldik-grid kaldik-grid-body" data-calendar-grid>
                            @foreach ($calendarDays as $date)
                                @if (! $date)
                                    <div class="kaldik-day-cell kaldik-day-empty" aria-hidden="true"></div>
                                @else
                                    @php
                                        $dateString = $date->toDateString();
                                        $dayEvents = $events->filter(fn ($event) => $event->tanggal_mulai <= $dateString && $event->tanggal_selesai >= $dateString);
                                    @endphp
                                    <div class="kaldik-day-cell {{ $date->isSunday() ? 'kaldik-sunday' : '' }} {{ $dateString === $today ? 'kaldik-day-today' : '' }}"
                                         data-date="{{ $dateString }}" tabindex="0" role="button"
                                         aria-label="{{ $date->locale('id')->translatedFormat('j F Y') }}{{ $dayEvents->isNotEmpty() ? ': '.$dayEvents->pluck('keterangan')->implode(', ') : '' }}">
                                        <span class="kaldik-day-num">{{ $date->day }}</span>
                                        @if ($dayEvents->isNotEmpty())
                                            <span class="kaldik-day-markers" aria-hidden="true">
                                                @foreach ($dayEvents->take(3) as $event)
                                                    @php $eventColor = preg_match('/^#[0-9a-fA-F]{6}$/', $event->warna) ? $event->warna : '#3b82f6'; @endphp
                                                    <span class="kaldik-marker" style="--event-color: {{ $eventColor }}"></span>
                                                @endforeach
                                            </span>
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </section>

                <section class="sp-card overflow-hidden">
                    <div class="sp-card-header">
                        <h2 class="sp-section-title">Tambah agenda</h2>
                        <p class="mt-1 text-xs text-slate-500">Pilih tanggal di kalender atau isi rentang tanggal secara langsung.</p>
                    </div>
                    <form method="POST" action="{{ route('pkbm.kalender-pendidikan.store') }}?tahun_pelajaran={{ urlencode($selectedYear) }}">
                        @csrf
                        <input type="hidden" name="tahun_pelajaran" value="{{ $selectedYear }}">
                        <div class="grid gap-4 p-4 sm:grid-cols-2 sm:p-5">
                            <div>
                                <label for="tanggal-mulai" class="sp-label">Tanggal mulai</label>
                                <input id="tanggal-mulai" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" class="sp-input" required>
                            </div>
                            <div>
                                <label for="tanggal-selesai" class="sp-label">Tanggal selesai</label>
                                <input id="tanggal-selesai" type="date" name="tanggal_selesai" value="{{ old('tanggal_selesai') }}" class="sp-input" required>
                            </div>
                            <div class="sm:col-span-2">
                                <label for="keterangan" class="sp-label">Keterangan kegiatan</label>
                                <input id="keterangan" type="text" name="keterangan" value="{{ old('keterangan') }}" maxlength="255" class="sp-input" placeholder="Contoh: Penilaian Sumatif Tengah Semester" required>
                            </div>
                            <fieldset class="sm:col-span-2">
                                <legend class="sp-label">Warna penanda</legend>
                                <div class="kaldik-color-wrap">
                                    @foreach ($colors as $color)
                                        <label class="kaldik-color-option" title="{{ $color }}">
                                            <input type="radio" name="warna" value="{{ $color }}" @checked(old('warna', '#3b82f6') === $color)>
                                            <span style="--event-color: {{ $color }}"></span>
                                            <span class="sr-only">{{ $color }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </fieldset>
                        </div>
                        <div class="flex justify-end border-t border-slate-100 px-4 py-4 sm:px-5">
                            <button type="submit" class="sp-btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan agenda</button>
                        </div>
                    </form>
                </section>
            </div>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header flex items-center justify-between gap-3">
                    <div>
                        <h2 class="sp-section-title">Daftar agenda</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $events->count() }} agenda · Tahun Pelajaran {{ $selectedYear }}</p>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="sp-table min-w-[38rem]">
                        <thead>
                            <tr><th scope="col">Rentang tanggal</th><th scope="col">Kegiatan</th><th scope="col" class="text-right">Aksi</th></tr>
                        </thead>
                        <tbody>
                            @forelse ($events as $event)
                                @php
                                    $start = \Carbon\CarbonImmutable::parse($event->tanggal_mulai)->locale('id')->translatedFormat('j M Y');
                                    $end = \Carbon\CarbonImmutable::parse($event->tanggal_selesai)->locale('id')->translatedFormat('j M Y');
                                    $eventColor = preg_match('/^#[0-9a-fA-F]{6}$/', $event->warna) ? $event->warna : '#3b82f6';
                                @endphp
                                <tr>
                                    <td class="whitespace-nowrap text-sm font-medium text-slate-700">
                                        {{ $start }}@if ($event->tanggal_mulai !== $event->tanggal_selesai) <span class="text-slate-400">s.d.</span> {{ $end }}@endif
                                    </td>
                                    <td>
                                        <span class="mr-2 inline-block size-2.5 rounded-full align-middle" style="background-color: {{ $eventColor }}"></span>
                                        <span class="text-sm text-slate-700">{{ $event->keterangan }}</span>
                                    </td>
                                    <td class="text-right">
                                        <div class="flex justify-end gap-1">
                                            <button type="button" class="settings-icon-action" data-edit-event
                                                    data-id="{{ $event->id }}" data-start="{{ $event->tanggal_mulai }}"
                                                    data-end="{{ $event->tanggal_selesai }}" data-description="{{ $event->keterangan }}"
                                                    data-color="{{ $eventColor }}" aria-label="Edit {{ $event->keterangan }}" title="Edit">
                                                <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                            </button>
                                            <form method="POST" action="{{ route('pkbm.kalender-pendidikan.destroy', $event->id) }}"
                                                  onsubmit="return confirm('Hapus agenda ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <input type="hidden" name="tahun_pelajaran" value="{{ $selectedYear }}">
                                                <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus {{ $event->keterangan }}" title="Hapus">
                                                    <i class="bi bi-trash" aria-hidden="true"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="py-10 text-center text-sm text-slate-500">Belum ada agenda untuk tahun pelajaran ini.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        <dialog id="edit-event-dialog" class="kaldik-dialog">
            <form method="POST" id="edit-event-form">
                @csrf
                @method('PUT')
                <input type="hidden" name="tahun_pelajaran" value="{{ $selectedYear }}">
                <header class="flex items-start justify-between gap-4 border-b border-slate-100 px-5 py-4">
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Edit agenda</h2>
                        <p class="mt-1 text-xs text-slate-500">Perbarui rentang tanggal atau keterangan kegiatan.</p>
                    </div>
                    <button type="button" class="settings-icon-action" data-close-dialog aria-label="Tutup">
                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                    </button>
                </header>
                <div class="grid gap-4 p-5 sm:grid-cols-2">
                    <div>
                        <label for="edit-tanggal-mulai" class="sp-label">Tanggal mulai</label>
                        <input id="edit-tanggal-mulai" type="date" name="tanggal_mulai" class="sp-input" required>
                    </div>
                    <div>
                        <label for="edit-tanggal-selesai" class="sp-label">Tanggal selesai</label>
                        <input id="edit-tanggal-selesai" type="date" name="tanggal_selesai" class="sp-input" required>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="edit-keterangan" class="sp-label">Keterangan kegiatan</label>
                        <input id="edit-keterangan" type="text" name="keterangan" maxlength="255" class="sp-input" required>
                    </div>
                    <fieldset class="sm:col-span-2">
                        <legend class="sp-label">Warna penanda</legend>
                        <div class="kaldik-color-wrap">
                            @foreach ($colors as $color)
                                <label class="kaldik-color-option" title="{{ $color }}">
                                    <input type="radio" name="warna" value="{{ $color }}" required>
                                    <span style="--event-color: {{ $color }}"></span>
                                    <span class="sr-only">{{ $color }}</span>
                                </label>
                            @endforeach
                        </div>
                    </fieldset>
                </div>
                <footer class="flex justify-end gap-2 border-t border-slate-100 px-5 py-4">
                    <button type="button" class="sp-btn-secondary" data-close-dialog>Batal</button>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan perubahan</button>
                </footer>
            </form>
        </dialog>
    @endif
</div>
@endsection

@push('scripts')
    <style>
        .kaldik-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
        .kaldik-head-cell { border-radius:.55rem; background:#f8fafc; padding:.45rem .2rem; text-align:center; color:#64748b; font-size:.68rem; font-weight:700; }
        .kaldik-head-cell.kaldik-sunday { background:#fff1f2; color:#e11d48; }
        .kaldik-day-cell { min-height:3.6rem; display:flex; flex-direction:column; align-items:center; justify-content:space-between; border:1px solid #e8edf4; border-radius:.7rem; background:#fff; padding:.45rem .2rem .35rem; cursor:pointer; touch-action:none; user-select:none; }
        .kaldik-day-cell:hover { border-color:#93c5fd; background:#f8fbff; }
        .kaldik-day-cell.kaldik-day-empty { border-color:transparent; background:transparent; cursor:default; }
        .kaldik-day-cell.kaldik-day-selected { border-color:#3b82f6; background:#eff6ff; box-shadow:0 0 0 1px #93c5fd; }
        .kaldik-day-cell.kaldik-sunday .kaldik-day-num { color:#e11d48; }
        .kaldik-day-cell.kaldik-day-today .kaldik-day-num { display:grid; width:1.55rem; height:1.55rem; place-items:center; border-radius:999px; background:#1769d2; color:#fff; }
        .kaldik-day-num { font-size:.78rem; font-weight:650; color:#334155; }
        .kaldik-day-markers { display:flex; width:78%; flex-direction:column; gap:2px; }
        .kaldik-marker { height:3px; border-radius:999px; background:var(--event-color); }
        .kaldik-nav-btn { display:grid; width:2.25rem; height:2.25rem; place-items:center; border:1px solid #dbeafe; border-radius:.7rem; background:#eff6ff; color:#1769d2; text-decoration:none; transition:.15s ease; }
        .kaldik-nav-btn:hover { border-color:#bfdbfe; background:#dbeafe; color:#1059b6; }
        .kaldik-nav-btn--disabled { opacity:.45; }
        .kaldik-color-wrap { display:flex; flex-wrap:wrap; gap:.55rem; }
        .kaldik-color-option { position:relative; cursor:pointer; }
        .kaldik-color-option input { position:absolute; width:1px; height:1px; opacity:0; }
        .kaldik-color-option span:first-of-type { display:block; width:1.75rem; height:1.75rem; border:3px solid white; border-radius:999px; background:var(--event-color); box-shadow:0 0 0 1px #dbe2ea; }
        .kaldik-color-option input:checked + span { box-shadow:0 0 0 2px #1769d2; }
        .kaldik-color-option input:focus-visible + span { outline:3px solid #93c5fd; outline-offset:3px; }
        .kaldik-dialog { width:min(34rem,calc(100vw - 2rem)); max-width:none; padding:0; border:1px solid #e2e8f0; border-radius:1rem; box-shadow:0 24px 60px rgb(15 23 42 / .2); }
        .kaldik-dialog::backdrop { background:rgb(15 23 42 / .48); backdrop-filter:blur(2px); }
        @media (max-width:640px) { .kaldik-day-cell { min-height:2.9rem; padding:.32rem .1rem; } .kaldik-grid { gap:.22rem; } }
    </style>
    <script>
        (() => {
            const dialog = document.querySelector('#edit-event-dialog');
            const form = document.querySelector('#edit-event-form');
            if (dialog && form) {
                document.querySelectorAll('[data-edit-event]').forEach((button) => {
                    button.addEventListener('click', () => {
                        form.action = `{{ url('/pkbm/kalender-pendidikan') }}/${button.dataset.id}`;
                        form.querySelector('[name="tanggal_mulai"]').value = button.dataset.start;
                        form.querySelector('[name="tanggal_selesai"]').value = button.dataset.end;
                        form.querySelector('[name="keterangan"]').value = button.dataset.description;
                        form.querySelectorAll('[name="warna"]').forEach((input) => {
                            input.checked = input.value === button.dataset.color;
                        });
                        dialog.showModal();
                    });
                });
                dialog.querySelectorAll('[data-close-dialog]').forEach((button) => {
                    button.addEventListener('click', () => dialog.close());
                });
                dialog.addEventListener('click', (event) => {
                    if (event.target === dialog) dialog.close();
                });
            }

            const calendar = document.querySelector('[data-calendar-grid]');
            const startInput = document.querySelector('#tanggal-mulai');
            const endInput = document.querySelector('#tanggal-selesai');
            if (!calendar || !startInput || !endInput) return;
            let startDate = null;
            let selecting = false;
            const selectRange = (endDate) => {
                const first = startDate < endDate ? startDate : endDate;
                const last = startDate < endDate ? endDate : startDate;
                startInput.value = first;
                endInput.value = last;
                calendar.querySelectorAll('[data-date]').forEach((cell) => {
                    cell.classList.toggle('kaldik-day-selected', cell.dataset.date >= first && cell.dataset.date <= last);
                });
            };
            calendar.querySelectorAll('[data-date]').forEach((cell) => {
                cell.addEventListener('pointerdown', (event) => {
                    if (event.button !== 0) return;
                    event.preventDefault();
                    selecting = true;
                    startDate = cell.dataset.date;
                    selectRange(startDate);
                });
                cell.addEventListener('pointerenter', () => {
                    if (selecting) selectRange(cell.dataset.date);
                });
                cell.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                        event.preventDefault();
                        startDate = cell.dataset.date;
                        selectRange(startDate);
                        document.querySelector('#keterangan')?.focus();
                    }
                });
            });
            document.addEventListener('pointerup', () => {
                if (!selecting) return;
                selecting = false;
                document.querySelector('#keterangan')?.focus();
            });
        })();
    </script>
@endpush