@extends('layouts.app')

@section('content')

    <div class="max-w-3xl mx-auto mt-10">

        <!-- Top Bar -->
        <div class="flex items-center justify-between mb-8">
            <button onclick="window.history.back()"
                class="inline-flex items-center gap-2 bg-gray-800 border border-gray-700 px-4 py-2 rounded-lg shadow-sm hover:bg-gray-700 text-gray-300 transition">
                ← Back
            </button>
        </div>

        <!-- Title -->
        <h1 class="text-2xl font-bold mb-8 text-white">
            {{ $entry->contest->title }}
        </h1>

        @if($errors->any())
            <div class="mb-6 p-4 bg-red-500 text-white rounded">
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('quiz.submit', $entry->id) }}">
            @csrf

            @foreach($questions as $index => $question)
                <div class="mb-6 bg-[#111827] border border-gray-800 p-5 rounded-xl shadow-md">

                    <p class="font-semibold mb-4 text-white">
                        Q{{ $index + 1 }}. {{ $question->question_text }}
                    </p>

                    <div class="grid grid-cols-2 gap-3">
                        @foreach($question->options as $option)

                            @php
                                $isMultiple = $question->question_type === 'multiple';
                            @endphp

                            <label class="flex items-center gap-3 cursor-pointer bg-gray-900 p-3 rounded-lg hover:bg-gray-800">

                                <input type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
                                    name="answers[{{ $question->id }}]{{ $isMultiple ? '[]' : '' }}" value="{{ $option->id }}"
                                    class="accent-red-600 w-4 h-4">

                                <span class="text-gray-300">
                                    {{ $option->option_text }}
                                </span>

                            </label>

                        @endforeach
                    </div>
                </div>
            @endforeach

            <button class="w-full bg-red-600 text-white py-3 rounded-lg">
                Submit Quiz
            </button>

        </form>

    </div>

@endsection