@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 dan jam 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">

    {{-- FILTER CARD --}}
    <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 d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold text-dark">Filter Laporan</h3>
        </div>
        
        <div class="card-body p-4">
            <form action="{{ route('laporan.guru') }}" method="GET">
                <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" 
                                   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-1">-</span>
                            </div>
                            <input type="date" name="tanggal_akhir" class="form-control border-0 bg-transparent shadow-none" 
                                   value="{{ $request->tanggal_akhir ?? 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">
                            <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 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. 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">
                            <option value="Semua" {{ $request->status_kehadiran == 'Semua' ? 'selected' : '' }}>Semua Status</option>
                            <option value="Tepat Waktu" {{ $request->status_kehadiran == 'Tepat Waktu' ? 'selected' : '' }}>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">
                            <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">
                            <i class="fas fa-search mr-2"></i> Tampilkan
                        </button>
                    </div>

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

    {{-- TABEL HASIL --}}
    <div class="card border-0 shadow-sm" style="border-radius: 20px; 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">
                    <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%">Tanggal</th>
                            <th width="25%">Nama Guru</th>
                            <th width="20%">Jadwal (Mapel)</th>
                            <th width="10%" class="text-center">Masuk</th>
                            <th width="10%" class="text-center">Pulang</th>
                            <th width="10%" class="text-center">Status</th>
                            <th width="5%" class="text-center">Telat</th>
                            <th width="5%" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($laporans as $laporan)
                            <tr>
                                <td class="pl-4 py-3 text-center text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                
                                {{-- Tanggal --}}
                                <td>
                                    <span class="text-dark font-weight-500">{{ $laporan->created_at->translatedFormat('d M Y') }}</span>
                                </td>

                                {{-- Nama Guru --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-35px mr-3">
                                            <div class="bg-light-purple text-purple rounded-circle d-flex align-items-center justify-content-center font-weight-bold shadow-sm" style="width: 35px; height: 35px; font-size: 0.8rem;">
                                                {{ substr($laporan->user->name ?? 'X', 0, 1) }}
                                            </div>
                                        </div>
                                        <span class="text-dark font-weight-bold text-sm">{{ $laporan->user->name ?? '-' }}</span>
                                    </div>
                                </td>

                                {{-- Mapel --}}
                                <td>
                                    <span class="d-block text-dark font-weight-bold text-sm">{{ $laporan->jadwal->mataPelajaran->nama_mapel ?? '-' }}</span>
                                    <span class="badge bg-light-secondary text-muted border px-2 py-0" style="font-size: 0.7rem;">
                                        {{ $laporan->kelas->nama_kelas ?? '-' }}
                                    </span>
                                </td>

                                {{-- Jam Masuk --}}
                                <td class="text-center">
                                    @if($laporan->status_sesi == 'alpa_mengajar')
                                        <span class="text-danger font-weight-bold">-</span>
                                    @else
                                        <span class="text-success font-weight-bold font-monospace">
                                            {{ \Carbon\Carbon::parse($laporan->waktu_mulai)->format('H:i') }}
                                        </span>
                                    @endif
                                </td>

                                {{-- Jam Pulang --}}
                                <td class="text-center">
                                    @if($laporan->status_sesi == 'alpa_mengajar')
                                        <span class="text-danger font-weight-bold">-</span>
                                    @elseif($laporan->waktu_selesai)
                                        <span class="text-dark font-weight-bold font-monospace">
                                            {{ \Carbon\Carbon::parse($laporan->waktu_selesai)->format('H:i') }}
                                        </span>
                                    @else
                                        <span class="badge bg-light-warning text-warning border-0 px-2 py-1">
                                            <i class="fas fa-spinner fa-spin mr-1"></i> Aktif
                                        </span>
                                    @endif
                                </td>

                                {{-- Status Kehadiran (Dengan Inject Alpa) --}}
                                <td class="text-center">
                                    @php
                                        $badgeColor = 'bg-light-secondary text-muted';
                                        $statusRaw = $laporan->status_kehadiran_guru ?? $laporan->status_absensi ?? 'Selesai';
                                        
                                        if($laporan->status_sesi == 'alpa_mengajar') {
                                            $badgeColor = 'bg-danger text-white shadow-sm';
                                            $statusRaw = 'ALPA';
                                        } elseif($statusRaw == 'Tepat Waktu') {
                                            $badgeColor = 'bg-light-success text-success';
                                        } elseif($statusRaw == 'Terlambat') {
                                            $badgeColor = 'bg-light-danger text-danger';
                                        }
                                    @endphp
                                    <span class="badge {{ $badgeColor }} px-3 py-1 rounded-pill font-weight-bold text-xs border-0">
                                        {{ $statusRaw }}
                                    </span>
                                </td>

                                {{-- Telat --}}
                                <td class="text-center">
                                    @if($laporan->status_sesi == 'alpa_mengajar')
                                        <span class="text-danger font-weight-bold">-</span>
                                    @elseif(isset($laporan->telat_menit) && (int)$laporan->telat_menit > 0)
                                        <span class="text-danger font-weight-bold">{{ $laporan->telat_menit }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                {{-- Aksi --}}
                                <td class="text-center">
                                    <a href="{{ route('laporan.guru.show', $laporan->id) }}" 
                                       class="btn btn-icon btn-light-primary text-primary btn-sm rounded-circle shadow-sm hover-lift" 
                                       title="Lihat Detail Sesi">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            {{-- Data Kosong ditangani oleh DataTable --}}
                        @endforelse
                    </tbody>
                </table>
            </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; }
    .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-secondary { background-color: #F3F6F9 !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 */
    .form-control-solid {
        background-color: #F5F8FA; border-color: #F5F8FA; color: #5E6278; border-radius: 10px; height: 45px;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; box-shadow: none; }

    /* Select2 Fixes */
    .select2-container--bootstrap4 .select2-selection--single {
        background-color: #F5F8FA !important; border: 1px solid #F5F8FA !important; height: 45px !important;
        border-radius: 10px !important; padding-top: 8px;
    }

    /* 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', monospace; }
</style>
@stop

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

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