@extends('layouts.admin')
@section('title', 'Laporan Absensi Bulanan')
@section('page-title', 'Laporan Absensi Bulanan')

@section('page-actions')
    @if($kelas_id)
        @php $exportQuery = request()->only(['mode', 'tahun_ajaran_id', 'bulan', 'tahun', 'tanggal_awal', 'tanggal_akhir', 'kelas_id', 'wali_kelas_id', 'search']); @endphp
        <a href="{{ route('admin.laporan-bulanan.export-excel', $exportQuery) }}" class="inline-flex items-center rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 hover:bg-emerald-100">Export Excel</a>
        <a href="{{ route('admin.laporan-bulanan.export-pdf', $exportQuery) }}" class="inline-flex items-center rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold text-rose-800 hover:bg-rose-100">Export PDF</a>
    @endif
@endsection

@section('admin-content')
<x-card title="Filter Laporan" subtitle="Pilih periode, kelas, dan wali kelas.">
    @include('laporan-bulanan._filters')
</x-card>

@if($selected_kelas)
<div class="mt-6 rounded-2xl border border-slate-200 bg-gradient-to-r from-ink-50 to-brand-25 px-5 py-4">
    <div class="flex flex-wrap items-center justify-between gap-2">
        <div>
            <div class="text-xs font-bold uppercase tracking-wide text-slate-500">Kelas terpilih</div>
            <div class="text-lg font-black text-slate-900">{{ $selected_kelas->tingkat }} {{ $selected_kelas->nama_kelas }}</div>
            @if($selected_kelas->waliKelas)
                <div class="text-sm text-slate-600">Wali: {{ $selected_kelas->waliKelas->nama_lengkap }}</div>
            @endif
        </div>
        <div class="text-right">
            <div class="text-xs font-bold uppercase tracking-wide text-slate-500">Periode</div>
            <div class="text-sm font-semibold text-brand-800">{{ $periode_label }}</div>
        </div>
    </div>
</div>

<div class="mt-6">
    @include('laporan-bulanan._grid')
</div>
@else
<div class="mt-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
    Pilih kelas untuk menampilkan grid absensi bulanan.
</div>
@endif

@include('laporan-bulanan._modal')
@include('laporan-bulanan._scripts')
@endsection