@extends('index')

@section('content')
<div class="container" style="margin-top: -80px;">
    <form method="post" action="{{ route('quiz.submit') }}">
        @csrf

        <div class="card p-4 mb-3">
            <div class="progress mb-3" style="height: 6px;">
                <div class="progress-bar" style="width: {{ ($number / $total) * 100 }}%"></div>
            </div>
            <p class="fw-semibold mb-0">{{ $number }}. {{ $question['question'] }}</p>
        </div>

        @foreach($question['options'] as $i => $opt)
            <div class="card py-3 px-4 mb-2">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="option" id="opt{{ $i }}" value="{{ $i }}" required>
                    <label class="form-check-label" for="opt{{ $i }}">
                        {{ $opt }}
                    </label>
                </div>
            </div>
        @endforeach

        <div class="d-flex justify-content-between mt-3">
            <span>{{ $number }}/{{ $total }}</span>
            <button class="btn btn-success btn-sm">➜</button>
        </div>
    </form>
</div>
@endsection