@extends('adminlte::page')

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

@section('plugins.Select2', true)
@section('plugins.Datatables', 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.5rem;">
                Laporan Absensi Guru
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Rekapitulasi kehadiran, keterlambatan, dan aktivitas mengajar guru.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <ol class="breadcrumb bg-transparent p-0 m-0 d-none d-md-flex">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Home</a></li>
                <li class="breadcrumb-item active text-purple font-weight-bold">Laporan Guru</li>
            </ol>
        </div>
    </div>
@stop

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

    {{-- CARD FILTER --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h6 class="font-weight-bold text-dark mb-0">Filter Data Laporan</h6>
        </div>
        
        <div class="card-body p-4">
            <form action="{{ route('laporan.guru') }}" method="GET">
                <input type="hidden" name="mode" value="rekap">
                
                <div class="row">
                    {{-- 1. Periode Tanggal --}}
                    <div class="col-md-3 mb-3">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-2">Periode Tanggal</label>
                        <div class="input-group bg-light rounded-lg overflow-hidden">
                            <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_mulai" class="form-control border-0 bg-transparent shadow-none font-weight-bold text-dark" 
                                   value="{{ request('tanggal_mulai') ?? date('Y-m-01') }}">
                            <div class="input-group-prepend input-group-append">
                                <span class="input-group-text bg-transparent border-0 text-muted px-1">-</span>
                            </div>
                            <input type="date" name="tanggal_selesai" class="form-control border-0 bg-transparent shadow-none font-weight-bold text-dark" 
                                   value="{{ request('tanggal_selesai') ?? date('Y-m-d') }}">
                        </div>
                    </div>

                    {{-- 2. Sekolah (Jika Multi) --}}
                    @if(isset($sekolahs) && count($sekolahs) > 1)
                    <div class="col-md-3 mb-3">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-2">Sekolah</label>
                        <select name="sekolah_id" class="form-control select2-bs4 form-control-solid">
                            <option value="">Semua Sekolah</option>
                            @foreach($sekolahs as $s)
                                <option value="{{ $s->id }}" {{ request('sekolah_id') == $s->id ? 'selected' : '' }}>
                                    {{ $s->nama_sekolah }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    {{-- 3. Guru --}}
                    <div class="col-md-3 mb-3">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-2">Guru</label>
                        <select name="user_id" class="form-control select2-bs4 form-control-solid">
                            <option value="">Semua Guru</option>
                            @foreach($gurus as $g)
                                <option value="{{ $g->id }}" {{ request('user_id') == $g->id ? 'selected' : '' }}>
                                    {{ $g->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- 4. Status --}}
                    <div class="col-md-3 mb-3">
                        <label class="text-muted text-xs font-weight-bold text-uppercase mb-2">Status Kehadiran</label>
                        <select name="status_kehadiran" class="form-control form-control-solid font-weight-bold text-dark">
                            <option value="Semua" {{ request('status_kehadiran') == 'Semua' ? 'selected' : '' }}>Semua Status</option>
                            <option value="Tepat Waktu" {{ request('status_kehadiran') == 'Tepat Waktu' ? 'selected' : '' }}>Hadir Tepat Waktu</option>
                            <option value="Terlambat" {{ request('status_kehadiran') == 'Terlambat' ? 'selected' : '' }}>Terlambat</option>
                            <option value="Alpa" {{ request('status_kehadiran') == 'Alpa' ? 'selected' : '' }}>Alpa (Tidak Mengajar)</option>
                        </select>
                    </div>

                    {{-- Tombol Aksi --}}
                    <div class="col-md-12 text-right mt-2">
                        <a href="{{ route('laporan.guru.export', request()->all()) }}" target="_blank" 
                           class="btn btn-light-danger text-danger font-weight-bold btn-sm rounded-pill px-4 shadow-sm hover-lift mr-2" style="height: 38px; line-height: 26px;">
                            <i class="fas fa-file-pdf mr-2"></i> Export PDF
                        </a>
                        <button type="submit" class="btn btn-apex-purple rounded-pill px-5 font-weight-bold shadow-sm hover-lift" style="height: 38px;">
                            <i class="fas fa-search mr-2"></i> Tampilkan Data
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- TABEL DATA SMART ANALYSIS --}}
    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle w-100 mb-0" style="font-size: 0.85rem;">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted font-weight-bold" style="letter-spacing: 0.5px; font-size: 0.75rem;">
                            <th class="pl-4 py-3" width="5%">No</th>
                            <th width="20%">Guru & Kelas</th>
                            <th width="15%" class="text-center">Jadwal (Rencana)</th>
                            <th width="15%" class="text-center">Aktual (Realisasi)</th>
                            <th width="10%" class="text-center">Durasi</th>
                            <th width="25%">Status Kinerja</th>
                            <th width="10%" class="text-center pr-4">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($laporans as $row)
                            @php
                                // 1. LOGIKA WARNA AVATAR
                                $colors = ['primary', 'success', 'danger', 'warning', 'info', 'indigo', 'purple', 'teal'];
                                $color = $colors[$row->user->id % count($colors)];
                                $initial = strtoupper(substr($row->user->name ?? 'X', 0, 1));

                                // 2. IDENTIFIKASI VARIABEL DASAR
                                $isAlpa = $row->status_sesi == 'alpa_mengajar';
                                $tglReferensi = $row->waktu_mulai ? $row->waktu_mulai->format('Y-m-d') : $row->created_at->format('Y-m-d');
                                
                                // 3. PARSING WAKTU JADWAL
                                $jadwalMulai = \Carbon\Carbon::parse($tglReferensi . ' ' . $row->jadwal->jam_mulai);
                                $jadwalSelesai = \Carbon\Carbon::parse($tglReferensi . ' ' . $row->jadwal->jam_selesai);
                                
                                // 4. PARSING WAKTU AKTUAL JURNAL
                                $aktualMulai = $isAlpa ? null : \Carbon\Carbon::parse($row->waktu_mulai);
                                $aktualSelesai = ($isAlpa || !$row->waktu_selesai) ? null : \Carbon\Carbon::parse($row->waktu_selesai);

                                // 5. ANALISIS KETERLAMBATAN (Dibulatkan)
                                $statusMasuk = '';
                                $telatMenit = 0;
                                if (!$isAlpa && $aktualMulai) {
                                    $batasMasuk = $jadwalMulai->copy()->addMinutes(10);
                                    if ($aktualMulai->gt($batasMasuk)) {
                                        $telatMenit = intval(round($aktualMulai->diffInMinutes($jadwalMulai)));
                                        $statusMasuk = "<span class='badge bg-light-danger text-danger border-0 mb-1 py-1 px-2' style='font-size: 0.7rem;'><i class='fas fa-clock mr-1'></i>Telat {$telatMenit} Mnt</span>";
                                    } else {
                                        $statusMasuk = "<span class='badge bg-light-success text-success border-0 mb-1 py-1 px-2' style='font-size: 0.7rem;'><i class='fas fa-check-circle mr-1'></i>Tepat Waktu</span>";
                                    }
                                }

                                // 6. ANALISIS CEPAT PULANG (Dibulatkan)
                                $statusKeluar = '';
                                $cepatMenit = 0;
                                if (!$isAlpa && $aktualSelesai) {
                                    if ($aktualSelesai->lt($jadwalSelesai)) {
                                        $cepatMenit = intval(round($jadwalSelesai->diffInMinutes($aktualSelesai)));
                                        $statusKeluar = "<span class='badge bg-light-warning text-warning border-0 py-1 px-2' style='font-size: 0.7rem;'><i class='fas fa-running mr-1'></i>Cepat Pulang {$cepatMenit} Mnt</span>";
                                    } else {
                                        $statusKeluar = "<span class='badge bg-light-info text-info border-0 py-1 px-2' style='font-size: 0.7rem;'><i class='fas fa-check-double mr-1'></i>Tuntas Waktu</span>";
                                    }
                                } elseif (!$isAlpa && !$aktualSelesai) {
                                    $statusKeluar = "<span class='badge bg-light-primary text-primary border-0 py-1 px-2' style='font-size: 0.7rem;'><i class='fas fa-spinner fa-spin mr-1'></i>Sedang Mengajar</span>";
                                }

                                // 7. KALKULASI DURASI
                                $durasiTeks = '-';
                                if (!$isAlpa && $aktualMulai && $aktualSelesai) {
                                    $durasiJam = intval($aktualMulai->diffInHours($aktualSelesai));
                                    $durasiMenit = intval($aktualMulai->diffInMinutes($aktualSelesai) % 60);
                                    $durasiTeks = ($durasiJam > 0 ? $durasiJam . 'J ' : '') . $durasiMenit . 'M';
                                } elseif (!$isAlpa && $aktualMulai && !$aktualSelesai) {
                                    $durasiTeks = 'Berjalan...';
                                }
                            @endphp
                            
                            <tr style="border-bottom: 1px solid #f4f6f9;">
                                <td class="pl-4 py-3 text-center text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                
                                {{-- GURU & KELAS --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-35px mr-3">
                                            <div class="symbol-label bg-light-{{ $color }} text-{{ $color }} font-weight-bold rounded-circle d-flex align-items-center justify-content-center shadow-sm" 
                                                 style="width: 35px; height: 35px; font-size: 0.9rem;">
                                                {{ $initial }}
                                            </div>
                                        </div>
                                        <div>
                                            <span class="d-block text-dark font-weight-bold" style="font-size: 0.9rem;">{{ $row->user->name ?? '-' }}</span>
                                            <span class="text-muted font-weight-500" style="font-size: 0.75rem;">
                                                {{ $row->jadwal->mataPelajaran->nama_mapel ?? '-' }} • 
                                                <span class="text-purple font-weight-bold">{{ $row->kelas->nama_kelas ?? '-' }}</span>
                                            </span>
                                            <div class="text-muted mt-1" style="font-size: 0.7rem;"><i class="far fa-calendar-alt mr-1"></i>{{ \Carbon\Carbon::parse($tglReferensi)->translatedFormat('d M Y') }}</div>
                                        </div>
                                    </div>
                                </td>

                                {{-- JADWAL (Rencana) --}}
                                <td class="text-center align-middle">
                                    <div class="bg-light rounded py-1 px-2 d-inline-block border font-monospace font-weight-bold text-secondary" style="font-size: 0.8rem;">
                                        {{ $jadwalMulai->format('H:i') }} - {{ $jadwalSelesai->format('H:i') }}
                                    </div>
                                </td>

                                {{-- AKTUAL (Realisasi) --}}
                                <td class="text-center align-middle">
                                    @if($isAlpa)
                                        <span class="text-danger font-weight-bold">-</span>
                                    @else
                                        <div class="font-monospace font-weight-bold text-dark" style="font-size: 0.8rem;">
                                            <span class="{{ $telatMenit > 0 ? 'text-danger' : 'text-success' }}">{{ $aktualMulai->format('H:i') }}</span> 
                                            <span class="text-muted mx-1">s/d</span> 
                                            @if($aktualSelesai)
                                                <span class="{{ $cepatMenit > 0 ? 'text-warning' : 'text-info' }}">{{ $aktualSelesai->format('H:i') }}</span>
                                            @else
                                                <span class="text-primary"><i class="fas fa-spinner fa-spin"></i></span>
                                            @endif
                                        </div>
                                    @endif
                                </td>

                                {{-- DURASI --}}
                                <td class="text-center align-middle">
                                    @if($isAlpa)
                                        <span class="badge bg-danger px-2 py-1" style="font-size: 0.7rem;"><i class="fas fa-times mr-1"></i> Kosong</span>
                                    @else
                                        <span class="font-weight-bold text-dark" style="font-size: 0.85rem;">{{ $durasiTeks }}</span>
                                    @endif
                                </td>

                                {{-- STATUS KINERJA --}}
                                <td class="align-middle">
                                    @if($isAlpa)
                                        <span class="badge bg-danger border-0 px-3 py-2 w-100 text-left shadow-sm" style="font-size: 0.75rem; border-radius: 8px;">
                                            <i class="fas fa-exclamation-triangle mr-2"></i> ALPA (Tidak Masuk)
                                        </span>
                                    @else
                                        <div class="d-flex flex-column align-items-start">
                                            {!! $statusMasuk !!}
                                            {!! $statusKeluar !!}
                                        </div>
                                    @endif
                                </td>

                                {{-- AKSI --}}
                                <td class="text-center pr-4 align-middle">
                                    <a href="{{ route('laporan.guru.show', $row->id) }}" 
                                       class="btn btn-icon btn-light-primary text-primary btn-sm rounded-circle shadow-sm hover-lift" 
                                       data-toggle="tooltip" title="Lihat Detail Jurnal">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center justify-content-center">
                                        <img src="https://img.icons8.com/clouds/100/000000/time-machine.png" alt="No Data" style="opacity: 0.6; width: 80px;">
                                        <h6 class="mt-3 text-muted font-weight-bold">Data Tidak Ditemukan</h6>
                                        <p class="text-muted small mb-0">Coba ubah filter tanggal atau status untuk hasil lainnya.</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() ?? 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 */
    .btn-apex-purple {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white; border: none; transition: all 0.3s ease;
    }
    .btn-apex-purple:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }

    /* Colors & Badges */
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    
    .bg-light-success { background-color: #E8FFF3 !important; color: #50CD89 !important; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; color: #F64E60 !important; }
    .text-danger { color: #F64E60 !important; }
    
    .bg-light-warning { background-color: #FFF4DE !important; color: #FFA800 !important; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-secondary { background-color: #F3F6F9 !important; }
    .bg-light-info { background-color: #E1F0FF !important; color: #3699FF !important; }
    .bg-light-indigo { background-color: #E0E7FF !important; color: #6610f2 !important; }
    .bg-light-teal { background-color: #E0FFFA !important; color: #20C997 !important; }
    
    .btn-light-danger { background-color: #FFE2E5; color: #F64E60; border: none; }
    .btn-light-danger:hover { background-color: #F64E60; color: white; }
    
    .btn-light-primary { background-color: #E1F0FF; color: #3699FF; border: none; }
    .btn-light-primary:hover { background-color: #3699FF; color: white; }

    /* Form Input Modern (Solid Style) */
    .form-control-solid {
        background-color: #F5F8FA; border-color: #F5F8FA; color: #5E6278; border-radius: 10px; height: 43px;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; box-shadow: none; }

    /* Select2 Fixes to Match Solid Style */
    .select2-container--bootstrap4 .select2-selection--single {
        background-color: #F5F8FA !important; border: 1px solid #F5F8FA !important; height: 43px !important;
        border-radius: 10px !important; padding-top: 7px;
    }

    /* Hover Effect */
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    
    /* Table Styling */
    .table-hover tbody tr:hover { background-color: #FAFAFA; transition: background-color 0.2s ease; }
    .font-monospace { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 0.5px; }
</style>
@stop

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

        // Tooltip
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
@stop