@php use Illuminate\Support\Facades\Storage; @endphp

@extends('adminlte::page')

@section('title', 'Laporan Jurnal Mengajar | SIMPes Puruhita')

{{-- Aktifkan plugin Select2 --}}
@section('plugins.Select2', true)

{{-- ====================================================== --}}
{{-- === CSS Kustom untuk Tampilan Grid Modern === --}}
{{-- ====================================================== --}}
@push('css')
<style>
    /* Layout Grid agar tinggi kartu seragam */
    .card-grid {
        display: flex;
        flex-direction: column;
    }
    
    .card-widget {
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        transition: transform 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .card-widget:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .card-widget .card-header {
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;
        padding: 15px;
        border-radius: 10px 10px 0 0;
    }

    .card-widget .card-body {
        padding: 15px;
        flex-grow: 1; /* Agar body mengisi ruang kosong */
        display: flex;
        flex-direction: column;
    }

    /* Scrollable Materi Box */
    .card-materi {
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.5;
        max-height: 120px; /* Batasi tinggi */
        overflow-y: auto;  /* Scroll jika panjang */
        border: 1px solid #e9ecef;
        margin-top: auto; /* Dorong ke bawah jika ada elemen lain */
    }

    /* Footer Statistik */
    .card-widget .card-footer {
        background-color: #fff;
        border-top: 1px solid #f4f4f4;
        padding: 10px 15px;
        border-radius: 0 0 10px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Avatar Guru */
    .user-block .username { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
    .user-block .description { font-size: 11px; color: #888; }
    .user-block img { width: 35px; height: 35px; border: 2px solid #e9ecef; }

    /* Badges */
    .badge-pill-custom { padding: 4px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
</style>
@endpush


@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">Jurnal Mengajar</h1>
            <p class="text-muted small mb-0">Rekapitulasi aktivitas KBM yang telah diselesaikan guru.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">Laporan Jurnal</li>
        </ol>
    </div>
@stop


@section('content')

    {{-- 1. KARTU FILTER --}}
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
        <div class="card-header bg-white py-3">
            <h3 class="card-title font-weight-bold text-primary"><i class="fas fa-filter mr-2"></i> Filter Laporan</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
            </div>
        </div>
        
        <form method="GET" action="{{ route('laporan.jurnal') }}">
            <div class="card-body">
                <div class="row">
                    
                    {{-- Filter Sekolah (Hanya Admin Yayasan) --}}
                    @can('is-admin-yayasan')
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Sekolah</label>
                            <select name="sekolah_id" class="form-control select2-bs4">
                                <option value="">Semua Sekolah</option>
                                @foreach($dataFilter['sekolahs'] as $sekolah)
                                    <option value="{{ $sekolah->id }}" {{ $request->sekolah_id == $sekolah->id ? 'selected' : '' }}>
                                        {{ $sekolah->nama_sekolah }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endcan

                    {{-- Filter Kelas --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Kelas</label>
                            <select name="kelas_id" class="form-control select2-bs4">
                                <option value="">Semua Kelas</option>
                                @foreach($dataFilter['kelases'] as $kelas)
                                    <option value="{{ $kelas->id }}" {{ $request->kelas_id == $kelas->id ? 'selected' : '' }}>
                                        {{ $kelas->nama_kelas }} ({{ $kelas->sekolah->nama_sekolah ?? '' }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Filter Guru --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Guru Pengajar</label>
                            <select name="user_id" class="form-control select2-bs4">
                                <option value="">Semua Guru</option>
                                @foreach($dataFilter['gurus'] as $guru)
                                    <option value="{{ $guru->id }}" {{ $request->user_id == $guru->id ? 'selected' : '' }}>
                                        {{ $guru->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Filter Tanggal --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="small font-weight-bold text-muted">Periode Tanggal</label>
                            <div class="input-group">
                                <input type="date" name="tanggal_mulai" class="form-control form-control-sm border-light shadow-sm" 
                                       value="{{ $request->tanggal_mulai ?? '' }}">
                                <input type="date" name="tanggal_selesai" class="form-control form-control-sm border-light shadow-sm" 
                                       value="{{ $request->tanggal_selesai ?? '' }}">
                            </div>
                        </div>
                    </div>

                </div>
                
                <div class="row mt-2">
                    <div class="col-12 text-right">
                        <a href="{{ route('laporan.jurnal') }}" class="btn btn-link text-muted btn-sm mr-2">
                            <i class="fas fa-undo"></i> Reset
                        </a>
                        <button type="submit" class="btn btn-primary btn-sm px-4 rounded-pill shadow-sm font-weight-bold">
                            <i class="fas fa-search mr-1"></i> Tampilkan Data
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    {{-- 2. HASIL LAPORAN (GRID) --}}
    <div class="row">
        @forelse ($sesiSelesai as $sesi)
            
            <div class="col-lg-4 col-md-6 mb-4 card-grid">
                <div class="card card-widget h-100">
                    
                    {{-- HEADER KARTU --}}
                    <div class="card-header">
                        <div class="user-block">
                            <img class="img-circle" src="https://ui-avatars.com/api/?name={{ urlencode($sesi->user->name) }}&background=random&color=fff" alt="User Image">
                            <span class="username text-primary">{{ $sesi->user->name ?? 'Guru Terhapus' }}</span>
                            <span class="description">
                                {{ $sesi->jadwal->mataPelajaran->nama_mapel ?? 'Mapel' }} - {{ $sesi->kelas->nama_kelas ?? 'Kelas' }}
                            </span>
                        </div>
                        <div class="card-tools">
                            <a href="{{ route('laporan.jurnal.cetak', $sesi->id) }}" target="_blank" class="btn btn-tool text-secondary" title="Cetak Laporan Ini">
                                <i class="fas fa-print"></i>
                            </a>
                        </div>
                    </div>
                    
                    {{-- BODY KARTU --}}
                    <div class="card-body">
                        <div class="d-flex justify-content-between text-xs text-muted mb-2">
                            <span><i class="far fa-calendar mr-1"></i> {{ $sesi->created_at->format('d M Y') }}</span>
                            <span><i class="far fa-clock mr-1"></i> {{ \Carbon\Carbon::parse($sesi->waktu_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($sesi->waktu_selesai)->format('H:i') }}</span>
                        </div>

                        {{-- Box Materi Scrollable --}}
                        <div class="card-materi">
                            <strong class="d-block mb-1 text-dark" style="font-size: 10px; text-transform: uppercase;">Materi / Kegiatan:</strong>
                            {!! $sesi->materi_pembelajaran !!}
                        </div>
                    </div>

                    {{-- FOOTER STATISTIK --}}
                    <div class="card-footer">
                        @php
                            // Hitung statistik kehadiran per sesi ini
                            $rekap = $sesi->absensiKelas->countBy('status_kehadiran');
                        @endphp
                        
                        <div class="d-flex justify-content-around w-100">
                            <div class="text-center" title="Hadir">
                                <span class="badge badge-success badge-pill-custom">{{ $rekap->get('Hadir', 0) }}</span>
                                <small class="d-block text-xs text-muted mt-1">Hadir</small>
                            </div>
                            <div class="text-center" title="Izin">
                                <span class="badge badge-info badge-pill-custom">{{ $rekap->get('Izin', 0) }}</span>
                                <small class="d-block text-xs text-muted mt-1">Izin</small>
                            </div>
                            <div class="text-center" title="Sakit">
                                <span class="badge badge-warning badge-pill-custom">{{ $rekap->get('Sakit', 0) }}</span>
                                <small class="d-block text-xs text-muted mt-1">Sakit</small>
                            </div>
                            <div class="text-center" title="Alpa">
                                <span class="badge badge-danger badge-pill-custom">{{ $rekap->get('Alpa', 0) }}</span>
                                <small class="d-block text-xs text-muted mt-1">Alpa</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        @empty
            <div class="col-12">
                <div class="alert alert-light text-center shadow-sm py-5">
                    <img src="https://img.icons8.com/fluency/48/000000/search-in-list.png" class="mb-3 opacity-50">
                    <h5 class="text-muted">Tidak ada jurnal ditemukan</h5>
                    <p class="mb-0 text-muted small">Coba ubah filter pencarian Anda atau pilih tanggal lain.</p>
                </div>
            </div>
        @endforelse
    </div>

    {{-- PAGINASI --}}
    <div class="row">
        <div class="col-12 d-flex justify-content-center mt-3">
            {{ $sesiSelesai->withQueryString()->links() }}
        </div>
    </div>

@stop

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