@extends('layouts.app')
@section('titlePage', 'Manage Page')

@section('content')
<script>
    document.getElementById("kts-6").classList.add("is-expanded");
    document.getElementById("ktss-6").classList.add("active","is-expanded");
</script>
<div class="page-wrapper">
   <!-- [ breadcrumb ] start -->
   <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
            <span class="main-content-title mg-b-0 mg-b-lg-1">Create Question Easy</span>
        </div>
        <div class="justify-content-center mt-2">
               <ul class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route_client_master('master.exams.question-bank.index') }}"><i class="feather icon-home"></i></a></li>
                  <li class="breadcrumb-item active">Create new Question Bank</li>
               </ul>
            </div>
         </div>
      
   <!-- [ breadcrumb ] end -->
   <!-- [ Main Content ] start -->
   <div class="row">
      <div class="col-sm-12">
         <div class="card" ng-controller="questionsController" ng-init="initAngData('');">
            <div class="card-header">
               <a href="{{ route_client_master('master.exams.question-bank.index') }}" class="btn btn-primary float-right">List</a>
            </div>
            <div class="card-body">
               @include('common.alert')
               <form name="formQuestionBank" method="GET" action="{{ route_client_master('master.exams.question-bank.create') }}">
                  <input type="hidden" name="slug" value="{{request()->get('slug')}}">
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="">Select Essay Test List</label>
                           <select id="test_link" name="test_link" class="form-control" onchange="testLinkChange(this)">
                              <option value="">Select Essay Test List</option>
                              @foreach ($testLists as $task_link => $task_name)
                                 <option value="{{$task_link}}">{{$task_name}}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="">Select Task Under a Essay Test</label>
                           <select id="task_link" name="task_link" class="form-control" onchange="taskLinkChange(this)">
                              <option value="">Select Essay Test List</option>
                           </select>
                        </div>
                     </div>
                     <div class="col-md-12">
                        <div class="form-group">
                           <h4>Test Timer</h4>
                           <div id="test-timer">
                              Pending...
                           </div>
                           <h4>Test Question</h4>
                           <div id="test-question">
                              Pending...
                           </div>
                           <h4>Test Image</h4>
                           <div id="test-image">
                              Pending...
                           </div>
                        </div>
                     </div>
                  </div>
                  <button 
                     type="submit" 
                     class="btn btn-info" 
                     id="btnSubmit" 
                     style="display: none">Visit the "<span class="task-name"></span>" based question creation page</button>
               </form>
            </div>
            {{-- /card-body --}}
         </div>
      </div>
   </div>
   <!-- [ Main Content ] end -->
</div>
@endsection
@push('script')
<script>
   function testLinkChange(e){
      if (e.value == "") {
         return;
      }
      return $.ajax({
         type: "GET",
         url: '{{route_client_master('master.exams.question-bank.ajax-essay-tasks')}}',
         data: {
            test_link : e.value,
         },
         success: function(response) {
            if (response && response.length > 0) {
               $('#task_link').html('');
               $(response).each(function(key, item){
                  var newOption = new Option(item.test_name+ ' '+ item.task_name, item.test_link);
                  // Append it to the select
                  $('#task_link').append(newOption);
               });
               $('#task_link').trigger('change');

               
            }
         },
         beforeSend: function() {
            $('#task_link').html(`<option value="">Loading...</option>`);
         },
      });
   }
   function taskLinkChange(e){
      if (e.value == "") {
         return;
      }
      return $.ajax({
         type: "GET",
         url: '{{route_client_master('master.exams.question-bank.ajax-essay-test-info')}}',
         data: {
            task_link : e.value,
         },
         success: function(response) {
            if (response.test_question) {
               $('#test-question').html(response.test_question);
               if (response.test_image != null) {
                  $('#test-image').html(`<img src="${response.test_image}" />`);
               }else{
                  $('#test-image').html('None');
               }
               
               $('#test-timer').html(response.test_timer);

               $('#btnSubmit').show();

               $('.task-name').html(response.test_name);
            }
         },
         beforeSend: function() {
            $('#btnSubmit').hide();
            $('#test-question').html('Loading...');
            $('#test-image').html('Loading...');
            $('#test-timer').html('Loading...');
         },
      });
   }
</script>
@endpush