@extends('layouts.student')
@section('title', 'Kerjakan Kuis: ' . $quiz->title)

@section('content')

{{-- Header --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <p class="text-xs text-gray-400 mb-1">
            {{ $quiz->course->title }} · Kuis
        </p>
        <h1 class="text-xl font-bold text-gray-900">{{ $quiz->title }}</h1>
    </div>
    {{-- Timer --}}
    @if($quiz->duration_minutes)
    <div class="flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700
                text-sm font-semibold px-4 py-2 rounded-xl" id="timer-box">
        <i class="fa fa-clock"></i>
        <span id="timer">{{ sprintf('%02d:%02d', $quiz->duration_minutes, 0) }}</span>
    </div>
    @endif
</div>

{{-- Progress bar --}}
<div class="bg-white rounded-2xl border border-gray-100 p-4 mb-5 flex items-center gap-4"
     style="box-shadow:0 1px 8px rgba(0,0,0,.04);">
    <span class="text-xs text-gray-500 flex-shrink-0">
        <span id="answered-count">0</span>/{{ $quiz->questions->count() }} dijawab
    </span>
    <div class="flex-1 bg-gray-100 rounded-full h-2">
        <div id="progress-bar" class="bg-blue-500 h-2 rounded-full transition-all" style="width:0%"></div>
    </div>
    <span class="text-xs text-gray-400 flex-shrink-0">{{ $quiz->questions->count() }} soal</span>
</div>

{{-- Form Soal --}}
<form method="POST" action="{{ route('student.quiz.submit', [$quiz, $attempt]) }}" id="quiz-form">
    @csrf

    <div class="space-y-5">
        @foreach($quiz->questions as $i => $question)
        <div class="bg-white rounded-2xl border border-gray-100 p-6 question-card"
             style="box-shadow:0 1px 8px rgba(0,0,0,.04);"
             data-index="{{ $i }}">

            {{-- Nomor & Soal --}}
            <div class="flex gap-3 mb-4">
                <div class="w-7 h-7 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center
                            text-xs font-bold flex-shrink-0 mt-0.5">
                    {{ $i + 1 }}
                </div>
                <p class="text-sm font-medium text-gray-800 leading-relaxed">
                    {!! nl2br(e($question->question)) !!}
                </p>
            </div>

            {{-- Pilihan --}}
            @if($question->type === 'multiple_choice')
            <div class="space-y-2.5 ml-10">
                @foreach($question->options as $key => $option)
                <label class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 cursor-pointer
                              hover:border-blue-200 hover:bg-blue-50 transition group option-label"
                       data-question="{{ $question->id }}">
                    <input type="radio"
                           name="answers[{{ $question->id }}]"
                           value="{{ $key }}"
                           class="accent-blue-600 w-4 h-4 flex-shrink-0 quiz-radio"
                           data-question="{{ $question->id }}">
                    <span class="text-sm text-gray-700">{{ $option }}</span>
                </label>
                @endforeach
            </div>

            @elseif($question->type === 'essay')
            <div class="ml-10">
                <textarea name="answers[{{ $question->id }}]"
                          rows="4"
                          placeholder="Tulis jawaban kamu di sini..."
                          class="w-full border border-gray-200 rounded-xl p-3 text-sm text-gray-700
                                 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none
                                 resize-none transition quiz-essay"
                          data-question="{{ $question->id }}"></textarea>
            </div>

            @elseif($question->type === 'true_false')
            <div class="flex gap-3 ml-10">
                @foreach(['true' => 'Benar', 'false' => 'Salah'] as $val => $label)
                <label class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-100 cursor-pointer
                              hover:border-blue-200 hover:bg-blue-50 transition option-label"
                       data-question="{{ $question->id }}">
                    <input type="radio"
                           name="answers[{{ $question->id }}]"
                           value="{{ $val }}"
                           class="accent-blue-600 quiz-radio"
                           data-question="{{ $question->id }}">
                    <span class="text-sm font-medium text-gray-700">{{ $label }}</span>
                </label>
                @endforeach
            </div>
            @endif

        </div>
        @endforeach
    </div>

    {{-- Submit --}}
    <div class="mt-8 flex items-center justify-between">
        <a href="{{ route('student.courses.show', $quiz->course) }}"
           class="text-sm text-gray-400 hover:text-gray-600 transition">
            ← Batalkan
        </a>
        <button type="submit"
                class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white
                       text-sm font-semibold px-6 py-2.5 rounded-xl transition"
                id="submit-btn">
            <i class="fa fa-paper-plane"></i> Kumpulkan Jawaban
        </button>
    </div>
</form>

@push('scripts')
<script>
    const totalQuestions = {{ $quiz->questions->count() }};
    const answered = new Set();

    // Progress tracker
    function updateProgress() {
        const pct = totalQuestions > 0 ? Math.round((answered.size / totalQuestions) * 100) : 0;
        document.getElementById('progress-bar').style.width = pct + '%';
        document.getElementById('answered-count').textContent = answered.size;
    }

    // Radio
    document.querySelectorAll('.quiz-radio').forEach(input => {
        input.addEventListener('change', function () {
            const qid = this.dataset.question;
            answered.add(qid);
            // Highlight label terpilih
            document.querySelectorAll(`.option-label[data-question="${qid}"]`).forEach(l => {
                l.classList.remove('border-blue-400', 'bg-blue-50');
            });
            this.closest('.option-label').classList.add('border-blue-400', 'bg-blue-50');
            updateProgress();
        });
    });

    // Essay
    document.querySelectorAll('.quiz-essay').forEach(textarea => {
        textarea.addEventListener('input', function () {
            if (this.value.trim()) answered.add(this.dataset.question);
            else answered.delete(this.dataset.question);
            updateProgress();
        });
    });

    // Timer
    @if($quiz->duration_minutes)
    let seconds = {{ $quiz->duration_minutes * 60 }};
    const timerEl = document.getElementById('timer');
    const timerBox = document.getElementById('timer-box');

    const interval = setInterval(() => {
        seconds--;
        const m = Math.floor(seconds / 60).toString().padStart(2,'0');
        const s = (seconds % 60).toString().padStart(2,'0');
        timerEl.textContent = `${m}:${s}`;

        if (seconds <= 60) timerBox.classList.replace('bg-amber-50','bg-red-50'),
                           timerBox.classList.replace('border-amber-200','border-red-200'),
                           timerBox.classList.replace('text-amber-700','text-red-600');
        if (seconds <= 0) {
            clearInterval(interval);
            document.getElementById('quiz-form').submit();
        }
    }, 1000);
    @endif

    // Konfirmasi submit
    document.getElementById('quiz-form').addEventListener('submit', function(e) {
        if (answered.size < totalQuestions) {
            if (!confirm(`Kamu baru menjawab ${answered.size} dari ${totalQuestions} soal. Yakin ingin mengumpulkan?`)) {
                e.preventDefault();
            }
        }
    });
</script>
@endpush

@endsection