@extends('dashboard.layouts.default')
@section('content')
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
@if(session()->has('status'))
<div class="alert alert-success">
  {{ session()->get('status') }}
</div>
@endif
<section class="top-section set-task">
  <div class="container-fluid">
    <div class="row g-3">
      @include('layout.top-ads')
      <div class="col-md-3">
        <div class="card summary-list sticky-top">
          <div class="card-header bg-white border-0 pt-3 pb-0"><h5 class="unit-title">Summary</h5></div>
          <div class="card-body overflow-hidden">
            <div class="h-100 overflow-auto pe-2" id="summaryDiv">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="card mb-3 sec-header sticky-top">
          <div class="card-body p-2">
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                <a class="btn btn-back" href="{{ URL::previous() }}"><i class="bx bx-chevron-left" ></i></a>
                <h5 class="sub-title">Set Task > Update Details</h5>
              </div>
              <div id="" class="">
              	<button type="button" class="btn btn-success btn-with-i" id="tasknextbtn">Update <i class="bx bx-chevron-right"></i></button>
              </div>
            </div>
          </div>
        </div>
        <form method="POST" class="form" novalidate="novalidate" id="tasksform" name="kt_tasks_form"
        action="{{ url('teacher/tasks/step1') }}" enctype="multipart/form-data">
        {{ csrf_field() }}
          <div class="card shadow-sm mb-3">
            <div class="card-body">
              <input type="hidden" name="delete_unit_id" id="delete_unit_id" value=""/>
              <div class="d-flex align-items-center overflow-auto">
                @foreach($page->years as $key=>$year)
                @php
                $checked = (in_array($year->id, $details->selected_years)) ? 'checked' : '';
                @endphp
                <input type="checkbox" class="btn-check checkyear" name="year_id" {{$checked}} value="{{ $year->id }}" id="year_id-{{ $year->id }}"  onclick="getClasses(this.id)" autocomplete="off">
                <label class="btn btn-year me-1 mb-1" for="year_id-{{ $year->id }}">{{ $year->year }}</label>
                @endforeach
              </div>
              <div class="d-flex align-items-center overflow-auto" id="classes_div">
              </div>
              <div class="bg-light p-3 rounded mb-2" id="students_div">
                <table class="table table-striped table-hover display" id="studentdataTables" style="width:100%">
                  <thead>
                    <tr>
                      <th><input type="checkbox" name="selectall" id="selectall" class="selectall" /></th>
                      <th style="display: none;">SName</th>
                      <th>Name</th>
                      <th>Year</th>
                      <th>Class</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
                <button type="button" class="btn btn-primary mt-2" id="studconfirm">Confirm</button>
              </div>
              <div id="subject_div" style="display: none;">
                <div class="d-flex align-items-center overflow-auto">
                  @foreach($page->subjects as $key=>$subject)
                  <input type="checkbox" class="btn-check checksubject" name="subject_id" value="{{ $subject->id }}" id="subject_id-{{ $subject->id }}"  onclick="getTopics({{ $subject->id }})" autocomplete="off">
                  <label class="btn btn-subject me-1 mb-1" for="subject_id-{{ $subject->id }}">{{ $subject->name }}</label>
                  @endforeach
                </div>
              </div>
              <div class="topic-list overflow-auto">
                <ul class="overflow-auto" id="topics_div">
                </ul>
              </div>
            </div>
          </div>
          <div class="card h-100">
            <div class="card-body">
              <div class="row syllubus-div">
              </div>
            </div>
          </div>
        </form>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
  // Wait for the DOM to be ready
  var sel_students = null;
  
  @if(Session::has('error'))
      showAlert("{{ Session::get('error')}}", "error");
  @endif
  
  $("#tasknextbtn").click(function () {
  
      var check_years = [];
      var check_classes = [];
      var check_subjects = [];
      var check_quizs = [];
      var check_videos = [];
  
      $('input:checkbox.checkquiz').each(function () {
          var sThisVal = (this.checked ? check_quizs.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkvideo').each(function () {
          var sThisVal = (this.checked ? check_videos.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkyear').each(function () {
          var sThisVal = (this.checked ? check_years.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkclass').each(function () {
          var sThisVal = (this.checked ? check_classes.push($(this).val()) : "");
      });
  
      $('input:checkbox.checksubject').each(function () {
          var sThisVal = (this.checked ? check_subjects.push($(this).val()) : "");
      });
  
      if (check_years.length == 0) {
          showAlert("Please choose year...", "error");
      } else if (check_classes.length == 0) {
          showAlert("Please choose class...", "error");
      } else if (check_subjects.length == 0) {
          showAlert("Please select subjects...", "error");
      } else if ((check_quizs.length == 0) && (check_videos.length == 0)) {
          showAlert("Please select units...", "error");
      } else {
          $("#tasksform").submit();
      }
  
  
  });
  
  getClasses();
  
  function getClasses(year_id) {
      var year_ids = [];
      var class_ids = [];
      var combined = [];
      var class_ids = null;
      console.log("here");
      // sel_students = [];
      $('#students_div').hide();
      $('#studentdataTables tbody').empty();
       
      if (year_id) {
          year_ids.length = 0;
          year_ids.push($("#" + year_id).val());
          $('input:checkbox.checkyear').each(function () {
              this.checked = false;
          });
          $("#" + year_id).prop('checked', true);
  
      } else {
          $('input:checkbox.checkyear').each(function () {
              var sThisVal = (this.checked ? year_ids.push($(this).val()) : "");
          });
          $('input:checkbox.checkclass').each(function () {
              var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
          });
      }
  
  
      
      // var class_id = $('input[name="class_id[]"]:checked').val();
      // class_id
      // if (class_id) {
      //     combined.push(class_id);
      // } else {
      //     combined = class_ids.concat(pre_class_ids);
      //     $('input:checkbox.checkclass').each(function () {
      //         $("#class_id-" + pre_class_ids).prop('checked', true);
      //         console.log(pre_class_ids);
      //     });
      // }
  
      // alert(year_ids.length);
      if (year_ids.length != 0) {
          $.ajax({
              url: "{{ url('teacher/tasks/get-classes') }}", type: 'POST',
              data: {"year_ids": year_ids, 'class_ids': class_ids},
              async:false
          }).done(function (data) {
              $('#classes_div').html(data);
              getSubjects();
              
          });
      } else {
          $('#classes_div').html('');
          $('#subject_div').hide();
          $('#topics_div').html('');
          $('#topics_div').html('');
          $('.syllubus-div').html('');
  
  
          $('input:checkbox.checksubject').each(function () {
              this.checked = false;
          });
      }
      // loadSummary();
  }
  
  /*function getSubjects()
  {
      var class_ids   = [];
      var combined    = [];
      var pre_subject_ids = null;
  
  $('input:checkbox.checkclass').each(function () {
  var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
  });
  
  if(class_ids.length != 0){
  
  $('input:checkbox.checksubject').each(function() {
  
      if(jQuery.inArray($(this).val(), pre_subject_ids) != -1) {
          $("#subject_id-"+$(this).val()).prop("checked", true);
          getTopics($(this).val());
      }
  })
  
  $('#subject_div').show();
  loadSummary();
  }else{
  $('#subject_div').hide();
  $('#topics_div').html('');
  $('.syllubus-div').html('');
  $('input:checkbox.checksubject').each(function() {
  this.checked = false;
  });
  }
  }*/
  function getSubjects(id) {
      
      var class_ids = [];
      var year_ids = [];
      var pre_subject_ids = null;
  
      $('input:checkbox.checkclass').each(function () {
           var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
          
      });
  
      $('input:checkbox.checkyear').each(function () {
          var sThisVal = (this.checked ? year_ids.push($(this).val()) : "");
      });
  
  
      // class_ids.length = 0;
      // if (id) {
      //     class_ids.push($("#class_id-" + id).val());
      //     $("#class_id-" + id).prop('checked', true);
      // }
      // alert(id+'..'+class_ids+'..'+class_ids.length);
  
       if (class_ids.length != 0) {
          $.ajax({
              url: "{{ url('teacher/tasks/get-classes') }}",
              type: 'POST',
              data: {
                  "year_ids": year_ids,
                  'class_ids': class_ids,
                  'uncheck_stud':true
              },
          }).done(function (data) {
              $('#classes_div').html(data);
              $(".btn-checkstudent").removeAttr('disabled');
              $("#check-stud").css("filter", "grayscale(0)");
          });
      }
  
      console.log(class_ids.length);
      if (class_ids.length != 0) {
          $('#subject_div').show();
          $('input:checkbox.checksubject').each(function () {
              this.checked = false;
          });
          $('input:checkbox.checksubject').each(function () {
              if (jQuery.inArray($(this).val(), pre_subject_ids) != -1) {
                  $("#subject_id-" + $(this).val()).prop("checked", true);
                  // alert('before topic call' + "#subject_id-"+$(this).val());
                  getTopics($(this).val());
                  // alert('after topic call' + "#subject_id-"+$(this).val());
              }
          })
          $('#subject_div').show();
         loadSummary();
      } else {
           $('input:checkbox.checkclass').each(function () {
            var sThisVal = this.id;
            $("#"+sThisVal).removeAttr('disabled');
          });
          $( "span" ).removeClass( "btn-disable" );
          $('#subject_div').hide();
          $('#topics_div').html('');
          $('.syllubus-div').html('');
          $('input:checkbox.checksubject').each(function () {
              this.checked = false;
          });
          $(".btn-checkstudent").attr('disabled', 'disabled');
          $("#check-stud").css("filter", "grayscale(1)");
          // $(".checkstudents").hide();
           $("#students_div").hide();
      }
  }
  
  function getTopics(subject_id) {
      var subject_ids = [];
      var subject_id = subject_id;
      var class_ids = [];
  
      $('input:checkbox.checksubject').each(function () {
          var sThisVal = (this.checked ? subject_ids.push($(this).val()) : "");
      });
       $('input:checkbox.checkclass').each(function () {
          var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
      });
     if(class_ids.length>0)
        class_id = class_ids[0];
      // if(subject_ids.length != 0) {
      if (class_id) {
          if (subject_id != null) {
              $.ajax({
                  url: "{{ url('teacher/tasks/get-topics') }}", type: 'POST',
                  data: {"subject_ids": subject_id, "class_ids": class_id},
              }).done(function (data) {
                  $('#topics_div').html(data);
                  getUnits();
              });
          } else {
              $('#topics_div').html('');
              $('.syllubus-div').html('');
          }
      } else {
          $('#topics_div').html('');
          $('.syllubus-div').html('');
          $('#subject_div').hide();
          $('#tasknextbtn').hide();
          showAlert("No class is created for the year", "error");
      }
  }
  
  function getUnits() {
      var subject_ids = [];
      var unit_ids = [];
      var class_ids = [];
      var pre_quiz_ids = null;
      var pre_video_ids = null;
      $('input:checkbox.checksubject').each(function () {
          var sThisVal = (this.checked ? subject_ids.push($(this).val()) : "");
      });
      var quiz_ids = [];
      $('input:checkbox.checkquiz').each(function () {
          var sThisVal = (this.checked ? quiz_ids.push($(this).val()) : "");
      });
  
      var video_ids = [];
      $('input:checkbox.checkvideo').each(function () {
          var sThisVal = (this.checked ? video_ids.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkclass').each(function () {
          var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
      });
     if(class_ids.length>0)
        class_id = class_ids[0];
  
      combined_quiz_ids = quiz_ids.concat(pre_quiz_ids);
      combined_video_ids = video_ids.concat(pre_video_ids);
  
      // var class_id = $('input[name="class_id"]:checked').val();
  
      if (subject_ids.length != 0) {
          $.ajax({
              url: "{{ url('teacher/tasks/get-units') }}", type: "POST",
              data: {
                  "subject_ids": subject_ids,
                  'quiz_ids': combined_quiz_ids,
                  'video_ids': combined_video_ids,
                  "class_ids": class_id
              }
          }).done(function (data) {
              $(".syllubus-div").html(data);
              loadSummary();
          })
  
      }
  
  }
  
  function gotoTopic(id) {
      var scrollPos = $("#topic-" + id).offset().top;
      $(window).scrollTop(scrollPos);
  }
  
  function setQuizChecked(id) {
      var isChecked = $("#check_video_" + id).is(":checked");
      if (isChecked) {
          $("#check_quiz_" + id).prop('checked', true)
      } else {
          $("#check_quiz_" + id).prop('checked', false)
      }
      loadSummary(id);
  }
  
  /*function loadSummary()
  {
      var class_ids       = [];
      var quiz_ids        = [];
      var video_ids       = [];
      var unit            = '';
      var summary_html    = '';
      var quiz            = '';
      var video           = '';
  
      $('input:checkbox.checkclass').each(function () {
          if(this.checked){
              // alert($(this).val());
              summary_html +='<div class="d-flex align-items-center justify-content-between mb-2"><span class="font-weight-bold mr-2">'+ $(this).data('classname') +'</span><span data-item="year" data-id="'+$(this).val()+'" onclick="updateTask(this)"><i class="icon-1x fas fa-trash"></i></span></div>';
          }
      });
  
      $('input:checkbox.checkquiz').each(function () {
         var sThisVal = (this.checked ? quiz_ids.push($(this).val()) : "");
      });
  
      $('input:checkbox.checkvideo').each(function () {
         var sThisVal = (this.checked ? video_ids.push($(this).val()) : "");
      });
  
  
      var combined    = quiz_ids.concat(video_ids.filter((item) => quiz_ids.indexOf(item) < 0))
      combined        = combined.sort();
      // console.log(combined);
  
      $.each(combined, function( key, value ) {
          var quiz            = '';
          var video           = '';
  
          if( (jQuery.inArray(value, quiz_ids) !== -1) && (jQuery.inArray(value, video_ids) !== -1)){
              quiz    = ' Q';
              video   = ' V';
              unit    = $('#check_quiz_'+value).data("unitname");
          }else if(jQuery.inArray(value, quiz_ids) !== -1){
              unit    = $('#check_quiz_'+value).data("unitname");
              quiz    = ' Q';
          }else{
              unit    = $('#check_video_'+value).data("unitname");
              video   = ' V';
          }
  
  
          summary_html +='<div class="d-flex align-items-center justify-content-between mb-2"><span class="font-weight-bold mr-2">'+ unit + video + quiz +' </span><span data-item="unit" data-id="'+value+'" onclick="updateTask(this)"><i class="icon-1x fas fa-trash"></i></span></div>';
  
      });
  
      $('#summaryDiv').html(summary_html);
  
  }*/
  function loadSummary(id) {
      var class_ids = [];
      var year_ids = [];
      var quiz_ids = [];
      var video_ids = [];
      var delete_unit_id = '';
      var unit = '';
      var summary_html = '';
      var quiz = '';
      var video = '';
      var subject_ids = [];
      var subject_id = '';
  
      var isVChecked = $("#check_video_" + id).is(":checked");
      var isQChecked = $("#check_quiz_" + id).is(":checked");
  
      delete_unit_id = $("#delete_unit_id").val();
  
      $('input:checkbox.checkclass').each(function () {
          var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
      });
      console.log("Class_ids");
      console.log(class_ids);
      $('input:checkbox.checksubject').each(function () {
          var sThisVal = (this.checked ? subject_ids.push($(this).val()) : "");
      });
      if (subject_ids.length > 0) {
          subject_id = subject_ids.toString();
      }
      $.ajax({
          url: "{{ url('teacher/tasks/set-summary') }}",
          type: "POST",
          async: false,
          data: {
              "id": id,
              'isVChecked': isVChecked,
              'isQChecked': isQChecked,
              'class_ids': class_ids,
              'delete_unit_id': delete_unit_id,
              'subject_id': subject_id,
              'show_delete': 1,
              'sel_students':sel_students
  
          }
      }).done(function (data) {
          $("#summaryDiv").html(data);
      });
  
  }
  
  function updateTask(elem) {
      var dataId = $(elem).data("id");
      var dataItem = $(elem).data("item");
  
      if (dataId != null) {
          if (dataItem == 'year') {
              $("#class_id-" + $.trim(dataId)).prop("checked", false);
              loadSummary();
          }
  
          if (dataItem == 'unit') {
              $("#check_quiz_" + $.trim(dataId)).prop("checked", false);
              $("#check_video_" + $.trim(dataId)).prop("checked", false);
              $("#delete_unit_id").val(dataId);
              loadSummary();
          }
      }
  
  }
  
  table = $('#studentdataTables').DataTable({
  
          bSearchable: true,
          pagination: true,
          fixedHeader:    true,
          scrollX:        true,
          scrollCollapse: true,
          responsive: true,
          searchDelay: 500,
          processing: !0,
          serverSide: !0,
          "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
          "pageLength": 50,
          ajax: {
              url: "{{ url('teacher/tasks/get-students') }}",
              data: search,
              type:"POST"
          },
          columns: [
              {data: "checkrows", name: "checkrows", orderable: false, searchable: !1},
              {data: "sname", name: 'sname'},
              {data: "name", name: 'name'},
              {data: "year", name: 'year', orderable: !1, searchable: !1},
              {data: "class", name: 'class', orderable: !1, searchable: !1}
              
  
          ],
          "columnDefs": [
                  {
                      "targets": [ 1 ],
                      "visible": false,
                      "searchable": false,
                      orderData: [ 1 ]
  
                  },
                  {
                      targets: [ 2 ],
                      orderData: [ 1 ]
                  }
          ],
          "order": [[ 1, "asc" ]]  
      });
  
      $(".searchs").keyup(function () {
          table.draw();
      });
  
  
  $(document).on('click', '.checkstudents', function () {
      if($(this).prop("checked") == true){
           $("#students_div").show();
          if ($.fn.DataTable.isDataTable('#studentdataTables')) {
  
             table.ajax.reload();
          } 
          $("#subject_div").hide();
         $("#topics_div").hide();
         $(".syllubus-div").hide();
      }
      else if($(this).prop("checked") == false){
          $('#studentdataTables tbody').empty();
            $("#students_div").hide();
            //sel_students = [];
            loadSummary();
            $("#subject_div").show();
            $("#topic-div").show();
            $(".syllubus-div").show();
           
      }
      
  
  });
  
  function search(value) {
  
      var class_ids = [];
      value.search_name = $('input[type="search"]').val();
      $('input:checkbox.checkclass').each(function () {
          var sThisVal = (this.checked ? class_ids.push($(this).val()) : "");
      });
      value.class_ids = class_ids;
  
  } 
  
  
  
  $(document).on('click', '.slectedrows', function () {
  // var sel_students = [];
  
      if(this.checked){
              sel_students.push($(this).val());
      }else{
          const index = sel_students.indexOf($(this).val());
            if (index > -1) {
                  sel_students.splice(index, 1);
            }
      }
     if(sel_students.length>0)
      sel_students =  unique(sel_students);
      loadSummary();
  
          
  });  
  
  function unique(array){
     return array.filter(function(el, index, arr) {
         return index == arr.indexOf(el);
   });
  }
  
  $(document).on('click', '.selectall', function () {   
   if(this.checked){
          $('input:checkbox.slectedrows').each(function () {
              this.checked = true;
              var sThisVal = (this.checked ? sel_students.push($(this).val()) : "");
          });
   }
   else{
      $('input:checkbox.slectedrows').each(function () {
              this.checked = false;
              const index = sel_students.indexOf($(this).val());
                if (index > -1) {
                      sel_students.splice(index, 1);
                }
  
          });
  
   }   
   if(sel_students.length>0)
      sel_students =  unique(sel_students);
      loadSummary();
  });    
  
  $(document).on('click', '#studconfirm', function () {
  // if(sel_students.length>0){
      $('#studentdataTables tbody').empty();
      $("#students_div").hide();
      $("#subject_div").show();
      $(".syllubus-div").show();
      $('input:checkbox.checkstudents').prop('checked', false);
  // }else{
  //     showAlert("Please select student(s) first...", "error");
  // }  
      
  });
  
  function removeStudent(elem) {
      var dataId = $(elem).data("id");
      var dataItem = $(elem).data("item");
  
      if (dataId != null) {
          if (dataItem == 'student') {
              $("#stud_" + $.trim(dataId)).prop("checked", false);
              dataId = dataId.toString();
                const index = sel_students.indexOf(dataId);
                if (index > -1) {
                  
                      sel_students.splice(index, 1);
                }
          
              loadSummary();
          }
      }
  
  }
  
</script>
@endsection