@extends('layouts.app')

@section('title', 'Rekap Kehadiran Ujian')

@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">Standar Penilaian <i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Ujian</p><h1 class="pkbm-dashboard__title">Rekap Kehadiran Ujian Per Kelas</h1><p class="pkbm-dashboard__subtitle">{{ $period->tahun_pelajaran }} · Semester {{ $period->semester }} · Status diambil dari absensi harian pada tanggal jadwal ujian.</p></div>
        @if ($students->isNotEmpty())<a href="{{ route('pkbm.ujian.attendance.print', ['ujian' => $selectedExam, 'id_kelas' => $classId]) }}" target="_blank" rel="noopener" class="sp-btn-secondary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak rekap</a>@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">Perubahan kehadiran belum berhasil disimpan.</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="sp-card-header"><h2 class="sp-section-title">Pilih ujian dan kelas</h2></div>
        <form method="GET" action="{{ route('pkbm.ujian.attendance') }}" class="grid gap-4 p-5 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
            <label class="block"><span class="sp-form-label">Nama ujian</span><select name="ujian" required class="sp-form-control px-3" onchange="this.form.submit()"><option value="">Pilih ujian</option>@foreach ($exams as $exam)<option value="{{ $exam }}" @selected($selectedExam === $exam)>{{ $examLabels[$exam] }}</option>@endforeach</select></label>
            <label class="block"><span class="sp-form-label">Kelas</span><select name="id_kelas" required class="sp-form-control px-3"><option value="">Pilih kelas</option>@foreach ($classOptions as $option)<option value="{{ $option->id }}" @selected($classId === (int) $option->id)>{{ $option->nama_kelas }}</option>@endforeach</select></label>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-search" aria-hidden="true"></i>Tampilkan</button>
        </form>
    </section>
    @if ($classId)
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Daftar hadir · {{ $examLabels[$selectedExam] }}</h2><p class="mt-1 text-xs text-slate-500">Status mengikuti data absensi siswa pada setiap tanggal ujian yang dijadwalkan. Siswa tanpa catatan absensi ditampilkan sebagai Alpha.</p></div>
            @if ($students->isEmpty() || $sessions->isEmpty())
                <p class="p-6 text-center text-sm text-slate-500">Belum ada siswa atau jadwal ujian untuk filter ini.</p>
            @else
                <form method="POST" action="{{ route('pkbm.ujian.attendance.save') }}">
                    @csrf
                    <input type="hidden" name="ujian" value="{{ $selectedExam }}">
                    <input type="hidden" name="id_kelas" value="{{ $classId }}">
                    <div class="overflow-x-auto"><table class="sp-table min-w-full"><thead><tr><th class="w-12">No.</th><th class="min-w-56">Siswa</th>@foreach ($sessions as $session)<th class="min-w-20 text-center">{{ \Illuminate\Support\Carbon::parse($session->tgl_ujian)->locale('id')->translatedFormat('D, d M') }}<span class="mt-1 block text-xs font-normal">{{ $session->singkatan ?: $session->nama_mapel }}</span></th>@endforeach<th class="w-20 text-center">Hadir</th></tr></thead><tbody>
                        @foreach ($students as $student)
                            @php($presentCount = 0)
                            <tr><td>{{ $loop->iteration }}</td><td><span class="font-semibold text-slate-800">{{ $student->nama_siswa }}</span><span class="mt-0.5 block text-xs text-slate-500">{{ $student->nis ?: $student->nisn ?: '—' }}</span></td>
                                @foreach ($sessions as $session)
                                    @php($record = $statuses->get($student->id.'|'.$session->tgl_ujian))
                                    @php($status = $record->status ?? 'Alpha')
                                    @if ($status === 'Hadir')@php($presentCount++)@endif
                                    <td><select name="kehadiran[{{ $student->id }}][{{ $session->tgl_ujian }}]" class="sp-form-control min-w-14 px-2 py-1 text-xs" aria-label="Kehadiran {{ $student->nama_siswa }} tanggal {{ $session->tgl_ujian }}">@foreach (['Hadir' => 'H', 'Alpha' => 'A', 'Izin' => 'I', 'Sakit' => 'S'] as $option => $abbreviation)<option value="{{ $option }}" @selected(old('kehadiran.'.$student->id.'.'.$session->tgl_ujian, $status) === $option)>{{ $abbreviation }}</option>@endforeach</select></td>
                                @endforeach
                                <td class="text-center font-bold text-blue-700">{{ $presentCount }}</td>
                            </tr>
                        @endforeach
                    </tbody></table></div>
                    <div class="grid gap-3 border-t border-slate-100 p-4 sm:grid-cols-2 lg:grid-cols-4" aria-label="Ringkasan kehadiran">
                        @foreach ([
                            'Hadir' => ['bi-person-check', 'border-emerald-200 bg-emerald-50', 'text-emerald-800', 'text-emerald-600', 'text-emerald-900'],
                            'Alpha' => ['bi-person-x', 'border-rose-200 bg-rose-50', 'text-rose-800', 'text-rose-600', 'text-rose-900'],
                            'Izin' => ['bi-envelope-check', 'border-blue-200 bg-blue-50', 'text-blue-800', 'text-blue-600', 'text-blue-900'],
                            'Sakit' => ['bi-heart-pulse', 'border-amber-200 bg-amber-50', 'text-amber-800', 'text-amber-600', 'text-amber-900'],
                        ] as $statusName => [$icon, $background, $labelColor, $iconColor, $totalColor])
                            <article class="rounded-xl border {{ $background }} p-4" data-attendance-summary="{{ $statusName }}">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="text-sm font-medium {{ $labelColor }}">Total {{ $statusName }}</span>
                                    <i class="bi {{ $icon }} text-lg {{ $iconColor }}" aria-hidden="true"></i>
                                </div>
                                <p class="mt-2 text-2xl font-bold tabular-nums {{ $totalColor }}" data-attendance-total>{{ $attendanceTotals[$statusName] }}</p>
                            </article>
                        @endforeach
                    </div>
                    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 p-4"><p class="text-xs text-slate-500">Koreksi disimpan ke absensi harian. Hadir manual akan menggunakan waktu saat disimpan.</p><button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan perubahan</button></div>
                </form>
            @endif
        </section>
    @endif
</div>
@if ($classId && $students->isNotEmpty() && $sessions->isNotEmpty())
    <script>
        (() => {
            const form = document.querySelector('form[action="{{ route('pkbm.ujian.attendance.save') }}"]');
            if (!form) return;

            const updateTotals = () => {
                const totals = { Hadir: 0, Alpha: 0, Izin: 0, Sakit: 0 };
                form.querySelectorAll('select[name^="kehadiran["]').forEach((select) => {
                    if (Object.prototype.hasOwnProperty.call(totals, select.value)) totals[select.value]++;
                });
                Object.entries(totals).forEach(([status, total]) => {
                    const counter = form.querySelector(`[data-attendance-summary="${status}"] [data-attendance-total]`);
                    if (counter) counter.textContent = total;
                });
            };

            form.addEventListener('change', (event) => {
                if (event.target.matches('select[name^="kehadiran["]')) updateTotals();
            });
            updateTotals();
        })();
    </script>
@endif
@endsection