@extends('layouts.student')
@section('title', 'Take Quiz')
@section('content')
    <x-page-head :title="$quiz->title" subtitle="Answer all questions" />
    @if($expiresAt)
        <x-panel style="margin-bottom:16px;" x-data="{ remaining: {{ max(0, $expiresAt->diffInSeconds(now())) }} }" x-init="setInterval(() => { if(remaining > 0) remaining--; else document.getElementById('quiz-form')?.submit(); }, 1000)">
            <strong>Time remaining:</strong> <span x-text="Math.floor(remaining/60)+':'+String(remaining%60).padStart(2,'0')">—</span>
        </x-panel>
    @endif
    <form id="quiz-form" method="POST" action="{{ route('student.quizzes.save', $quiz) }}">@csrf
        @foreach($quiz->questions as $index => $question)
            <x-panel style="margin-bottom:12px;">
                <p><strong>Q{{ $index + 1 }}.</strong> {{ $question->question_text }} <span style="color:var(--text3);">({{ $question->marks }} marks)</span></p>
                <input type="hidden" name="answers[{{ $index }}][question_id]" value="{{ $question->id }}">
                @if(in_array($question->question_type, ['multiple_choice', 'true_false']))
                    @foreach($question->options as $option)
                        <label style="display:block; padding:6px 0;">
                            <input type="radio" name="answers[{{ $index }}][option_id]" value="{{ $option->id }}" @checked(($answers->get($question->id)?->selected_option_id ?? null) == $option->id)>
                            {{ $option->option_text }}
                        </label>
                    @endforeach
                @else
                    <textarea class="input" name="answers[{{ $index }}][text_answer]" rows="3">{{ $answers->get($question->id)?->text_answer }}</textarea>
                @endif
            </x-panel>
        @endforeach
        <div style="display:flex; gap:10px;">
            <button type="submit" name="submit" value="0" class="btn btn-outline">Save Progress</button>
            <button type="submit" name="submit" value="1" class="btn btn-primary" onclick="return confirm('Submit quiz? You cannot change answers after submission.')">Submit Quiz</button>
        </div>
    </form>
@endsection