@extends('layouts.app')

@section('title', 'Rekap Absensi')

@section('content')
@php
    $statusSymbols = ['Hadir' => 'H', 'Terlambat' => 'T', 'Izin' => 'I', 'Sakit' => 'S', 'Alpha' => 'A', 'Alpa' => 'A'];
    $editableStatusCodes = ['Hadir' => 'H', 'Izin' => 'I', 'Sakit' => 'S', 'Alpha' => 'A', 'Alpa' => 'A'];
@endphp
<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 Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Absensi<i class="bi bi-chevron-right" aria-hidden="true"></i>Rekap Absensi</p>
            <h1 class="pkbm-dashboard__title">Rekap Absensi {{ ucfirst($kind) }}</h1>
            <p class="pkbm-dashboard__subtitle">Periode: {{ $monthDate->translatedFormat('F Y') }}{{ $period ? ' · Tahun Pelajaran '.$period->tahun_pelajaran.' · Semester '.$period->semester : '' }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('pkbm.absensi.scan') }}" class="sp-btn-secondary shrink-0"><i class="bi bi-qr-code-scan" aria-hidden="true"></i>Scan Kehadiran</a>
            <a href="{{ route('pkbm.absensi.print', request()->query()) }}" target="_blank" rel="noopener" class="sp-btn-primary shrink-0"><i class="bi bi-printer" aria-hidden="true"></i>Cetak Laporan</a>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="rounded-xl border border-emerald-500 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-900">{{ session('status') }}</div>
    @endif
    @if ($errors->any())
        <div role="alert" class="rounded-xl border border-rose-500 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-900">{{ $errors->first() }}</div>
    @endif

    <section class="sp-card">
        <form method="GET" action="{{ route('pkbm.absensi.index') }}" class="grid gap-3 p-4 sm:grid-cols-2 lg:grid-cols-3 lg:items-end">
            <div>
                <label for="attendance-month" class="sp-form-label">Bulan rekap</label>
                <input id="attendance-month" name="bulan" type="month" lang="id" value="{{ $month }}" required class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
            </div>
            @unless ($isTeacher)
            <div>
                <label for="attendance-kind" class="sp-form-label">Jenis</label>
                <select id="attendance-kind" name="jenis" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                    <option value="siswa" @selected($kind === 'siswa')>Siswa</option>
                    <option value="guru" @selected($kind === 'guru')>Guru</option>
                </select>
            </div>
            @else
                <input type="hidden" name="jenis" value="siswa">
            @endunless
            @if ($kind === 'siswa')
                <div>
                    <label for="attendance-class" class="sp-form-label">Kelas</label>
                    <select id="attendance-class" name="id_kelas" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                        <option value="">Semua kelas</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id }}" @selected((string) $classId === (string) $class->id)>{{ $class->nama_kelas }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
        </form>
    </section>

    @if ($kind === 'siswa' && ! $period)
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Atur periode akademik aktif untuk melihat daftar siswa pada rekap.</p>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Kehadiran harian</h2>
            <p class="mt-1 text-xs text-slate-500">{{ number_format($participants->count(), 0, ',', '.') }} {{ $kind }}{{ $className ? ' · '.$className : '' }}</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table attendance-recap-table min-w-[70rem] text-center">
                <thead>
                    <tr>
                        <th scope="col" rowspan="2" class="w-12">No</th>
                        <th scope="col" rowspan="2" class="min-w-48 !text-left">Nama lengkap</th>
                        <th scope="col" colspan="{{ $dayCount }}" class="text-center">Tanggal</th>
                        <th scope="col" rowspan="2" class="text-center">Hadir</th>
                    </tr>
                    <tr>
                        @foreach ($dates as $date)
                            <th scope="col" @class(['text-center', 'text-rose-600' => \Illuminate\Support\Carbon::parse($date)->isSunday()])>{{ (int) substr($date, -2) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse ($participants as $participant)
                        @php $presentCount = 0; @endphp
                        <tr>
                            <td class="text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="!text-left font-semibold text-slate-800">{{ $participant->name ?: '-' }}</th>
                            @foreach ($dates as $date)
                                @php
                                    $status = $attendance[$participant->id][$date] ?? '';
                                    $symbol = $statusSymbols[$status] ?? '';
                                    if ($status === 'Hadir') {
                                        $presentCount++;
                                    }
                                @endphp
                                <td @class([
                                    'attendance-recap-table__status',
                                    'attendance-recap-table__status--present' => $status === 'Hadir',
                                    'attendance-recap-table__status--late' => $status === 'Terlambat' || $status === 'Sakit',
                                    'attendance-recap-table__status--excused' => $status === 'Izin',
                                    'attendance-recap-table__status--absent' => in_array($status, ['Alpha', 'Alpa'], true),
                                    'attendance-recap-table__status--empty' => $status === '',
                                ])>
                                    @if (! $isTeacher)
                                        <button type="button" class="attendance-recap-table__edit"
                                                data-update-url="{{ route('pkbm.absensi.update', ['kind' => $kind, 'participantId' => $participant->id, 'date' => $date]) }}"
                                                data-participant="{{ $participant->name ?: '-' }}"
                                                data-date="{{ \Illuminate\Support\Carbon::parse($date)->translatedFormat('d F Y') }}"
                                                data-status="{{ $editableStatusCodes[$status] ?? '' }}"
                                                aria-label="Ubah status {{ $participant->name ?: 'peserta' }} tanggal {{ $date }}">
                                            <span>{{ $symbol ?: '–' }}</span>
                                            <i class="bi bi-pencil-fill" aria-hidden="true"></i>
                                        </button>
                                    @else
                                        <span class="attendance-recap-table__mark">{{ $symbol ?: '–' }}</span>
                                    @endif
                                </td>
                            @endforeach
                            <td class="text-center font-bold text-blue-700">{{ $presentCount }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="{{ $dayCount + 3 }}" class="py-10 text-center text-sm text-slate-500">Data {{ $kind }} tidak ditemukan pada periode ini.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="flex flex-wrap gap-x-4 gap-y-2 border-t border-slate-100 px-4 py-3 text-xs text-slate-500">
            <span><strong class="text-emerald-700">H</strong> Hadir</span>
            <span><strong class="text-amber-700">T</strong> Terlambat</span>
            <span><strong class="text-blue-700">I</strong> Izin</span>
            <span><strong class="text-amber-700">S</strong> Sakit</span>
            <span><strong class="text-rose-700">A</strong> Alpha</span>
            <span><strong class="text-slate-300">–</strong> Belum ada catatan</span>
        </div>
    </section>

    @unless ($isTeacher)
        <dialog id="attendance-edit-dialog" class="attendance-edit-dialog">
            <form method="POST" class="space-y-4 p-5" data-attendance-edit-form>
                @csrf
                @method('PUT')
                <div>
                    <h2 class="sp-section-title">Perbaiki kehadiran</h2>
                    <p class="mt-1 text-sm text-slate-600"><span data-attendance-participant></span> · <span data-attendance-date></span></p>
                </div>
                <div>
                    <label for="attendance-edit-status" class="sp-form-label">Status kehadiran</label>
                    <div class="attendance-edit-options" role="radiogroup" aria-labelledby="attendance-edit-status">
                        <span id="attendance-edit-status" class="sr-only">Pilih status kehadiran</span>
                        @foreach (['H' => 'Hadir', 'A' => 'Alpha', 'I' => 'Izin', 'S' => 'Sakit'] as $code => $label)
                            <label class="attendance-edit-option">
                                <input type="radio" name="status" value="{{ $code }}" required>
                                <span><strong>{{ $code }}</strong>{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <input type="hidden" name="bulan" value="{{ $month }}">
                @if ($classId)
                    <input type="hidden" name="id_kelas" value="{{ $classId }}">
                @endif
                <div class="flex justify-end gap-2">
                    <button type="button" class="sp-btn-secondary" data-attendance-edit-cancel>Batal</button>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2" aria-hidden="true"></i>Simpan perubahan</button>
                </div>
            </form>
        </dialog>
    @endunless
</div>
@endsection

@unless ($isTeacher)
    @push('scripts')
        <script>
            (() => {
                const dialog = document.getElementById('attendance-edit-dialog');
                const form = dialog?.querySelector('[data-attendance-edit-form]');

                if (!dialog || !form) return;

                document.querySelectorAll('.attendance-recap-table__edit').forEach((button) => {
                    button.addEventListener('click', () => {
                        form.action = button.dataset.updateUrl;
                        form.querySelector('[data-attendance-participant]').textContent = button.dataset.participant;
                        form.querySelector('[data-attendance-date]').textContent = button.dataset.date;
                        form.querySelectorAll('input[name="status"]').forEach((input) => {
                            input.checked = input.value === button.dataset.status;
                        });
                        dialog.showModal();
                    });
                });

                dialog.querySelector('[data-attendance-edit-cancel]').addEventListener('click', () => dialog.close());
                dialog.addEventListener('click', (event) => {
                    if (event.target === dialog) dialog.close();
                });
            })();
        </script>
    @endpush
@endunless