@extends('layouts.teacher')

@section('title', 'Daftar Ujian & Quiz')
@section('header_title', 'Ujian & Kuis')

@section('content')
<div class="w-full">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div>
            <h2 class="text-lg font-bold text-gray-800">Daftar Ujian & Quiz</h2>
            <p class="text-sm text-gray-500">Kelola ujian, kuis, dan ulangan harian</p>
        </div>
        
        <a href="{{ route('guru.ujian.create') }}"
           class="mt-4 md:mt-0 bg-indigo-600 text-white px-5 py-2.5 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center shadow-lg shadow-indigo-200">
            <i class="ph ph-plus mr-2"></i> Buat Ujian Baru
        </a>
    </div>

    <!-- 🔥 FLASH MESSAGE -->
    @if(session('success'))
    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 flex items-center">
        <i class="ph ph-check-circle mr-2 text-lg"></i> {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center">
        <i class="ph ph-x-circle mr-2 text-lg"></i> {{ session('error') }}
    </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($exams as $exam)
        <div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:border-indigo-400 hover:shadow-md transition h-full relative overflow-hidden group">
            
            <!-- DEKORASI LATAR BELAKANG -->
            <div class="absolute top-0 right-0 p-4 opacity-10">
                <i class="ph ph-files text-6xl text-indigo-900"></i>
            </div>
            
            <!-- HEADER CARD -->
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center mr-3">
                    <i class="ph ph-exam text-xl"></i>
                </div>
                <div>
                    <span class="bg-gray-100 text-gray-600 text-[10px] font-bold px-2 py-0.5 rounded uppercase tracking-wide border border-gray-200">
                        Ujian & Quiz
                    </span>
                </div>
            </div>

            <!-- JUDUL DAN DESKRIPSI -->
            <div>
                <h3 class="text-lg font-bold text-gray-800 group-hover:text-indigo-600 transition mb-1">
                    {{ $exam->title }}
                </h3>
                <p class="text-sm text-gray-500 mb-4 line-clamp-1 flex items-center gap-2">
                    <i class="ph ph-user text-xs"></i>
                    {{ $exam->teacher ?? '-' }}
                
                    <span class="text-gray-300">|</span>
                
                    <i class="ph ph-student text-xs"></i>
                    {{ $exam->class ?? '-' }}
                </p>
                            </div>

            <!-- FOOTER CARD -->
            <div class="flex justify-between items-center mt-4 pt-4 border-t border-gray-50">
                <!-- INFO -->
                <div class="text-xs text-gray-500 space-y-1">
                    <div class="flex items-center">
                        <i class="ph ph-clock mr-1.5"></i>
                        {{ $exam->duration ?? 60 }} Menit
                    </div>

                    <div class="flex items-center">
                        <i class="ph ph-list-numbers mr-1.5"></i>
                        {{ $exam->questions_count ?? 0 }} Soal
                    </div>
                </div>
                
                <!-- TOMBOL AKSI -->
                <!-- TOMBOL AKSI -->
<div class="flex items-center gap-2">
    <!-- TOMBOL EDIT (BARU) -->
    <a href="{{ route('guru.ujian.edit', $exam->id) }}"
       class="w-8 h-8 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition shadow-sm"
       title="Edit Quiz">
        <i class="ph ph-pencil-simple text-sm"></i>
    </a>
    
    <!-- TOMBOL HAPUS -->
    <form action="{{ route('guru.ujian.destroy', $exam->id) }}" method="POST" 
          class="inline-block">
        @csrf
        @method('DELETE')
        <button type="button"
                onclick="confirmDelete('{{ $exam->id }}', '{{ $exam->title }}')"
                class="w-8 h-8 flex items-center justify-center bg-red-50 text-red-500 rounded-lg hover:bg-red-100 transition shadow-sm"
                title="Hapus Quiz">
            <i class="ph ph-trash text-sm"></i>
        </button>
    </form>
    
    <!-- TOMBOL LAINNYA -->
    <a href="{{ route('guru.ujian.show', $exam->id) }}"
       class="text-xs text-center bg-white border border-gray-200 text-gray-600 px-3 py-1.5 rounded hover:bg-gray-50 transition">
        Edit Soal
    </a>
    <a href="{{ route('guru.ujian.results', $exam->id) }}"
       class="text-xs text-center bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded hover:bg-indigo-100 transition font-bold">
        Lihat Hasil
    </a>
</div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- STATE KOSONG -->
    @if(count($exams) == 0)
    <div class="text-center py-12 bg-white rounded-xl border border-dashed border-gray-300 mt-6">
        <div class="bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
            <i class="ph ph-pencil-slash text-2xl text-gray-400"></i>
        </div>
        <h3 class="text-gray-800 font-bold">Belum ada ujian</h3>
        <p class="text-gray-500 text-sm">Silakan buat ujian baru untuk memulai.</p>
    </div>
    @endif
</div>

<!-- 🔥 MODAL KONFIRMASI HAPUS -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
        <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-lg bg-red-50 text-red-600 flex items-center justify-center mr-3">
                <i class="ph ph-warning-circle text-xl"></i>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-800">Hapus Quiz</h3>
                <p class="text-sm text-gray-500">Konfirmasi penghapusan</p>
            </div>
        </div>
        
        <p class="text-gray-700 mb-6" id="deleteMessage">
            Apakah Anda yakin ingin menghapus quiz ini?
        </p>
        
        <div class="flex justify-end gap-3">
            <button type="button"
                    onclick="closeDeleteModal()"
                    class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium">
                Batal
            </button>
            <form id="deleteForm" method="POST" class="inline-block">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium">
                    Ya, Hapus
                </button>
            </form>
        </div>
    </div>
</div>

<!-- 🔥 SCRIPT KONFIRMASI HAPUS -->
<script>
let currentDeleteForm = null;
let currentDeleteTitle = '';

function confirmDelete(quizId, quizTitle) {
    currentDeleteTitle = quizTitle;
    currentDeleteForm = document.querySelector(`form[action="/teacher/ujian/${quizId}"]`);
    
    document.getElementById('deleteMessage').innerHTML = `
        <strong>"${quizTitle}"</strong><br><br>
        Data yang akan dihapus:<br>
        • Soal-soal quiz<br>
        • Hasil pengerjaan siswa<br>
        • Jawaban siswa<br><br>
        <span class="text-red-600 font-semibold">Aksi ini tidak dapat dibatalkan!</span>
    `;
    
    document.getElementById('deleteForm').action = `/teacher/ujian/${quizId}`;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    currentDeleteForm = null;
    currentDeleteTitle = '';
}

// Tutup modal saat klik di luar
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target.id === 'deleteModal') {
        closeDeleteModal();
    }
});

// Tutup modal dengan ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('deleteModal').classList.contains('hidden')) {
        closeDeleteModal();
    }
});
</script>

@endsection