@extends('user_dashboard.layouts.app')
@section('content')

 <style>
    .rbt-form-check label
    {
        padding: 23px;
        margin: 5px 0;
        display: block;
    }

    .rbt-form-check
    {
     display: flex;
    }

    input[type=radio]:checked ~ .form-check-label
    {
        color: #fff;
        background: #b99ae6;
        display: block;
        width: 100%;
        line-height: 0;
    }

    .rbt-form-check label p {
        line-height: 0;
    }

    input[type=checkbox] ~ label, input[type=radio] ~ label {
       line-height: 0;
    }

    input[type=checkbox] ~ label::after, input[type=radio] ~ label::after {
        top: 18px;
        left: 11px;
    }

    input[type=checkbox] ~ label::before, input[type=radio] ~ label::before {
        top: 15px;
        left: 8px;
    }

    input[type=checkbox] ~ label, input[type=radio] ~ label {
        padding-left: 30px;
    }

 </style>

    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="section-title">
                            <h3 class="rbt-title-style-style">{{$quiz->name}} Test</h3>
                        </div>
                        <form action="{{route('user.submit.quiz')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <input type="hidden" name="quiz_id" value="{{$given_quiz->id}}">
                                @foreach ($quiz->questions as $question)
                                    <div class="col-lg-12">
                                        <div class="filter-select rbt-modern-select">
                                            <label for="name" class="form-label"><b>{!!$question->questionBank->question!!}</b></label>
                                            <div class="rbt-form-check">
                                                <input class="form-check-input" type="radio" name="{{$question->questionBank->id}}" id="option_a_{{$question->questionBank->id}}" value="a" required>
                                                <label class="form-check-label" for="option_a_{{$question->questionBank->id}}">{!!$question->questionBank->option_a!!}</label>
                                                &nbsp;  &nbsp;
                                            </div>
                                            <div class="rbt-form-check">
                                                <input class="form-check-input" type="radio" name="{{$question->questionBank->id}}" id="option_b_{{$question->questionBank->id}}" value="b" required>
                                                <label class="form-check-label" for="option_b_{{$question->questionBank->id}}">{!!$question->questionBank->option_b!!}</label>
                                                &nbsp;  &nbsp;
                                            </div>
                                            <div class="rbt-form-check">
                                                <input class="form-check-input" type="radio" name="{{$question->questionBank->id}}" id="option_c_{{$question->questionBank->id}}" value="c" required>
                                                <label class="form-check-label" for="option_c_{{$question->questionBank->id}}">{!!$question->questionBank->option_c!!}</label>
                                                &nbsp;  &nbsp;
                                            </div>
                                            <div class="rbt-form-check">
                                                <input class="form-check-input" type="radio" name="{{$question->questionBank->id}}" id="option_d_{{$question->questionBank->id}}" value="d" required>
                                                <label class="form-check-label" for="option_d_{{$question->questionBank->id}}">{!!$question->questionBank->option_d!!}</label>
                                                &nbsp;  &nbsp;
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="col-md-12 mt-5">
                                    <button type="submit" class="rbt-btn btn-sm btn-gradient radius-round ">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection