@extends('layouts.siswa')

@section('title', 'Simulasi Ujian TKA')
@section('header', 'Simulasi Ujian')

@section('content')
<div class="container mx-auto">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <!-- Header with Timer -->
        <div class="bg-gradient-primary text-white p-4">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold">{{ $simulasi->paketUjian->nama_paket }}</h2>
                <div class="text-right">
                    <div class="text-sm">Sisa Waktu</div>
                    <div id="timer" class="text-2xl font-mono font-bold"></div>
                </div>
            </div>
        </div>
        
        <!-- Progress Bar -->
        <div class="border-b bg-gray-50 p-3">
            <div class="flex justify-between items-center text-sm text-gray-600 mb-1">
                <span>Progress Soal</span>
                <span id="progressCounter">0 dari {{ count($soal) }} soal terjawab</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
        </div>
        
        <!-- Soal Container -->
        <div class="p-6">
            <form id="ujianForm">
                @csrf
                <input type="hidden" name="simulasi_id" value="{{ $simulasi->id }}">
                
                <div id="soalContainer">
                    @foreach($soal as $index => $soalItem)
                    <div class="soal-item mb-8 p-4 border rounded-lg {{ $loop->first ? '' : 'hidden' }}" data-soal-id="{{ $soalItem->id }}" data-urutan="{{ $index }}" data-terjawab="{{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa ? 'true' : 'false' }}">
                        <div class="mb-4 flex justify-between items-center">
                            <div>
                                <span class="text-gray-500 text-sm">Soal {{ $index + 1 }} dari {{ count($soal) }}</span>
                                <span class="ml-2 px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded">
                                    Bobot: {{ $soalItem->bobot_nilai }}
                                </span>
                                <span class="ml-2 px-2 py-1 rounded text-xs {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    <i class="fas {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa ? 'fa-check-circle' : 'fa-exclamation-circle' }} mr-1"></i>
                                    {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa ? 'Terjawab' : 'Belum Dijawab' }}
                                </span>
                            </div>
                            <div class="text-sm text-gray-400">
                                <i class="fas fa-flag-checkered mr-1"></i>
                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-lg font-semibold mb-4">{!! nl2br(e($soalItem->pertanyaan)) !!}</h3>
                            <div class="space-y-3">
                                <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="jawaban[{{ $soalItem->id }}]" value="A" class="w-4 h-4 text-purple-600" {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa == 'A' ? 'checked' : '' }}>
                                    <span class="text-gray-700">A. {{ $soalItem->pilihan_a }}</span>
                                </label>
                                <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="jawaban[{{ $soalItem->id }}]" value="B" class="w-4 h-4 text-purple-600" {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa == 'B' ? 'checked' : '' }}>
                                    <span class="text-gray-700">B. {{ $soalItem->pilihan_b }}</span>
                                </label>
                                <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="jawaban[{{ $soalItem->id }}]" value="C" class="w-4 h-4 text-purple-600" {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa == 'C' ? 'checked' : '' }}>
                                    <span class="text-gray-700">C. {{ $soalItem->pilihan_c }}</span>
                                </label>
                                <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="jawaban[{{ $soalItem->id }}]" value="D" class="w-4 h-4 text-purple-600" {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa == 'D' ? 'checked' : '' }}>
                                    <span class="text-gray-700">D. {{ $soalItem->pilihan_d }}</span>
                                </label>
                                @if($soalItem->pilihan_e)
                                <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="jawaban[{{ $soalItem->id }}]" value="E" class="w-4 h-4 text-purple-600" {{ isset($jawaban[$soalItem->id]) && $jawaban[$soalItem->id]->jawaban_siswa == 'E' ? 'checked' : '' }}>
                                    <span class="text-gray-700">E. {{ $soalItem->pilihan_e }}</span>
                                </label>
                                @endif
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button type="button" class="prev-btn px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition {{ $loop->first ? 'opacity-50 cursor-not-allowed' : '' }}" {{ $loop->first ? 'disabled' : '' }}>
                                <i class="fas fa-arrow-left mr-2"></i> Sebelumnya
                            </button>
                            <button type="button" class="next-btn px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition {{ $loop->last ? 'hidden' : '' }}">
                                Selanjutnya <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                            <button type="button" class="submit-btn px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition {{ $loop->last ? '' : 'hidden' }}">
                                Selesai <i class="fas fa-check ml-2"></i>
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Warning Modal for Tab Switching -->
<div id="warningModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
        <div class="text-center">
            <i class="fas fa-exclamation-triangle text-6xl text-yellow-500 mb-4"></i>
            <h3 class="text-xl font-bold mb-2">Peringatan!</h3>
            <p class="text-gray-600 mb-4">Anda tidak diperbolehkan keluar dari halaman ujian. Silakan kembali ke halaman ujian.</p>
            <button onclick="hideWarningAndReturn()" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                Kembali ke Ujian
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let currentSoal = 0;
    const soalItems = document.querySelectorAll('.soal-item');
    const totalSoal = soalItems.length;
    let timerInterval;
    let warningCount = 0;
    let originalTitle = document.title;
    let isSubmitting = false;
    
    // Timer initialization
    let sisaWaktu = {{ $sisaWaktu }};
    
    // Hitung jumlah soal yang sudah dijawab
    function updateProgress() {
        let answered = 0;
        soalItems.forEach(item => {
            const radioGroup = item.querySelectorAll('input[type="radio"]');
            let isAnswered = false;
            radioGroup.forEach(radio => {
                if (radio.checked) isAnswered = true;
            });
            if (isAnswered) {
                answered++;
                item.setAttribute('data-terjawab', 'true');
            } else {
                item.setAttribute('data-terjawab', 'false');
            }
        });
        
        const progressPercent = (answered / totalSoal) * 100;
        document.getElementById('progressBar').style.width = progressPercent + '%';
        document.getElementById('progressCounter').innerHTML = `${answered} dari ${totalSoal} soal terjawab`;
        
        // Update status badge pada soal
        soalItems.forEach((item, idx) => {
            const statusBadge = item.querySelector('.bg-red-100, .bg-green-100');
            const isAnswered = item.getAttribute('data-terjawab') === 'true';
            if (statusBadge) {
                if (isAnswered) {
                    statusBadge.className = 'ml-2 px-2 py-1 rounded text-xs bg-green-100 text-green-700';
                    statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Terjawab';
                } else {
                    statusBadge.className = 'ml-2 px-2 py-1 rounded text-xs bg-red-100 text-red-700';
                    statusBadge.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i> Belum Dijawab';
                }
            }
        });
    }
    
    // Cek apakah semua soal sudah dijawab
    function isAllAnswered() {
        let allAnswered = true;
        let unansweredList = [];
        
        soalItems.forEach((item, index) => {
            const radioGroup = item.querySelectorAll('input[type="radio"]');
            let isAnswered = false;
            radioGroup.forEach(radio => {
                if (radio.checked) isAnswered = true;
            });
            if (!isAnswered) {
                allAnswered = false;
                unansweredList.push(index + 1);
            }
        });
        
        return { allAnswered, unansweredList };
    }
    
    function updateTimer() {
        if (sisaWaktu <= 0) {
            clearInterval(timerInterval);
            if (!isSubmitting) {
                submitUjianOtomatis();
            }
            return;
        }
        
        const hours = Math.floor(sisaWaktu / 3600);
        const minutes = Math.floor((sisaWaktu % 3600) / 60);
        const seconds = sisaWaktu % 60;
        
        const timerElement = document.getElementById('timer');
        if (timerElement) {
            timerElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // Warning when time is running low (last 5 minutes)
        if (sisaWaktu <= 300 && sisaWaktu > 0) {
            timerElement.classList.add('text-yellow-300');
            if (sisaWaktu <= 60) {
                timerElement.classList.remove('text-yellow-300');
                timerElement.classList.add('text-red-300', 'animate-pulse');
            }
        }
        
        document.title = `(${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}) ${originalTitle}`;
        
        sisaWaktu--;
    }
    
    let autoSaveInterval;
    
    function startAutoSave() {
        autoSaveInterval = setInterval(() => {
            saveJawaban();
        }, 30000);
    }
    
    function saveJawaban() {
        const formData = new FormData(document.getElementById('ujianForm'));
        
        fetch('{{ route("siswa.ujian.save-jawaban") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSavedIndicator();
                updateProgress();
            }
        })
        .catch(error => console.error('Error saving:', error));
    }
    
    function showSavedIndicator() {
        let indicator = document.getElementById('savedIndicator');
        if (!indicator) {
            indicator = document.createElement('div');
            indicator.id = 'savedIndicator';
            indicator.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg text-sm z-50';
            document.body.appendChild(indicator);
        }
        indicator.textContent = '✓ Jawaban tersimpan';
        indicator.classList.remove('hidden');
        setTimeout(() => {
            indicator.classList.add('hidden');
        }, 2000);
    }
    
    function submitUjian() {
        if (isSubmitting) return;
        
        const { allAnswered, unansweredList } = isAllAnswered();
        
        if (!allAnswered) {
            let message = `Terdapat ${unansweredList.length} soal yang belum dijawab:\n`;
            message += `Soal nomor: ${unansweredList.join(', ')}\n\n`;
            message += `Apakah Anda tetap ingin menyelesaikan ujian? Soal yang tidak dijawab akan dianggap salah.`;
            
            Swal.fire({
                title: 'Perhatian!',
                html: `<div class="text-left">
                        <p class="text-red-600 mb-3"><i class="fas fa-exclamation-triangle mr-2"></i> <strong>${unansweredList.length} soal belum dijawab!</strong></p>
                        <p class="mb-2">Soal yang belum dijawab:</p>
                        <div class="bg-yellow-50 p-3 rounded-lg mb-3">
                            <span class="font-mono">${unansweredList.join(', ')}</span>
                        </div>
                        <p class="text-gray-600">Soal yang tidak dijawab akan dianggap <strong class="text-red-600">SALAH</strong> dan mempengaruhi nilai akhir Anda.</p>
                        <p class="text-gray-600 mt-2">Apakah Anda tetap ingin menyelesaikan ujian?</p>
                    </div>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Selesai!',
                cancelButtonText: 'Kembali ke Soal'
            }).then((result) => {
                if (result.isConfirmed) {
                    proceedSubmitUjian();
                } else {
                    // Arahkan ke soal pertama yang belum dijawab
                    for (let i = 0; i < soalItems.length; i++) {
                        const isAnswered = soalItems[i].getAttribute('data-terjawab') === 'true';
                        if (!isAnswered) {
                            currentSoal = i;
                            showSoal(currentSoal);
                            break;
                        }
                    }
                }
            });
            return;
        }
        
        // Semua soal sudah dijawab
        Swal.fire({
            title: 'Konfirmasi',
            text: 'Apakah Anda yakin ingin menyelesaikan ujian?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#10B981',
            cancelButtonColor: '#6B7280',
            confirmButtonText: 'Ya, Selesai!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                proceedSubmitUjian();
            }
        });
    }
    
    function proceedSubmitUjian() {
        if (isSubmitting) return;
        isSubmitting = true;
        
        Swal.fire({
            title: 'Memproses...',
            text: 'Sedang menyimpan jawaban dan menghitung nilai',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        // Save final answers
        saveJawaban();
        
        setTimeout(() => {
            fetch('{{ route("siswa.ujian.selesai", $simulasi->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.redirect) {
                    window.location.href = data.redirect;
                } else {
                    window.location.href = '{{ route("siswa.hasil.detail", $simulasi->id) }}';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                window.location.href = '{{ route("siswa.hasil.detail", $simulasi->id) }}';
            });
        }, 1000);
    }
    
    function submitUjianOtomatis() {
        if (isSubmitting) return;
        isSubmitting = true;
        
        const { unansweredList } = isAllAnswered();
        let message = 'Waktu ujian telah habis. ';
        if (unansweredList.length > 0) {
            message += `${unansweredList.length} soal belum dijawab dan akan dianggap salah.`;
        }
        
        Swal.fire({
            title: 'Waktu Habis!',
            text: message,
            icon: 'warning',
            timer: 2000,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        saveJawaban();
        
        setTimeout(() => {
            fetch('{{ route("siswa.ujian.selesai", $simulasi->id) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.redirect) {
                    window.location.href = data.redirect;
                } else {
                    window.location.href = '{{ route("siswa.hasil.detail", $simulasi->id) }}';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                window.location.href = '{{ route("siswa.hasil.detail", $simulasi->id) }}';
            });
        }, 1000);
    }
    
    function showSoal(index) {
        soalItems.forEach((item, i) => {
            if (i === index) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
        updateProgress();
    }
    
    // Event listeners
    document.querySelectorAll('.next-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (currentSoal < totalSoal - 1) {
                currentSoal++;
                showSoal(currentSoal);
                saveJawaban();
            }
        });
    });
    
    document.querySelectorAll('.prev-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (currentSoal > 0) {
                currentSoal--;
                showSoal(currentSoal);
                saveJawaban();
            }
        });
    });
    
    document.querySelectorAll('.submit-btn').forEach(btn => {
        btn.addEventListener('click', () => submitUjian());
    });
    
    // Radio change auto save and update progress
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', () => {
            saveJawaban();
            updateProgress();
        });
    });
    
    // Anti cheating
    let blurCount = 0;
    let warningModal = document.getElementById('warningModal');
    
    function showWarning() {
        blurCount++;
        if (warningModal) {
            warningModal.classList.remove('hidden');
            warningModal.classList.add('flex');
        }
        
        if (blurCount >= 3) {
            Swal.fire({
                title: 'Peringatan!',
                text: 'Anda telah keluar dari halaman ujian sebanyak 3 kali. Ujian akan diakhiri.',
                icon: 'error',
                confirmButtonText: 'OK'
            }).then(() => {
                submitUjian();
            });
        }
    }
    
    function hideWarningAndReturn() {
        if (warningModal) {
            warningModal.classList.add('hidden');
            warningModal.classList.remove('flex');
        }
        window.focus();
    }
    
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            showWarning();
        } else {
            if (warningModal) {
                warningModal.classList.add('hidden');
                warningModal.classList.remove('flex');
            }
        }
    });
    
    window.addEventListener('blur', () => {
        showWarning();
    });
    
    // Disable right click
    document.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        return false;
    });
    
    // Disable keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey || e.metaKey) {
            if (e.key === 'c' || e.key === 'v' || e.key === 'x' || e.key === 'p' || e.key === 's') {
                e.preventDefault();
                return false;
            }
        }
        if (e.key === 'F12') {
            e.preventDefault();
            return false;
        }
    });
    
    // Start timer and auto save
    timerInterval = setInterval(updateTimer, 1000);
    startAutoSave();
    updateProgress();
    
    // Before unload warning
    window.addEventListener('beforeunload', (e) => {
        if (!isSubmitting && document.querySelector('input[type="radio"]:checked')) {
            e.preventDefault();
            e.returnValue = 'Anda sedang mengerjakan ujian. Jika keluar, jawaban akan hilang.';
            return 'Anda sedang mengerjakan ujian. Jika keluar, jawaban akan hilang.';
        }
    });
</script>
@endpush
@endsection