@extends('layouts.app')
@section('content')
    <div class="row pt-2 pb-2">
        <div class="col-sm-9">
          <h4 class="page-title">{{$breadcrumb}}</h4>
        </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <form id="biaya-siswa">
          {{csrf_field()}}
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <div class="form-group">
                      <label class="col-form-label">Biaya SPP</label>
                      <select class="form-control form-control-sm select-select" name="biaya_spp_id" id="biaya_spp_id"> 
                          <option value="">-----Pilih Biaya SPP-----</option>
                          @foreach ($biaya_spp as $biaya_spp)
                            <option value="{{$biaya_spp->biaya_spp_id}}" selected>{{$biaya_spp->biaya_spp_name}}</option>
                          @endforeach
                      </select>                                    
                  </div> 
                  <div class="form-group">
                        <label class="col-form-label">Tahun Ajaran</label>
                        <select class="form-control select-select" onclick="get_tahun_ajaran()" name="tahun_ajaran_id" id="tahun_ajaran_id"> 
                        </select>                                    
                  </div>    
                  <div class="form-group">
                        <label class="col-form-label">Kelas</label>
                        <select class="form-control select-select" onclick="get_class()" name="class_id" id="class_id"> 
                        </select>                                    
                    </div>                
                    <button type="button" class="btn btn-primary waves-effect waves-light mt-4 submit-btn" id="save_biaya_btn" onclick="save_biaya_siswa()"> <i class="fa fa-save"></i> <span>Simpan</span> </button>
                </div>
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-primary d-none" id="btnBeforeSaveRouteCode" onclick="insRow();"><i class="fa fa-plus" aria-hidden="true"></i> Tambah Siswa </button>
              </div>
              {{-- <div class="row">
                  <div class="col-md-12">
                      <div class="table-responsive">
                          <table class="table table-striped custom-table mb-0" id="table_siswa">
                              <thead>
                                  <tr>
                                      <th>No</th>
                                      <th width="40%">Tahun Ajaran</th>
                                      <th width="40%">Kelas</th>
                                      <th>Action</th>
                                  </tr>
                              </thead>
                          </table>
                      </div>
                  </div>
              </div> --}}
              {{-- <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered custom-table mb-0" id="default-datatable">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th width="10%">#</th>
                                    <th>Nama Siswa</th>
                                    <th>NISN / NIS</th>
                                </tr>
                            </thead>
                            <tbody>
                              @php
                                $no=1;
                              @endphp
                              @foreach ($siswa as $siswa)
                              <tr>
                                  <td>{{$no++}}</td>
                                  <td><input type="checkbox" class="form-control form-control-sm" name="siswa_id[]" value="{{$siswa->siswa_id}}"/></td>
                                  <td>{{$siswa->siswa_name}}</td>
                                  <td>{{($siswa->siswa_nisn != null) ? $siswa->siswa_nisn : $siswa->siswa_nis}}</td>
                              </tr>
                              @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
              </div> --}}
            </div>
          </form>
        </div>
      </div>
    </div><!-- End Row-->
@endsection
@section('js')
<script type="text/javascript">
$(document).ready(function(){
    get_class();
    get_tahun_ajaran();
});

function get_class() 
{
  $('#class_id').select2();
  var out_class ;
  var num ;
  $.ajax({
  type: 'GET',
  url: "{{ URL::route('GetClass') }}",
  headers : {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function( values )
  {
      parse = $.parseJSON(values);
      if(parse.stat==1){
          out_class = '<option value="">-- Pilih Kelas --</option>';
          for (var i = 0; i < parse.dataClass.length; i++) {
                  out_class += '<option value="'+parse.dataClass[i].class_id+'">'+parse.dataClass[i].class_name+'</option>';
              }
          $('#class_id').html(out_class);           
      } else {;
          $('#class_id')
              .empty()
              .append('<option selected="selected" value="">-- Pilih Kelas --</option>')
          ;
      }
  },
  error: function(error){
      console.log('no data get');
  }
  });
    // jQuery(document).ready(function($){
    //     console.log('tes');
    // });
}

function get_tahun_ajaran() 
{
  $('#tahun_ajaran_id').select2();
  var out_tahun_ajaran ;
  var num ;
  $.ajax({
  type: 'GET',
  url: "{{ URL::route('GetClass') }}",
  headers : {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function( values )
  {
      parse = $.parseJSON(values);
      if(parse.stat==1){
          out_tahun_ajaran = '<option value="">-- Pilih Tahun Ajaran --</option>';
          for (var i = 0; i < parse.dataTahunAjaran.length; i++) {
                  out_tahun_ajaran += '<option value="'+parse.dataTahunAjaran[i].tahun_ajaran_id+'">'+parse.dataTahunAjaran[i].tahun_ajaran_name+'</option>';
              }
          $('#tahun_ajaran_id').html(out_tahun_ajaran);           
      } else {;
          $('#tahun_ajaran_id')
              .empty()
              .append('<option selected="selected" value="">-- Pilih Tahun Ajaran --</option>')
          ;
      }
  },
  error: function(error){
      console.log('no data get');
  }
  });
    // jQuery(document).ready(function($){
    //     console.log('tes');
    // });
}
// var row=0;
// function insRow() 
// {
//     jQuery(document).ready(function($){
//         row++;
//         var column = 
//         '<tr id="row-'+row+'">'+
//             '<td>'+row+'</td>'+
//             // '<td><select name="siswa_id[]" id="siswa_id'+row+'" class="form-control form-control-sm" onclick="get_siswa(this,'+row+')"></select></td>'+
//             '<td><select name="tahun_ajaran_id[]" id="tahun_ajaran_id'+row+'" class="form-control form-control-sm" onclick="get_tahun_ajaran(this,'+row+')"></select></td>'+
//             '<td><select name="class_id[]" id="class_id'+row+'" class="form-control form-control-sm" onclick="get_class(this,'+row+')"></select></td>'+
//             '<td><button type="button" class="btn btn-sm btn-danger text-white" onclick="deleteRow('+row+')"><i class="fa fa-trash"></i></button></td>'+
//         '</tr>';
//         $('#table_siswa').append(column);
//     });
// }

// function get_siswa(e,row) 
// {
//   $('#siswa_id'+row+'').select2();
//   var out_siswa ;
//   var num ;
//   $.ajax({
//   type: 'GET',
//   url: "{{ URL::route('GetSiswa') }}",
//   headers : {
//       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//   },
//   success: function( values )
//   {
//       parse = $.parseJSON(values);
//       if(parse.stat==1){
//           out_siswa = '<option value="">-- Pilih Nama Siswa --</option>';
//           for (var i = 0; i < parse.dataSiswa.length; i++) {
//               if(parse.dataSiswa[i].siswa_nisn!=''){
//                 num=parse.dataSiswa[i].siswa_nisn;
//               }else{
//                 num=parse.dataSiswa[i].siswa_nis;
//               }
//                   out_siswa += '<option value="'+parse.dataSiswa[i].siswa_id+'">'+parse.dataSiswa[i].siswa_name+'- '+num+'</option>';
//               }
//           $('#siswa_id'+row+'').html(out_siswa);           
//       } else {;
//           $('#siswa_id'+row+'')
//               .empty()
//               .append('<option selected="selected" value="">-- Pilih Siswa --</option>')
//           ;
//       }
//   },
//   error: function(error){
//       console.log('no data get');
//   }
//   });
//     // jQuery(document).ready(function($){
//     //     console.log('tes');
//     // });
// }
// function get_class(e,row) 
// {
//   $('#class_id'+row+'').select2();
//   var out_class ;
//   var num ;
//   $.ajax({
//   type: 'GET',
//   url: "{{ URL::route('GetClass') }}",
//   headers : {
//       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//   },
//   success: function( values )
//   {
//       parse = $.parseJSON(values);
//       if(parse.stat==1){
//           out_class = '<option value="">-- Pilih Kelas --</option>';
//           for (var i = 0; i < parse.dataClass.length; i++) {
//                   out_class += '<option value="'+parse.dataClass[i].class_id+'">'+parse.dataClass[i].class_name+'</option>';
//               }
//           $('#class_id'+row+'').html(out_class);           
//       } else {;
//           $('#class_id'+row+'')
//               .empty()
//               .append('<option selected="selected" value="">-- Pilih Kelas --</option>')
//           ;
//       }
//   },
//   error: function(error){
//       console.log('no data get');
//   }
//   });
//     // jQuery(document).ready(function($){
//     //     console.log('tes');
//     // });
// }

// function get_tahun_ajaran(e,row) 
// {
//   $('#tahun_ajaran_id'+row+'').select2();
//   var out_tahun_ajaran ;
//   var num ;
//   $.ajax({
//   type: 'GET',
//   url: "{{ URL::route('GetClass') }}",
//   headers : {
//       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//   },
//   success: function( values )
//   {
//       parse = $.parseJSON(values);
//       if(parse.stat==1){
//           out_tahun_ajaran = '<option value="">-- Pilih Tahun Ajaran --</option>';
//           for (var i = 0; i < parse.dataTahunAjaran.length; i++) {
//                   out_tahun_ajaran += '<option value="'+parse.dataTahunAjaran[i].tahun_ajaran_id+'">'+parse.dataTahunAjaran[i].tahun_ajaran_name+'</option>';
//               }
//           $('#tahun_ajaran_id'+row+'').html(out_tahun_ajaran);           
//       } else {;
//           $('#tahun_ajaran_id'+row+'')
//               .empty()
//               .append('<option selected="selected" value="">-- Pilih Tahun Ajaran --</option>')
//           ;
//       }
//   },
//   error: function(error){
//       console.log('no data get');
//   }
//   });
//     // jQuery(document).ready(function($){
//     //     console.log('tes');
//     // });
// }

function deleteRow(row) 
{
    jQuery(document).ready(function($){
        $('#row-'+row+'').remove(); 
        toastr['warning']('Data Di hapus!!!');
    });
}

function save_biaya_siswa()
{
      $("#biaya-siswa").validate();
      var data = new FormData($("#biaya-siswa")[0]);
      var message = "update";

      swal({
      title: "Apakah anda yakin ?",
      text: "Input data ini",
      icon: "warning",
      buttons: true,
      dangerMode: false,
      })
      .then((willDelete) => {
        if (willDelete) {
              $.ajax({
                  type  : 'POST',
                  url   : 'save-biaya-siswa',
                  headers : {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  data  : data,
                  beforeSend:()=>{
                      swal({
                          title: "Waiting",
                          text: "Data Sedang Di proses",
                          icon: "../tpl/assets/images/loader.gif",
                          button:false
                      });
                  },
                  cache:false,
                  contentType:false,
                  processData:false
                  }).done(function(data) {
                  swal({
                      title: "Success!",
                      text: "Data berhasil "+message,
                      icon: "success",
                      button: "Ok!",
                  }).then(function(){
                    location.reload(true)
                  });
              }).fail(function(data) {  
                  var dt = data.responseJSON;
                  
                  if(dt.errors)
                  {
                      $.each(dt.errors, function (key, value) {
                          var input = '[name=' + key + ']';
                          
                          $(input + '+span').html('<strong>'+ value +'</strong>');
                          $(input).addClass('is-invalid');
                          $(input).focus();
                          $(input).change(function(){
                              $(input+'+span').html('');
                              $(input).removeClass('is-invalid');
                          })
                      });  
                  }
                  else
                  {
                      swal({
                      title: dt.status.message,
                      type: "error"
                      })
                  }
                  
              });
        }   
      });
}

</script>
@endsection