@extends('layouts.app')
@section('content')
@if ($randomQuestion)
<div class="section" id="assessment">
    <div class="grid-container">
        <div class="container">
            <div class="question-container">
                <div id="progress" class="progress mt-8">
                    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <form action="{{ route('assessment.store') }}" method="POST">
                    @csrf
                    @foreach ($randomQuestion as $key => $question)
                    <div id="question{{ $key + 1 }}" class="question @if($key === 0) active @endif" style="display: {{ $key === 0 ? 'block' : 'none' }}">
                        <h4>{{ $question->question_text }}</h4>
                        <div class="radio-container wrapper">
                            @foreach ([1, 2, 3, 4, 5, 0] as $value)
                            <input type="radio" class="form-check-input" name="q{{ $key + 1 }}" id="q{{ $key + 1 }}Choice{{ $value }}" value="o{{ $value }}_m{{$question->pivot->id}}">
                            <label for="q{{ $key + 1 }}Choice{{ $value }}" class="option q{{ $key + 1 }}Choice{{ $value }}">
                                <div class="dot"></div>
                                <span>
                                    @if ($value == 0)
                                    No Response
                                    @else
                                    {{ ($value == 1) ? 'Extremely Unlikely' : (($value == 2) ? 'Unlikely' : (($value == 3) ? 'Neutral' : (($value == 4) ? 'Likely' : 'Extremely Likely'))) }}
                                    @endif
                                </span>
                            </label>
                            @endforeach
                        </div>
                        @if(count($randomQuestion) == 1)
                        <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
                        @else
                        @if($key === 0)
                        <button type="button" id="next{{ $key + 1 }}" class="btn btn-primary btn-lg">Next</button>
                        @elseif($key === count($randomQuestion) - 1)
                        <button type="button" id="prev{{ $key + 1 }}" class="btn btn-secondary btn-lg">Previous</button>
                        <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
                        @else
                        <button type="button" id="prev{{ $key + 1 }}" class="btn btn-secondary btn-lg">Previous</button>
                        <button type="button" id="next{{ $key + 1 }}" class="btn btn-primary btn-lg">Next</button>
                        @endif
                        @endif

                        <input type="hidden" name="responses[q{{ $key + 1 }}]" id="response_q{{ $key + 1 }}">
                    </div>
                    @endforeach
                </form>

            </div>
        </div>
    </div>
    @else
    <p>No questions found for the specified attribute.</p>
    @endif
    @endsection