{{-- Lokasi: resources/views/siswa/ketuakelas/pantau.blade.php --}}

@extends('adminlte::page')
@section('title', 'Panel Ketua Kelas | Smart Cendekia')

@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>
    body { background-color: #f8fafc; font-family: 'Plus Jakarta Sans', sans-serif !important; }
    
    /* Penyesuaian Ruang untuk Header dan Footer Mobile */
    .content-wrapper { background: transparent !important; padding-bottom: 90px !important; }
    
    @media (min-width: 992px) {
        .mobile-ui { display: none !important; }
    }
    @media (max-width: 991.98px) {
        .main-header, .main-sidebar, .content-header { display: none !important; }
        .desktop-ui { display: none !important; }
        .content-wrapper, .content, .container-fluid { 
            margin: 0 !important; 
            padding: 0 !important; 
            background: #f8fafc !important; 
            min-height: 100vh !important; 
        }
    }

    .hero-ketua {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        border-radius: 28px; padding: 25px; margin: 15px; color: white;
        box-shadow: 0 15px 30px rgba(245, 158, 11, 0.3); position: relative; overflow: hidden;
    }
    .hero-ketua::before { content: ''; position: absolute; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; top: -40px; right: -30px; }
    
    .jadwal-card {
        background: white; border-radius: 20px; padding: 18px; margin: 0 15px 15px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; transition: 0.3s;
    }
    .jadwal-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
    
    .badge-status { padding: 6px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
    .st-aman { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .st-awas { background: #fee2e2; color: #991b1b; border: 1px solid #fecdd3; animation: blinker 2s linear infinite;}
    .st-tunggu { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

    @keyframes blinker { 50% { opacity: 0.7; } }

    .btn-action-gold {
        background: linear-gradient(135deg, #ef4444, #b91c1c); color: white;
        padding: 8px 16px; border-radius: 50px; font-size: 0.75rem; font-weight: 800;
        text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); transition: 0.2s; border: none; cursor: pointer;
    }
    .btn-action-gold:active { transform: scale(0.95); }
    .btn-action-gold:hover { color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5); }
    
    .btn-isi-absen { 
        background: linear-gradient(135deg, #f59e0b, #d97706); 
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); 
    }
    .btn-isi-absen:hover { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); }
</style>
@stop

@section('content')

{{-- TAMPILAN MOBILE (HP) --}}
<div class="mobile-ui animate__animated animate__fadeIn pb-5">

    {{-- MEMANGGIL HEADER KHUSUS MOBILE SISWA --}}
    @include('partials.header_mobile')

    {{-- TOMBOL KEMBALI (KHUSUS MOBILE, BERI JARAK DARI HEADER) --}}
    <div class="px-3 pt-2 mt-2">
        <a href="{{ route('dashboard') }}" class="btn btn-sm btn-light text-muted font-weight-bold rounded-pill shadow-sm px-3">
            <i class="fas fa-arrow-left mr-2"></i> Kembali
        </a>
    </div>

    {{-- HERO CARD --}}
    <div class="hero-ketua animate__animated animate__fadeInDown">
        <span style="background: rgba(255,255,255,0.25); padding: 5px 12px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; backdrop-filter: blur(5px);">
            <i class="fas fa-crown mr-1 text-warning" style="text-shadow: 0 2px 4px rgba(0,0,0,0.2);"></i> HAK AKSES KETUA
        </span>
        <h2 style="font-size: 1.6rem; font-weight: 900; margin: 15px 0 5px; line-height: 1.2;">
            Halo, {{ explode(' ', $user->name)[0] }}!
        </h2>
        <p style="margin:0; font-size: 0.8rem; font-weight: 600; opacity: 0.9;">
            <i class="fas fa-door-open mr-1"></i> Panel Kelas {{ $kelasBinaan->nama_kelas ?? '...' }}
            <br> 
            <i class="fas fa-user-tie mr-1"></i> Wali: {{ $kelasBinaan->waliKelas->name ?? 'Belum Ditunjuk' }}
        </p>
    </div>

    {{-- TUGAS UTAMA: PANTAU GURU --}}
    <div class="px-3 mt-4 mb-3 d-flex justify-content-between align-items-center">
        <h6 class="font-weight-bold m-0 text-dark" style="font-size: 0.95rem;">
            <i class="fas fa-satellite-dish text-primary mr-1"></i> Pantauan Guru Hari Ini
        </h6>
    </div>

    @forelse($jadwalHariIni as $j)
        @php
            $now = \Carbon\Carbon::now();
            $sekarang = $now->timezone('Asia/Makassar')->format('H:i:s');
            $isLive = ($sekarang >= $j->jam_mulai && $sekarang <= $j->jam_selesai);
            
            $sesi = $j->sesiJurnalHariIni ?? null;
            $statusSesi = $sesi->status_sesi ?? null;

            // Logika Smart Deteksi
            $isGuruAbsen = in_array($statusSesi, ['alpa_mengajar', 'sakit_mengajar', 'izin_mengajar']);
            $belumAdaSesi = is_null($statusSesi);
            $sudahLewatToleransi = $now->greaterThan(\Carbon\Carbon::parse($j->jam_mulai)->addMinutes(15));
            $jamPelajaranUsai = $now->greaterThan(\Carbon\Carbon::parse($j->jam_selesai));
        @endphp

        <div class="jadwal-card animate__animated animate__fadeInUp" style="{{ $isLive ? 'border: 2px solid #3b82f6; box-shadow: 0 5px 20px rgba(59,130,246,0.15); transform: scale(1.02); margin-top: 10px; margin-bottom: 20px;' : '' }}">
            
            {{-- Bagian Atas: Info Jadwal --}}
            <div class="d-flex align-items-start justify-content-between">
                <div style="flex: 1; padding-right: 15px;">
                    @if($isLive)
                        <span class="badge mb-2" style="background: #eff6ff; color: #1d4ed8; padding: 4px 10px; border-radius: 8px; font-size: 0.6rem; border: 1px solid #bfdbfe;">
                            <span style="display: inline-block; width: 6px; height: 6px; background: #3b82f6; border-radius: 50%; margin-right: 4px; animation: blinker 1s linear infinite;"></span> LIVE SEKARANG
                        </span>
                    @endif
                    <h5 style="font-size: 1.1rem; font-weight: 900; color: #0f172a; margin: 0 0 6px; line-height: 1.3;">{{ $j->mataPelajaran->nama_mapel }}</h5>
                    <span style="font-size: 0.75rem; font-weight: 700; color: #475569; display: inline-block; margin-bottom: 5px;">
                        <i class="fas fa-user-tie mr-1 text-primary opacity-75"></i> {{ $j->guru->name ?? 'Guru Belum Diatur' }}
                    </span>
                </div>
                
                <div class="text-center bg-light p-2 rounded-lg" style="min-width: 80px; border: 1px solid #e2e8f0;">
                    <div style="font-size: 0.85rem; font-weight: 900; color: #1e293b;">{{ \Carbon\Carbon::parse($j->jam_mulai)->format('H:i') }}</div>
                    <div style="font-size: 0.6rem; color: #94a3b8; font-weight: 800; margin: 1px 0;">s/d</div>
                    <div style="font-size: 0.85rem; font-weight: 900; color: #64748b;">{{ \Carbon\Carbon::parse($j->jam_selesai)->format('H:i') }}</div>
                </div>
            </div>

            {{-- Bagian Bawah: Aksi & Status --}}
            <div class="mt-3 pt-3" style="border-top: 1px dashed #cbd5e1; display: flex; justify-content: space-between; align-items: center;">
                
                @if($isGuruAbsen && $sesi)
                    <span class="badge-status st-awas"><i class="fas fa-exclamation-circle mr-1"></i> Kelas Kosong</span>
                    <a href="{{ route('guru.jurnal.absensi', $sesi->id) }}" class="btn-action-gold btn-isi-absen">
                        <i class="fas fa-user-check"></i> Cek Absen
                    </a>

                @elseif($belumAdaSesi && $sudahLewatToleransi && !$jamPelajaranUsai)
                    <span class="badge-status st-awas"><i class="fas fa-clock mr-1"></i> Guru Telat</span>
                    <button onclick="konfirmasiAmbilAlih('{{ route('guru.jurnal.ambil_alih', $j->id) }}')" class="btn-action-gold">
                        <i class="fas fa-hand-holding-heart"></i> Ambil Alih
                    </button>

                @elseif($statusSesi && in_array($statusSesi, ['menunggu_absensi', 'berlangsung', 'menunggu_laporan']))
                    <span class="badge-status st-aman"><i class="fas fa-chalkboard-teacher mr-1"></i> Guru Mengajar</span>
                
                @elseif($statusSesi === 'laporan_selesai' || $statusSesi === 'selesai')
                    <span class="badge-status st-tunggu" style="background: #f8fafc; color: #94a3b8;"><i class="fas fa-check-double mr-1"></i> Sesi Selesai</span>

                @else
                    <span class="badge-status st-tunggu"><i class="fas fa-hourglass-half mr-1"></i> Menunggu...</span>
                @endif

            </div>
        </div>
    @empty
        <div class="text-center py-5">
            <i class="fas fa-mug-hot fa-3x text-muted mb-3 opacity-25"></i>
            <h6 class="font-weight-bold text-muted">Tidak Ada Jadwal</h6>
            <p class="text-muted small">Kelasmu sedang libur hari ini. Selamat beristirahat!</p>
        </div>
    @endforelse

</div>

{{-- TAMPILAN DESKTOP (LAPTOP/PC) --}}
<div class="desktop-ui p-5 text-center">
    <div class="alert alert-warning shadow-sm rounded-lg d-inline-block">
        <i class="fas fa-mobile-alt fa-2x mb-3 text-warning"></i>
        <h5 class="font-weight-bold">Mode Mobile Diperlukan</h5>
        <p class="mb-0">Fitur "Ambil Alih Kelas" didesain khusus untuk digunakan melalui Smartphone (HP) Ketua Kelas di dalam ruang belajar.</p>
        <a href="{{ route('dashboard') }}" class="btn btn-dark mt-3 rounded-pill px-4">Kembali ke Dashboard Utama</a>
    </div>
</div>

{{-- MEMANGGIL FOOTER NAVIGASI BAWAH KHUSUS MOBILE SISWA --}}
@include('partials.mobile-nav')

@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success')) 
        Swal.fire({ 
            icon: 'success', 
            title: 'Berhasil!', 
            text: "{{ session('success') }}", 
            customClass: {popup:'rounded-2xl'} 
        }); 
    @endif
    
    @if(session('error')) 
        Swal.fire({ 
            icon: 'error', 
            title: 'Gagal!', 
            text: "{{ session('error') }}", 
            customClass: {popup:'rounded-2xl'} 
        }); 
    @endif

    function konfirmasiAmbilAlih(url) {
        Swal.fire({
            title: 'Ambil Alih Kelas?',
            text: "Kamu akan mencatat Guru sebagai TIDAK HADIR dan mengambil alih pengisian absen kelas.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e11d48',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Ambil Alih!',
            cancelButtonText: 'Batal',
            customClass: { 
                popup: 'rounded-3xl',
                confirmButton: 'rounded-pill px-4 font-weight-bold',
                cancelButton: 'rounded-pill px-4 font-weight-bold'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({ 
                    title: 'Memproses...', 
                    allowOutsideClick: false, 
                    didOpen: () => { Swal.showLoading() } 
                });
                window.location.href = url;
            }
        });
    }
</script>
@stop