@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>
            Edit Questions and Exam Details

            <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>

      @include ('Layouts.FormValidationErrors')
      @include ('Layouts.ErrorSuccessAndWarninMessages')

      <form class="form-horizontal" method="post" action="{{ route('LoggedIn.Task.OnlineExam.Update', ['id' => $onlineExam->id]) }}" enctype="multipart/form-data">
        @csrf
        {{ method_field('put') }}
        <input type='hidden' name="online_exam_id" value="{{ $onlineExam->id }}" />

        <div class="form-group form-group-sm">
          @include (
            'includes.branch_names_for_filter_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->branch_id]
          )

          @include (
            'includes.branch_shift_version_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->institute_branch_version_id]
          )

          @include (
            'includes.class_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->class_id]
          )

          @include (
            'includes.group_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->group_id]
          )

          @include (
            'includes.section_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->section_id]
          )

          @include (
            'includes.subject_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->subject_id]
          )

          @include (
            'includes.academic_years_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->academic_year_id, 'value' => 'id']
          )

          @include (
            'includes.exam_type_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->exam_type_id]
          )

          @include (
            'includes.exam_head_names_block_column',
            ['fieldColWidth' => 4, 'required' => true, 'storedData' => $onlineExam->exam_head_id]
          )

          <div class="col-sm-4">
            <input type="checkbox" name="apply_for_all_section" id="apply_for_all_section"
              style="margin-top: 30px; margin-left: 15px;"
              {{ !$onlineExam->section_id ? "checked" : "" }}
            />
            <label for="apply_for_all_section" style="user-select: none;">Save for all Section</label>
          </div>
        </div>

        <div class="form-group form-group-sm">
          <div class="col-sm-4">
            <label>Per Question Marks</label>
            <input type="text" class="form-control" name="per_question_marks" required
              autocomplete="off" value="{{ $onlineExam->per_question_mark }}"
            />
          </div>

          <div class="col-sm-4">
            <label class="text-danger">Number of Questions</label>
            <input type="text" class="form-control" name="number_of_question_for_exam"
              required autocomplete="off" value="{{ $onlineExam->number_of_question_for_exam }}"
            />
          </div>

          <div class="col-sm-4">
            <label class="control-label text-danger">Full Marks </label>
            <input type="number" class="form-control" name="marks" required autocomplete="off" value="{{ $onlineExam->marks }}">
          </div>
        </div>

        <div class="form-group form-group-sm">
          <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="{{ date('Y-m-d', strtotime($onlineExam->exam_date_and_time)) }}"
            />
          </div>

          <div class="col-sm-4">
            <label class="text-danger">Exam Time </label>
            <input type="text" class="form-control" name="exam_time" id="exam_time"
              required autocomplete="off" value="{{ date('h:i a', strtotime($onlineExam->exam_date_and_time)) }}"
            />
          </div>

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

        <div class="form-group form-group-sm">
          <div class="col-sm-12">
            <label>Title</label>
            <input type="text" class="form-control" name="title" autocomplete="off" value="{{ $onlineExam->title }}">
          </div>
          <div class="col-sm-12">
            <label>Description</label>
            <textarea class="form-control description" name="description" id="description">{!! $onlineExam->description !!}</textarea>
          </div>
        </div>

        <div class="form-group form-group-sm" id="addQuestion">
          @if (!empty($onlineExam->questions))
            @foreach ($onlineExam->questions as $key => $question)
              <input type="hidden" name="initialQuestionIds[]" value="{{ $question->id }}">
              <div class='row questionRow' style="margin: 10px 0;">
                <div class='col-lg-10 col-md-10 col-sm-10 col-xs-9 questionDiv'>
                  <div class="row">
                    <input type="hidden" name="updatedQuestionIds[]" value="{{ $question->id }}">
                    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
                      <input type='hidden' name="updateQuestions[{{ $key }}][question_id]" value="{{ $question->id }}" />
                      <label style="color: blue;">Question {{ $key + 1 }}:</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 questions' id="question_{{ $key }}" name="updateQuestions[{{ $key }}][question]">
                        {{ $question->question }}
                      </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 options' id="question_{{ $key }}_option_1" name="updateQuestions[{{ $key }}][option_1]">
                        {{ $question->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 options' id="question_{{ $key }}_option_2" name="updateQuestions[{{ $key }}][option_2]">
                        {{ $question->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 options' id="question_{{ $key }}_option_3" name="updateQuestions[{{ $key }}][option_3]">
                        {{ $question->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 options' id="question_{{ $key }}_option_4" name="updateQuestions[{{ $key }}][option_4]">
                        {{ $question->option_4 }}
                      </textarea>
                    </div>
                    <div class='col-lg-4 col-md-4 col-sm-6 col-xs-10' style="margin-top: 5px;">
                      <label>Answer:</label>
                      <select class='form-control questionAnswer' name="updateQuestions[{{ $key }}][answer]">
                        <option value="">Select answer</option>
                        <option value='1' {{ $question->answer == 1 ? "selected" : "" }}>Option 1</option>
                        <option value='2' {{ $question->answer == 2 ? "selected" : "" }}>Option 2</option>
                        <option value='3' {{ $question->answer == 3 ? "selected" : "" }}>Option 3</option>
                        <option value='4' {{ $question->answer == 4 ? "selected" : "" }}>Option 4</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class='col-lg-2 col-md-2 col-sm-12 btnDiv' style='margin-top: 5px;'>
                  <button type='button' class='btn btn-danger removeQuestionRow' style='margin-top: 10px;'>Remove</button>
                </div>
              </div>
              <hr>
            @endforeach
          @endif
        </div>

        <div class="form-group">
          <div class="col-sm-12">
            <button type="button" class="btn btn-success addQuestionBtn">Add Question</button>
          </div>
        </div>

        <div class="col-sm-12">
          <button type="submit" class="btn btn-block btn-primary">Update Questions</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript">
$(function () {
  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: [ 'Table', "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"
  });

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

    CKEDITOR.replace(editorId, {
      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';

  $('#addQuestion').on('click', '.removeQuestionRow', function() {
    $(this).parent().parent().remove();
  });

  $('.datepicker').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
    todayHighlight: true
  });

  $('#exam_time').timepicker({
    'timeFormat':'hh:mm a'
  });

  var i = 0;
  $('.addQuestionBtn').on('click', function() {
    i++;

    $('#addQuestion').append("<div class='row questionRow' style='margin: 10px 0;'>\
    <div class='col-lg-10 col-md-10 col-sm-12 questionDiv'>\
    <div class='row'>\
    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>\
    <label style='color: blue;'>Question " + i + ":</label>\
    <textarea class='form-control new_question' id='question_" + i + "' name='updateQuestions[" + i + "][question]'></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 new_options_" + i + "' id='question_" + i + "_option_1' name='updateQuestions[" + i + "][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 new_options_" + i + "' id='question_" + i + "_option_2' name='updateQuestions[" + i + "][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 new_options_" + i + "' id='question_" + i + "_option_3' name='updateQuestions[" + i + "][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 new_options_" + i + "' id='question_" + i + "_option_4' name='updateQuestions[" + i + "][option_4]'></textarea>\
    </div>\
    <div class='col-lg-4 col-md-4 col-sm-6 col-xs-10' style='margin-top: 5px;'>\
    <label>Answer:</label>\
    <select class='form-control questionAnswer' name='updateQuestions[" + i + "][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>\
    <div class='col-lg-2 col-md-2 col-sm-12 btnDiv' style='margin-top: 5px;'>\
    <button type='button' class='btn btn-danger removeQuestionRow' style='margin-top: 10px;'>Remove</button>\
    </div>\
    </div><hr>");

    CKEDITOR.replace("question_" + i, {
      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: [ 'Table', '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",
    });

    $(".new_options_" + i).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: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Undo', 'Redo' ] },
          { name: 'editing', items: [ 'SelectAll' ] },
          { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', "Image" ] },
          { name: 'paragraph', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
          { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
          { name: 'insert', items: [ 'Image' ] },
          { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Mathjax'  ] }
        ],
        height: '70px'
      });
    });
  });
});
</script>

@endsection