@extends('layouts.admin')
@section('title', 'Laporan Absensi')
@section('page-title', 'Laporan Absensi')
@section('admin-content')
<x-card title="Filter Laporan" subtitle="Atur rentang tanggal dan kelas, lalu export ke Excel.">
    <form method="GET" class="grid grid-cols-1 gap-3 md:grid-cols-4">
        <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>
            <label class="mb-1 block text-sm font-semibold text-slate-700">Kelas</label>
            <select name="kelas_id" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
                <option value="">Semua Kelas</option>
                @foreach($kelasList as $k)
                    <option value="{{ $k->id }}" {{ request('kelas_id')==$k->id?'selected':'' }}>{{ $k->tingkat }} - {{ $k->nama_kelas }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex items-end gap-2 md:justify-end">
            <x-button type="submit" variant="primary">Filter</x-button>
            <x-button href="{{ route('admin.laporan.export', request()->query()) }}" variant="secondary">Export Excel</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="Data Absensi" subtitle="Ringkasan absensi seluruh sekolah sesuai filter.">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50"><tr><th class="px-4 py-2 text-left text-sm">Tanggal</th><th class="px-4 py-2 text-left text-sm">NIS</th><th class="px-4 py-2 text-left text-sm">Nama</th><th class="px-4 py-2 text-left text-sm">Kelas</th><th class="px-4 py-2 text-left text-sm">Status</th><th class="px-4 py-2 text-left text-sm">Keterangan</th></tr></thead>
        <tbody class="divide-y divide-gray-200">
            @foreach($absensi as $a)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $a->tanggal->format('d/m/Y') }}</td>
                <td class="px-5 py-3 text-sm text-slate-700">{{ $a->siswa?->nis }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $a->siswa?->nama_lengkap }}</td>
                <td class="px-5 py-3 text-sm text-slate-600">{{ $a->siswa?->kelas?->nama_kelas ?? '-' }}</td>
                <td class="px-5 py-3 text-sm"><x-badge-status :status="$a->status ?? 'libur'" /></td>
                <td class="px-5 py-3 text-sm text-slate-600">{{ $a->keterangan ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table>
</div>
<div class="mt-4">{{ $absensi->withQueryString()->links() }}</div>

<div class="mt-8">
    <x-table title="Kenaikan Kelas Siswa" subtitle="Centang siswa yang naik kelas, lalu submit untuk update kelas secara massal.">
        <form method="POST" action="{{ route('admin.laporan.kenaikan-kelas') }}">
            @csrf
            <input type="hidden" name="tanggal_awal" value="{{ request('tanggal_awal') }}">
            <input type="hidden" name="tanggal_akhir" value="{{ request('tanggal_akhir') }}">
            <input type="hidden" name="kelas_id" value="{{ request('kelas_id') }}">

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">NIS</th>
                            <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama Siswa</th>
                            <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Kelas Saat Ini</th>
                            <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Wali Kelas</th>
                            <th class="px-5 py-3 text-center text-xs font-bold uppercase tracking-wide text-slate-500">
                                <label class="inline-flex items-center gap-2">
                                    <input type="checkbox" id="checkAllPromote" class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                    <span>Naik Kelas</span>
                                </label>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200">
                        @forelse($siswas as $siswa)
                            <tr class="hover:bg-slate-50/70">
                                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $siswa->nis }}</td>
                                <td class="px-5 py-3 text-sm text-slate-800">{{ $siswa->nama_lengkap }}</td>
                                <td class="px-5 py-3 text-sm text-slate-700">
                                    {{ $siswa->kelas?->tingkat ? 'Kelas '.$siswa->kelas->tingkat : '-' }}
                                    {{ $siswa->kelas?->nama_kelas ? ' - '.$siswa->kelas->nama_kelas : '' }}
                                </td>
                                <td class="px-5 py-3 text-sm text-slate-700">{{ $siswa->kelas?->waliKelas?->nama_lengkap ?? '-' }}</td>
                                <td class="px-5 py-3 text-center">
                                    <input
                                        type="checkbox"
                                        name="promoted_nis[]"
                                        value="{{ $siswa->nis }}"
                                        class="promote-checkbox h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500"
                                    >
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-5 py-6 text-center text-sm text-slate-500">Data siswa tidak tersedia untuk filter saat ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4 flex items-center justify-between gap-3">
                <p class="text-sm text-slate-600">Data siswa tidak dihapus. Sistem hanya memperbarui kelas siswa yang dicentang.</p>
                <x-button type="submit" variant="secondary">Submit Kenaikan Kelas</x-button>
            </div>
        </form>
    </x-table>
</div>

@if (session('promotion_notes'))
    <div class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 shadow-sm">
        <div class="text-sm font-semibold text-amber-900">Detail Siswa Dilewati</div>
        <ul class="mt-1 list-disc space-y-0.5 pl-5 text-sm text-amber-800">
            @foreach (session('promotion_notes') as $note)
                <li>{{ $note }}</li>
            @endforeach
        </ul>
    </div>
@endif

<script>
    (() => {
        const checkAll = document.getElementById('checkAllPromote');
        const checkboxes = document.querySelectorAll('.promote-checkbox');
        if (!checkAll || checkboxes.length === 0) return;

        checkAll.addEventListener('change', () => {
            checkboxes.forEach((checkbox) => {
                checkbox.checked = checkAll.checked;
            });
        });
    })();
</script>
@endsection