@extends ('Layouts.Application')

@section ('MainContent')

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="{{ asset('rsrc/bower_components/ckeditor/ckeditor.js') }}"></script>

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h6 class="panel-title">
          <strong>
            Create Questions

            <a class="btn btn-warning btn-xs pull-right" href="{{ route('LoggedIn.Task.OnlineExam.Index') }}">
              <i class="fa fa-chevron-left"></i> Go Back
            </a>
          </strong>
        </h6>
      </div>
      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

        <form class="form-horizontal" method="post" action="{{ route('LoggedIn.Task.OnlineExam.store') }}" enctype="multipart/form-data">
          @csrf

          <div class="form-group form-group-sm">
            @include (
              'includes.branch_shift_version_names_block_column',
              ['fieldColWidth' => 4, 'required' => true, 'showBranchField' => true]
            )

            @include ('includes.class_names_block_column', ['fieldColWidth' => 4, 'required' => true])

            @include ('includes.group_names_block_column', ['fieldColWidth' => 4, 'required' => true])

            @include ('includes.section_names_block_column', ['fieldColWidth' => 4])

            @include ('includes.subject_names_block_column', ['fieldColWidth' => 4, 'required' => true])

            @include (
              'includes.academic_years_block_column',
              ['fieldColWidth' => 4, 'required' => true, 'value' => 'id']
            )

            @include ('includes.exam_type_names_block_column', ['fieldColWidth' => 4, 'required' => true])

            @include ('includes.exam_head_names_block_column', ['fieldColWidth' => 4, 'required' => true])
          </div>
          <div class="form-group form-group-sm">
            <div class="col-sm-4">
              <label class="control-label text-danger">Full Marks </label>
              <input type="number" value="30" class="form-control" name="marks" required autocomplete="off" value="{{ old('marks') }}">
            </div>

            <div class="col-sm-4">
              <label class="text-danger">Per Question Marks </label>
              <input type="text" class="form-control" value="1" name="per_question_marks" required autocomplete="off"  value="{{ old('per_question_mark') }}">
            </div>

            <div class="col-sm-4">
              <label class="text-danger">Number of questions for exam </label>
              <input type="text" class="form-control" value="30" name="number_of_question_for_exam"
                required autocomplete="off"  value="{{ old('number_of_question_for_exam') }}"
              />
            </div>

            <div class="col-sm-4">
              <label class="text-danger">Exam Date </label>
              <input type="text" class="form-control datepicker" name="exam_date" required autocomplete="off" value="{{ old('exam_date') }}">
            </div>

            <div class="col-sm-4">
              <label class="text-danger">Exam Time </label>
              <input  type="text" class="form-control" id="exam_time" name="exam_time"
                value="10" required autocomplete="off"  value="{{ old('exam_time') }}"
              />
            </div>

            <div class="col-sm-4">
              <label class="text-danger">Exam Duration (In Minutes)</label>
              <input type="text" class="form-control" value="30" name="exam_duration" required autocomplete="off"  value="{{ old('exam_duration') }}" />
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <label>Title</label>
              <input type="text" class="form-control" name="title"  value="{{ old('title') }}">
            </div>
            <div class="col-sm-12">
              <label>Description</label>
              <textarea class="form-control description" name="description" id="description" style="font-size:14px;" >{{ old('description') }}</textarea>
            </div>
          </div>
          <div class="form-group" style="margin: 10px 0;">
            <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
              <label style="color: blue;">Question:</label>
              <p class="external_links" style="margin: 0;">
                To generate equation use
                <a style="text-decoration: underline;" href="http://atomurl.net/math" target="_blank">this</a> link.
              </p>
              <textarea class='form-control question'  id="question" style="margin-bottom: 20px;"></textarea>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10' style="margin-top: 5px;">
              <label>Option 1:</label>
              <textarea class='form-control option_1 options' id="option_1"></textarea>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10' style="margin-top: 5px;">
              <label>Option 2:</label>
              <textarea class='form-control option_2 options' id="option_2"></textarea>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10' style="margin-top: 5px;">
              <label>Option 3:</label>
              <textarea class='form-control option_3 options' id="option_3"></textarea>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-xs-10' style="margin-top: 5px;">
              <label>Option 4:</label>
              <textarea class='form-control option_4 options' id="option_4"></textarea>
            </div>
            <div class='col-lg-4 col-md-4 col-sm-6 col-xs-10' style="margin-top: 5px;">
              <label style="color: green;">Answer:</label>
              <select class='form-control answer'>
                <option value="">Select answer</option>
                <option value='1'>Option 1</option>
                <option value='2'>Option 2</option>
                <option value='3'>Option 3</option>
                <option value='4'>Option 4</option>
              </select>
            </div>
          </div>

          <div class="form-group row">
            <div class="col-sm-2">
              <button type="button" class="btn btn-block btn-success addAndContinute">Add & Continute</button>
            </div>
            <div class="col-sm-2">
              <button type="button" class="btn btn-block btn-info viewQuestions">View</button>
            </div>
            <div class="col-sm-2">
              <p style="font-weight: bold;">Question Added: <span id="question_added">0</span></p>
            </div>
          </div>

          <div id="added_questions_from_cache"></div>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script type="text/javascript">
$(function () {
  $('.datepicker').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
    todayHighlight: true
  });

  $('#exam_time').timepicker({
    'timeFormat':'HH:mm'
  });
  var question_added = {{ $questionCount }};
  $("#question_added").html(question_added);
  var csrfToken = $('meta[name="_token"]').attr('content');

  CKEDITOR.replace("description", {
    filebrowserUploadUrl: "{{ route('LoggedIn.Task.OnlineExam.UploadImageForCkeditor', ['_token' => csrf_token() ]) }}",
    filebrowserBrowseUrl: "{{ route('LoggedIn.Task.OnlineExam.browseFileForCkeditor') }}",
    filebrowserUploadMethod: 'form',
    toolbar: [
      { name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord' ] },
      { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
      { name: 'paragraph', items: [  'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
      { name: 'insert', items: [ 'Image' ] },
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] },
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
    ],
    mathJaxLib: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML"
  });

  CKEDITOR.replace("question", {
    filebrowserUploadUrl: "{{ route('LoggedIn.Task.OnlineExam.UploadImageForCkeditor', ['_token' => csrf_token() ]) }}",
    filebrowserBrowseUrl: "{{ route('LoggedIn.Task.OnlineExam.browseFileForCkeditor') }}",
    filebrowserUploadMethod: 'form',
    toolbar: [
      { name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord' ] },
      { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike' ] },
      { name: 'paragraph', items: [  'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
      { name: 'insert', items: [ 'Image' ] },
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] },
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
    ],
    mathJaxLib: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML",
  });

  $(".options").each(function() {
    var editorId = $(this).attr('id');

    CKEDITOR.replace(editorId, {
      extraPlugins: 'mathjax',
      mathJaxLib: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML",
      filebrowserUploadUrl: "{{ route('LoggedIn.Task.OnlineExam.UploadImageForCkeditor', ['_token' => csrf_token() ]) }}",
      filebrowserBrowseUrl: "{{ route('LoggedIn.Task.OnlineExam.browseFileForCkeditor') }}",
      filebrowserUploadMethod: 'form',
      toolbar: [
        { name: 'clipboard', items: [ 'Paste', 'PasteText', 'PasteFromWord', 'Image'] },
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] }
      ],
      height: '70px'
    });
  });

  CKEDITOR.config.extraPlugins = 'mathjax';

  // storing questions to cache
  $(".addAndContinute").on('click', function() {
    var question = CKEDITOR.instances.question.getData();
    var option_1 = CKEDITOR.instances.option_1.getData();
    var option_2 = CKEDITOR.instances.option_2.getData();
    var option_3 = CKEDITOR.instances.option_3.getData();
    var option_4 = CKEDITOR.instances.option_4.getData();
    var answer = $(".answer").val();

    if (question && option_1 && option_2 && option_3 && option_4 && answer) {
      $.ajax({
        type: 'POST',
        url: baseURL + '/!/Task/OnlineExam/add_question_to_cache',
        data: { '_token': csrfToken, 'question': question, 'option_1': option_1, 'option_2': option_2, 'option_3': option_3, 'option_4': option_4, 'answer': answer },
      }).done(function(response) {
        if (response.status == 'success') {
          question_added++;
          $("#question_added").html(question_added);

          const Toast = Swal.mixin({
            toast: true,
            position: 'bottom-end',
            showConfirmButton: false,
            timer: 4000,
            timerProgressBar: true,
            onOpen: (toast) => {
              toast.addEventListener('mouseenter', Swal.stopTimer)
              toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
          });

          Toast.fire({
            icon: 'success',
            title: 'Question Added'
          });

          CKEDITOR.instances.question.setData('');
          CKEDITOR.instances.option_1.setData('');
          CKEDITOR.instances.option_2.setData('');
          CKEDITOR.instances.option_3.setData('');
          CKEDITOR.instances.option_4.setData('');
          $(".answer").val("");
        } else {
          Swal.fire({
            icon: 'error',
            title: 'Ops...',
            text: 'Somethign went wrong!',
          });
        }
      });
    } else {
      Swal.fire({
        icon: 'error',
        title: 'Warning',
        text: 'Please fill out all sections related to questions!',
      });
    }
  });

  // viewing cached quesitons
  $(".viewQuestions").on('click', function() {
    $.ajax({
      type: 'GET',
      url: baseURL + '/!/Task/OnlineExam/view_question_from_cache'
    }).done(function(response) {
      $("#added_questions_from_cache").html(response);
    });
  });

  // viewing cached quesitons
  $("#added_questions_from_cache").on('click', ".updateQuestionFromCache", function() {
    $.ajax({
      type: 'POST',
      url: baseURL + '/!/Task/OnlineExam/update_questions_to_cache',
      data: $("#add_question_form_data").serialize()
    }).done(function() {
      $("#added_questions_from_cache").html("");
    });
  });

  $('#added_questions_from_cache').on('click', '.removeQuestionRow', function() {
    $(this).closest('.questionRow').remove();

    question_added--;
    $("#question_added").html(question_added);
  });

  if (question_added) {
    Swal.fire({
      title: 'You have unsaved questions?',
      text: "Do you want to continue from where you left!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes'
    }).then((result) => {
      if (result.value) {
      } else if (result.dismiss == "cancel") {
        $.ajax({
          type: 'POST',
          url: baseURL + '/!/Task/OnlineExam/delete_question_from_cache',
          data: {'_token': csrfToken}
        }).done(function(response) {
          question_added = 0;
          $("#question_added").html("0");
        });
      } else {
      }
    })
  }
});
</script>

@endsection