@extends('layout.default')
@section('content')

@section('page_toolbar')
@endsection

<!--begin::Content-->
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="card card-custom">
    <div class="card-body">
         <form method="post" class="form" novalidate="novalidate"  id="quizform" name="kt_question_form" action="{{ url('teacher/savequiz') }}" enctype="multipart/form-data">
                {{ csrf_field() }}
    
                  <!-- Nav tabs -->
                 
                           <div class="row">
                                  <div class="form-group col-xl-12 col-lg-12">
                                    <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Choose Syllabus </label>
                                      <div class="col-lg-10 col-xl-10">
                                         {!! Form::select('syllabus_id', $syllabus , Session::get('syllabus_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select any Syllabus' , 'id' => 'syllabus_id']) !!}
                                      </div>
                                  </div>
                              </div>
                         <div class="row">
                          <div class="form-group col-xl-6 col-lg-6">
                            <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Curriculum </label>
                                    <div class="col-lg-8 col-xl-8" id="curriculum_blck">
                                       {!! Form::select('curriculum_id', $curriculum , ($question)? $question->curriculum_id: Session::get('curriculum_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select curriculum','id' => 'curriculum_id']) !!}
                                    </div>
                      </div>  
                      <div class="form-group col-xl-6 col-lg-6">
                    
                              <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Year</label>
                              <div class="col-lg-8 col-xl-8" id="year_blck">
                                 {!! Form::select('year_id', $years , ($question)? $question->year_id: Session::get('year_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Year','id' => 'year_id']) !!}
                              </div>
                          </div> 


                      </div>

                       <div class="row">
                           <div class="form-group col-xl-6 col-lg-6">
                                  <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Subject</label>
                                  <div class="col-lg-8 col-xl-8"  id="subject_blck">
                                     {!! Form::select('subject_id', $subjects , ($question)? $question->subject_id: Session::get('subject_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Subject','id' => 'subject_id']) !!}
                                  </div>
                               </div>
                                <div class="form-group col-xl-6 col-lg-6">
                                    <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Topic</label>
                                    <div class="col-lg-8 col-xl-8" id="topic_blck">
                                       {!! Form::select('topic_id', $topics , ($question)? $question->topic_id: Session::get('topic_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Topic','id' => 'topic_id']) !!}
                                    </div>
                            </div>
                          
                      </div>

                        <div class="row">
                     
                          
                        </div>
                        <div class="row">
                           <div class="form-group col-xl-6 col-lg-6">
                                      <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Chapter</label>
                                      <div class="col-lg-8 col-xl-8" id="chapter_blck">
                                         {!! Form::select('chapter_id', $chapters , ($question)? $question->chapter_id: Session::get('chapter_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select chapter','id' => 'chapter_id']) !!}
                                      </div>
                            </div>
                            <div class="form-group col-xl-6 col-lg-6">
                                      <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Unit</label>
                                      <div class="col-lg-8 col-xl-8" id="unit_blck">
                                         {!! Form::select('unit_id', $units , ($question)? $question->unit_id: Session::get('unit_id'), ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Unit','id' => 'unit_id']) !!}
                                      </div>
                            </div>  


                      </div>
                      <div class="row">
                            <div class="form-group col-xl-6 col-lg-6">
                                <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Quiz Name</label>
                                <div class="col-lg-8 col-xl-8">
                                    <input type="text" name="test_name" id="test_name" class="form-control">
                                </div>
                            </div>
                            <div class="form-group col-xl-6 col-lg-6">
                                <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Add a message for your test</label>
                                <div class="col-lg-8 col-xl-8">
                                    <textarea name="test_message" id="test_message" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>    
                        <div class="row">
                            <div class="form-group col-xl-6 col-lg-6">
                                <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Set a Start Date</label>
                                <div class='col-lg-4 col-xl-6 input-group date' id='startdate'>
                                <input type='text' name="start_date" class="form-control" />
                                <div class="input-group-append">
									<span class="input-group-text">
										<i class="la la-calendar"></i>
									</span>
								</div>
                            </div>
                            </div>
                            <div class="form-group col-xl-6 col-lg-6">
                                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Set a End Date</label>
                                <div class='col-lg-4 col-xl-6 input-group date' id='enddate'>
                                <input type='text' name="end_date" class="form-control" />
                                <div class="input-group-append">
									<span class="input-group-text">
										<i class="la la-calendar"></i>
									</span>
								</div>
                            </div>
                            </div>
                         </div>   
                         <div class="row"> 
                            <div class="form-group col-sm-10">
		                      <div class="col-lg-7">
		                        <label class="col-form-label font-weight-bolder">Randomize order question?</label>
		                      </div>
                               
                                <div class="radio-list">
	                                <label class="radio">
	                                    <input type="radio"  name="random_question" id="random_question" value="1">
	                                    <span></span>
	                                    No
	                                </label>
	                                <label class="radio">
	                                    <input type="radio" name="random_question" id="random_question_everyone" value="0">
	                                    <span></span>
	                                    For each student
	                                </label>
	                               
	                            </div>

                            </div>
                           

                        </div>
                        <div class="row"> 
                        	<div class="col-lg-9"> </div>
                        	<div class="col-sm-2 qstn-btn-wrapper pull-right">
		                      <button type="submit" class="btn btn-info btn-sm nextbtn">Next</button>
		                    </div>
                        </div>
                     
            </form>
    </div>
</div>

<!--end::Content-->
@endsection
@section('styles')
<link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>


<script type="text/javascript">
// Wait for the DOM to be ready

$(document).ready(function () {
  $(document).on('change', '#syllabus_id', function () {
      var syllabus_id = $("#syllabus_id").val();
      $.ajax({
           url: "{{ url('common/setSyllabus') }}/"+syllabus_id,
           type: "GET",
           dataType: "json"
       }).done(function (d) {
       
          if(!d.flagError){
            var data = d.data;
            console.log(data);
            $('#country_id').prop('selectedIndex',data.country_id);
            $('#curriculum_id').prop('selectedIndex',data.curriculum_id);
            $('#year_id').prop('selectedIndex',data.year_id);
            $('#subject_id').prop('selectedIndex',data.subject_id);
            $('#paper_id').prop('selectedIndex',data.paper_id);
            $('#chapter_id').prop('selectedIndex',data.chapter_id);
            $('#topic_id').prop('selectedIndex',data.topic_id);
            $('#unit_id').prop('selectedIndex',data.id); 
          }
        
       })
     });
  $(document).on('change', '#curriculum_id', function () {
    
         $('#year_id').prop('selectedIndex',0);
         $('#subject_id').prop('selectedIndex',0);

         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var tp = $("#topic_id").empty();
         tp.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');
  });

  $(document).on('change', '#year_id', function () {
      var country = $("#country_id").val();
      var curriculum = $("#curriculum_id").val();
      var subject = $("#subject_id").val();
      var year = $("#year_id").val();
      var token = "{{ csrf_token() }}";
        $.ajax({
             url: "{{ url('common/getTopics') }}",
             type: "POST",
             dataType: "html",
             data: { country:country,curriculum:curriculum,subject:subject,year:year,_token:token},
         }).done(function (data) {
           
           var ch = $("#chapter_id").empty();
           ch.append('<option value="0">Please Choose</option>');

           var tp = $("#topic_id").empty();
           tp.append('<option value="0">Please Choose</option>');

           var un = $("#unit_id").empty();
           un.append('<option value="0">Please Choose</option>');

           $("#topic_blck").html(data);
         })
   });

  $(document).on('change', '#subject_id', function () {
      var country = $("#country_id").val();
      var curriculum = $("#curriculum_id").val();
      var subject = $("#subject_id").val();
      var year = $("#year_id").val();
      var token = "{{ csrf_token() }}";
        $.ajax({
             url: "{{ url('common/getTopics') }}",
             type: "POST",
             dataType: "html",
             data: { country:country,curriculum:curriculum,subject:subject,year:year,_token:token},
         }).done(function (data) {
           
           var ch = $("#chapter_id").empty();
           ch.append('<option value="0">Please Choose</option>');

           var tp = $("#topic_id").empty();
           tp.append('<option value="0">Please Choose</option>');

           var un = $("#unit_id").empty();
           un.append('<option value="0">Please Choose</option>');

           $("#topic_blck").html(data);
         })
   });
       
   $(document).on('change', '#topic_id', function () {
      var country = $("#country_id").val();
      var curriculum = $("#curriculum_id").val();
      var subject = $("#subject_id").val();
      var year = $("#year_id").val();
      var topic = $(this).val();
      var token = "{{ csrf_token() }}";
        $.ajax({
             url: "{{ url('common/getChapters') }}",
             type: "POST",
             dataType: "html",
             data: { country:country,curriculum:curriculum,subject:subject,year:year,topic:topic,_token:token},
         }).done(function (data) {
        
           $("#chapter_blck").html(data);
           
           var ch = $("#chapter_id").empty();
           ch.append('<option value="0">Please Choose</option>');

           var un = $("#unit_id").empty();
           un.append('<option value="0">Please Choose</option>');

           $("#chapter_blck").html(data);
         })
   });

   $(document).on('change', '#chapter_id', function () {
      var country = $("#country_id").val();
      var curriculum = $("#curriculum_id").val();
      var subject = $("#subject_id").val();
      var year = $("#year_id").val();
      var topic = $("#topic_id").val();
      var chapter = $(this).val();
      var token = "{{ csrf_token() }}";
        $.ajax({
             url: "{{ url('common/getUnits') }}",
             type: "POST",
             dataType: "html",
             data: { country:country,curriculum:curriculum,subject:subject,year:year,topic:topic,chapter:chapter,_token:token},
         }).done(function (data) {
           
           var un = $("#unit_id").empty();
           un.append('<option value="0">Please Choose</option>');

           $("#unit_blck").html(data);
         })
   });

      $('#startdate').datepicker({
      format: 'dd-mm-yyyy',
      autoclose: true
    }).on('changeDate', function (selected) {
         var minDate = new Date(selected.date.valueOf());
         $('#enddate').datepicker('setStartDate', minDate);
     });

    $('#enddate').datepicker({
      format: 'dd-mm-yyyy',
      autoclose: true
    }).on('changeDate', function (selected) {
           var minDate = new Date(selected.date.valueOf());
           $('#startdate').datepicker('setEndDate', minDate);
      });


      document.addEventListener('DOMContentLoaded', function(e) {
        const curriculumValidators = {
            validators: {
                notEmpty: {
                    message: 'Please select curriculum'
                }
            }
        };

        const topicValidators = {
          validators: {
            notEmpty: {
                message: 'Please select topic'
            }
          }
        };

        const chapterValidators = {
          validators: {
            notEmpty: {
                message: 'Please select chapter'
            }
          }
        };


        const unitValidators = {
          validators: {
            notEmpty: {
                message: 'Please select unit'
            }
          }
        };
        

        const questionform = document.getElementById('quizform');
        const fv = FormValidation.formValidation(questionform, {
          fields: {
              test_message: {
                  validators: {
                      notEmpty: {
                          message: 'Please enter test message'
                      }
                  }
              },
              country_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select country'
                      }
                  }
              },
               'curriculum_id': curriculumValidators,
              subject_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select subject'
                      }
                  }
              },
              year_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select year'
                      }
                  }
              },
              'topic_id':topicValidators,
              'chapter_id':chapterValidators,
              'unit_id':unitValidators,
              test_name: {
                  validators: {
                      notEmpty: {
                          message: 'Please enter test name'
                      }
                  }
              },
              
              
              // paper_id: {
              //     validators: {
              //         notEmpty: {
              //             message: 'Please select paper'
              //         }
              //     }
              // },
             
          },
          plugins: {
              trigger: new FormValidation.plugins.Trigger(),
              bootstrap: new FormValidation.plugins.Bootstrap(),
              submitButton: new FormValidation.plugins.SubmitButton(),
              trigger: new FormValidation.plugins.Trigger(),
          },
        }).on('core.form.valid', function() {
              $("#quizform").submit();
              
          });

        });

});

   
    
    $('#choose_year').on('change', function (e) {
        var year_id = $(this).val();
        var choose_curriculum = $('#choose_curriculum').val();
        var choose_subject = $('#choose_subject').val();
        fetchTopics(year_id,choose_curriculum,choose_subject);
    });


    document.addEventListener('DOMContentLoaded', function(e) {
      const curriculumValidators = {
          validators: {
              notEmpty: {
                  message: 'Please select curriculum'
              }
          }
      };

      const topicValidators = {
        validators: {
          notEmpty: {
              message: 'Please select topic'
          }
        }
      };

      const chapterValidators = {
        validators: {
          notEmpty: {
              message: 'Please select chapter'
          }
        }
      };


      const unitValidators = {
        validators: {
          notEmpty: {
              message: 'Please select unit'
          }
        }
      };
      

      const questionform = document.getElementById('quizform');
      const fv = FormValidation.formValidation(questionform, {
          fields: {
           
              country_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select country'
                      }
                  }
              },
               'curriculum_id': curriculumValidators,
              subject_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select subject'
                      }
                  }
              },
              year_id: {
                  validators: {
                      notEmpty: {
                          message: 'Please select year'
                      }
                  }
              },
              'topic_id':topicValidators,
              'chapter_id':chapterValidators,
              'unit_id':unitValidators,
              
              // paper_id: {
              //     validators: {
              //         notEmpty: {
              //             message: 'Please select paper'
              //         }
              //     }
              // },
             
          },
          plugins: {
              trigger: new FormValidation.plugins.Trigger(),
              bootstrap: new FormValidation.plugins.Bootstrap(),
              submitButton: new FormValidation.plugins.SubmitButton(),
              trigger: new FormValidation.plugins.Trigger(),
          },
      }).on('core.form.valid', function() {
              $("#quizform").submit();
              
      });





     

     

    $('#choose_unit').on('change', function (e) {
        var unit_id = $(this).val();
        fetchQuestions(unit_id);
    });
    $('#choose_topic').on('change', function (e) {
        var topic_id = $(this).val();
        fetchUnits(topic_id);
    });


    function fetchTopics(year_id,choose_curriculum,choose_subject)
    {
      $.ajax({
                    url: "{{ url('teacher/fetchtopics') }}" ,
                    type: 'POST',
                    data: {"year_id" : year_id,"choose_curriculum":choose_curriculum,"choose_subject":choose_subject },
                })
                .done(function (data) {
                   $("#choose_topic").empty();
                   const obj = JSON.parse(data);
                   $.each(obj, function(index, element) {
              $("#choose_topic").append('<option value=' + element.id + '>'+element.name+'</option>');
          });
                });
    }

    function fetchQuestions(unit_id,checked_filters='')
    {
      $.ajax({
                    url: "{{ url('teacher/fetchquestions') }}" ,
                    type: 'POST',
                    data: {"unit_id" : unit_id,"checked_filters" : checked_filters },
                })
                .done(function (data) {
                   $(".questions-quiz").empty();
                   const obj = JSON.parse(data);
                   $.each(obj, function(index, element) {
              $(".questions-quiz").append('<div class="checkbox"><label><input type="checkbox" name="quizquestion[]" value=' + element.id + ' /> ' + element.question+'<label></div>');
          });
                });
    }

    function fetchUnits(topic_id)
    {
      $.ajax({
                    url: "{{ url('teacher/fetchunit') }}" ,
                    type: 'POST',
                    data: {"topic_id" : topic_id },
                })
                .done(function (data) {
                   $("#choose_unit").empty();
                   const obj = JSON.parse(data);
                   $.each(obj, function(index, element) {
              $("#choose_unit").append('<option value=' + element.id + '>'+element.name+'</option>');
          });
                });
    }
  });
</script>

@endsection