@extends('layouts.master_panel')

@section('title') Liste provisoire d'absences @stop

@section('CSS') 


<link rel="stylesheet" type="text/css" href="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.css">

<link rel="stylesheet" href="{{url('/')}}/assets/vendor/datepicker/tempusdominus-bootstrap-4.css" />


<link rel="stylesheet" href="{{url('/')}}/assets/vendor/summernote/css/summernote-bs4.css">




@stop

@section('JS') 

<script type="text/javascript">
(function blink() {
  $('.blink_me').fadeOut(300).fadeIn(700, blink);
})();


$(document).ready(function() {
  var form = document.getElementById("formList");

  document.getElementById("ConfirmBtn").addEventListener("click", function () {
    form.submit();
  });
});

</script>

<script src="{{url('/')}}/js/datatables/jquery.dataTables.min.js"></script>
<script src="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript" class="init">
  $(document).ready(function() {
    $("#example").dataTable({ "language": { "url": "{{ url('/') }}/js/datatables/lang/fr.json" },
      "order": [[ 0, "desc" ]]
    });
  });
  </script>



<script src="{{url('/')}}/assets/vendor/datepicker/moment.js"></script>
<script src="{{url('/')}}/assets/vendor/datepicker/tempusdominus-bootstrap-4.js"></script>
<script src="{{url('/')}}/assets/vendor/datepicker/datepicker.js"></script>

<script src="{{url('/')}}/assets/vendor/datepicker/fr.js"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepickerdate').datetimepicker({
          format: 'DD/MM/YYYY',
          locale: 'fr'
      });
    });
</script>



<script type="text/javascript">
$(document).ready(function () { 

        $('#teacherID').on('change',function(e){
          
          var teacher_id = e.target.value;

            $.ajax({
            type: "GET",
            url: "{{ url('/') }}/ajax_teacher_classes_subjects?teacher_id="+teacher_id,
                success: function(data) {  

                    var subcat =  $('#subjectID').empty();

                    subcat.append('<option value ="">Choisir</option>');

                    $.each(data, function(key, val) { 
                    
                      subcat.append('<option value ="'+val.sbj_id+'">'+val.cl_name+'  - '+val.sbj_name+'</option>');
                    });

                    $("#classID").val('');
                    $('.selectpicker').selectpicker('refresh');


                }

            });


        });


});
</script>




<script type="text/javascript">
$(document).ready(function () { 

        $('#subjectID').on('change',function(sb){
            
            var subject_id = sb.target.value;

            $.ajax({
            type: "GET",
            url: "{{ url('/') }}/ajax_subject_class?subject_id="+subject_id,
                success: function(datas) {  

                  $("#classID").val(datas);

                }

            });


        });

});
</script>




<script type="text/javascript">
$(document).ready(function () { 

        $('#Classes').on('change',function(em){
          
          var class_id = em.target.value;

            $.ajax({
            type: "GET",
            url: "{{ url('/') }}/ajax_matieres_of_class?class_id="+class_id,
                success: function(datam) {  

                  var subcatM =  $('#Matieres').empty();

                  $.each(datam,function(create,subcatObj){
                    subcatM.append('<option value ="'+subcatObj+'">'+create+'</option>');
                  });

                  $('.selectpicker').selectpicker('refresh');


                }

            });


        });


});
</script>



<script type="text/javascript">
$(document).ready(function () { 

  $('.checkedbox').change(function() {

      var id = this.id;
      var idSplit = id.split("-");

      if(this.checked) {
        $('#is_absent'+idSplit[1]).val('1');
      } else {
        $('#is_absent'+idSplit[1]).val('0'); 
      } 
  
  });



      $('#TypeAbsence').on('change',function(evtt){

        var type = evtt.target.value;

        if (type == 1) {

          $('.cours-section').css({"display":"block"});
          $('.controle-section').css({"display":"none"});

          $('#teacherID').prop('required',true);
          $('#subjectID').prop('required',true);

          $('#observID').prop('required',false);
          $('#Classes').prop('required',false);
          $('#Matieres').prop('required',false);

        } else { 

          $('.cours-section').css({"display":"none"});
          $('.controle-section').css({"display":"block"})
          
          $('#teacherID').prop('required',false);
          $('#subjectID').prop('required',false);

          $('#observID').prop('required',true);
          $('#Classes').prop('required',true);
          $('#Matieres').prop('required',true);

        }

    
    });


});
</script>




<script type="text/javascript">
$(document).on('click', '#Valider',function(){

  $('#alertMode').modal();
  return false;

});

</script>



@stop


@section('content')


                  <!-- ============================================================== -->
                  <!-- pageheader  -->
                  <!-- ============================================================== -->
                  <div class="row">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                          <div class="page-header">
                              <h3 class="mb-2 text-danger">Liste provisoire d'absences</h3>
                           
                              <div class="page-breadcrumb">
                                  <nav aria-label="breadcrumb">
                                      <ol class="breadcrumb">
                                          <li class="breadcrumb-item active  text-danger" aria-current="page">Liste provisoire d'absences</li>
                                      </ol>
                                  </nav>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- ============================================================== -->
                  <!-- end pageheader  -->
                  <!-- ============================================================== -->


<div class="row">


@if(isset($_GET['class_id']))


<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
  <div class="card">
    <div class="card-body">

@if(e($_GET['type_absence']) == 2)