@extends('layouts.app')

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

@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 Kehadiran</p>
            <h1 class="pkbm-dashboard__title">Input Kehadiran</h1>
            <p class="pkbm-dashboard__subtitle">Rekap kehadiran siswa untuk raport. Data dari absensi terisi otomatis dan angka Sakit, Izin, serta Alpha dapat dikoreksi.</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 (! $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>Belum ada periode akademik yang tersedia untuk ditampilkan.
        </section>
    @else
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Filter kehadiran</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih periode dan kelas. Daftar siswa mengikuti roster aktif di periode tersebut.</p>
            </div>
            <form id="input-kehadiran-filter" method="GET" action="{{ route('pkbm.raport.input-kehadiran') }}" class="grid gap-3 p-4 sm:grid-cols-3">
                <div>
                    <label class="sp-form-label" for="input-kehadiran-year">Tahun pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="input-kehadiran-year" name="tahun_pelajaran" data-filter-change="year">
                        @foreach ($years as $year)
                            <option value="{{ $year }}" @selected($selectedYear === $year)>{{ $year }} @if ($activePeriod && $activePeriod->tahun_pelajaran === $year) · Aktif @endif</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="input-kehadiran-semester">Semester</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="input-kehadiran-semester" name="semester" data-filter-change="semester">
                        @foreach ($semesters as $semester)
                            <option value="{{ $semester }}" @selected($selectedSemester === $semester)>{{ $semester }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="input-kehadiran-class">Kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="input-kehadiran-class" name="id_kelas" data-filter-change="class">
                        <option value="">Pilih kelas</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id_kelas }}" @selected($selectedClassId === (int) $class->id_kelas)>{{ $class->nama_kelas }} · Tingkat {{ $class->tingkatan }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
        </section>

        @if ($selectedClassId)
            <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">Rekap kehadiran siswa</h2>
                        <p class="mt-1 text-xs text-slate-500">
                            Periode absensi {{ \Illuminate\Support\Carbon::parse($dateRange[0])->translatedFormat('d M Y') }} – {{ \Illuminate\Support\Carbon::parse($dateRange[1])->translatedFormat('d M Y') }}.
                            Hadir dihitung dari rekap absensi; angka Sakit, Izin, dan Alpha dapat disunting.
                        </p>
                    </div>
                    <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">{{ $students->count() }} siswa aktif</span>
                </div>

                @if (session('status'))
                    <div class="mx-4 mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800" role="status">
                        <i class="bi bi-check-circle mr-2" aria-hidden="true"></i>{{ session('status') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="mx-4 mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
                        {{ $errors->first() }}
                    </div>
                @endif

                @if ($students->isNotEmpty())
                    <form method="POST" action="{{ route('pkbm.raport.input-kehadiran.save') }}">
                        @csrf
                        <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}">
                        <input type="hidden" name="semester" value="{{ $period->semester }}">
                        <input type="hidden" name="id_kelas" value="{{ $selectedClassId }}">
                        <div class="overflow-x-auto">
                            <table class="w-full min-w-[760px] text-left text-sm">
                                <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-600">
                                    <tr>
                                        <th scope="col" class="w-16 px-4 py-3 text-center">No.</th>
                                        <th scope="col" class="min-w-56 px-4 py-3">Nama siswa</th>
                                        <th scope="col" class="w-32 px-4 py-3 text-center">Hadir</th>
                                        <th scope="col" class="w-36 px-4 py-3 text-center">Sakit</th>
                                        <th scope="col" class="w-36 px-4 py-3 text-center">Izin</th>
                                        <th scope="col" class="w-36 px-4 py-3 text-center">Alpha</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100">
                                    @foreach ($students as $student)
                                        <tr class="transition hover:bg-slate-50/70">
                                            <td class="px-4 py-3 text-center text-slate-500">{{ $loop->iteration }}</td>
                                            <td class="px-4 py-3 font-medium text-slate-800">
                                                {{ $student->nama_siswa }}
                                                <input type="hidden" name="id_siswa[]" value="{{ $student->id }}">
                                            </td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="inline-flex min-w-12 items-center justify-center rounded-lg bg-emerald-50 px-3 py-2 font-semibold text-emerald-700" aria-label="Hadir otomatis: {{ $student->hadir }}">{{ $student->hadir }}</span>
                                            </td>
                                            @foreach (['sakit', 'izin', 'alpha'] as $field)
                                                <td class="px-4 py-3">
                                                    <input class="sp-form-control mx-auto w-24 px-3 py-2 text-center text-sm"
                                                        type="number" name="{{ $field }}[]" min="0" max="184" step="1" required
                                                        value="{{ old($field.'.'.$loop->parent->index, $student->$field) }}"
                                                        aria-label="{{ ucfirst($field) }} untuk {{ $student->nama_siswa }}">
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-4">
                            <p class="max-w-2xl text-xs leading-relaxed text-slate-500">
                                Angka Sakit, Izin, dan Alpha dimuat dari rekap absensi jika belum pernah disimpan. Setelah disimpan, koreksi akan digunakan untuk raport.
                            </p>
                            <button type="submit" class="sp-btn-primary">
                                <i class="bi bi-save" aria-hidden="true"></i>Simpan kehadiran
                            </button>
                        </div>
                    </form>
                @else
                    <div class="p-8 text-center text-sm text-slate-500">
                        <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                        Belum ada siswa aktif pada kelas dan periode ini.
                    </div>
                @endif
            </section>
        @else
            <section class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                <i class="bi bi-funnel mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                Pilih kelas untuk melihat rekap kehadiran siswa.
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.getElementById('input-kehadiran-filter');
            if (!form) return;

            form.querySelectorAll('[data-filter-change]').forEach((select) => {
                select.addEventListener('change', () => {
                    const params = new URLSearchParams();
                    const year = form.querySelector('[name="tahun_pelajaran"]').value;
                    const semester = form.querySelector('[name="semester"]').value;
                    if (year) params.set('tahun_pelajaran', year);
                    if (select.dataset.filterChange !== 'year' && semester) params.set('semester', semester);
                    if (select.dataset.filterChange === 'class') {
                        const classId = form.querySelector('[name="id_kelas"]').value;
                        if (classId) params.set('id_kelas', classId);
                    }
                    window.location.assign(`${form.action}?${params.toString()}`);
                });
            });
        })();
    </script>
@endpush