{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<style>
  /* Absolute Center Spinner */
  .loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  /* Transparent Overlay */
  .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
  }

  /* :not(:required) hides these rules from IE9 and below */
  .loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }

  .loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  }

  /* Animation */

  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
</style>
<!--begin::Card-->
<div class="loading" id="show_loader" style="display: none;">Loading&#8230;</div>

<div class="card shadow-sm">
  <!--begin::Card header-->
  <div class="card-header card-header-tabs-line nav-tabs-line-3x">
    <!--begin::Toolbar-->
    <div class="card-toolbar">
      <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
        <!--begin::Item-->
        <li class="nav-item me-3">
          <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
            <span class="nav-text font-size-lg">Training and Questions</span>
          </a>
        </li>
        @if(!empty($data['id']))
        <li class="nav-item me-3">
          <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_3">
            <span class="nav-text font-size-lg">Files</span>
          </a>
        </li>
        @endif
      </ul>
    </div>
    <!--end::Toolbar-->
  </div>
  <!--end::Card header-->
  <!--begin::Card body-->
  <div class="card-body">

    <div class="tab-content">


      <!--begin::Tab-->
      <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
        <form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
          @if(!empty($data['id']))
          @method('PUT')
          @endif
          @csrf
          @include('backend.training.module.module_form')
          <hr>
          @include('backend.training.module.marks')
        </form>
      </div>


      @if(!empty($data['id']))
      <!--begin::Tab-->
      <div class="tab-pane show px-7" id="kt_user_edit_tab_3" role="tabpanel">
        <div class="form-group fv-row mb-7">
          <label class="col-form-label col-1 text-lg-right text-left"></label>
          <div class="col-9">
            <form action="{{ route('module.upload.files',$data['id']) }}" class="dropzone" id="my-awesome-dropzone">
              <input type="file" name="file" style="display: none;">
              <div class="dz-message" data-dz-message><span>Click or Drop files here to upload</span></div>
            </form>
            <small>Upload multiple files. Images, pdf and mp4 files are only allowed.</small>
            <ul id="file-upload-list" class="list-unstyled"></ul>
          </div>
        </div>
        <h3>Arrange Files Sequence</h3>
        <hr>
        <div class="row" id="module_files_list">
          @include('backend.training.module.list_files')
        </div>
      </div>
      <!--end::Tab-->
      @endif
    </div>
  </div>
  <!--begin::Card body-->
  <div class="card-footer text-right">
    <button type="button" id="saveForm" class="btn btn-primary me-2 btn-hover-rise">{{empty($data['id']) ? "Submit and Upload Files" : "Submit"}}</button>
    <a href="{{route('module.index',$training_category_id)}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
  </div>
</div>
<!--end::Card-->


@endsection

{{-- Scripts Section --}}
@push('custom-scripts')
<script type="text/javascript">
  /* $(document).ready(function() {
        // $('#manage_form').validate({
        //     ignore: [],
        //     invalidHandler: function(form, validator) {
        //         var errors = validator.numberOfInvalids();
        //         if (errors && errors == 1) {
        //             console.log(validator.errorList)
        //         }
        //         $(".tab-content").find('.tab-pane:not(.active) .text-danger:not([style*="display: none"]):first').each(function(index, tab) {
        //             var id = $(tab).parents('.tab-pane:first').attr("id");
        //             console.log(id)
        //             $('a[href="#' + id + '"]').tab('show');
        //         });
        //     }
        // });
    });*/

    $(document).ready(function(){
      $(document).on('change', '.training_rules', function(){
        showHideQuestions();
      })

      showHideQuestions();

    })
    function showHideQuestions(){
      var isQuestionnaire = $('.training_rules').find('option:selected').data('is_questionnaire') === 1;
      if(isQuestionnaire){
        $('.parent-row').removeClass('d-none').find('select, input, textarea').prop('disabled', false);
        $('#training_with_questionnaire').val(1);
      }else{
        $('.parent-row').addClass('d-none').find('select, input, textarea').prop('disabled', true);
        $('#training_with_questionnaire').val(0);
      }
    }
</script>
@endpush