@extends('adminlte::page')

@section('title', 'Detail Sesi Mengajar | Smart Cendekia')

@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;">
                Detail Sesi Mengajar
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Informasi lengkap aktivitas guru, jurnal materi, dan absensi siswa.
            </p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ url()->previous() }}" class="btn btn-light text-muted font-weight-bold shadow-sm rounded-pill px-4 hover-lift">
                <i class="fas fa-arrow-left mr-2"></i> Kembali
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    <div class="row">
        
        {{-- KOLOM KIRI: INFO GURU & STATISTIK --}}
        <div class="col-md-4 mb-4">
            
            {{-- 1. Profil Guru Card --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
                <div class="card-body text-center py-5">
                    {{-- Avatar --}}
                    <div class="mb-3">
                        <img class="profile-user-img img-fluid rounded-circle shadow-lg border border-white p-1"
                             src="https://ui-avatars.com/api/?name={{ urlencode($sesi->user->name) }}&background=6366F1&color=fff&size=128&bold=true"
                             alt="User profile picture" style="width: 100px; height: 100px;">
                    </div>

                    <h5 class="font-weight-bold text-dark mb-1">{{ $sesi->user->name }}</h5>
                    <span class="badge bg-light-purple text-purple px-3 py-1 rounded-pill mb-4 font-weight-bold">Guru Pengajar</span>

                    {{-- Detail List --}}
                    <div class="text-left bg-light rounded-lg p-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Tanggal</span>
                            <span class="text-dark font-weight-bold">{{ $sesi->created_at->translatedFormat('d F Y') }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Mapel</span>
                            <span class="text-dark font-weight-bold text-right" style="max-width: 60%">{{ $sesi->jadwal->mataPelajaran->nama_mapel ?? '-' }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Kelas</span>
                            <span class="text-dark font-weight-bold">{{ $sesi->kelas->nama_kelas ?? '-' }}</span>
                        </div>
                        <div class="d-flex justify-content-between border-top pt-2 mt-2">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Scan Masuk</span>
                            <span class="text-success font-weight-bold font-monospace">{{ \Carbon\Carbon::parse($sesi->waktu_mulai)->format('H:i') }}</span>
                        </div>
                        <div class="d-flex justify-content-between mt-1">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Scan Pulang</span>
                            <span class="text-dark font-weight-bold font-monospace">
                                {{ $sesi->waktu_selesai ? \Carbon\Carbon::parse($sesi->waktu_selesai)->format('H:i') : '-' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 2. Statistik Kehadiran Siswa --}}
            <div class="card border-0 shadow-sm" style="border-radius: 20px;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h6 class="font-weight-bold text-dark mb-0">Statistik Kehadiran Siswa</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row text-center mb-3">
                        <div class="col-6 mb-3">
                            <div class="bg-light-success p-3 rounded-lg h-100 d-flex flex-column justify-content-center">
                                <h4 class="text-success font-weight-bold mb-0">{{ $rekap['hadir'] }}</h4>
                                <small class="text-muted font-weight-bold text-uppercase text-xs">Hadir</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="bg-light-danger p-3 rounded-lg h-100 d-flex flex-column justify-content-center">
                                <h4 class="text-danger font-weight-bold mb-0">{{ $rekap['alpa'] }}</h4>
                                <small class="text-muted font-weight-bold text-uppercase text-xs">Alpa</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-light-info p-3 rounded-lg h-100 d-flex flex-column justify-content-center">
                                <h4 class="text-info font-weight-bold mb-0">{{ $rekap['izin'] }}</h4>
                                <small class="text-muted font-weight-bold text-uppercase text-xs">Izin</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-light-warning p-3 rounded-lg h-100 d-flex flex-column justify-content-center">
                                <h4 class="text-warning font-weight-bold mb-0">{{ $rekap['sakit'] }}</h4>
                                <small class="text-muted font-weight-bold text-uppercase text-xs">Sakit</small>
                            </div>
                        </div>
                    </div>

                    {{-- Progress Bar --}}
                    <div>
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-muted text-xs font-weight-bold text-uppercase">Persentase Kehadiran</span>
                            <span class="font-weight-bold text-dark">{{ $persentaseHadir }}%</span>
                        </div>
                        <div class="progress" style="height: 8px; border-radius: 10px;">
                            <div class="progress-bar bg-gradient-success" role="progressbar" 
                                 style="width: {{ $persentaseHadir }}%;" 
                                 aria-valuenow="{{ $persentaseHadir }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- KOLOM KANAN: JURNAL & DAFTAR SISWA --}}
        <div class="col-md-8">
            
            {{-- 1. Jurnal Pembelajaran --}}
            <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">
                    <h6 class="font-weight-bold text-dark mb-0">
                        <i class="fas fa-book-open text-primary mr-2"></i> Jurnal Pembelajaran
                    </h6>
                </div>
                <div class="card-body p-4">
                    
                    {{-- Materi --}}
                    <div class="bg-light-primary p-4 rounded-lg mb-3 border-left-primary">
                        <h6 class="text-primary font-weight-bold text-xs text-uppercase mb-2" style="letter-spacing: 1px;">Materi yang Disampaikan</h6>
                        <p class="mb-0 text-dark" style="font-size: 1rem; line-height: 1.6;">
                            {!! nl2br(e($sesi->materi_pembelajaran ?? 'Tidak ada materi tercatat.')) !!}
                        </p>
                    </div>

                    {{-- Catatan --}}
                    @if($sesi->catatan_kegiatan)
                        <div class="bg-light-warning p-4 rounded-lg border-left-warning">
                            <h6 class="text-warning font-weight-bold text-xs text-uppercase mb-2" style="letter-spacing: 1px;">Catatan / Kendala</h6>
                            <p class="mb-0 text-dark font-italic">
                                "{{ $sesi->catatan_kegiatan }}"
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- 2. Tabel Siswa --}}
            <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h6 class="font-weight-bold text-dark mb-0">
                        <i class="fas fa-users text-secondary mr-2"></i> Daftar Hadir Siswa
                    </h6>
                </div>
                <div class="card-body p-0 pt-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr class="text-uppercase text-muted text-xs font-weight-bold">
                                    <th class="pl-4 py-3" width="5%">No</th>
                                    <th width="40%">Nama Siswa</th>
                                    <th width="30%">NISN</th>
                                    <th class="text-center" width="25%">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($sesi->AbsensiKelasDetail as $absen)
                                    <tr>
                                        <td class="pl-4 py-3 text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                        <td>
                                            <span class="text-dark font-weight-bold">{{ $absen->siswa->nama ?? '-' }}</span>
                                        </td>
                                        <td class="text-muted font-monospace">{{ $absen->siswa->nisn ?? '-' }}</td>
                                        <td class="text-center">
                                            @php
                                                $badgeClass = 'bg-light-secondary text-muted';
                                                $icon = 'fa-minus';
                                                
                                                if($absen->status_kehadiran == 'hadir') {
                                                    $badgeClass = 'bg-light-success text-success';
                                                    $icon = 'fa-check';
                                                } elseif($absen->status_kehadiran == 'sakit') {
                                                    $badgeClass = 'bg-light-warning text-warning';
                                                    $icon = 'fa-hospital';
                                                } elseif($absen->status_kehadiran == 'izin') {
                                                    $badgeClass = 'bg-light-info text-info';
                                                    $icon = 'fa-envelope';
                                                } elseif($absen->status_kehadiran == 'alpa') {
                                                    $badgeClass = 'bg-light-danger text-danger';
                                                    $icon = 'fa-times';
                                                }
                                            @endphp
                                            <span class="badge {{ $badgeClass }} px-3 py-2 rounded-pill text-xs border-0 font-weight-bold text-uppercase">
                                                <i class="fas {{ $icon }} mr-1"></i> {{ $absen->status_kehadiran }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5 text-muted">
                                            <i class="fas fa-user-slash fa-2x mb-3 opacity-50"></i>
                                            <p class="mb-0 font-weight-bold">Belum ada data absensi siswa.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

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

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    
    /* 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-info { background-color: #E1F0FF !important; }
    .text-info { color: #3699FF !important; }
    
    .bg-light-secondary { background-color: #F3F6F9 !important; }
    .bg-light-primary { background-color: #E1F0FF !important; } /* Soft Blue */

    /* Custom Borders for Jurnal */
    .border-left-primary { border-left: 4px solid #3699FF !important; }
    .border-left-warning { border-left: 4px solid #FFA800 !important; }

    /* Hover Effect */
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    
    /* Font */
    .font-monospace { font-family: 'Consolas', monospace; }
</style>
@stop