@extends('layouts.master')
 <style>
 .modal-content {
    width: auto !important;
}
 </style>
 @section('content')
     <div class="container-fluid py-4">
         <div class="row">
             <div class="col-12">
                 <div class="card my-4">

                     <div class="card">
                         <div class="card-header pb-0">
                             <div class="d-flex">
                                 <h5 class="mb-0">{{$quiz->quiz_name}}</h5>
                             </div>
                             <div class="row align-items-center mt-3">
                                    <div class="col">
                                    <p class="text-xs font-weight-bold mb-0">Topic:</p>
                                    <h6 class="text-sm font-weight-normal mb-0">{{$quiz->topic_name}}</h6>
                                    </div>
                                    <div class="col">
                                    <p class="text-xs font-weight-bold mb-0">Category:</p>
                                    <h6 class="text-sm font-weight-normal mb-0">{{$quiz->category_name}}</h6>
                                    </div>
                                    <div class="col ">
                                    <p class="text-xs font-weight-bold mb-0">Level:</p>
                                    <h6 class="text-sm font-weight-normal mb-0">{{$quiz->level_name}}</h6>
                                    </div>
                                    <div class="col ">
                                    <p class="text-xs font-weight-bold mb-0">Created On</p>
                                    <h6 class="text-sm font-weight-normal mb-0">{{$quiz->created_at}}</h6>
                                    </div>
                                     <div class="col text-center">
                                    <p class="text-xs font-weight-bold mb-0">Quiz Video</p>
                                    <a href="{{ asset('uploads\quiz_video/'.$quiz->video . '/') }}" target="_blank">
                                        <img src="{{ asset('assets\img/icons8-video-48.png')}}" alt="Country flag"></a>
                                    </div>
                                </div>
                         </div>
                           <hr class="horizontal dark mt-5 mb-1">
                         <div class="row mt-4">
                             <div class="col-12">
                                 <div class="card-header pb-0">
                                     <h6>Questions</h6>
                                 </div>
                                 <div class="card-body px-0 pt-0 pb-2">
                                     <div class="table-responsive p-0">
                                         <table class="table align-items-center mb-0">
                                             <thead>
                                                 <tr>
                                                     <th
                                                         class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                         Question</th>
                                                     <th
                                                         class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                         Type</th>
                                                     <th
                                                         class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                         Action</th>
                                                 </tr>
                                             </thead>
                                             <tbody>
                                               
                                                @foreach ($quiz->QuizQuestions as $question)
                                                  <tr>
                                                     <td>
                                                         <div class="d-flex px-3 py-1">
                                                                 <h6 class="mb-0 text-sm">{{$question->question}}</h6>
                                                         </div>
                                                     </td>
                                                     <td>
                                                         <p class="text-sm font-weight-normal mb-0">
                                                            {{($question->question_type == 1 ? 'MCQS' :  ($question->question_type == 2 ? 'True/False' :
                                                            ($question->question_type == 3 ? 'Blanks'  : '')))}}</p>
                                                     </td>
                                                     <td class="align-middle">
                                                         <div class="d-flex px-3 py-1 justify-content-center align-items-center">
                                                            <button style="background: transparent;border: none;" type="button"
                                                              title="View Detail" data-bs-toggle="modal" data-bs-target="#modal-question{{$question->question_id}}">
                                                              <i class="material-icons text-secondary position-relative text-lg">visibility</i>
                                                            </button>
                                                            <!--model-->
                                                            <div class="modal fade" id="modal-question{{$question->question_id}}" tabindex="-1" role="dialog" aria-labelledby="modal-question" aria-hidden="true">
                                                                <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
                                                                    <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">×</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                         <h6 class="modal-title font-weight-normal" id="modal-title-question">
                                                                            <b>Question:</b>{{$question->question}}</h6><br>
                                                                        @if ($question->QuestionOption)
                                                                             @foreach ($question->QuestionOption as $option)
                                                                             <li>{{$option->option_description}}</li>
                                                                        @endforeach
                                                                        @endif
                                                                       <br>
                                                                          @if ($question->QuestionAnswer)
                                                                         @foreach ($question->QuestionAnswer as $ans)
                                                                               <b>Answer:{{$ans->answer_description}}</b>
                                                                        @endforeach
                                                                         @endif
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-link  ml-auto" data-bs-dismiss="modal">Close</button>
                                                                    </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                         </div>
                                                     </td>
                                                 </tr>
                                                @endforeach

                                             </tbody>
                                         </table>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             @endsection