@extends('layouts.master')
@section('content')
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Enrollment</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-add" id="#AddUser" onclick="liststudent();"><i class="fa fa-plus-circle"></i> Add Student(s)</button>
      </div>
  </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="col-3">
                  <h6 class="card-title">Current School Year <span class="badge badge-pill badge-success">{{$current->meta_value}}</span>
                    <h6 class="card-title">Stage <span class="badge badge-pill badge-success">{{$jenjang->nama}}</span>


                </h6>
                </div>
                <div class="col-12 text-right" >
                    <button type="button" class="btn btn-warning btn-rounded" data-toggle="modal" data-target="#modal-print" id="#printStudent"><i class="fa fa-print"></i> Print Student(s)</button>
                </div>
                  
                  <hr>
                <div class="col-12 row">

                  <div class="table-responsive col-12">
                      <table id="" class="table table-striped table-bordered"  >
                          <thead>
                              <tr>
                                  <th width="5%">No</th>
                                  <th>NIS</th>    
                                  <th>Name</th>
                                  <th>Gender</th>
                                  <th>Class</th>
                                  <th>Action</th>
                                  <th>Remove</th>
                              </tr>
                          </thead>
                          <tbody>
                            @php
                              $no = 1;
                            @endphp
                            @foreach ($data as $row)
                              <tr>
                                <td>{{$no++}}</td>
                                <td>{{$row->NIS}}</td>
                                <td>{{$row->nama_lengkap}}</td>
                                <td>{{($row->kelamin == 'P' )? 'Female' : 'Male'}}</td>
                                <td>
                                  <div class="form-group">
                                  <select class="form-control " {{($row->status == 1)? 'disabled' : ''}} id="kelas-{{$row->id}}">
                                      <option>--- Select Class ---</option>
                                      @foreach ($kelas as $class)
                                        <option value="{{$class->id_kelas}}" {{($row->id_kelas == $class->id_kelas)? 'selected' : ''}}>{{$class->nama_kelas}}</option>
                                      @endforeach
                                      
                                  </select></div>
                                </td>
                                <td>
                                  @if ($row->status == true)
                                  <h4><i class="fa fa-check-circle text-success"></i></h4>
                                  @else
                                    <button class="btn btn-info" onclick="validate({{$row->id}})"> Validate</button>
                                  @endif
                                </td>
                                <td>
                                  @if ($row->status != true)
                                  <button class="btn btn-sm btn-danger" onclick="destroy({{$row->id}})"><i class="fa fa-trash"></i> </button>
                                  @elseif(Auth::user()->role == 'admin')
                                  <button class="btn btn-sm btn-warning" onclick="edit({{$row->id}})"><i class="fa fa-pencil"></i> </button>
                                  @endif
                                </td>
                              </tr>
                            @endforeach
                           
                          </tbody>
                      </table>
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
@include('master.enrollment.modal_add_student')
@include('master.enrollment.modal_print')
@endsection

@section('js')

<script>
  // Switchery
   // $('select').select2();
   var periodes;
   var save_method = 'add';
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    // For multiselect
    $('#pre-selected-options').multiSelect();

    $('.input-daterange-datepicker').daterangepicker({
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-danger',
        cancelClass: 'btn-inverse'
    });
  var table = $("#dtable").DataTable({
        
          processing : true,
          serverSide : true,
          // paging      : false,
          // lengthChange : true,
          // searching   : false,
          ordering    : false,
          // info        : true,
          // autoWidth   : false
          
          ajax: {
            url :'userData',
            type : 'get'
        },
          columns    : [
          
          
          {data : null, name : 'no'},
          {data : 'name', name : 'name'},
          {data : 'username', name : 'username'},
          {data : 'email', name : 'email'},
          {data : 'role', name : 'role'},
          {data : 'active', name : 'active'},
          {data : 'action',  orderable: false, searchable: false},

          ],
          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;
    });
  });

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

     // $('.switchery').prop('checked', true).trigger("click");
  });

  $('#AddUser').click(function(){
    $('.switchery').prop('checked', true).trigger("click");
  })
  $('#submitAddStudent').click(function(){
    // swal({
    //       title: 'success',
    //       text:  'Student Successfuly added',
    //       type: 'success',
    //       timer: 3500,
    //       showConfirmButton: false
    //   })
    console.log(save_method)
    var datas = $('#add_student').serializeArray();
    datas.push({name : 'jenjang', value: '{{$jenjang->id_jenjang}}'});

    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : '/master/enrollment',
      type : 'post',
      data : datas,
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                  swal({
                      title: 'success',
                      text:  'Data berhasil disimpan',
                      type: 'success',
                      timer: 3500,
                      showConfirmButton: false
                  })
          );
       location.reload();
      // table.ajax.reload();
      },
      error: function(xhr){
        console.log(xhr);
      }
    });
  })
  

  
 
 function liststudent(){
  var id_jenjang = {{$jenjang->id_jenjang}};
  $("#list_student").DataTable().clear().destroy();
  var  table = $("#list_student").DataTable({
       
          processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            url :'liststudent'+'/'+id_jenjang,
            type : 'get',
            },
          columns    : [
          
          
          {data : null, name : 'null'},
          {data : 'NIS', name : 'NIS'},
          {data : 'nama_lengkap', name : 'nama_lengkap'},
          {data : 'kelamin', name : 'kelamin'},
         
          
          ],
          createdRow : function(row, datas, dataIndex){
                              
                                $(row).find('td:eq(0)').html('<input type="checkbox" name="list['+dataIndex+']" value='+datas.NIS+'>')
                              
                            
                            },
  });
  // 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 = '';
  //   });
  // });
  
  // $.ajax({
  //   url : 'liststudent'+'/'+id_jenjang,
  //   method : 'get',
  //   dataType : 'json',
  //       success:function(response){
  //         $('.list_student').empty();
  //         // for (i = 0; i < response.length; i++) {
  //         //   if(response[i].kelamin == 'P'){
  //         //     var kelamin = 'Female';
  //         //   }
  //         //   else{
  //         //     var kelamin = 'Male';
  //         //   }
  //         //   console.log(kelamin); 
  //         //    $('.list_student').append('\
  //         //       <tr>\
  //         //         <td><input type="checkbox" name="list['+i+']" value='+response[i].NIS+'></td>\
  //         //           <td>'+response[i].NIS+'</td>\
  //         //           <td>'+response[i].nama_lengkap+'</td>\
  //         //           <td>'+kelamin+'</td>\
  //         //       </tr>\
  //         //       ');
            
  //         // }
          

         
          
  //       },
  // });
 }

 function destroy(id){
  swal({
      title: "Are you sure?",
      text: "You will delete this enrollment?",
      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 : 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
                      })
              );
          location.reload();
      
        },
        
        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 validate(id){
  swal({
      title: "Are you sure?",
      text: "You will validate this enrollment?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        console.log('confirm');
        // var idkelas = $('#id_kelas'+id).val()'
       $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : 'validate'+'/'+id+'/'+$('#kelas-'+id).val(),
        type : 'get',
        dataType : 'json',
        success:function(response){
         // table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully validated',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          location.reload();
      
        },
        
        error:function(xhr){
          console.log(xhr)
          table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully validated',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 

 }

 function edit(id){
  swal({
      title: "Are you sure?",
      text: "You will edit this enrollment?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        console.log('confirm');
        // var idkelas = $('#id_kelas'+id).val()'
       $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : 'edit'+'/'+id+'/'+$('#kelas-'+id).val(),
        type : 'get',
        dataType : 'json',
        success:function(response){
         // table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'success',
                          text:  'data successfully validated',
                          type: 'success',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );
          location.reload();
      
        },
        
        error:function(xhr){
          console.log(xhr)
          table.ajax.reload();
          localStorage.setItem("swal",
                      swal({
                          title: 'Error',
                          text:  'data was not successfully validated',
                          type: 'error',
                          timer: 3500,
                          showConfirmButton: false
                      })
              );

        }

       });
       
       }
      }); 

 }

 $('#print-submit').click(function(){
    var id_kelas = $('#print_kelas').val();
    var id_jenjang = $('#print_jenjang').val();
    $.ajax({
      url : 'enroll/print'+'/'+id_jenjang+'/'+id_kelas,
      type :'get',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      // data:  $('#form_print').serialize()
        

      success: function (response) {
        
          window.open(response['status']);
        
      },
      error: function(xhr){
        console.log(xhr);
      }
    })
 })
</script>
@endsection