@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-12">
        <div class="card">
          <div class="card-header">
            <button onclick="add_all('modal-all-lg')" class="btn btn btn-primary btn-rounded float-left waves-effect waves-light"><i class="fa fa-plus"></i> Tambah </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
            <table id="table_biaya_lain" class="table table-bordered" width="100%">
              <thead>
                  <tr>
                      <th></th>
                      <th style="display: none;">Biaya ID</th>
                      <th>Nama Biaya</th>
                      <th>Periode</th>
                      <th>Biaya Lain-lain</th>
                      <th>Status</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach($biayalain as $dt)
                  <tr>
                      <td class="tableClick"></td>
                      <td style="display: none;">{{$dt->biaya_lain_id}}</td>
                      <td>{{$dt->biaya_lain_name}}</td>
                      <td>{{date('d-m-Y', strtotime($dt->biaya_lain_periode_awal))}} - {{date('d-m-Y', strtotime($dt->biaya_lain_periode_akhir))}}</td>
                      <td>Rp. {{number_format($dt->biaya_lain_nominal)}}</td>
                      <td>
                        @if ($dt->biaya_lain_activeYN=='Y')
                            Active
                        @else
                            in Active
                        @endif
                      </td>
                      <td>
                          <button onclick="get_class()" data-toggle="modal" data-target="#AssignModal" data-id="{{$dt->biaya_lain_id}}" class="btn btn-warning btn-sm rounded-0"><i class="fa fa-check"></i>&nbsp;Assign</button><br>
                          <button onclick="edit_all('modal-all-lg',{{$dt->biaya_lain_id}})" type="button" class="btn btn-success btn-sm rounded-0"><i class="fa fa-edit"></i>&nbsp;Edit </button><br>
                          <button onclick="delete_all('biaya-lain/{{$dt->biaya_lain_id}}','{{$dt->biaya_lain_id}}')" class="btn btn-danger btn-sm rounded-0"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                      </td>
                  </tr>
                  @endforeach
              </tbody>
          </table>
          </div>
          </div>
        </div>
      </div>
    </div><!-- End Row-->
    <!-- Modal -->
    <div class="modal fade" id="AssignModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content animated flipInX">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Assign Biaya</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        <form id="assign-biaya">
          <div class="modal-body">
            <div class="col">
              <input type="hidden" name="biaya_lain_id" id="biaya_lain_id" class="form-control"/>
              <div class="form-group">
                <label class="col-form-label">Tahun Ajaran</label>
                <select style="width:100% !important;" class="form-control select-select" name="tahun_ajaran_id" id="tahun_ajaran_id"> 
                </select>                                    
              </div>
              <div class="form-group">
                <label class="col-form-label">Kelas</label>
                <select style="width:100% !important;" class="form-control select-select" name="class_id" id="class_id"> 
                </select>                                    
              </div>
            </div>    
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="save_assign_biaya()">Simpan</button>
          </div>
        </form>
        </div>
      </div>
    </div>
@endsection
@section('js')
<script type="text/javascript">
form = $("#form-all-lg");
var url_add = "/create-biaya-lain" ;
var url_save = "/save-biaya-lain" ;
var url_edit = "/edit-biaya-lain" ;
var url_update = "/update-biaya-lain" ;

$('#AssignModal').on('shown.bs.modal', function (e) {
    var link     = $(e.relatedTarget),
        modal    = $(this),
        id = link.data("id");
    modal.find("#biaya_lain_id").val(id);
});
$('#AssignModal').modal({
  show:false,
  keyboard: false,
  backdrop: 'static'
});

function get_class() 
{
    get_tahun_ajaran();
    $('#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');
    // });
}

$(function(){
  var table = $('#table_biaya_lain').DataTable( {
    //"ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'detail-biaya-lain',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "biaya_lain_id", visible:true},
        { "data": "biaya_lain_name"},
        { "data": "biaya_lain_periode_awal"},
        { "data": "biaya_lain_nominal"},
        { "data": "biaya_lain_activeYN"},
        { "data": "action" },
    ],
  });

  $('#table_biaya_lain tbody').on('click', 'td.detail-biaya-lain', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var tb;

    //console.log(row.data());

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        data_r = row.data();
        $.ajax({
            type  : 'GET',
            dataType: 'JSON',
            url   : 'get-detail-biaya-lain/',
            headers : {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
            data  : { 
                biaya_lain_id : data_r.biaya_lain_id,
            },
            success  : function(values){
              
                tb = '<table class="table table-bordered table-hover" border="2">'+
                '<thead>'+
                    '<tr>'+
                        '<td style="font-weight:bold">Rincian Name</td>'+
                        '<td style="font-weight:bold">Nominal</td>'+
                        '<td style="font-weight:bold">Description</td>'+
                    '</tr>'+
                '</thead>'+
                '<tbody>';
                $.each(values.data.data.biaya_lain_detail,function(i,v){
                  tb +=
                  '<tr>'+
                    '<td>'+v.biaya_lain_detail_name+'</td>'+
                    '<td>Rp '+addCommas(v.biaya_lain_detail_nominal)+'</td>'+
                    '<td>'+v.biaya_lain_detail_description+'</td>'+
                  '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
      // Open this row
      }
  });
});

function save_assign_biaya()
{
      $("#assign-biaya").validate();
      var data = new FormData($("#assign-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-assign-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