@extends('layouts.master')
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Student's Raport</h4>
	</div>
	{{-- <div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#modal-edit" id="#AddUser"><i class="fa fa-plus-circle"></i> Create New Class</button>
	    </div --}}>
	</div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
              <div class="row">
                <div class="col-3"> 
                <br>
              </div>
              </div>
              <div class="col-4">
                    <form id="filter_form">
                      <div class="form-group">
                        <label>School Year</label>
                        <select class="form-control" id="current_ta" name="tahun_ajaran">
                          <option value="">-- School Year --</option>
                          @foreach($tahun_ajaran as $ta)
                          <option value="{{$ta}}">{{ $ta }}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="form-group">
                        <label>Semester</label>
                        <select class="form-control" id="current_semester" name="semester">
                          <option value="">-- Select Semester --</option>
                          <option value="1">First Term</option>
                          <option value="2">Second Term</option>
                        </select>
                      </div>
                      @if ($role != 'student')
                        <div class="form-group">
                        <label>Educational Stage</label>
                        <select class="form-control" id="current_idjenjang" name="jenjang"  {{($role == 'teacher')? 'hidden' : ''}} >
                          <option value="">-- Select Educational Stage --</option>
                          @foreach ($level as $element)
                            <option value={{$element->id_jenjang}}>{{$element->nama}}</option>
                          @endforeach
                        </select> 
                      </div>
                      @endif
                      
                      <button type="button" onclick="dtable()" class="btn btn-success" id=""><i class="fa fa-search"></i> Search</button>
                    </form>
                    
                  </div>
                  <hr>
                <div class="col-12">
                  <h4 class="card-title">Student list</h4>
                  <h6 class="card-subtitle"></h6>
                  <div class="table-responsive">
                      <table id="dtable" class="table table-striped table-bordered">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>NIS</th>        
                                  <th>Student's Name</th>
                                  <th>Stage</th>
                                  <th>Class</th>
                                  <th>Semester</th>
                                  <th>Action</th>
                              </tr>
                          </thead>
                          <tbody>
                              
                          </tbody>
                      </table>
                  </div>
                </div>
                
            </div>
        </div>
       </div>
    </div>
@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
   var save_method = 'add';
   var jenjang_id ;
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    $('.js-switch').each(function() {
        new Switchery($(this)[0], $(this).data());
    });
    

  $('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
     save_method = 'add';

     // $('.switchery').prop('checked', true).trigger("click");
  });
  $( document ).ready(function() {
    var datas = {
      'semester' : $('#current_semester').val(),
      'jenjang' : $('#current_idjenjang').val(),
      'tahun_ajaran' : $('#current_ta').val()

    }
    var table = $("#dtable").DataTable({
          language: {
                      "emptyTable": "Belum periode penilaian / Penilaian sedang berlangsung"
                    },
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url :'/raport/dtable',
            type : 'post',
            data : datas,
            },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'NIS', name : 'NIS'},
          
          {data : 'nama_lengkap', name : 'nama_lengkap'},
          {data : 'nama', name : 'nama'},
          {data : 'nama_kelas', name : 'nama_kelas'},
          {data : 'semester', name : 'semester'},
          {data : 'action', name : 'action'},
          
          ],
          // columnDefs: [
          //   {
          //       "targets": 5, // your case first column
          //       "className": "text-center",
          //  },
          // ],
          // "order": [[ 1, 'asc' ]]
  });
  table.on('draw.dt', function () {
    var info = table.page.info();
    table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
        cell.innerHTML = i + 1 + info.start;
    });
  });
});
  
  
  
 function destroy(id){
  swal({
      title: "Are you sure?",
      text: "You will delete this Class?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        console.log('confirm');
       $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : 'class'+'/'+id,
        type : 'delete',
        dataType : 'json',
        success:function(response){
         table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully deleted',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
      
        },
        
        error:function(xhr){
          console.log(xhr)
          table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully deleted',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 

 }
 function dtable(){
  
  $("#dtable").DataTable().clear().destroy();
  var datass = {
      'semester' : $('#current_semester').val(),
      'jenjang' : $('#current_idjenjang').val(),
      'tahun_ajaran' : $('#current_ta').val()

    }
  var  table = $("#dtable").DataTable({
        language: {
                      "emptyTable": "Belum periode penilaian / Penilaian sedang berlangsung"
                    },
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url :'/raport/dtable',
            type : 'post',
            data : datass,
            },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'NIS', name : 'NIS'},
          
          {data : 'nama_lengkap', name : 'nama_lengkap'},
          {data : 'nama', name : 'nama'},
          {data : 'nama_kelas', name : 'nama_kelas'},
          {data : 'semester', name : 'semester'},
          {data : 'action', name : 'action'},
          
          ],
          // columnDefs: [
          //   {
          //       "targets": 5, // your case first column
          //       "className": "text-center",
          //  },
          // ],
          // "order": [[ 1, 'asc' ]]
  });
  table.on('draw.dt', function () {
    var info = table.page.info();
    table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
        cell.innerHTML = i + 1 + info.start;
    });
  });
 }
 function changeJenjang(){
  // jenjang_id = $('#current_idjenjang').val();
  dtable();
 }
</script>
@endsection