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

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }

    .question-card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 8px rgba(0,0,0,.04); transition:border-color .2s; }
    .question-card:focus-within { border-color:#c7bfb0; }

    .option-label {
        display:flex; align-items:center; gap:.875rem;
        padding:.875rem 1rem; border-radius:14px; border:1.5px solid var(--border);
        cursor:pointer; transition:all .15s;
    }
    .option-label:hover { border-color:#c7bfb0; background:var(--cream); }
    .option-label.selected { border-color:var(--navy); background:#f0f3f8; }

    .timer-box { display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:12px; font-size:13px; font-weight:600; background:var(--gold-light); border:1.5px solid #e8d4a0; color:#92742a; transition:all .3s; }
    .timer-box.urgent { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }

    .progress-track { background:#f0ede6; border-radius:100px; height:5px; flex:1; overflow:hidden; }
    .progress-fill { height:100%; border-radius:100px; background:var(--navy); transition:width .3s ease; }

    .quiz-textarea { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); resize:none; transition:border-color .15s; outline:none; }
    .quiz-textarea:focus { border-color:var(--navy); }

    .true-false-label {
        display:flex; align-items:center; gap:.5rem;
        padding:.75rem 1.25rem; border-radius:14px; border:1.5px solid var(--border);
        cursor:pointer; transition:all .15s; font-size:13px; font-weight:500;
    }
    .true-false-label:hover { border-color:#c7bfb0; background:var(--cream); }
    .true-false-label.selected { border-color:var(--navy); background:#f0f3f8; }
</style>

<div class="edu-font-body">

    {{-- Sticky Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <p class="text-xs font-medium" style="color:var(--text-muted);">{{ $quiz->course->title }} · Kuis</p>
            <h1 class="edu-font-display text-xl font-bold mt-0.5" style="color:var(--navy);">{{ $quiz->title }}</h1>
        </div>
        @if($quiz->duration_minutes)
        <div class="timer-box" id="timer-box">
            <i class="fa fa-clock text-xs"></i>
            <span id="timer">{{ sprintf('%02d:%02d', $quiz->duration_minutes, 0) }}</span>
        </div>
        @endif
    </div>

    {{-- Progress --}}
    <div style="background:white; border:1px solid var(--border); border-radius:16px; padding:.875rem 1.25rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:1rem; box-shadow:0 1px 8px rgba(0,0,0,.04);">
        <span class="text-xs font-medium" style="color:var(--text-muted); flex-shrink:0;">
            <span id="answered-count" style="color:var(--navy); font-weight:700;">0</span>/{{ $quiz->questions->count() }} dijawab
        </span>
        <div class="progress-track">
            <div id="progress-bar" class="progress-fill" style="width:0%"></div>
        </div>
        <span class="text-xs" style="color:var(--text-muted); flex-shrink:0;">{{ $quiz->questions->count() }} soal</span>
    </div>

    {{-- Form --}}
    <form method="POST" action="{{ route('student.quiz.submit', [$quiz, $attempt]) }}" id="quiz-form">
        @csrf
        <div class="space-y-4">
            @foreach($quiz->questions as $i => $question)
            <div class="question-card" data-index="{{ $i }}">

                <div class="flex gap-3 mb-4">
                    <div class="w-7 h-7 rounded-xl flex items-center justify-center flex-shrink-0 text-xs font-bold mt-0.5" style="background:var(--gold-light); color:#92742a;">
                        {{ $i + 1 }}
                    </div>
                    <p class="text-sm font-medium leading-relaxed" style="color:var(--navy);">{!! nl2br(e($question->question)) !!}</p>
                </div>

                @if($question->type === 'multiple_choice')
                <div class="space-y-2 ml-10">
                    @foreach($question->options as $key => $option)
                    <label class="option-label" data-question="{{ $question->id }}">
                        <input type="radio" name="answers[{{ $question->id }}]" value="{{ $key }}" class="quiz-radio accent-[#0f1e38] w-4 h-4 flex-shrink-0" data-question="{{ $question->id }}" style="display:none;">
                        <div class="w-5 h-5 rounded-full border-2 flex-shrink-0 radio-indicator" style="border-color:#d1d5db; display:flex; align-items:center; justify-content:center;">
                            <div class="w-2.5 h-2.5 rounded-full radio-dot" style="background:var(--navy); display:none;"></div>
                        </div>
                        <span class="text-sm" style="color:#374151;">{{ $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="quiz-textarea" data-question="{{ $question->id }}"></textarea>
                </div>

                @elseif($question->type === 'true_false')
                <div class="flex gap-2 ml-10">
                    @foreach(['true' => 'Benar', 'false' => 'Salah'] as $val => $label)
                    <label class="true-false-label" data-question="{{ $question->id }}" data-val="{{ $val }}">
                        <input type="radio" name="answers[{{ $question->id }}]" value="{{ $val }}" class="quiz-radio" data-question="{{ $question->id }}" style="display:none;">
                        <span>{{ $label }}</span>
                    </label>
                    @endforeach
                </div>
                @endif

            </div>
            @endforeach
        </div>

        {{-- Submit --}}
        <div class="flex items-center justify-between mt-8">
            <a href="{{ route('student.courses.show', $quiz->course) }}" class="text-sm font-medium hover:underline" style="color:var(--text-muted);">← Batalkan</a>
            <button type="submit" id="submit-btn" class="inline-flex items-center gap-2 text-sm font-semibold px-6 py-3 rounded-2xl text-white hover:opacity-90 transition" style="background:var(--navy);">
                <i class="fa fa-paper-plane text-xs"></i> Kumpulkan Jawaban
            </button>
        </div>
    </form>
</div>

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

    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;
    }

    // Custom radio UI
    document.querySelectorAll('.quiz-radio').forEach(input => {
        input.addEventListener('change', function () {
            const qid = this.dataset.question;
            answered.add(qid);

            // Reset all options for this question
            document.querySelectorAll(`.option-label[data-question="${qid}"]`).forEach(l => {
                l.classList.remove('selected');
                const dot = l.querySelector('.radio-dot');
                const ind = l.querySelector('.radio-indicator');
                if (dot) dot.style.display = 'none';
                if (ind) ind.style.borderColor = '#d1d5db';
            });
            document.querySelectorAll(`.true-false-label[data-question="${qid}"]`).forEach(l => l.classList.remove('selected'));

            // Highlight selected
            const lbl = this.closest('.option-label') || this.closest('.true-false-label');
            if (lbl) {
                lbl.classList.add('selected');
                const dot = lbl.querySelector('.radio-dot');
                const ind = lbl.querySelector('.radio-indicator');
                if (dot) dot.style.display = 'block';
                if (ind) ind.style.borderColor = 'var(--navy)';
            }
            updateProgress();
        });
    });

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

    @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 = String(Math.floor(seconds / 60)).padStart(2,'0');
        const s = String(seconds % 60).padStart(2,'0');
        timerEl.textContent = `${m}:${s}`;
        if (seconds <= 60) timerBox.classList.add('urgent');
        if (seconds <= 0) { clearInterval(interval); document.getElementById('quiz-form').submit(); }
    }, 1000);
    @endif

    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