@extends('layouts.app')

@section('content')
<div class="container mx-auto py-8">
    <div class="flex justify-between mb-4">
        <h1 class="text-xl font-bold">{{ $exam->title }}</h1>
        <div id="timer" class="text-red-600 font-bold">Time Left: <span id="countdown"></span></div>
    </div>

    <form action="{{ route('exam.submit', $exam->id) }}" method="POST">
        @csrf
        @foreach ($exam->questions as $index => $question)
            <div class="mb-6 border p-4 rounded shadow">
                <p class="font-semibold">{{ $index + 1 }}. {{ $question->question_text }}</p>
                @foreach ($question->answers as $answer)
                    <label class="block mt-2">
                        <input type="radio" name="answers[{{ $question->id }}]" value="{{ $answer->id }}" class="mr-2">
                        {{ $answer->answer_text }}
                    </label>
                @endforeach
            </div>
        @endforeach

        <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded">Submit Exam</button>
    </form>
</div>

<script>
    let totalSeconds = {{ $exam->time_limit_minutes * 60 }};
    let countdown = document.getElementById('countdown');

    setInterval(() => {
        const mins = Math.floor(totalSeconds / 60);
        const secs = totalSeconds % 60;
        countdown.textContent = `${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;
        if (totalSeconds === 0) {
            alert('Time is up! Submitting exam...');
            document.querySelector('form').submit();
        }
        totalSeconds--;
    }, 1000);
</script>
@endsection