@extends('layouts.app')
@section('content')
<!-- CONTENT -->
{{-- quiz-details --}}
<div class="content quiz" id="quiz-list">
    <div class="quiz-details">
        <div class="container">
            <form id="skoda-kviz" method="POST">
                @csrf
                <input type="hidden" name="id" value="{{$model->id}}">
                <div class="row">
                    <div class="col-md-12 text-center mb-5" id="quiz-title">
                        <h1>{{$model->title}}</h1>
                    </div>
                    <div class="col-md-12 text-center mb-5">
                        <div>{{$model->description}}</div>
                    </div>
                    <!-- TODO - progressbar transformation -->
                    <div class="col-md-12 progress-div">
                        <div class="num">
                            <div id="bar" class="progress-bar"></div>
                            <span>1</span> / {{count($model->content['question'])}}
                        </div>
                        {{-- <div id="bar" class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width:1%"></div> --}}
                    </div>

                    <div class="col-md-12">

                        @foreach($model->content['question'] as $key => $question)
                        <div data-id="{{$key}}" class="quiz-card @if($key == array_key_first($model->content['question'])) active  @endif">
                            <div class="col-md-6 text-center">
                                <h2>{{$question['text']}}</h2>
                            </div>
                            @foreach($question['answers'] as $key2 => $answer)
                            <div class="col-md-6">
                            <input type="radio" name="question[{{$key}}]" id="question[{{$key}}][{{$key2}}]" value="{{$key2}}" class="d-none"><label class="button-grey quiz-button width-100" for="question[{{$key}}][{{$key2}}]">{{$answer}}</label>
                            </div>
                            @endforeach
                        </div>
                        @endforeach

                        <div class="d-flex flex-wrap justify-content-center text-center" id="teszt-btns" style="display: none;">
                            <button class="button-grey mr-3" id="teszt-prev">Előző kérdés</button>
                            <button class="button-light-green" id="teszt-next">Következő</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    .quiz .quiz-details .quiz-card {
        display: none;
    }

    .quiz .quiz-details .quiz-card.active {
        display: flex;
    }

    #teszt-prev {
        display: none;
    }

    #quiz-result,
    #quiz-success {
        display: none;
    }

    .quiz input[type="radio"]:checked+label {
        background: #78FAAE;
        border: 2px solid #78FAAE;
        color: #161718;
    }
</style>

@endsection