@extends('layouts.guru')
@section('title', 'Detail Laporan Absensi')
@section('page-title', 'Detail Laporan Absensi')
@section('guru-content')
<x-card title="Filter Laporan Siswa" subtitle="{{ $siswa->nama_lengkap }} ({{ $siswa->nis }})">
    <form method="GET" class="grid grid-cols-1 gap-3 md:grid-cols-3">
        <x-input name="tanggal_awal" label="Tanggal Awal" type="date" :value="request('tanggal_awal')" />
        <x-input name="tanggal_akhir" label="Tanggal Akhir" type="date" :value="request('tanggal_akhir')" />
        <div class="flex items-end gap-2 md:justify-end">
            <x-button type="submit" variant="primary">Filter</x-button>
            <x-button href="{{ route('guru.laporan.index') }}" variant="ghost">Kembali</x-button>
        </div>
    </form>
</x-card>

<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-4">
    <x-card pad="p-4" class="bg-emerald-50 border-emerald-200">
        <div class="text-xs font-bold uppercase tracking-wide text-emerald-700">Hadir</div>
        <div class="mt-1 text-2xl font-black text-emerald-900">{{ $stats['hadir'] }}</div>
    </x-card>
    <x-card pad="p-4" class="bg-amber-50 border-amber-200">
        <div class="text-xs font-bold uppercase tracking-wide text-amber-700">Sakit</div>
        <div class="mt-1 text-2xl font-black text-amber-900">{{ $stats['sakit'] }}</div>
    </x-card>
    <x-card pad="p-4" class="bg-sky-50 border-sky-200">
        <div class="text-xs font-bold uppercase tracking-wide text-sky-700">Izin</div>
        <div class="mt-1 text-2xl font-black text-sky-900">{{ $stats['izin'] }}</div>
    </x-card>
    <x-card pad="p-4" class="bg-rose-50 border-rose-200">
        <div class="text-xs font-bold uppercase tracking-wide text-rose-700">Alpha</div>
        <div class="mt-1 text-2xl font-black text-rose-900">{{ $stats['alpha'] }}</div>
    </x-card>
</div>

<div class="mt-6">
<x-table title="Kalender Absensi Siswa" subtitle="✓ hadir, ✕ tidak masuk (sakit/izin/alpha).">
    @php
        $tanggalDasar = request('tanggal_awal')
            ? \Illuminate\Support\Carbon::parse(request('tanggal_awal'), config('app.timezone'))
            : ($absensi->first()?->tanggal?->copy() ?? now(config('app.timezone')));

        $awalBulan = $tanggalDasar->copy()->startOfMonth();
        $akhirBulan = $tanggalDasar->copy()->endOfMonth();
        $offsetAwal = (int) $awalBulan->dayOfWeekIso - 1; // Senin = 0
        $jumlahHari = (int) $awalBulan->daysInMonth;
        $totalSlot = (int) (ceil(($offsetAwal + $jumlahHari) / 7) * 7);
        $absensiMap = $absensi->getCollection()->keyBy(fn ($row) => $row->tanggal->format('Y-m-d'));
    @endphp

    @if($absensi->count() > 0)
        <div class="mb-3 text-sm font-semibold text-slate-700">
            {{ $awalBulan->translatedFormat('F Y') }}
        </div>

        <div class="grid grid-cols-7 gap-2 text-xs font-bold uppercase tracking-wide text-slate-500">
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Sen</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Sel</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Rab</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Kam</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Jum</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Sab</div>
            <div class="rounded-lg bg-slate-50 px-2 py-1 text-center">Min</div>
        </div>

        <div class="mt-2 grid grid-cols-7 gap-2">
            @for($slot = 0; $slot < $totalSlot; $slot++)
                @php
                    $nomorHari = $slot - $offsetAwal + 1;
                    $validHari = $nomorHari >= 1 && $nomorHari <= $jumlahHari;
                    $tanggalSel = $validHari ? $awalBulan->copy()->day($nomorHari) : null;
                    $key = $tanggalSel ? $tanggalSel->format('Y-m-d') : null;
                    $row = $key ? $absensiMap->get($key) : null;
                    $isHadir = $row && ($row->status === 'hadir');
                    $isTidakMasuk = $row && ($row->status !== 'hadir');
                @endphp

                <div class="min-h-20 rounded-xl border {{ $validHari ? 'border-slate-200 bg-white' : 'border-transparent bg-transparent' }} p-2">
                    @if($validHari)
                        <div class="text-xs font-semibold text-slate-500">{{ $nomorHari }}</div>
                        <div class="mt-2 text-center text-lg font-black">
                            @if($isHadir)
                                <span class="text-emerald-600" title="Hadir">✓</span>
                            @elseif($isTidakMasuk)
                                <span class="text-rose-600" title="{{ ucfirst((string) $row->status) }}">✕</span>
                            @else
                                <span class="text-slate-300" title="Belum ada data">-</span>
                            @endif
                        </div>
                        @if($row && $row->keterangan)
                            <div class="mt-1 truncate text-[11px] text-slate-500" title="{{ $row->keterangan }}">{{ $row->keterangan }}</div>
                        @endif
                    @endif
                </div>
            @endfor
        </div>
    @else
        <div class="px-5 py-6 text-center text-sm text-slate-500">
            Belum ada data absensi untuk siswa ini.
        </div>
    @endif
</x-table>
</div>
<div class="mt-4">{{ $absensi->links() }}</div>
@endsection