{{-- 
    Lokasi File: resources/views/guru/jurnal/form_absensi.blade.php 
    Deskripsi: Halaman input absensi siswa (Horizontal Compact Layout)
--}}

@extends('layouts.guru_master')

@section('title', 'Absensi Kelas | Smart Cendekia Enterprise')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --app-bg: #f4f7fb;
        --text-main: #0f172a;
        --text-muted: #64748b;
    }

    body { 
        font-family: 'Plus Jakarta Sans', sans-serif !important; 
        background-color: var(--app-bg);
    }

    /* Hilangkan background putih dari content-wrapper */
    .content-wrapper { background: transparent !important; padding-bottom: 90px !important; }

    /* =========================================================================
       UI COMPONENTS
       ========================================================================= */

    /* --- INFO KELAS (HERO CARD) --- */
    .session-info-card {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        border-radius: 20px;
        padding: 16px 20px;
        margin: 10px 15px 20px;
        color: white;
        box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
        position: relative;
        overflow: hidden;
    }
    
    .session-info-card::before { content: ''; position: absolute; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; top: -30px; right: -20px; }
    
    .badge-time {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.65rem;
        font-weight: 800;
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* --- FORM LIST SISWA (HORIZONTAL COMPACT) --- */
    .student-list-container {
        background: #ffffff;
        border-radius: 28px 28px 0 0; 
        padding: 20px 0 100px 0; /* Memberi ruang ekstra 100px agar tidak tertutup tombol konfirmasi */
        box-shadow: 0 -10px 25px rgba(0,0,0,0.02);
        min-height: 70vh;
    }

    .section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 15px; }
    .section-title h5 { font-size: 1rem; font-weight: 900; color: var(--text-main); margin: 0; }
    
    .btn-mark-all {
        background: #eff6ff; color: #2563eb; padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; border: 1px solid #dbeafe; transition: 0.2s;
    }
    .btn-mark-all:active { transform: scale(0.95); background: #dbeafe; }

    /* Baris Siswa (Horizontal Flex) */
    .student-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.2s;
    }
    .student-row:last-child { border-bottom: none; }
    .student-row:active { background-color: #f8fafc; }
    
    /* Area Foto & Nama (Kiri) */
    .student-info-left { 
        display: flex; align-items: center; flex: 1; min-width: 0; margin-right: 10px; 
    }
    
    .student-avatar {
        width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; 
        background: #e2e8f0; border: 2px solid #f1f5f9; object-fit: cover;
        margin-right: 12px;
    }

    .student-avatar-initial {
        width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
        background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb;
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 1.1rem; margin-right: 12px; border: 2px solid #f1f5f9;
    }

    .student-name { font-size: 0.85rem; font-weight: 800; color: var(--text-main); line-height: 1.2; margin-bottom: 2px; }
    .student-nis { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); }

    /* Area Pilihan Absen (Kanan) */
    .attendance-options {
        display: flex; background: #f8fafc; padding: 4px; border-radius: 12px; border: 1px solid #e2e8f0; gap: 4px; flex-shrink: 0;
    }
    .attendance-wrapper { margin-bottom: 0; cursor: pointer; }
    
    /* Tombol Pilihan (H, S, I, A) - Bulat Kecil */
    .attendance-label {
        width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
        font-size: 0.8rem; font-weight: 900; color: #94a3b8; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); margin-bottom: 0; background: transparent;
    }
    .attendance-radio { display: none; }
    
    /* Warna Saat Terpilih */
    .attendance-radio:checked + .lbl-hadir { background: #10B981; color: white; box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); }
    .attendance-radio:checked + .lbl-sakit { background: #F59E0B; color: white; box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3); }
    .attendance-radio:checked + .lbl-izin { background: #3B82F6; color: white; box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); }
    .attendance-radio:checked + .lbl-alpa { background: #EF4444; color: white; box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); }

    /* --- STICKY BOTTOM ACTION BAR --- */
    .sticky-action-bar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
        background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        padding: 15px 15px 25px; border-top-left-radius: 30px; border-top-right-radius: 30px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.08); border-top: 1px solid rgba(226, 232, 240, 0.8);
        display: flex; gap: 10px; align-items: center;
    }
    
    .btn-cancel {
        background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-weight: 800; font-size: 0.85rem; padding: 12px 20px; border-radius: 20px; text-decoration: none !important; transition: 0.2s; display: flex; align-items: center; justify-content: center;
    }
    .btn-cancel:active { background: #e2e8f0; transform: scale(0.95); }
    
    .btn-save {
        flex-grow: 1; background: linear-gradient(135deg, #1D4ED8, #3B82F6); color: white; font-weight: 800; font-size: 0.95rem; padding: 12px 20px; border-radius: 20px; border: none; box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; justify-content: center; align-items: center;
    }
    .btn-save:active { transform: scale(0.95); box-shadow: 0 4px 10px rgba(29, 78, 216, 0.2); }

    /* Hilangkan footer master khusus halaman ini agar tidak tumpang tindih */
    .guru-bottom-nav, .m-bottom-nav { display: none !important; }
</style>
@stop

@section('content_body')

<div class="animate__animated animate__fadeIn">

    {{-- INFO KELAS (HERO CARD) --}}
    <div class="session-info-card animate__animated animate__fadeInDown">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; position: relative; z-index: 2;">
            <div class="badge-time">
                <i class="far fa-clock"></i>
                {{ \Carbon\Carbon::parse($sesi->jadwal->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($sesi->jadwal->jam_selesai)->format('H:i') }}
            </div>
            <div style="background: rgba(255,255,255,0.2); width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">
                <i class="fas fa-book-open"></i>
            </div>
        </div>
        
        <div style="position: relative; z-index: 2;">
            <h2 style="font-size: 1.15rem; font-weight: 900; margin: 0 0 2px; line-height: 1.2;">
                {{ $sesi->jadwal->mataPelajaran->nama_mapel ?? 'Mata Pelajaran' }}
            </h2>
            <p style="font-size: 0.75rem; font-weight: 600; color: #93c5fd; margin: 0;">
                <i class="fas fa-door-open mr-1"></i> Kelas {{ $sesi->kelas->nama_kelas }}
            </p>
        </div>
    </div>

    {{-- FORM UTAMA DAFTAR SISWA --}}
    <form action="{{ route('guru.jurnal.store.absensi', $sesi->id) }}" method="POST" id="formAbsensi">
        @csrf
        
        <div class="student-list-container animate__animated animate__fadeInUp">
            
            <div class="section-title">
                <h5>Daftar Siswa <span style="color: #94a3b8; font-weight: 700; font-size: 0.85rem;">({{ $sesi->absensiKelasDetail->count() }})</span></h5>
                <button type="button" onclick="markAllPresent()" class="btn-mark-all shadow-sm">
                    <i class="fas fa-check-double mr-1"></i> Semua Hadir
                </button>
            </div>
            
            @forelse($sesi->absensiKelasDetail as $index => $detail)
                <div class="student-row animate__animated animate__fadeInUp" style="animation-delay: {{ $index * 0.03 }}s;">
                    
                    {{-- Info Siswa (Kiri) --}}
                    <div class="student-info-left">
                        {{-- Logika Foto Siswa --}}
                        @if($detail->siswa->foto_url)
                            <img src="{{ asset('storage/' . $detail->siswa->foto_url) }}" class="student-avatar" alt="Foto" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            {{-- Fallback Inisial jika gambar gagal dimuat --}}
                            <div class="student-avatar-initial" style="display:none;">
                                {{ substr($detail->siswa->nama_lengkap, 0, 1) }}
                            </div>
                        @else
                            <div class="student-avatar-initial">
                                {{ substr($detail->siswa->nama_lengkap, 0, 1) }}
                            </div>
                        @endif

                        <div style="overflow: hidden;">
                            <div class="student-name text-truncate">{{ $detail->siswa->nama_lengkap }}</div>
                            <div class="student-nis">{{ $detail->siswa->nis ?? '-' }}</div>
                        </div>
                    </div>

                    {{-- Pilihan Absensi (Kanan) - Singkatan Huruf --}}
                    <div class="attendance-options">
                        {{-- HADIR --}}
                        <label class="attendance-wrapper">
                            <input type="radio" class="attendance-radio radio-hadir" 
                                   name="absensi[{{ $detail->siswa_id }}]" 
                                   value="Hadir" 
                                   {{ $detail->status_kehadiran == 'Hadir' ? 'checked' : '' }}>
                            <div class="attendance-label lbl-hadir">H</div>
                        </label>
                        
                        {{-- SAKIT --}}
                        <label class="attendance-wrapper">
                            <input type="radio" class="attendance-radio" 
                                   name="absensi[{{ $detail->siswa_id }}]" 
                                   value="Sakit" 
                                   {{ $detail->status_kehadiran == 'Sakit' ? 'checked' : '' }}>
                            <div class="attendance-label lbl-sakit">S</div>
                        </label>
                        
                        {{-- IZIN --}}
                        <label class="attendance-wrapper">
                            <input type="radio" class="attendance-radio" 
                                   name="absensi[{{ $detail->siswa_id }}]" 
                                   value="Izin" 
                                   {{ $detail->status_kehadiran == 'Izin' ? 'checked' : '' }}>
                            <div class="attendance-label lbl-izin">I</div>
                        </label>
                        
                        {{-- ALPA --}}
                        <label class="attendance-wrapper">
                            <input type="radio" class="attendance-radio" 
                                   name="absensi[{{ $detail->siswa_id }}]" 
                                   value="Alpa" 
                                   {{ $detail->status_kehadiran == 'Alpa' ? 'checked' : '' }}>
                            <div class="attendance-label lbl-alpa">A</div>
                        </label>
                    </div>
                </div>
            @empty
                <div class="text-center py-5">
                    <div style="width: 80px; height: 80px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; color: #cbd5e1; font-size: 2rem;">
                        <i class="fas fa-users-slash"></i>
                    </div>
                    <h6 class="font-weight-bold text-dark">Tidak Ada Siswa</h6>
                    <p class="text-muted small">Belum ada siswa yang didaftarkan ke kelas ini.</p>
                </div>
            @endforelse
        </div>

        {{-- STICKY ACTION BAR --}}
        <div class="sticky-action-bar animate__animated animate__slideInUp">
            <a href="{{ route('guru.dashboard') }}" class="btn-cancel">
                <i class="fas fa-times"></i>
            </a>
            
            <button type="submit" class="btn-save" onclick="showLoading(this)">
                <i class="fas fa-save mr-2"></i> Konfirmasi
            </button>
        </div>

    </form>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function markAllPresent() {
        $('.radio-hadir').prop('checked', true);
        
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            customClass: { popup: 'rounded-pill' },
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        Toast.fire({
            icon: 'success',
            title: 'Semua siswa ditandai Hadir!'
        });
    }

    function showLoading(btn) {
        if($(btn).hasClass('disabled')) return false;
        $(btn).addClass('disabled');
        $(btn).html('<i class="fas fa-spinner fa-spin mr-2"></i> Memproses...');
    }
</script>
@stop