@extends('adminlte::page')

@section('title', 'Smart Analisis Kinerja Guru')

@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.6rem; letter-spacing: -0.5px;">
                <i class="fas fa-microchip text-purple mr-2"></i> Smart Analisis Kinerja
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Papan pemuka interaktif analisis durasi mengajar, beban kerja, dan sebaran lembaga.
            </p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ route('laporan.guru.smart.cetak', request()->all()) }}" target="_blank" class="btn btn-apex-purple shadow-lg rounded-pill font-weight-bold px-4 py-2 hover-lift d-print-none">
                <i class="fas fa-file-pdf mr-2"></i> Ekspor Laporan PDF
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-4">

    {{-- ==========================================
         KARD FILTER (PENCARIAN)
         ========================================== --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);">
        <div class="card-body p-4">
            <form action="{{ route('laporan.guru.smart') }}" method="GET" id="formFilter">
                <div class="row align-items-end">
                    
                    {{-- 1. Penapis Tarikh --}}
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="text-xs text-muted font-weight-bold text-uppercase mb-2 tracking-wide">Periode Tanggal</label>
                        <div class="input-group bg-light rounded-lg overflow-hidden border-0 shadow-inner">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-transparent border-0 pl-3 pr-2"><i class="far fa-calendar-alt text-purple text-sm"></i></span>
                            </div>
                            <input type="date" name="tanggal_mulai" class="form-control border-0 bg-transparent shadow-none font-weight-bold text-dark px-1" style="height: 42px; font-size: 0.85rem;" 
                                   value="{{ request('tanggal_mulai', \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d')) }}">
                            <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 px-1" style="height: 42px; font-size: 0.85rem;" 
                                   value="{{ request('tanggal_selesai', \Carbon\Carbon::now()->endOfMonth()->format('Y-m-d')) }}">
                        </div>
                    </div>

                    {{-- 2. Penapis Lembaga --}}
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="text-xs text-muted font-weight-bold text-uppercase mb-2 tracking-wide">Lembaga / Unit</label>
                        <select name="sekolah_id" class="form-control select2-custom">
                            <option value="">-- Semua Lembaga --</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>

                    {{-- 3. Penapis Guru --}}
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="text-xs text-muted font-weight-bold text-uppercase mb-2 tracking-wide">Guru Pendidik</label>
                        <select name="user_id" class="form-control select2-custom">
                            <option value="">-- Semua Guru --</option>
                            @if(isset($gurusList))
                                @foreach($gurusList as $gr)
                                    <option value="{{ $gr->id }}" {{ request('user_id') == $gr->id ? 'selected' : '' }}>
                                        {{ $gr->name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    {{-- 4. Butang --}}
                    <div class="col-lg-2 col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-block shadow-sm font-weight-bold rounded-lg hover-lift" style="height: 42px;">
                            <i class="fas fa-bolt mr-2"></i> Analisis
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ==========================================
         MAKLUMAT KESELURUHAN (GRADIENT INFO CARDS)
         ========================================== --}}
    @php
        // Hitung Grand Total Jam Mengajar Global
        $grandTotalMenit = collect($laporanKinerja)->sum('total_menit_raw');
        $gTJam = floor($grandTotalMenit / 60);
        $gTMenit = $grandTotalMenit % 60;
        $grandTotalJamTeks = ($gTJam > 0 ? $gTJam . ' Jam ' : '') . $gTMenit . ' Mnt';
    @endphp

    <div class="row mb-3">
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm mb-4 info-card-modern bg-gradient-purple hover-lift">
                <div class="card-body p-4 d-flex align-items-center position-relative overflow-hidden">
                    <div class="z-index-2">
                        <h6 class="text-white-50 font-weight-bold mb-1 text-uppercase tracking-wide" style="font-size: 0.75rem;">Total Pendidik</h6>
                        <h2 class="font-weight-bold text-white mb-0">{{ count($laporanKinerja) }} <span style="font-size: 1rem; font-weight: normal;">Guru</span></h2>
                    </div>
                    <i class="fas fa-users-cog card-icon-bg"></i>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm mb-4 info-card-modern bg-gradient-info hover-lift">
                <div class="card-body p-4 d-flex align-items-center position-relative overflow-hidden">
                    <div class="z-index-2">
                        <h6 class="text-white-50 font-weight-bold mb-1 text-uppercase tracking-wide" style="font-size: 0.75rem;">Sesi Selesai</h6>
                        <h2 class="font-weight-bold text-white mb-0">{{ collect($laporanKinerja)->sum('hadir_bulan_ini') }} <span style="font-size: 1rem; font-weight: normal;">Sesi</span></h2>
                    </div>
                    <i class="fas fa-check-double card-icon-bg"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm mb-4 info-card-modern bg-gradient-success hover-lift">
                <div class="card-body p-4 d-flex align-items-center position-relative overflow-hidden">
                    <div class="z-index-2">
                        <h6 class="text-white-50 font-weight-bold mb-1 text-uppercase tracking-wide" style="font-size: 0.75rem;">Produktivitas Waktu</h6>
                        <h3 class="font-weight-bold text-white mb-0">{{ $grandTotalJamTeks }}</h3>
                    </div>
                    <i class="fas fa-stopwatch card-icon-bg"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm mb-4 info-card-modern bg-gradient-danger hover-lift">
                <div class="card-body p-4 d-flex align-items-center position-relative overflow-hidden">
                    <div class="z-index-2">
                        <h6 class="text-white-50 font-weight-bold mb-1 text-uppercase tracking-wide" style="font-size: 0.75rem;">Total Alpa / Ditinggalkan</h6>
                        <h2 class="font-weight-bold text-white mb-0">{{ collect($laporanKinerja)->sum('alpa_bulan_ini') }} <span style="font-size: 1rem; font-weight: normal;">Kelas</span></h2>
                    </div>
                    <i class="fas fa-user-times card-icon-bg"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- ==========================================
         JADUAL REKAP KINERJA (DATATABLES)
         ========================================== --}}
    <div class="card border-0 shadow-sm" style="border-radius: 16px; overflow: hidden;">
        <div class="card-header bg-white pt-4 pb-3 px-4 border-bottom-0 d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold mb-0 text-dark">
                <i class="fas fa-list-ol text-purple mr-2"></i> Rincian Durasi & Beban Kerja
            </h3>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive p-4 pt-0">
                <table id="smartTable" class="table table-hover align-middle w-100" style="font-size: 0.85rem;">
                    <thead>
                        <tr class="text-uppercase text-muted font-weight-bold" style="letter-spacing: 0.5px; font-size: 0.7rem; background-color: #f8f9fa;">
                            <th width="5%" class="text-center py-3 rounded-left">No</th>
                            <th width="20%">Identitas Guru</th>
                            <th width="15%" class="text-center">Durasi Mengajar</th>
                            <th width="25%">Distribusi Lembaga / Unit</th>
                            <th width="15%" class="text-center">Catatan Alpa</th>
                            <th width="20%" class="rounded-right">Status Kinerja</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($laporanKinerja as $index => $row)
                            @php
                                $guru = $row['guru'];
                                $persen = $row['persentase'];
                                
                                // Logik Warna Bar & Teks Status
                                $barColor = 'bg-success';
                                $textStatus = 'Disiplin Baik';
                                $statusIcon = 'fa-check-circle text-success';
                                
                                if ($persen < 75) {
                                    $barColor = 'bg-danger';
                                    $textStatus = 'Perlu Teguran';
                                    $statusIcon = 'fa-exclamation-triangle text-danger';
                                } elseif ($persen < 90) {
                                    $barColor = 'bg-warning';
                                    $textStatus = 'Kurang Disiplin';
                                    $statusIcon = 'fa-exclamation-circle text-warning';
                                }

                                // Logik Avatar
                                $colors = ['primary', 'success', 'danger', 'warning', 'info', 'indigo', 'purple', 'teal'];
                                $color = $colors[$guru->id % count($colors)];
                                $initial = strtoupper(substr($guru->name ?? 'X', 0, 1));
                            @endphp
                            <tr class="table-row-custom">
                                <td class="text-center align-middle text-muted font-weight-bold">{{ $index + 1 }}</td>
                                
                                {{-- IDENTITAS --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-40px mr-3">
                                            <div class="bg-light-{{ $color }} text-{{ $color }} font-weight-bold rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 40px; height: 40px; font-size: 1.1rem;">
                                                {{ $initial }}
                                            </div>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <span class="text-dark font-weight-bold" style="font-size: 0.95rem;">{{ $guru->name }}</span>
                                            <span class="text-muted font-monospace" style="font-size: 0.75rem;">NIP: {{ $guru->username ?? '-' }}</span>
                                        </div>
                                    </div>
                                </td>

                                {{-- DURASI MENGAJAR --}}
                                <td class="align-middle">
                                    <div class="d-flex flex-column text-center">
                                        <span class="font-weight-bold text-dark mb-1 bg-light rounded px-2 py-1 border">
                                            Bln: <span class="text-primary">{{ $row['jam_bulan_ini'] }}</span>
                                        </span>
                                        <span class="text-muted" style="font-size: 0.75rem;">Mgg Ini: <strong>{{ $row['jam_minggu_ini'] }}</strong></span>
                                    </div>
                                </td>

                                {{-- DISTRIBUSI LEMBAGA --}}
                                <td class="align-middle">
                                    @if(count($row['sebaran_lembaga']) > 0)
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach($row['sebaran_lembaga'] as $lembaga)
                                                <span class="badge bg-white text-dark border px-2 py-1 mb-1 shadow-sm" style="font-size: 0.7rem; border-radius: 6px;">
                                                    <i class="far fa-building mr-1 text-muted"></i> {{ $lembaga['lembaga'] }}: <strong class="text-purple">{{ $lembaga['durasi'] }}</strong>
                                                </span>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-muted font-italic small">- Belum Mengajar -</span>
                                    @endif
                                </td>

                                {{-- CATATAN ALPA --}}
                                <td class="text-center align-middle">
                                    <div class="d-flex flex-column align-items-center">
                                        <span class="font-weight-bold {{ $row['alpa_bulan_ini'] > 0 ? 'text-danger' : 'text-muted' }}" style="font-size: 0.85rem;">
                                            Bln Ini: {{ $row['alpa_bulan_ini'] }}
                                        </span>
                                        @if($row['alpa_minggu_ini'] > 0)
                                            <span class="badge bg-danger mt-1 px-2 py-1 rounded shadow-sm animate-pulse" style="font-size: 0.65rem;">
                                                Mgg Ini: {{ $row['alpa_minggu_ini'] }} Alpa
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                {{-- STATUS KINERJA --}}
                                <td class="align-middle pr-2">
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <span class="font-weight-bold text-dark" style="font-size: 0.8rem;">
                                            Hadir: {{ $persen }}%
                                        </span>
                                        <span style="font-size: 0.7rem; font-weight: bold;"><i class="fas {{ $statusIcon }}"></i> <span class="d-none d-lg-inline">{{ $textStatus }}</span></span>
                                    </div>
                                    <div class="progress rounded-pill shadow-sm bg-light" style="height: 8px;">
                                        <div class="progress-bar {{ $barColor }} rounded-pill" role="progressbar" style="width: {{ $persen }}%"></div>
                                    </div>
                                </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-purple text-purple rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-sm" style="width: 70px; height: 70px;">
                                            <i class="fas fa-search fa-2x opacity-50"></i>
                                        </div>
                                        <h5 class="text-dark font-weight-bold">Tiada Data Guru Dijumpai</h5>
                                        <p class="text-muted mb-0">Coba sesuaikan tanggal, lembaga, atau pilih guru lain.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX & MODERN UI */
    .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 8px 20px rgba(91, 36, 122, 0.4); }

    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: #F3E8FF !important; }
    .bg-light-success { background-color: #E8FFF3 !important; color: #50CD89 !important; }
    .bg-light-danger { background-color: #FFE2E5 !important; color: #F64E60 !important; }
    .bg-light-info { background-color: #E1F0FF !important; color: #3699FF !important; }
    
    .tracking-wide { letter-spacing: 0.05em; }
    .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
    
    /* GRADIENT INFO CARDS */
    .info-card-modern { border-radius: 16px !important; overflow: hidden; }
    .bg-gradient-purple { background: linear-gradient(135deg, #5B247A 0%, #8942A8 100%); }
    .bg-gradient-info { background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%); }
    .bg-gradient-success { background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%); }
    .bg-gradient-danger { background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%); }
    
    .card-icon-bg { position: absolute; right: -15px; bottom: -20px; font-size: 6rem; opacity: 0.15; transform: rotate(-15deg); color: #fff; z-index: 1; transition: all 0.3s ease; }
    .info-card-modern:hover .card-icon-bg { transform: rotate(0deg) scale(1.1); opacity: 0.25; }
    .z-index-2 { position: relative; z-index: 2; }
    .text-white-50 { color: rgba(255,255,255,0.7) !important; }

    /* TABLE MODERN STYLING */
    .table-row-custom { transition: background-color 0.2s; border-bottom: 1px solid #edf2f9; }
    .table-row-custom:hover { background-color: #f8faff !important; }
    table.dataTable.no-footer { border-bottom: 1px solid #edf2f9 !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #5B247A !important; color: white !important; border: none; border-radius: 50%; width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 50%; margin: 0 2px; }

    /* Select2 Modern */
    .select2-custom + .select2-container .select2-selection--single {
        background-color: transparent !important; border: 1px solid #e2e8f0 !important; height: 42px !important;
        border-radius: 0.5rem !important; padding-top: 6px; font-size: 0.85rem; font-weight: bold; color: #343a40; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    }
    
    /* Animasi Amaran */
    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
    .animate-pulse { animation: pulse-red 2s infinite; }
</style>
@stop

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

        // 2. Inisialisasi DataTables Interaktif
        $('#smartTable').DataTable({
            "responsive": true,
            "autoWidth": false,
            "pageLength": 25, // Tampilkan 25 baris default agar lebih leluasa
            "language": {
                "search": "Cari Guru:",
                "lengthMenu": "Tampil _MENU_ data",
                "info": "Menampilkan _START_ hingga _END_ dari _TOTAL_ guru",
                "infoEmpty": "Tidak ada data tersedia",
                "zeroRecords": "Tidak ditemukan data yang sesuai",
                "paginate": {
                    "first": "Awal",
                    "last": "Akhir",
                    "next": "›",
                    "previous": "‹"
                }
            },
            // Urutkan default berdasarkan Kolom No. 1 (Nomor)
            "order": [[ 0, "asc" ]],
            // Nonaktifkan sorting pada kolom distribusi (kolom ke-3) agar rapi
            "columnDefs": [
                { "orderable": false, "targets": [3] } 
            ]
        });
    });
</script>
@stop