@extends('layouts.master')
 @section('content')
     <style>
         .form-switch .form-check-input:checked {
             border-color: #08441d;
             background-color: #1d8943;
         }
         input[type="file"]::file-selector-button {
  border: 2px solid #a6f0aa;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #bce3be;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #1d8943;
  border: 2px solid #1d8943;
}
     </style>
     @if ($message = Session::get('success'))
              <div class="alert alert-success" role="alert">{{ $message }}</div>
     @elseif ($message = Session::get('error'))
     <div class="alert alert-danger" role="alert">{{ $message }}</div>
     @endif
     @if ($errors->any())
         <div class="alert alert-danger">
             <ul>
                 @foreach ($errors->all() as $error)
                     <li>{{ $error }}</li>
                 @endforeach
             </ul>
         </div>
     @endif
     
     
     <div class="container-fluid py-4">
         <div class="row">
             <div class="col-12">
                 {!! Form::open([
                     'route' => ['manageQuestion.update', $quiz->quiz_id],
                     'method' => 'POST',
                     'class' => 'multisteps-form__form ',
                     'files' => true,
                     'enctype' => 'multipart/form-data',
                 ]) !!}
                 @csrf
                 @method('PUT')
                 <div class="card">
                     <div class="card-header pb-0">
                         <div class="d-flex">
                                 <h5 class="mb-0">EDIT</h5>
                             <p class="text-sm text-secondary ms-auto me-3 my-auto">Status</p>
                             <div class="form-check form-switch my-auto">
                                 <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"
                                     name="quiz_status" {{ $quiz->status == 1 ? 'checked' : '' }}>
                             </div>
                         </div>

                     </div>

                     <div class="card-body">
                         <div class="row align-items-center mt-3">

                             <div class="col">
                                 <div class="input-group input-group-static">
                                     <label class="text-xs font-weight-bold mb-0">Quiz Name:</label>
                                     <input class="form-control" name="quiz_name" style="margin: 0px"
                                         value="{{ $quiz->quiz_name }}" />
                                 </div>
                             </div>
                             <div class="col">
                                 <div class="input-group input-group-static">
                                     <label class="text-xs font-weight-bold mb-0">Category:</label>
                                     <select class="form-control" name="category" id='category_id'>
                                         <option value="">Select</option>
                                         @foreach ($category as $cat)
                                             <option value="{{ $cat->id }}"
                                                 {{ $quiz->category_id == $cat->id ? 'selected' : '' }}>
                                                 {{ $cat->name }}
                                             </option>
                                         @endforeach
                                     </select>
                                 </div>
                             </div>
                             <div class="col">
                                 <div class="input-group input-group-static">
                                     <label class="text-xs font-weight-bold mb-0">Level:</label>
                                     <select class="form-control" name="level" id="level-dropdown">
                                         <option value="">Select</option>
                                         @foreach ($levels as $level)
                                             <option value="{{ $level->level_id }}"
                                                 {{ $quiz->level_id == $level->level_id ? 'selected' : '' }}>
                                                 {{ $level->level_name }}</option>
                                         @endforeach
                                     </select>
                                 </div>
                             </div>
                             @php
                             $topics = App\Models\Topic::where('cat_id', $quiz->category_id)
                             ->where('level_id', $quiz->level_id)
                             ->get();                            
                             @endphp
                             <div class="col">
                                 <div class="input-group input-group-static">
                                     <label class="text-xs font-weight-bold mb-0">Topic:</label>
                                     <select class="form-control" name="topic" id="topic-dropdown">
                                         <option value="">Select</option>
                                         @foreach ($topics as $topic)
                                             <option value="{{ $topic->id }}"
                                                 {{ $quiz->topic_id == $topic->id ? 'selected' : '' }}>
                                                 {{ $topic->topic_name }}
                                             </option>
                                         @endforeach
                                     </select>
                                 </div>
                             </div>
                              <div class="col">
                                 <div class="input-group input-group-static">
                                     <label class="text-xs font-weight-bold mb-0">Quiz Video:</label>
                                      <input class="form-control"  type="file" accept="image/png, application/pdf" name="quiz_video" />
                                 </div>
                             </div>
                         </div>
                         <div class="row mt-4" style="justify-content: end;">
                             <div class="col-lg-2">
                                 <button class="btn bg-gradient-primary mb-0 mt-lg-auto w-100" type="submit"
                                     name="button">Update Quiz</button>
                             </div>
                         </div>
                         {!! Form::close() !!}
                     </div>
                 </div>
                 <div class="card my-4">
                     <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>
                                                         </p>
                                                     </td>
                                                     <td class="align-middle">
                                                         <div class="d-flex " style="justify-content: 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">drive_file_rename_outline</i>
                                                            </button>
                                                            <!--model-->
                                                            <div class="modal fade" id="modal-question{{$question->question_id}}" tabindex="-1" role="dialog" aria-labelledby="modal-question" aria-hidden="true">
                                                                 
                                                                {!! Form::open([
                                                                             'route' => ['update.question', $question->question_id,$question->quiz_id],
                                                                             'method' => 'POST',
                                                                             'class' => 'multisteps-form__form ',
                                                                             'files' => true,
                                                                             'enctype' => 'multipart/form-data',
                                                                         ]) !!}
                                                                    @csrf
                                                                    @method('POST')
                                                                         
                                                                <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></h6>
                                                                           <div class="input-group input-group-static">
                                                                             <input class="form-control" name="edit_question" style="margin: 0px"
                                                                                 value="{{$question->question}}" />
                                                                           </div>
                                                                          <br>
                                                                          <b>Options:</b>
                                                                          <button class="addOption" type="button" style="background: transparent;border: none;float: right;color: #045b2b;font-size:12px;">add options</button>
                                                                        @if ($question->QuestionOption->count() > 0)
                                                                             @foreach ($question->QuestionOption as $option)
                                                                                 <div class="input-group input-group-static">
                                                                                    <input class="form-control" name="edit_option[]" style="margin: 0px"
                                                                                         value="{{$option->option_description}}" />
                                                                                 </div>
                                                                            @endforeach
                                                                        @else<br>
                                                                         <span class="text-sm me-2" class="option_avail_msg">No Option Available</span>
                                                                        @endif
                                                                        <div class="new_option"></div>
                                                                        <input type="hidden" value="1" class="total_option">
                                                                       <br>
                                                                        <b>Answer:</b>
                                                                        <button class="addAnswer" type="button" style="background: transparent;border: none;float: right;color: #045b2b;font-size:12px;">add answer</button>
                                                                         @if(!empty($question->QuestionAnswer->count() > 0))
                                                                            @foreach ($question->QuestionAnswer as $ans)
                                                                                <div class="input-group input-group-static">
                                                                                    <input class="form-control" name="edit_answer[]" style="margin: 0px"
                                                                                         value="{{$ans->answer_description}}" />
                                                                                 </div>
                                                                            @endforeach
                                                                         @else<br>
                                                                          <span class="text-sm me-2" class="ans_avail_msg">No Answer Available</span>
                                                                         @endif
                                                                         <div class="new_ans"></div>
                                                                         <input type="hidden" value="1" class="total_ans">
                                                                            
                                                                    </div>
                                                                    
                                                                    <div class="modal-footer">
                                                                        <button class="btn bg-gradient-primary mb-0 mt-lg-auto w-100" type="submit"
                                                                            name="button">Update Question</button>                                                                    </div>
                                                                    </div>
                                                                </div>
                                                                {!! Form::close() !!}
                                                            </div> 
                                                            
                                                            
                                                              {!! Form::open(['method'=>'DELETE',
                                                              'route' => ['deleteQuestion', $question->question_id,$question->quiz_id],'class'=>'form-horizontal',
                                                                'onsubmit' => 'return confirm("Are You Sure to delete this question?")'])!!}

                                                                <button style="background: transparent;border: none;" type="submit" title="Delete Quiz Question"> <i
                                                                     class="material-icons text-secondary position-relative text-lg">delete</i></button>

                                                              {!! Form::close() !!}
                                                            </div>
                                                     </td>
                                                 </tr>
                                             @endforeach

                                         </tbody>
                                     </table>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
         
<script>
 $('.addAnswer').on('click', function () {
     
      var new_chq_no = parseInt($('.total_ans').val()) + 1;
      var new_input  = '<div class="input-group input-group-static">'; 
         new_input += '<input class="form-control" name="edit_answer[]" style="margin: 0px"/>';
         new_input += '</div>';
                                                                              
      $('.new_ans').append(new_input);
      $('.total_ans').val(new_chq_no);
      $('.ans_avail_msg').hide();
 });
  $('.addOption').on('click', function () {
      console.log("its working");
      var new_chq_no = parseInt($('.total_option').val()) + 1;
 
      var new_input  = '<div class="input-group input-group-static">'; 
         new_input += '<input class="form-control" name="edit_option[]" style="margin: 0px"/>';
         new_input += '</div>';
                                                                              
      $('.new_option').append(new_input);
      $('.total_option').val(new_chq_no);
      $('.option_avail_msg').hide();
 });
 
</script>


 <script>
          $(document).ready(function () {
  
            /*------------------------------------------
            --------------------------------------------
            category Dropdown Change Event
            --------------------------------------------
            --------------------------------------------*/
            $('#level-dropdown').on('change', function () {
                var level_id= this.value;
                var category_id=$('#category_id').val();
              

                // $("#topic-dropdown").html('');
                $.ajax({
                    url: "{{url('/topics/')}}/"+level_id,
                    type: "GET",
                    dataType: 'json',
                    data:{category_id:category_id},
                    success: function (result) {
                        console.log(result);
                        $('#topic-dropdown').html('<option value=""> Select</option>');
                        $.each(result.response, function (key, value) {
                            $("#topic-dropdown").append('<option value="' + value
                                .id + '">' + value.topic_name + '</option>');
                        });
                    }
                });
            });
          });
      

      
    </script>

    @endsection