@extends('adminlte::page')

@section('title', 'Smart Laporan Kinerja 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.4rem;">
                Monitoring Kinerja & Jam Mengajar
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Analisis cerdas kehadiran, keterlambatan, durasi, dan indikasi pulang lebih awal.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <a href="{{ route('laporan.guru.export', 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">

  {{-- FILTER CARD --}}
    <div class="card border-0 shadow-sm mb-3" style="border-radius: 12px;">
        <div class="card-body p-3">
            <form action="{{ route('laporan.guru') }}" method="GET">
                <div class="row align-items-end">
                    
                    {{-- 1. Periode --}}
                    <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="{{ 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="{{ request('tanggal_selesai') ?? date('Y-m-d') }}">
                        </div>
                    </div>

                    {{-- 2. Filter Lembaga / Sekolah (Hanya muncul jika data > 0) --}}
                    @if(isset($sekolahs) && count($sekolahs) > 0)
                    <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;">Lembaga / Sekolah</label>
                        <select name="sekolah_id" class="form-control select2-bs4">
                            <option value="">Semua Lembaga</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-lg-3 col-md-6 mb-2">
                        <label class="text-muted font-weight-bold text-uppercase mb-1" style="font-size: 0.7rem;">Guru Pengajar</label>
                        <select name="user_id" class="form-control select2-bs4">
                            <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. Tombol Tampilkan --}}
                    <div class="col-lg-3 col-md-6 mb-2">
                        <button type="submit" class="btn btn-primary w-100 rounded font-weight-bold shadow-sm text-sm" style="height: 35px;">
                            <i class="fas fa-filter mr-2"></i> Terapkan Filter
                        </button>
                    </div>
                    
                </div>
            </form>
        </div>
    </div>
    {{-- TABEL HASIL SMART ANALYSIS --}}
    <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="table-guru" class="table table-hover align-middle w-100 mb-0" 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="20%">Guru & Kelas</th>
                            <th width="15%" class="text-center">Jadwal (Rencana)</th>
                            <th width="15%" class="text-center">Aktual (Realisasi)</th>
                            <th width="15%" class="text-center">Durasi Mengajar</th>
                            <th width="25%">Status Kinerja</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- FIX: Variabel disamakan jadi $row --}}
                        @forelse($laporans as $row)
                            @php
                                // 1. 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');
                                
                                // 2. PARSING WAKTU JADWAL
                                $jadwalMulai = \Carbon\Carbon::parse($tglReferensi . ' ' . $row->jadwal->jam_mulai);
                                $jadwalSelesai = \Carbon\Carbon::parse($tglReferensi . ' ' . $row->jadwal->jam_selesai);
                                
                                // 3. 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);

                                // 4. ANALISIS KETERLAMBATAN
                                $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.65rem;'><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.65rem;'><i class='fas fa-check-circle mr-1'></i>Tepat Waktu</span>";
                                    }
                                }

                                // 5. ANALISIS CEPAT PULANG
                                $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.65rem;'><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.65rem;'><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.65rem;'><i class='fas fa-spinner fa-spin mr-1'></i>Berjalan</span>";
                                }

                                // 6. 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...';
                                }

                                // Generator Warna Avatar (FIX: gunakan variable $row)
                                $colors = ['primary', 'success', 'danger', 'warning', 'info', 'indigo', 'teal'];
                                $color = $colors[$row->user->id % count($colors)];
                                $initial = strtoupper(substr($row->user->name ?? 'X', 0, 1));
                            @endphp

                            <tr>
                                <td class="pl-3 py-2 text-center text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                
                                {{-- GURU & KELAS --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle bg-light-{{ $color }} text-{{ $color }} mr-2 shadow-sm" style="width: 32px; height: 32px; font-size: 0.85rem;">
                                            {{ $initial }}
                                        </div>
                                        <div>
                                            <span class="d-block text-dark font-weight-bold" style="font-size: 0.85rem;">{{ $row->user->name ?? '-' }}</span>
                                            <span class="text-muted font-weight-500" style="font-size: 0.7rem;">
                                                {{ $row->jadwal->mataPelajaran->nama_mapel ?? '-' }} • 
                                                <span class="text-primary font-weight-bold">{{ $row->kelas->nama_kelas ?? '-' }}</span>
                                            </span>
                                            <div class="text-muted mt-1" style="font-size: 0.65rem;"><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">
                                    <div class="bg-light rounded py-1 px-2 d-inline-block border font-monospace font-weight-bold text-secondary" style="font-size: 0.75rem;">
                                        {{ $jadwalMulai->format('H:i') }} - {{ $jadwalSelesai->format('H:i') }}
                                    </div>
                                </td>

                                {{-- AKTUAL (Realisasi) --}}
                                <td class="text-center">
                                    @if($isAlpa)
                                        <span class="text-danger font-weight-bold">-</span>
                                    @else
                                        <div class="font-monospace font-weight-bold text-dark" style="font-size: 0.75rem;">
                                            <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">
                                    @if($isAlpa)
                                        <span class="badge bg-danger px-2 py-1" style="font-size: 0.65rem;"><i class="fas fa-times mr-1"></i> Kosong</span>
                                    @else
                                        <span class="font-weight-bold text-dark">{{ $durasiTeks }}</span>
                                    @endif
                                </td>

                                {{-- STATUS KINERJA --}}
                                <td>
                                    @if($isAlpa)
                                        <span class="badge bg-danger border-0 px-2 py-1 w-100 text-left shadow-sm" style="font-size: 0.7rem;">
                                            <i class="fas fa-exclamation-triangle mr-1"></i> ALPA (Tidak Masuk)
                                        </span>
                                    @else
                                        <div class="d-flex flex-column align-items-start">
                                            {!! $statusMasuk !!}
                                            {!! $statusKeluar !!}
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            {{-- Data kosong ditangani Datatables --}}
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    /* Utilities & Colors */
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-info { background-color: #E1F0FF !important; }
    .text-info { color: #3699FF !important; }

    .bg-light-primary { background-color: #F1EAFF !important; }
    .text-primary { color: #7239EA !important; }

    /* Avatar Circle */
    .avatar-circle {
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold;
    }

    /* 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; }
    
    /* Select2 Fixes (Kecil) */
    .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;
    }
</style>
@stop

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

        $('#table-guru').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "language": { "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Indonesian.json" }
        });
    });
</script>
@stop