@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>
    <form id="update-biaya">
    <div class="row">
        <div class="col">
          <div class="form-group">
              <label class="col-form-label">Universitas / Sekolah</label>
              <select class="form-control select-select" name="university_id" id="university_id" readonly> 
                  <option value="">-----Pilih Universitas / Yayasan-----</option>
                      <option value="{{$university->university_id}}" selected>{{$university->university_name}}</option>
              </select>                                    
          </div>                
        </div>
        <div class="col">
          <div class="form-group">
              <label class="col-form-label">Tahun Ajaran1</label>
              <select class="form-control select-select" name="tahun_ajaran_id" id="tahun_ajaran_id"> 
                <option value="">-----Pilih Tahun Ajaran-----</option>
                <option value="{{$tahun_ajaran->tahun_ajaran_id}}" selected>{{$tahun_ajaran->tahun_ajaran_name}}</option>
              </select>                                         
          </div>                
        </div>
        <div class="col"> 
          <button type="button" class="btn btn-primary waves-effect waves-light mt-4 submit-btn" id="save_confirmation_btn" onclick="save_confirmation()"> <i class="fa fa-save"></i> <span>Simpan</span> </button>
        </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <button type="button" class="btn btn-primary" id="btnBeforeSaveRouteCode" onclick="insRow();"><i class="fa fa-plus" aria-hidden="true"></i> Tambah Siswa </button>
          </div>
          <div class="card-body">
            <div class="col-md-12">
                <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="20%">Kelas</th>
                                    <th width="25%">Siswa</th>
                                    <th width="20%">Biaya SPP</th>
                                    <th width="20%">Deskripsi</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- End Row-->
    </form>

@endsection
@section('js')
<script type="text/javascript">
var row=0;
function insRow() 
{
    jQuery(document).ready(function($){
        row++;
        var column = 
        '<tr id="row-'+row+'">'+
            '<td>'+row+'</td>'+
            '<td><select name="class_id[]" id="class_id'+row+'" class="form-control form-control-sm" onclick="get_class(this,'+row+')" onchange="get_siswa(this,'+row+')"></select></td>'+
            '<td><select name="siswa_id[]" id="siswa_id'+row+'" class="form-control form-control-sm"></select></td>'+
            '<td><select name="biaya_spp_id[]" id="biaya_spp_id'+row+'" class="form-control form-control-sm" onclick="get_spp(this,'+row+')"></select></td>'+
            '<td><textarea id="description'+row+'" name="description[]" class="form-control form-control-sm"></textarea></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 ;
  var classid=$('#class_id'+row+'').val();
  $.ajax({
  type: 'GET',
  url: "{{ URL::route('GetSiswa') }}",
  headers : {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  data:{
      class_id:classid
  },
  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 get_spp(e,row) 
{
  $('#biaya_spp_id'+row+'').select2();
  var out_spp ;
  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_spp = '<option value="">-- Pilih Biaya SPP --</option>';
          for (var i = 0; i < parse.dataBiayaSPP.length; i++) {
                  out_spp += '<option value="'+parse.dataBiayaSPP[i].biaya_spp_id+'">'+parse.dataBiayaSPP[i].biaya_spp_name+'</option>';
              }
          $('#biaya_spp_id'+row+'').html(out_spp);           
      } else {;
          $('#biaya_spp_id'+row+'')
              .empty()
              .append('<option selected="selected" value="">-- Pilih Biaya SPP --</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_confirmation()
{
      $("#update-biaya").validate();
      var data = new FormData($("#update-biaya")[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-update-biaya',
                  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