@extends('adminlte::page')

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

{{-- Aktifkan Plugin Select2 --}}
@section('plugins.Select2', true)

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.4rem;">
                Laporan Absensi Global
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Rekapitulasi kehadiran siswa dan pegawai dari sistem gerbang utama.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <a href="{{ route('laporan.absensi.pdf', request()->all()) }}" target="_blank" 
               class="btn btn-danger font-weight-bold rounded-pill px-4 py-1 shadow-sm hover-lift text-sm">
                <i class="fas fa-file-pdf mr-2"></i> Export PDF
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">

    {{-- CARD FILTER DATA --}}
    <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
        <div class="card-body p-3">
            <form action="{{ route('laporan.absensi') }}" method="GET" id="filterForm">
                <div class="row align-items-end">
                    
                    {{-- 1. Filter Tanggal --}}
                    <div class="col-lg-3 col-md-6 mb-2">
                        <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Periode Tanggal</label>
                        <div class="input-group bg-light rounded overflow-hidden border">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-transparent border-0 pl-2 pr-1"><i class="far fa-calendar-alt text-muted text-sm"></i></span>
                            </div>
                            <input type="date" name="tanggal_mulai" class="form-control border-0 bg-transparent shadow-none font-weight-bold px-1" style="font-size: 0.8rem; height: 35px;"
                                   value="{{ $startDate ?? request('tanggal_mulai', date('Y-m-d')) }}">
                            <div class="input-group-prepend input-group-append">
                                <span class="input-group-text bg-transparent border-0 text-muted px-0">-</span>
                            </div>
                            <input type="date" name="tanggal_selesai" class="form-control border-0 bg-transparent shadow-none font-weight-bold px-1" style="font-size: 0.8rem; height: 35px;"
                                   value="{{ $endDate ?? request('tanggal_selesai', date('Y-m-d')) }}">
                        </div>
                    </div>

                    {{-- 2. Filter Kategori --}}
                    <div class="col-lg-2 col-md-6 mb-2">
                        <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Kategori User</label>
                        <select name="kategori" id="kategori_filter" class="form-control form-control-solid select2-bs4" onchange="this.form.submit()">
                            <option value="siswa" {{ request('kategori') == 'siswa' ? 'selected' : '' }}>Siswa</option>
                            <option value="guru" {{ request('kategori') == 'guru' ? 'selected' : '' }}>Guru (Pendidik)</option>
                            <option value="staff" {{ request('kategori') == 'staff' ? 'selected' : '' }}>Staff (Tendik)</option>
                            <option value="pegawai" {{ request('kategori') == 'pegawai' ? 'selected' : '' }}>Semua Pegawai</option>
                        </select>
                    </div>

                   {{-- 3. Filter Sekolah --}}
                    @if(isset($sekolahs) && count($sekolahs) > 0)
                    <div class="col-lg-2 col-md-6 mb-2">
                        <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Lembaga / Unit</label>
                        {{-- HAPUS onchange="this.form.submit()" dan TAMBAHKAN id="sekolah_filter" --}}
                        <select name="sekolah_id" id="sekolah_filter" class="form-control select2-bs4">
                            <option value="">Semua Unit</option>
                            @foreach($sekolahs as $sekolah)
                                <option value="{{ $sekolah->id }}" {{ request('sekolah_id') == $sekolah->id ? 'selected' : '' }}>
                                    {{ $sekolah->nama_sekolah }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                   {{-- 4. Filter Kelas --}}
                    <div class="col-lg-2 col-md-6 mb-2" id="wrapper_kelas">
                        <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Kelas</label>
                        {{-- TAMBAHKAN id="kelas_filter" --}}
                        <select name="kelas_id" id="kelas_filter" class="form-control select2-bs4">
                            <option value="">Semua Kelas</option>
                            @foreach($kelases as $kelas)
                                <option value="{{ $kelas->id }}" {{ request('kelas_id') == $kelas->id ? 'selected' : '' }}>
                                    {{ $kelas->nama_kelas }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    {{-- 5. Filter Status & Tombol (Digabung agar responsif) --}}
                    <div class="col-lg-3 col-md-12 mb-2 d-flex" style="gap: 10px;">
                        <div class="flex-grow-1">
                            <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Status Kehadiran</label>
                            <select name="status_kehadiran" class="form-control select2-bs4">
                                <option value="">Semua Status</option>
                                <option value="Hadir" {{ request('status_kehadiran') == 'Hadir' ? 'selected' : '' }}>Hadir (Tepat)</option>
                                <option value="Terlambat" {{ request('status_kehadiran') == 'Terlambat' ? 'selected' : '' }}>Terlambat</option>
                                <option value="Izin" {{ request('status_kehadiran') == 'Izin' ? 'selected' : '' }}>Izin</option>
                                <option value="Sakit" {{ request('status_kehadiran') == 'Sakit' ? 'selected' : '' }}>Sakit</option>
                                <option value="Alpa" {{ request('status_kehadiran') == 'Alpa' ? 'selected' : '' }}>Alpa</option>
                            </select>
                        </div>
                        <div style="width: 45px;">
                            <label class="d-block mb-1">&nbsp;</label>
                            <button type="submit" class="btn btn-primary w-100 rounded font-weight-bold shadow-sm" style="height: 35px;" title="Terapkan Filter">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>

    {{-- CARD TABEL HASIL --}}
    <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 w-100" style="font-size: 0.8rem;">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted font-weight-bold" style="letter-spacing: 0.5px; font-size: 0.7rem;">
                            <th class="pl-3 py-2" width="5%">No</th>
                            <th width="15%">Waktu & Tanggal</th>
                            <th width="25%">Identitas User</th>
                            <th width="15%">Kelas / Jabatan</th>
                            <th width="10%" class="text-center">Masuk</th>
                            <th width="10%" class="text-center">Pulang</th>
                            <th width="10%" class="text-center">Durasi</th>
                            <th width="10%" class="text-center pr-3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($laporans as $row)
                            @php
                                // Logic Warna Avatar
                                $colors = ['primary', 'success', 'danger', 'warning', 'info', 'indigo', 'purple', 'teal'];
                                $rawId = $row->siswa_id ?? $row->user_id ?? 1;
                                $color = $colors[$rawId % count($colors)];
                                $namaUser = $row->siswa ? $row->siswa->nama_lengkap : ($row->user->name ?? 'X');
                                $initial = strtoupper(substr($namaUser, 0, 1));

                                // Logic Waktu
                                $masuk = $row->waktu_masuk ? \Carbon\Carbon::parse($row->waktu_masuk) : null;
                                $pulang = $row->waktu_pulang ? \Carbon\Carbon::parse($row->waktu_pulang) : null;

                                // Logic Durasi Lama di Sekolah
                                $durasiTeks = '-';
                                if ($masuk && $pulang) {
                                    $j = intval($masuk->diffInHours($pulang));
                                    $m = intval($masuk->diffInMinutes($pulang) % 60);
                                    $durasiTeks = ($j > 0 ? $j.'J ' : '') . $m . 'M';
                                } elseif ($masuk && !$pulang && !in_array($row->status_kehadiran, ['Alpa', 'Sakit', 'Izin'])) {
                                    $durasiTeks = 'Di Sekolah';
                                }

                                // Logic Status
                                $badgeClass = 'bg-light-secondary text-muted';
                                $icon = 'fa-minus';
                                
                                if ($row->status_kehadiran == 'Hadir') {
                                    $badgeClass = 'bg-light-success text-success';
                                    $icon = 'fa-check-circle';
                                } elseif ($row->status_kehadiran == 'Terlambat') {
                                    $badgeClass = 'bg-light-warning text-warning';
                                    $icon = 'fa-clock';
                                } elseif (in_array($row->status_kehadiran, ['Izin', 'Sakit'])) {
                                    $badgeClass = 'bg-light-info text-info';
                                    $icon = 'fa-info-circle';
                                } elseif ($row->status_kehadiran == 'Alpa') {
                                    $badgeClass = 'bg-light-danger text-danger';
                                    $icon = 'fa-times-circle';
                                }
                            @endphp
                            
                            <tr>
                                <td class="pl-3 py-2 text-center text-muted font-weight-bold">
                                    {{ $loop->iteration + ($laporans->currentPage() - 1) * $laporans->perPage() }}
                                </td>
                                
                                {{-- Tanggal --}}
                                <td>
                                    @if($masuk)
                                    <div class="d-flex flex-column">
                                        <span class="text-dark font-weight-bold" style="font-size: 0.85rem;">{{ $masuk->translatedFormat('d M Y') }}</span>
                                        <span class="text-muted" style="font-size: 0.65rem;">{{ $masuk->translatedFormat('l') }}</span>
                                    </div>
                                    @else
                                        -
                                    @endif
                                </td>

                                {{-- Identitas User --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        {{-- Avatar --}}
                                        <div class="symbol symbol-30px mr-2">
                                            @if($row->siswa && $row->siswa->foto_url)
                                                <img src="{{ asset('storage/'.$row->siswa->foto_url) }}" class="rounded border shadow-sm" style="width: 32px; height: 32px; object-fit: cover;">
                                            @else
                                                <div class="bg-light-{{ $color }} text-{{ $color }} rounded d-flex align-items-center justify-content-center font-weight-bold shadow-sm" style="width: 32px; height: 32px; font-size: 0.85rem;">
                                                    {{ $initial }}
                                                </div>
                                            @endif
                                        </div>
                                        
                                        {{-- Teks Nama --}}
                                        <div class="d-flex flex-column">
                                            @if($row->siswa)
                                                <span class="text-dark font-weight-bold" style="font-size: 0.85rem;">{{ $row->siswa->nama_lengkap }}</span>
                                                <span class="text-muted font-monospace" style="font-size: 0.65rem;">NIS: {{ $row->siswa->nisn ?? $row->siswa->nis ?? '-' }}</span>
                                            @elseif($row->user)
                                                <span class="text-dark font-weight-bold" style="font-size: 0.85rem;">{{ $row->user->name }}</span>
                                                <span class="text-muted font-monospace" style="font-size: 0.65rem;">NIP: {{ $row->user->username ?? '-' }}</span>
                                            @else
                                                <span class="text-danger font-italic" style="font-size: 0.8rem;">Data Terhapus</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>

                                {{-- Kelas / Jabatan --}}
                                <td>
                                    @if($row->siswa)
                                        <span class="badge bg-light text-dark border font-weight-bold px-2 py-1" style="font-size: 0.7rem;">
                                            {{ $row->siswa->kelas->nama_kelas ?? '-' }}
                                        </span>
                                    @else
                                        @php
                                            $roleRaw = $row->user->role instanceof \App\Enums\UserRole ? $row->user->role->value : ($row->user->role ?? 'Staff');
                                        @endphp
                                        <span class="badge bg-light-primary text-primary border-0 px-2 py-1" style="font-size: 0.7rem;">
                                            {{ ucwords(str_replace('_', ' ', $roleRaw)) }}
                                        </span>
                                    @endif
                                </td>

                                {{-- Jam Masuk --}}
                                <td class="text-center font-monospace">
                                    @if(in_array($row->status_kehadiran, ['Alpa', 'Sakit', 'Izin']) && !$masuk)
                                        <span class="text-muted">-</span>
                                    @else
                                        <span class="font-weight-bold {{ $row->status_kehadiran == 'Terlambat' ? 'text-warning' : 'text-success' }}" style="font-size: 0.85rem;">
                                            {{ $masuk ? $masuk->format('H:i') : '-' }}
                                        </span>
                                    @endif
                                </td>

                                {{-- Jam Pulang --}}
                                <td class="text-center font-monospace">
                                    @if($pulang)
                                        <span class="font-weight-bold text-dark" style="font-size: 0.85rem;">{{ $pulang->format('H:i') }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                {{-- Durasi (Lama di sekolah) --}}
                                <td class="text-center font-weight-bold">
                                    @if($durasiTeks == 'Di Sekolah')
                                        <span class="badge bg-light-primary text-primary border-0 px-2 py-1" style="font-size: 0.65rem;">
                                            <i class="fas fa-spinner fa-spin mr-1"></i> Aktif
                                        </span>
                                    @else
                                        <span class="text-dark" style="font-size: 0.8rem;">{{ $durasiTeks }}</span>
                                    @endif
                                </td>

                                {{-- Status --}}
                                <td class="text-center pr-3">
                                    <div class="d-flex flex-column align-items-center">
                                        <span class="badge {{ $badgeClass }} px-2 py-1 rounded-pill font-weight-bold border-0 w-100" style="font-size: 0.7rem;">
                                            <i class="fas {{ $icon }} mr-1"></i> {{ $row->status_kehadiran }}
                                        </span>
                                        @if($row->keterangan)
                                            <small class="text-muted mt-1" style="font-size: 0.6rem; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $row->keterangan }}">
                                                {{ $row->keterangan }}
                                            </small>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center justify-content-center">
                                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                            <i class="fas fa-search fa-2x text-muted opacity-50"></i>
                                        </div>
                                        <h6 class="text-muted font-weight-bold">Data Tidak Ditemukan</h6>
                                        <p class="text-muted small mb-0">Coba ubah filter kategori atau tanggal untuk hasil lainnya.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Footer Pagination --}}
            <div class="card-footer bg-white border-top py-3 px-4 d-flex flex-column flex-md-row justify-content-between align-items-center">
                <small class="text-muted font-weight-bold mb-2 mb-md-0" style="font-size: 0.75rem;">
                    Menampilkan {{ $laporans->firstItem() ?? 0 }} - {{ $laporans->lastItem() ?? 0 }} dari total {{ $laporans->total() ?? 0 }} data
                </small>
                <div>
                    {{ $laporans->withQueryString()->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    .bg-light-success { background-color: #E8FFF3; color: #50CD89; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-danger { background-color: #ffe2e5; color: #F64E60; }
    .text-danger { color: #F64E60 !important; }
    
    .bg-light-warning { background-color: #fff4de; color: #FFA800; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-info { background-color: #E1F0FF; color: #3699FF; }
    .bg-light-primary { background-color: #F1EAFF; color: #7239EA; }
    .text-primary { color: #7239EA !important; }
    .bg-light-secondary { background-color: #F3F6F9; color: #7E8299; }

    /* Select2 Fixes (Compact) */
    .select2-container--bootstrap4 .select2-selection--single {
        background-color: #fff !important; border: 1px solid #ced4da !important; height: 35px !important;
        border-radius: 0.3rem !important; padding-top: 4px; font-size: 0.8rem;
    }
    
    /* Table Styling */
    .table-hover tbody tr:hover { background-color: #F8F9FA; transition: background-color 0.2s ease; }
    .font-monospace { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 0.5px; }
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    .pagination { margin-bottom: 0; }
    .page-item .page-link { border: none; border-radius: 50%; color: #6c757d; margin: 0 2px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
    .page-item.active .page-link { background-color: #007bff; color: white; box-shadow: 0 2px 5px rgba(0,123,255,0.3); }
</style>
@stop

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

            // 2. Logika Show/Hide Filter Kelas berdasarkan Kategori
            function toggleKelasFilter() {
                var kategori = $('#kategori_filter').val();
                if (kategori === 'guru' || kategori === 'staff' || kategori === 'pegawai') {
                    $('#wrapper_kelas').hide();
                } else {
                    $('#wrapper_kelas').show();
                }
            }

            toggleKelasFilter();
            $('#kategori_filter').on('change', function() {
                toggleKelasFilter();
            });

            // 3. LOGIKA AJAX: UPDATE KELAS BERDASARKAN LEMBAGA / SEKOLAH
            $('select[name="sekolah_id"]').on('change', function() {
                let sekolahId = $(this).val();
                let kelasSelect = $('select[name="kelas_id"]');
                
                // Tampilkan loading text dan refresh Select2
                kelasSelect.empty().append('<option value="">Sedang memuat...</option>');
                kelasSelect.trigger('change');
                
                if (sekolahId) {
                    $.ajax({
                        url: '/ajax/kelas-by-sekolah/' + sekolahId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            kelasSelect.empty().append('<option value="">Semua Kelas</option>');
                            
                            // Masukkan data kelas dari server ke dropdown
                            $.each(data, function(key, value) {
                                kelasSelect.append('<option value="'+ value.id +'">'+ value.nama_kelas +'</option>');
                            });
                            
                            // Refresh ulang tampilan Select2
                            kelasSelect.trigger('change');
                        },
                        error: function() {
                            kelasSelect.empty().append('<option value="">Gagal memuat kelas</option>');
                            kelasSelect.trigger('change');
                        }
                    });
                } else {
                    // Jika memilih "Semua Sekolah", kosongkan kembali
                    kelasSelect.empty().append('<option value="">Semua Kelas</option>');
                    kelasSelect.trigger('change');
                }
            });
        });
    </script>
@stop