{{-- 
    Lokasi File: resources/views/guru/ujian/monitoring/index.blade.php (Sesuaikan dengan lokasi file Anda)
    Deskripsi: Dashboard Manajemen & Monitoring Ujian (Mobile-Optimized, Hybrid UI)
--}}

@extends('layouts.guru_master')

@section('title', 'Manajemen Ujian | Smart Cendekia')

@section('css')
<style>
    :root {
        --app-bg: #f4f7fb;
        --primary: #4f46e5;
        --text-main: #0f172a;
        --font-mono: 'JetBrains Mono', monospace;
    }

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

    /* === RESPONSIVE SWITCHER === */
    @media (max-width: 768px) { .desktop-view { display: none !important; } }
    @media (min-width: 769px) { .mobile-view { display: none !important; } }

    /* === HERO GRADIENT CARD === */
    .hero-gradient {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        border-radius: 28px; padding: 25px 20px; color: white;
        position: relative; overflow: hidden;
        box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.4);
        margin-bottom: 25px;
    }
    .hero-gradient::after {
        content: ''; position: absolute; width: 150px; height: 150px;
        background: rgba(255,255,255,0.05); border-radius: 50%;
        top: -40px; right: -20px;
    }

    /* === DESKTOP TABLE UI === */
    .modern-card { background: white; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: none; overflow: hidden; }
    .table-modern th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800; color: #64748b; background: #f8fafc; padding: 1.2rem; border-bottom: 2px solid #f1f5f9; border-top: none; }
    .table-modern td { vertical-align: middle; padding: 1.2rem; border-bottom: 1px solid #f8fafc; font-weight: 500; }
    .table-modern tr:hover td { background-color: #f8fafc; }

    /* === MOBILE CARD UI === */
    .exam-card { background: white; border-radius: 20px; padding: 20px; margin-bottom: 15px; border: 1px solid #f1f5f9; box-shadow: 0 8px 20px rgba(0,0,0,0.02); position: relative; overflow: hidden; }
    .exam-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--primary); }

    /* === TOKEN & BADGES === */
    .token-box {
        font-family: var(--font-mono); background: #f8fafc; border: 2px dashed #cbd5e1;
        border-radius: 10px; padding: 6px 12px; font-size: 1.15rem; font-weight: 900;
        letter-spacing: 3px; color: var(--primary); display: inline-block;
    }
    .badge-class { background-color: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 0.7rem; display: inline-block; margin: 2px; }

    /* === STATUS PULSE === */
    .status-active { background-color: #ecfdf5 !important; color: #059669 !important; position: relative; padding-left: 28px !important; }
    .pulse-ring {
        position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px;
        border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: pulse-green 2s infinite;
    }
    @keyframes pulse-green {
        0% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    /* === ACTION BUTTONS === */
    .btn-action-group { display: flex; gap: 8px; justify-content: center; }
    .btn-icon-only { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; transition: 0.2s; font-size: 0.9rem; }
    .btn-icon-only:hover { transform: translateY(-2px); }
    .btn-monitor { background: #eef2ff; color: #4f46e5; }
    .btn-edit { background: #fffbeb; color: #d97706; }
    .btn-delete { background: #fef2f2; color: #e11d48; border: none; }
</style>
@stop

@section('content_body')
<div class="container-fluid pb-5 px-3 animate__animated animate__fadeIn">

    {{-- HERO HEADER --}}
    <div class="hero-gradient animate__animated animate__fadeInDown">
        <div style="position: relative; z-index: 2;">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h3 class="font-weight-bold mb-1" style="font-size: 1.5rem;">Monitoring Ujian</h3>
                    <p class="mb-0 font-weight-bold" style="opacity: 0.8; font-size: 0.85rem;">Kelola jadwal dan pantau aktivitas CBT.</p>
                </div>
                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                    <i class="fas fa-satellite-dish"></i>
                </div>
            </div>
            <div class="mt-4">
                <a href="{{ route('guru.ujian.jadwal.create') }}" class="btn btn-light rounded-pill font-weight-bold shadow-sm text-primary px-4 py-2" style="font-size: 0.85rem;">
                    <i class="fas fa-plus-circle mr-1"></i> Buat Jadwal Baru
                </a>
            </div>
        </div>
    </div>

    {{-- ALERTS --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm d-flex align-items-center mb-4" style="border-radius: 16px; background-color: #ecfdf5; color: #065f46;">
            <div style="width: 35px; height: 35px; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                <i class="fas fa-check text-success"></i>
            </div>
            <div class="font-weight-bold">{{ session('success') }}</div>
            <button type="button" class="close ml-auto" data-dismiss="alert" style="color: #065f46;">&times;</button>
        </div>
    @endif

    {{-- ==========================================
         TAMPILAN MOBILE (Cards Stack)
         ========================================== --}}
    <div class="mobile-view">
        @forelse($ujians as $ujian)
            <div class="exam-card animate__animated animate__fadeInUp" style="animation-delay: {{ $loop->index * 0.1 }}s;">
                
                {{-- HEADER CARD: Token & Status --}}
                <div class="d-flex justify-content-between align-items-center mb-3 pb-3" style="border-bottom: 1px dashed #e2e8f0;">
                    <div class="token-box" style="padding: 4px 10px; font-size: 1rem;">{{ $ujian->token }}</div>
                    
                    @if($ujian->status_ujian == 'terbit')
                        <span class="badge status-active rounded-pill px-3 py-1 font-weight-bold shadow-sm"><span class="pulse-ring"></span> Aktif</span>
                    @elseif($ujian->status_ujian == 'selesai')
                        <span class="badge bg-secondary rounded-pill px-3 py-1 font-weight-bold">Selesai</span>
                    @else
                        <span class="badge bg-warning rounded-pill px-3 py-1 font-weight-bold text-white">Draft</span>
                    @endif
                </div>

                {{-- INFO UJIAN --}}
                <h4 class="font-weight-bold text-dark mb-1" style="font-size: 1.1rem; line-height: 1.3;">{{ $ujian->nama_ujian }}</h4>
                <div class="d-flex align-items-center mb-3" style="font-size: 0.8rem; color: #64748b; font-weight: 600;">
                    <span><i class="fas fa-book text-primary opacity-50 mr-1"></i> {{ $ujian->bankSoal->judul ?? 'Bank Soal Terhapus' }}</span>
                </div>

                {{-- WAKTU & KELAS --}}
                <div class="bg-light rounded-lg p-3 mb-3 border border-light">
                    <div class="d-flex align-items-center justify-content-between mb-2 font-weight-bold" style="font-size: 0.8rem;">
                        <span class="text-dark"><i class="far fa-calendar-alt text-primary mr-1"></i> {{ $ujian->waktu_mulai->format('d M y, H:i') }}</span>
                        <span class="text-muted"><i class="far fa-clock text-primary mr-1"></i> {{ $ujian->durasi_menit }} Menit</span>
                    </div>
                    <div>
                        @if($ujian->kelas->isNotEmpty())
                            @foreach($ujian->kelas as $k)
                                <span class="badge-class">{{ $k->nama_kelas }}</span>
                            @endforeach
                        @else
                            <span class="badge-class bg-white text-muted border">Umum / Semua</span>
                        @endif
                    </div>
                </div>

                {{-- TOMBOL AKSI MOBILE --}}
                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('guru.ujian.monitoring.live', $ujian->id) }}" class="btn btn-light text-primary font-weight-bold flex-grow-1 shadow-sm" style="border-radius: 12px; background: #eef2ff; border: none;">
                        <i class="fas fa-satellite-dish mr-1"></i> Live Monitor
                    </a>
                    <a href="{{ route('guru.ujian.edit', $ujian->id) }}" class="btn btn-icon-only btn-edit shadow-sm">
                        <i class="fas fa-edit"></i>
                    </a>
                    <form action="{{ route('guru.ujian.destroy', $ujian->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus jadwal ujian ini? Data nilai akan hilang!');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-icon-only btn-delete shadow-sm"><i class="fas fa-trash-alt"></i></button>
                    </form>
                </div>
            </div>
        @empty
            <div class="text-center py-5 bg-white shadow-sm" style="border-radius: 28px; border: 1px dashed #cbd5e1;">
                <div style="width: 70px; height: 70px; background: #f8fafc; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                    <i class="fas fa-box-open fa-2x text-muted opacity-50"></i>
                </div>
                <h6 class="font-weight-bold text-dark">Belum Ada Jadwal Ujian</h6>
                <p class="text-muted small font-weight-bold px-3 mb-4">Mulai kelola ujian CBT Anda dengan membuat jadwal baru.</p>
                <a href="{{ route('guru.ujian.jadwal.create') }}" class="btn btn-primary rounded-pill px-4 shadow-sm">Buat Sekarang</a>
            </div>
        @endforelse
    </div>

    {{-- ==========================================
         TAMPILAN DESKTOP (Table Modern)
         ========================================== --}}
    <div class="desktop-view modern-card shadow-sm">
        <div class="table-responsive">
            <table class="table table-modern mb-0">
                <thead>
                    <tr>
                        <th width="25%">Nama Ujian & Bank Soal</th>
                        <th width="20%">Target Kelas</th>
                        <th width="15%">Waktu & Durasi</th>
                        <th width="15%" class="text-center">Token & Status</th>
                        <th width="20%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ujians as $ujian)
                        <tr>
                            <td>
                                <div class="d-flex align-items-start">
                                    <div class="mr-3 mt-1 text-primary opacity-50" style="font-size: 1.5rem;"><i class="fas fa-file-signature"></i></div>
                                    <div>
                                        <div class="font-weight-bold text-dark mb-1" style="font-size: 1.05rem;">{{ $ujian->nama_ujian }}</div>
                                        <div class="text-muted small font-weight-bold"><i class="fas fa-book mr-1"></i> {{ $ujian->bankSoal->judul ?? 'Bank Soal Terhapus' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($ujian->kelas->isNotEmpty())
                                    @foreach($ujian->kelas as $k)
                                        <span class="badge-class">{{ $k->nama_kelas }}</span>
                                    @endforeach
                                @else
                                    <span class="badge-class bg-light text-muted border">Umum / Semua</span>
                                @endif
                            </td>
                            <td>
                                <div class="text-dark font-weight-bold mb-1"><i class="far fa-calendar-alt text-primary opacity-50 mr-1"></i> {{ $ujian->waktu_mulai->format('d M Y') }}</div>
                                <div class="text-muted small font-weight-bold bg-light d-inline-block px-2 py-1 rounded">
                                    <i class="far fa-clock mr-1"></i> {{ $ujian->waktu_mulai->format('H:i') }} ({{ $ujian->durasi_menit }} Menit)
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="token-box mb-2" title="Token Akses">{{ $ujian->token }}</div>
                                <div class="d-block">
                                    @if($ujian->status_ujian == 'terbit')
                                        <span class="badge status-active rounded-pill px-3 py-1 shadow-sm"><span class="pulse-ring"></span> Aktif</span>
                                    @elseif($ujian->status_ujian == 'selesai')
                                        <span class="badge badge-secondary rounded-pill px-3 py-1">Selesai</span>
                                    @else
                                        <span class="badge badge-warning rounded-pill px-3 py-1 text-white">Draft</span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="btn-action-group">
                                    <a href="{{ route('guru.ujian.monitoring.live', $ujian->id) }}" class="btn btn-icon-only btn-monitor shadow-sm" title="Pantau Live">
                                        <i class="fas fa-satellite-dish"></i>
                                    </a>
                                    <a href="{{ route('guru.ujian.edit', $ujian->id) }}" class="btn btn-icon-only btn-edit shadow-sm" title="Edit Jadwal">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('guru.ujian.destroy', $ujian->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus jadwal ujian ini? Data jawaban siswa akan ikut terhapus!');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-icon-only btn-delete shadow-sm" title="Hapus Jadwal"><i class="fas fa-trash-alt"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <img src="https://img.icons8.com/fluency/96/nothing-found.png" style="width: 64px; opacity: 0.5;" class="mb-3">
                                <h6 class="font-weight-bold text-muted">Belum ada jadwal ujian.</h6>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- PAGINATION --}}
    @if($ujians->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $ujians->links('pagination::bootstrap-4') }}
        </div>
    @endif

</div>
@stop