@extends('adminlte::page')

@section('title', 'Laporan Absensi Kelas | Smart Cendekia')

@section('plugins.Select2', true)
@section('plugins.Datatables', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                <i class="fas fa-clipboard-list text-primary mr-2"></i> Laporan Absensi Kelas
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Filter dan pantau rekapitulasi kehadiran siswa berdasarkan kelas dan tanggal.
            </p>
        </div>
        <div>
            <button onclick="window.print()" class="btn btn-default shadow-sm border font-weight-bold d-none d-md-inline-block">
                <i class="fas fa-print mr-1"></i> Cetak Laporan
            </button>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">
    
    {{-- ==================================================== --}}
    {{-- 1. CARD FILTER PENCARIAN --}}
    {{-- ==================================================== --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
        <div class="card-header bg-white pt-3 pb-2 border-bottom-0">
            <h3 class="card-title font-weight-bold text-dark">
                <i class="fas fa-filter text-info mr-2"></i> Filter Pencarian
            </h3>
        </div>
        <div class="card-body bg-light" style="border-radius: 0 0 12px 12px;">
            <form action="{{ route('laporan.sot') }}" method="GET" id="filterForm">
                <div class="row">
                    {{-- Filter Tanggal --}}
                    <div class="col-md-3 mb-3">
                        <label class="text-xs text-muted text-uppercase tracking-wide">Tanggal Absensi</label>
                        <input type="date" name="tanggal" class="form-control form-control-solid" 
                               value="{{ request('tanggal', date('Y-m-d')) }}">
                    </div>

                    {{-- Filter Sekolah (Asumsi $sekolahs dikirim dari controller) --}}
                    <div class="col-md-4 mb-3">
                        <label class="text-xs text-muted text-uppercase tracking-wide">Cabang Sekolah</label>
                        <select name="sekolah_id" class="form-control select2-bs4">
                            <option value="">-- Semua Sekolah --</option>
                            @if(isset($sekolahs))
                                @foreach($sekolahs as $sekolah)
                                    <option value="{{ $sekolah->id }}" {{ request('sekolah_id') == $sekolah->id ? 'selected' : '' }}>
                                        {{ $sekolah->nama_sekolah }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    {{-- Filter Kelas (Asumsi $kelas dikirim dari controller) --}}
                    <div class="col-md-3 mb-3">
                        <label class="text-xs text-muted text-uppercase tracking-wide">Kelas</label>
                        <select name="kelas_id" class="form-control select2-bs4">
                            <option value="">-- Semua Kelas --</option>
                            @if(isset($kelas))
                                @foreach($kelas as $k)
                                    <option value="{{ $k->id }}" {{ request('kelas_id') == $k->id ? 'selected' : '' }}>
                                        {{ $k->nama_kelas }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    {{-- Tombol Filter --}}
                    <div class="col-md-2 mb-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-block shadow-sm font-weight-bold" style="height: 38px;">
                            <i class="fas fa-search mr-1"></i> Tampilkan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ==================================================== --}}
    {{-- 2. CARD HASIL DATA (TABEL) --}}
    {{-- ==================================================== --}}
    <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
        <div class="card-header bg-dark text-white pt-3 pb-3 px-4 d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold mb-0">
                Hasil Pencarian: <span class="text-warning">{{ \Carbon\Carbon::parse(request('tanggal', date('Y-m-d')))->locale('id')->isoFormat('dddd, D MMMM Y') }}</span>
            </h3>
        </div>
        
        <div class="card-body p-4">
            <table id="tabelLaporan" class="table table-hover table-striped table-bordered text-nowrap w-100">
                <thead class="bg-light text-muted text-uppercase text-xs tracking-wide">
                    <tr>
                        <th width="5%" class="text-center">No</th>
                        <th width="15%">NIS / NISN</th>
                        <th>Nama Lengkap Siswa</th>
                        <th>Kelas</th>
                        <th class="text-center">Jam Masuk</th>
                        <th class="text-center">Status</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- 
                        ASUMSI: Controller mengirim variabel $dataAbsensi
                        Ubah variabel $dataAbsensi sesuai dengan nama variabel yang Anda buat di LaporanSotController baris 102
                    --}}
                    @if(isset($dataAbsensi) && count($dataAbsensi) > 0)
                        @foreach($dataAbsensi as $index => $item)
                        <tr>
                            <td class="text-center align-middle">{{ $index + 1 }}</td>
                            <td class="align-middle font-weight-bold">{{ $item->siswa->nis ?? '-' }}</td>
                            <td class="align-middle text-dark">{{ $item->siswa->nama_lengkap ?? 'Data Terhapus' }}</td>
                            <td class="align-middle">
                                <span class="badge badge-light border">{{ $item->siswa->kelas->nama_kelas ?? '-' }}</span>
                            </td>
                            <td class="text-center align-middle">
                                {{ $item->waktu_masuk ? \Carbon\Carbon::parse($item->waktu_masuk)->format('H:i') : '-' }}
                            </td>
                            <td class="text-center align-middle">
                                @if($item->status_kehadiran == 'Hadir' || $item->status_kehadiran == 'Tepat Waktu')
                                    <span class="badge badge-success px-2 py-1"><i class="fas fa-check mr-1"></i> Hadir</span>
                                @elseif($item->status_kehadiran == 'Sakit')
                                    <span class="badge badge-warning px-2 py-1"><i class="fas fa-briefcase-medical mr-1"></i> Sakit</span>
                                @elseif($item->status_kehadiran == 'Izin')
                                    <span class="badge badge-info px-2 py-1"><i class="fas fa-envelope mr-1"></i> Izin</span>
                                @elseif($item->status_kehadiran == 'Terlambat')
                                    <span class="badge badge-danger px-2 py-1"><i class="fas fa-clock mr-1"></i> Terlambat</span>
                                @else
                                    <span class="badge badge-secondary px-2 py-1">{{ $item->status_kehadiran }}</span>
                                @endif
                            </td>
                            <td class="align-middle text-muted small">{{ $item->keterangan ?? '-' }}</td>
                        </tr>
                        @endforeach
                    @else
                        {{-- Jika tidak ada data --}}
                    @endif
                </tbody>
            </table>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    .tracking-wide { letter-spacing: 0.05em; }
    .form-control-solid { 
        background-color: #F5F8FA; 
        border: 1px solid #E4E6EF; 
        border-radius: 6px; 
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #B5B5C3; }
    
    /* Tweaks untuk Select2 agar sama dengan tinggi input biasa */
    .select2-container--bootstrap4 .select2-selection--single {
        height: 38px !important;
        background-color: #F5F8FA !important;
        border: 1px solid #E4E6EF !important;
    }
    
    /* Sembunyikan elemen tertentu saat di-print */
    @media print {
        .main-header, .main-sidebar, .card-header, #filterForm { display: none !important; }
        .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
        .card { border: none !important; box-shadow: none !important; }
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Inisialisasi Select2
        $('.select2-bs4').select2({ theme: 'bootstrap4', width: '100%' });

        // Inisialisasi DataTables
        $('#tabelLaporan').DataTable({
            "responsive": true,
            "autoWidth": false,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Indonesian.json"
            },
            // Hanya inisialisasi jika ada data (mencegah error tabel kosong)
            "bDestroy": true
        });
    });
</script>
@stop