{{-- 
    Lokasi File: resources/views/laporan/guru/detail.blade.php 
    Status: SMART ANALYSIS INTEGRATED (Alpa Detection & Time Tracking)
--}}

@extends('adminlte::page')

@section('title', 'Detail Jurnal Mengajar')

@push('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
    :root { --font-main: 'Plus Jakarta Sans', sans-serif; }
    body { font-family: var(--font-main) !important; background-color: #f4f6f9; }
    
    .card-modern { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .table-detail td { padding: 10px 0; vertical-align: top; border-bottom: 1px dashed #eee; }
    .table-detail tr:last-child td { border-bottom: none; }
    .border-left-danger { border-left: 4px solid #dc3545 !important; }
    .border-left-primary { border-left: 4px solid #007bff !important; }
    .border-left-warning { border-left: 4px solid #ffc107 !important; }
</style>
@endpush

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <h1 class="m-0 text-dark font-weight-bold" style="font-family: 'Plus Jakarta Sans', sans-serif;">Detail Jurnal KBM</h1>
            <small class="text-muted">Laporan detail aktivitas belajar mengajar.</small>
        </div>
        <div>
            <a href="{{ route('laporan.guru') }}" class="btn btn-outline-secondary btn-sm rounded-pill mr-2 font-weight-bold px-3 shadow-sm hover-lift">
                <i class="fas fa-arrow-left mr-1"></i> Kembali
            </a>
            <a href="{{ route('laporan.jurnal.cetak', $sesi->id) }}" target="_blank" class="btn btn-danger btn-sm rounded-pill shadow-sm font-weight-bold px-3 hover-lift">
                <i class="fas fa-print mr-1"></i> Cetak PDF
            </a>
        </div>
    </div>
@stop

@section('content')

@php
    // ==========================================
    // LOGIKA SMART ANALYSIS (WAKTU & KINERJA)
    // ==========================================
    $isAlpa = $sesi->status_sesi == 'alpa_mengajar';
    $tglReferensi = $sesi->waktu_mulai ? \Carbon\Carbon::parse($sesi->waktu_mulai)->format('Y-m-d') : $sesi->created_at->format('Y-m-d');
    
    $jadwalMulai = \Carbon\Carbon::parse($tglReferensi . ' ' . $sesi->jadwal->jam_mulai);
    $jadwalSelesai = \Carbon\Carbon::parse($tglReferensi . ' ' . $sesi->jadwal->jam_selesai);
    
    $aktualMulai = $isAlpa ? null : \Carbon\Carbon::parse($sesi->waktu_mulai);
    $aktualSelesai = ($isAlpa || !$sesi->waktu_selesai) ? null : \Carbon\Carbon::parse($sesi->waktu_selesai);

    // Durasi Mengajar
    $durasiTeks = '-';
    if (!$isAlpa && $aktualMulai && $aktualSelesai) {
        $durasiJam = intval($aktualMulai->diffInHours($aktualSelesai));
        $durasiMenit = intval($aktualMulai->diffInMinutes($aktualSelesai) % 60);
        $durasiTeks = ($durasiJam > 0 ? $durasiJam . ' Jam ' : '') . $durasiMenit . ' Menit';
    } elseif (!$isAlpa && $aktualMulai && !$aktualSelesai) {
        $durasiTeks = 'Sesi Sedang Berlangsung...';
    }
@endphp

<div class="container-fluid pb-4">
    
    {{-- JIKA JURNAL ALPA OTOMATIS --}}
    @if($isAlpa)
        <div class="alert alert-danger border-0 shadow-sm rounded-lg mb-4">
            <h5 class="font-weight-bold mb-1"><i class="fas fa-exclamation-triangle mr-2"></i> Peringatan Sistem</h5>
            Jurnal ini dihasilkan secara otomatis oleh sistem karena guru yang bersangkutan tidak menekan tombol mulai mengajar pada jam jadwal yang telah ditentukan (ALPA).
        </div>
    @endif

    {{-- 1. INFORMASI UTAMA (HEADER) --}}
    <div class="row">
        <div class="col-12 mb-3">
            <div class="card card-modern card-outline {{ $isAlpa ? 'card-danger' : 'card-primary' }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="font-weight-bold {{ $isAlpa ? 'text-danger' : 'text-primary' }} mb-1">
                                {{ $sesi->jadwal->mataPelajaran->nama_mapel ?? 'Mapel Tidak Ditemukan' }}
                            </h4>
                            <p class="mb-0 text-secondary font-weight-500">
                                <i class="fas fa-chalkboard-teacher mr-2"></i> {{ $sesi->user->name ?? 'Guru' }} &nbsp;|&nbsp; 
                                <i class="fas fa-users mr-2"></i> Kelas {{ $sesi->kelas->nama_kelas ?? '-' }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-right mt-3 mt-md-0">
                            <h5 class="font-weight-bold mb-0 text-dark">{{ \Carbon\Carbon::parse($tglReferensi)->isoFormat('dddd, D MMMM Y') }}</h5>
                            
                            @if($isAlpa)
                                <span class="badge bg-danger px-3 py-2 mt-2 shadow-sm" style="font-size: 0.85rem">
                                    <i class="fas fa-times-circle mr-1"></i> TIDAK MENGAJAR
                                </span>
                            @else
                                <span class="badge bg-light border px-3 py-2 mt-2 text-dark shadow-sm" style="font-size: 0.9rem">
                                    <i class="far fa-clock text-primary mr-1"></i> 
                                    {{ $aktualMulai->format('H:i') }} - 
                                    {{ $aktualSelesai ? $aktualSelesai->format('H:i') : '...' }} WIB
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- 2. KOLOM KIRI: STATISTIK & WAKTU --}}
        <div class="col-md-4">
            
            {{-- Detail Waktu & Sesi (SMART ANALYSIS) --}}
            <div class="card card-modern mb-3">
                <div class="card-header bg-white font-weight-bold text-uppercase text-muted border-bottom-0 pt-4">
                    <i class="fas fa-stopwatch mr-2"></i> Detail Sesi & Waktu
                </div>
                <div class="card-body pt-2 px-4 pb-4">
                    <table class="table-detail w-100 small text-dark">
                        <tr>
                            <td width="45%" class="text-muted">Status Sesi</td>
                            <td class="font-weight-bold text-right">
                                @if($isAlpa)
                                    <span class="badge badge-danger px-2 py-1">Alpa (Sistem)</span>
                                @elseif($sesi->status_sesi == 'laporan_selesai')
                                    <span class="badge badge-success px-2 py-1">Selesai Normal</span>
                                @else
                                    <span class="badge badge-warning px-2 py-1">Berlangsung</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Jadwal Rencana</td>
                            <td class="font-weight-bold text-right font-monospace text-secondary">
                                {{ $jadwalMulai->format('H:i') }} - {{ $jadwalSelesai->format('H:i') }}
                            </td>
                        </tr>
                        @if(!$isAlpa)
                        <tr>
                            <td class="text-muted">Aktual Mengajar</td>
                            <td class="font-weight-bold text-right font-monospace text-primary">
                                {{ $aktualMulai->format('H:i') }} - {{ $aktualSelesai ? $aktualSelesai->format('H:i') : '...' }}
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Durasi Riil</td>
                            <td class="font-weight-bold text-right text-success">
                                <i class="fas fa-hourglass-half mr-1"></i> {{ $durasiTeks }}
                            </td>
                        </tr>
                        @endif
                        <tr>
                            <td class="text-muted">Pertemuan Ke</td>
                            <td class="font-weight-bold text-right">{{ $sesi->jadwal->jam_ke ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted pb-0">Total Siswa</td>
                            <td class="font-weight-bold text-right pb-0">{{ $total ?? 0 }} Anak</td>
                        </tr>
                    </table>
                </div>
            </div>

            {{-- Statistik Box --}}
            <div class="card card-modern mb-3">
                <div class="card-header bg-white font-weight-bold text-uppercase text-muted border-bottom-0 pt-4">
                    <i class="fas fa-chart-pie mr-2"></i> Kehadiran Siswa
                </div>
                <div class="card-body pt-0 pb-4">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="p-2 rounded bg-light border shadow-sm">
                                <h4 class="font-weight-bold text-success mb-0">{{ $hadir ?? 0 }}</h4>
                                <small class="text-uppercase font-weight-bold text-muted" style="font-size: 0.7rem">Hadir</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-2 rounded bg-light border shadow-sm">
                                <h4 class="font-weight-bold text-danger mb-0">{{ $alpa ?? 0 }}</h4>
                                <small class="text-uppercase font-weight-bold text-muted" style="font-size: 0.7rem">Alpa</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded bg-light border shadow-sm">
                                <h4 class="font-weight-bold text-warning mb-0">{{ $sakit ?? 0 }}</h4>
                                <small class="text-uppercase font-weight-bold text-muted" style="font-size: 0.7rem">Sakit</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded bg-light border shadow-sm">
                                <h4 class="font-weight-bold text-info mb-0">{{ $izin ?? 0 }}</h4>
                                <small class="text-uppercase font-weight-bold text-muted" style="font-size: 0.7rem">Izin</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-muted font-weight-bold">Persentase Hadir</small>
                            <small class="text-success font-weight-bold">{{ $persentaseHadir ?? 0 }}%</small>
                        </div>
                        <div class="progress rounded-pill shadow-sm" style="height: 10px;">
                            <div class="progress-bar bg-success rounded-pill" role="progressbar" style="width: {{ $persentaseHadir ?? 0 }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 3. KOLOM KANAN: KONTEN JURNAL --}}
        <div class="col-md-8">
            
            {{-- MATERI --}}
            <div class="card card-modern mb-4 {{ $isAlpa ? 'border-left-danger' : 'border-left-primary' }}">
                <div class="card-header bg-white border-bottom-0 pt-4">
                    <h5 class="font-weight-bold text-dark mb-0">A. Materi / Pokok Bahasan</h5>
                </div>
                <div class="card-body pt-2">
                    <div class="{{ $isAlpa ? 'bg-danger' : 'bg-light' }} p-3 rounded border" style="min-height: 90px;">
                        @if($sesi->materi_pembelajaran)
                            <div class="{{ $isAlpa ? 'text-white font-weight-bold' : 'text-dark' }}">
                                {!! $sesi->materi_pembelajaran !!}
                            </div>
                        @else
                            <span class="text-muted font-italic">Belum diisi oleh guru.</span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- CATATAN --}}
            <div class="card card-modern mb-4">
                <div class="card-header bg-white border-bottom-0 pt-4">
                    <h5 class="font-weight-bold text-dark mb-0">B. Catatan Kelas</h5>
                </div>
                <div class="card-body pt-2">
                    @if($sesi->catatan_kegiatan)
                        <div class="alert {{ $isAlpa ? 'alert-danger' : 'alert-secondary' }} mb-0 border-0 shadow-sm">
                            <i class="fas {{ $isAlpa ? 'fa-exclamation-circle' : 'fa-pen-nib' }} mr-2 {{ $isAlpa ? 'text-white' : 'text-muted' }}"></i>
                            <span class="{{ $isAlpa ? 'text-white' : '' }}">{!! nl2br(e($sesi->catatan_kegiatan)) !!}</span>
                        </div>
                    @else
                        <div class="text-muted font-italic pl-2">- Tidak ada catatan khusus -</div>
                    @endif
                </div>
            </div>

            {{-- DAFTAR SISWA ABSEN --}}
            @php
                $siswaAbsen = $sesi->absensiKelasDetail->where('status_kehadiran', '!=', 'Hadir')->where('status_kehadiran', '!=', 'Kosong');
            @endphp
            
            @if($siswaAbsen->count() > 0 && !$isAlpa)
            <div class="card card-modern border-left-warning mb-4">
                <div class="card-header bg-white border-bottom-0 pt-4">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="fas fa-user-times mr-2 text-warning"></i> Siswa Tidak Hadir</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th width="10%" class="text-center border-0">No</th>
                                    <th class="border-0">Nama Siswa</th>
                                    <th width="25%" class="border-0 text-center">Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($siswaAbsen as $absen)
                                    <tr>
                                        <td class="text-center align-middle">{{ $loop->iteration }}</td>
                                        <td class="font-weight-bold align-middle text-dark">
                                            {{ $absen->siswa->nama_lengkap ?? $absen->siswa->nama ?? 'Siswa' }}
                                        </td>
                                        <td class="text-center align-middle">
                                            @if($absen->status_kehadiran == 'Sakit')
                                                <span class="badge bg-warning px-3 py-2 rounded-pill shadow-sm text-dark w-100">Sakit</span>
                                            @elseif($absen->status_kehadiran == 'Izin')
                                                <span class="badge bg-info px-3 py-2 rounded-pill shadow-sm w-100">Izin</span>
                                            @else
                                                <span class="badge bg-danger px-3 py-2 rounded-pill shadow-sm w-100">Alpa</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            {{-- FOTO KEGIATAN --}}
            @if($sesi->foto_kegiatan && !$isAlpa)
            <div class="card card-modern mt-4">
                <div class="card-header bg-white border-bottom-0 pt-4">
                    <h5 class="font-weight-bold text-dark mb-0">C. Dokumentasi</h5>
                </div>
                <div class="card-body pt-2">
                    <img src="{{ asset('storage/'.$sesi->foto_kegiatan) }}" class="img-fluid rounded shadow-sm w-100" alt="Dokumentasi" style="max-height: 400px; object-fit: cover;">
                </div>
            </div>
            @endif

        </div>
    </div>
</div>
@stop