@extends('layouts.app')

@section('title', 'Mengerjakan Ujian')

@section('content')
<div class="max-w-5xl mx-auto px-2 md:px-4" x-data="examApp()" x-init="init({{ $remainingSeconds }})" @keydown.escape.prevent @visibilitychange.window="handleVisibilityChange()">

    {{-- Sticky Timer Bar --}}
    <div class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border border-gray-200 px-3 md:px-6 py-2.5 md:py-3 flex justify-between items-center mb-4 md:mb-6 rounded-2xl shadow-sm">
        <div class="min-w-0">
            <h2 class="font-semibold text-gray-800 text-sm md:text-base truncate">{{ $exam->title }}</h2>
            <p class="text-xs text-gray-500 truncate hidden sm:block">{{ $exam->course->name }}</p>
        </div>
        <div class="flex items-center gap-2 md:gap-4">
            <div class="text-center bg-red-50 px-3 md:px-4 py-1.5 rounded-xl">
                <p class="text-[10px] md:text-xs text-gray-500 uppercase tracking-wide">Sisa Waktu</p>
                <p class="text-lg md:text-xl font-mono font-bold text-red-600 leading-tight" x-text="timerDisplay"></p>
            </div>
            <button @click="submitExam()" class="bg-gradient-to-r from-emerald-500 to-green-600 text-white px-3 md:px-5 py-2 md:py-2.5 rounded-xl hover:from-emerald-600 hover:to-green-700 transition text-xs md:text-sm font-medium shadow-lg shadow-green-200 whitespace-nowrap active:scale-[0.98]">
                <i class="fas fa-check mr-1"></i> <span class="hidden sm:inline">Submit</span><span class="sm:hidden">Selesai</span>
            </button>
        </div>
    </div>

    <div class="flex flex-col md:grid md:grid-cols-4 gap-4 md:gap-6">
        {{-- Navigation --}}
        <div class="md:col-span-1 order-2 md:order-1">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-3 md:p-4 md:sticky md:top-24">
                <p class="text-xs md:text-sm font-medium text-gray-700 mb-2 md:mb-3">Navigasi Soal</p>
                <div class="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-4 gap-1.5 md:gap-2">
                    @foreach($questions as $index => $q)
                    <button @click="scrollToQuestion({{ $index }})"
                        :class="answerStatus[{{ $q->id }}] ? 'bg-emerald-100 text-emerald-700 border-emerald-300' : 'bg-gray-50 text-gray-600 border-gray-200'"
                        class="border rounded-lg py-1.5 md:py-2 text-xs md:text-sm font-medium hover:bg-gray-100 transition">
                        {{ $index + 1 }}
                    </button>
                    @endforeach
                </div>
                <div class="mt-3 md:mt-4 text-[10px] md:text-xs text-gray-500 space-y-1">
                    <div class="flex items-center gap-2"><span class="w-3 h-3 bg-emerald-100 border border-emerald-300 rounded"></span> Sudah dijawab</div>
                    <div class="flex items-center gap-2"><span class="w-3 h-3 bg-gray-50 border border-gray-200 rounded"></span> Belum dijawab</div>
                </div>
            </div>
        </div>

        {{-- Questions --}}
        <div class="md:col-span-3 space-y-4 md:space-y-6 order-1 md:order-2">
            @foreach($questions as $index => $question)
            <div id="question-{{ $index }}" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6 scroll-mt-28">
                <div class="flex justify-between items-start mb-3 md:mb-4">
                    <p class="font-medium text-gray-800 text-sm md:text-base">Soal {{ $index + 1 }}</p>
                    <span class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded-lg">Bobot: {{ $question->point }}</span>
                </div>
                <p class="text-gray-700 mb-3 md:mb-4 text-sm md:text-base leading-relaxed">{{ $question->question }}</p>

                @if($question->image_path)
                    <div class="mb-3 md:mb-4">
                        <img src="{{ asset('storage/' . $question->image_path) }}" alt="Gambar soal" class="max-h-48 md:max-h-64 object-contain border rounded-xl mx-auto">
                    </div>
                @endif

                @if($question->audio_path)
                    <div class="mb-3 md:mb-4">
                        <audio controls class="w-full rounded-lg">
                            <source src="{{ asset('storage/' . $question->audio_path) }}">
                            Browser Anda tidak mendukung pemutar audio.
                        </audio>
                    </div>
                @endif

                @if($question->type === 'pilihan_ganda' || $question->type === 'gambar' || $question->type === 'suara')
                    @php $options = $exam->random_option ? collect($question->options)->shuffle() : $question->options; @endphp
                    <div class="space-y-2">
                        @foreach($options as $key => $opt)
                            @if($opt)
                            <label class="flex items-start gap-3 p-3 md:p-3.5 border rounded-xl hover:bg-gray-50 cursor-pointer transition active:scale-[0.99]">
                                <input type="radio" name="answer_{{ $question->id }}" value="{{ $key }}"
                                    @change="saveAnswer({{ $question->id }}, $event.target.value)"
                                    {{ (isset($answers[$question->id]) && $answers[$question->id] == $key) ? 'checked' : '' }}
                                    class="text-blue-600 focus:ring-blue-500 mt-0.5 shrink-0">
                                <span class="text-sm"><strong>{{ strtoupper($key) }}.</strong> {{ $opt }}</span>
                            </label>
                            @endif
                        @endforeach
                    </div>
                @elseif($question->type === 'benar_salah')
                    <div class="space-y-2">
                        <label class="flex items-center gap-3 p-3 md:p-3.5 border rounded-xl hover:bg-gray-50 cursor-pointer transition active:scale-[0.99]">
                            <input type="radio" name="answer_{{ $question->id }}" value="a"
                                @change="saveAnswer({{ $question->id }}, $event.target.value)"
                                {{ (isset($answers[$question->id]) && $answers[$question->id] == 'a') ? 'checked' : '' }}
                                class="text-blue-600 focus:ring-blue-500 shrink-0">
                            <span class="text-sm">Benar</span>
                        </label>
                        <label class="flex items-center gap-3 p-3 md:p-3.5 border rounded-xl hover:bg-gray-50 cursor-pointer transition active:scale-[0.99]">
                            <input type="radio" name="answer_{{ $question->id }}" value="b"
                                @change="saveAnswer({{ $question->id }}, $event.target.value)"
                                {{ (isset($answers[$question->id]) && $answers[$question->id] == 'b') ? 'checked' : '' }}
                                class="text-blue-600 focus:ring-blue-500 shrink-0">
                            <span class="text-sm">Salah</span>
                        </label>
                    </div>
                @else
                    <textarea rows="4" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
                        @input.debounce.1000ms="saveAnswer({{ $question->id }}, $event.target.value)"
                        placeholder="Tulis jawaban Anda di sini...">{{ $answers[$question->id] ?? '' }}</textarea>
                @endif
            </div>
            @endforeach

            <div class="flex justify-end pb-6 md:pb-8">
                <button @click="submitExam()" class="bg-gradient-to-r from-emerald-500 to-green-600 text-white px-6 md:px-8 py-3 rounded-xl hover:from-emerald-600 hover:to-green-700 transition font-medium shadow-lg shadow-green-200 active:scale-[0.98] w-full sm:w-auto">
                    <i class="fas fa-check mr-2"></i> Submit Ujian
                </button>
            </div>
        </div>
    </div>

    {{-- Hidden form for submit --}}
    <form id="submitForm" action="{{ route('exam.submit', $exam) }}" method="POST" class="hidden">
        @csrf
    </form>
</div>
@endsection

@push('scripts')
<script>
function examApp() {
    return {
        timer: 0,
        timerDisplay: '00:00:00',
        answerStatus: @json(collect($answers)->mapWithKeys(fn($v, $k) => [$k => (bool)$v])),
        tabSwitchCount: 0,
        limitTabSwitch: {{ \App\Models\Setting::get('allow_tab_switch', 3) }},

        init(seconds) {
            this.timer = seconds;
            this.updateTimer();
            setInterval(() => {
                this.timer--;
                this.updateTimer();
                if (this.timer <= 0) {
                    alert('Waktu habis! Ujian akan disubmit otomatis.');
                    document.getElementById('submitForm').submit();
                }
            }, 1000);

            window.addEventListener('beforeunload', (e) => {
                e.preventDefault();
                e.returnValue = '';
            });
        },

        updateTimer() {
            const h = Math.floor(this.timer / 3600).toString().padStart(2, '0');
            const m = Math.floor((this.timer % 3600) / 60).toString().padStart(2, '0');
            const s = (this.timer % 60).toString().padStart(2, '0');
            this.timerDisplay = `${h}:${m}:${s}`;
        },

        scrollToQuestion(index) {
            document.getElementById('question-' + index).scrollIntoView({ behavior: 'smooth', block: 'start' });
        },

        saveAnswer(questionId, value) {
            this.answerStatus[questionId] = !!value;
            fetch('{{ route('exam.save', $exam) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ question_id: questionId, answer: value })
            });
        },

        handleVisibilityChange() {
            if (document.hidden) {
                fetch('{{ route('exam.cheating', $exam) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(r => r.json())
                .then(data => {
                    if (!data.success) {
                        alert(data.message);
                        document.getElementById('submitForm').submit();
                    } else {
                        this.tabSwitchCount = data.count;
                        if (this.tabSwitchCount >= this.limitTabSwitch) {
                            alert('Peringatan: Anda telah melewati batas tab switch!');
                        }
                    }
                });
            }
        },

        submitExam() {
            if (confirm('Yakin ingin submit ujian?')) {
                window.removeEventListener('beforeunload', () => {});
                document.getElementById('submitForm').submit();
            }
        }
    }
}
</script>
@endpush