@extends('adminlte::page')

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

@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.5rem;">
                Laporan Absensi Siswa
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Rekapitulasi kehadiran siswa dalam Kegiatan Belajar Mengajar (KBM).
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            {{-- Tombol Export (Opsional, jika ada rute export) --}}
            {{-- 
            <a href="#" class="btn btn-light-success text-success font-weight-bold shadow-sm rounded-pill px-4 mr-2">
                <i class="fas fa-file-excel mr-2"></i> Export Excel
            </a> 
            --}}
        </div>
    </div>
@stop

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

    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        
        {{-- HEADER: FILTER DATA --}}
        <div class="card-header bg-white border-bottom-0 py-4 px-4">
            <form action="{{ route('jurnal.absensi') }}" method="GET">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                    <h3 class="card-title font-weight-bold text-dark mb-3 mb-md-0">Riwayat Kehadiran</h3>
                    
                    <div class="d-flex flex-column flex-md-row align-items-md-center">
                        
                        {{-- 1. Filter Sekolah (Hanya jika > 1 sekolah) --}}
                        @if(isset($sekolahs) && count($sekolahs) > 1)
                            <div class="mr-md-2 mb-2 mb-md-0">
                                <select name="sekolah_id" class="form-control bg-light border-0 text-muted font-weight-bold" 
                                        onchange="this.form.submit()" style="border-radius: 10px; height: 45px;">
                                    <option value="">Semua Sekolah</option>
                                    @foreach($sekolahs as $sekolah)
                                        <option value="{{ $sekolah->id }}" {{ request('sekolah_id') == $sekolah->id ? 'selected' : '' }}>
                                            {{ $sekolah->nama_sekolah }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        {{-- 2. Filter Tanggal --}}
                        <div class="mr-md-2 mb-2 mb-md-0">
                            <div class="input-group bg-light rounded-lg overflow-hidden" style="border-radius: 10px;">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-transparent border-0 pl-3"><i class="far fa-calendar-alt text-muted"></i></span>
                                </div>
                                <input type="date" name="tanggal" class="form-control border-0 bg-transparent shadow-none font-weight-bold text-muted" 
                                       style="height: 45px;"
                                       value="{{ request('tanggal', date('Y-m-d')) }}" 
                                       onchange="this.form.submit()">
                            </div>
                        </div>

                        {{-- 3. Search Siswa --}}
                        <div class="input-group bg-light rounded-lg overflow-hidden" style="border-radius: 10px; width: 250px;">
                            <input type="text" name="nama_siswa" class="form-control border-0 bg-transparent shadow-none" 
                                   style="height: 45px;"
                                   placeholder="Cari Nama Siswa..." 
                                   value="{{ request('nama_siswa') }}">
                            <div class="input-group-append">
                                <button class="btn btn-light bg-transparent border-0 text-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100 mb-0">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                            <th class="pl-4 py-3" width="5%">No</th>
                            <th width="15%">Waktu</th>
                            <th width="30%">Profil Siswa</th>
                            <th width="25%">Mata Pelajaran</th>
                            <th width="15%">Guru</th>
                            <th width="10%" class="text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($laporans as $row)
                            <tr>
                                <td class="pl-4 text-center text-muted font-weight-bold py-3">
                                    {{ $loop->iteration + ($laporans->currentPage() - 1) * $laporans->perPage() }}
                                </td>
                                
                                {{-- Waktu --}}
                                <td>
                                    <div class="d-flex flex-column">
                                        <span class="text-dark font-weight-bold text-sm">{{ \Carbon\Carbon::parse($row->created_at)->translatedFormat('d M Y') }}</span>
                                        <span class="text-muted text-xs font-monospace">
                                            <i class="far fa-clock mr-1"></i> {{ \Carbon\Carbon::parse($row->created_at)->format('H:i') }} WIB
                                        </span>
                                    </div>
                                </td>

                                {{-- Profil Siswa --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-40px mr-3">
                                            @if($row->siswa->foto_url)
                                                <img src="{{ asset('storage/'.$row->siswa->foto_url) }}" class="rounded-circle border shadow-sm" style="width: 40px; height: 40px; object-fit: cover;">
                                            @else
                                                <div class="symbol-label bg-light-purple text-purple font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1rem;">
                                                    {{ substr($row->siswa->nama_lengkap ?? '-', 0, 1) }}
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <span class="text-dark font-weight-bold d-block text-sm">{{ $row->siswa->nama_lengkap ?? '-' }}</span>
                                            <div class="d-flex align-items-center mt-1">
                                                <span class="badge badge-light-secondary text-muted border px-2 py-0 mr-2" style="font-size: 0.7rem;">
                                                    {{ $row->siswa->kelas->nama_kelas ?? 'Tanpa Kelas' }}
                                                </span>
                                                @if(isset($sekolahs) && count($sekolahs) > 1)
                                                    <small class="text-muted text-xs">({{ $row->siswa->kelas->sekolah->nama_sekolah ?? '-' }})</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                {{-- Mapel & Catatan --}}
                                <td>
                                    <span class="text-dark font-weight-bold d-block text-sm">
                                        {{ $row->sesiPembelajaran->jadwal->mataPelajaran->nama_mapel ?? '-' }}
                                    </span>
                                    @if($row->catatan)
                                        <div class="d-flex align-items-center mt-1 text-muted text-xs">
                                            <i class="fas fa-sticky-note mr-1 text-warning"></i>
                                            <span class="text-truncate" style="max-width: 200px;" title="{{ $row->catatan }}">
                                                {{ $row->catatan }}
                                            </span>
                                        </div>
                                    @endif
                                </td>

                                {{-- Guru --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-30px mr-2">
                                            <div class="symbol-label bg-light-info text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; font-size: 0.8rem;">
                                                <i class="fas fa-chalkboard-teacher"></i>
                                            </div>
                                        </div>
                                        <span class="text-muted font-weight-500 text-sm">
                                            {{ $row->sesiPembelajaran->user->name ?? '-' }}
                                        </span>
                                    </div>
                                </td>

                                {{-- Status Badge --}}
                                <td class="text-center">
                                    @php
                                        $status = $row->status_kehadiran;
                                        $badgeClass = 'bg-light-secondary text-muted';
                                        $icon = 'fa-minus';

                                        if ($status == 'Hadir') {
                                            $badgeClass = 'bg-light-success text-success';
                                            $icon = 'fa-check';
                                        } elseif ($status == 'Terlambat') {
                                            $badgeClass = 'bg-light-warning text-warning';
                                            $icon = 'fa-clock';
                                        } elseif ($status == 'Izin' || $status == 'Sakit') {
                                            $badgeClass = 'bg-light-info text-info';
                                            $icon = 'fa-envelope';
                                        } elseif ($status == 'Alpa') {
                                            $badgeClass = 'bg-light-danger text-danger';
                                            $icon = 'fa-times';
                                        }
                                    @endphp
                                    <span class="badge {{ $badgeClass }} px-3 py-2 rounded-pill font-weight-bold text-xs border-0">
                                        <i class="fas {{ $icon }} mr-1"></i> {{ $status }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" 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-user-slash 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">Belum ada data absensi untuk tanggal atau pencarian ini.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Footer Pagination --}}
            <div class="card-footer bg-white border-top py-4 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">
                    Menampilkan {{ $laporans->firstItem() }} - {{ $laporans->lastItem() }} dari total {{ $laporans->total() }} data
                </small>
                <div>
                    {{ $laporans->withQueryString()->links('pagination::bootstrap-4') }}
                </div>
            </div>

        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    
    /* 1. Warna Badge Soft */
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    .text-purple { color: #5B247A !important; }
    
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    
    .bg-light-info { background-color: #E1F0FF !important; }
    .text-info { color: #3699FF !important; }
    
    .bg-light-secondary { background-color: #F3F6F9 !important; }

    /* 2. Form Input Modern */
    .form-control:focus {
        border-color: #5B247A;
        box-shadow: 0 0 0 0.2rem rgba(91, 36, 122, 0.1);
    }
    
    /* 3. Table Styling */
    .table-hover tbody tr:hover {
        background-color: #FAFAFA;
        transition: background-color 0.2s ease;
    }
</style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Enable Tooltip
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
@stop