@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_spp" class="table table-bordered" width="100%">
              <thead>
                  <tr>
                      <th></th>
                      <th style="display: none;">Biaya SPP ID</th>
                      <th>Nama Biaya SPP</th>
                      <th>Periode</th>
                      <th>Biaya SPP</th>
                      <th>Status</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach($biayaspp as $dt)
                  <tr>
                      <td class="tableClick"></td>
                      <td style="display: none;">{{$dt->biaya_spp_id}}</td>
                      <td>{{$dt->biaya_spp_name}}</td>
                      <td>{{date('d-m-Y', strtotime($dt->biaya_spp_periode_awal))}} - {{date('d-m-Y', strtotime($dt->biaya_spp_periode_akhir))}}</td>
                      <td>Rp. {{number_format($dt->biaya_spp_nominal)}}</td>
                      <td>
                        @if ($dt->biaya_spp_activeYN=='Y')
                            Active
                        @else
                            in Active
                        @endif
                      </td>
                      <td>
                        @if($dt->biaya_spp_status == 'draft')
                          <button onclick="edit_all('modal-all-lg',{{$dt->biaya_spp_id}})" type="button" class="btn btn-outline-success btn-sm"> Edit </button>&nbsp;&nbsp;
                          <button onclick="delete_all('biayaspp/{{$dt->biaya_spp_id}}','{{$dt->biaya_spp_id}}')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                        @endif
                      </td>
                  </tr>
                  @endforeach
              </tbody>
          </table>
          </div>
          </div>
        </div>
      </div>
    </div><!-- End Row-->
@endsection
@section('js')
<script type="text/javascript">
    form = $("#form-all-lg");
    var url_add = "/create-biayaspp" ;
    var url_save = "/save-biayaspp" ;
    var url_edit = "/edit-biayaspp" ;
    var url_update = "/update-biayaspp" ;

  $(function(){
  var table = $('#table_biaya_spp').DataTable( {
    //"ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'detail-biaya-spp',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "biaya_spp_id", visible:true},
        { "data": "biaya_spp_name"},
        { "data": "biaya_spp_periode_awal"},
        { "data": "biaya_spp_nominal"},
        { "data": "biaya_spp_activeYN"},
        { "data": "action" },
    ],
  });

  $('#table_biaya_spp tbody').on('click', 'td.detail-biaya-spp', 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-spp/',
            headers : {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
            data  : { 
                biaya_spp_id : data_r.biaya_spp_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_spp_detail,function(i,v){
                  tb +=
                  '<tr>'+
                    '<td>'+v.biaya_spp_detail_name+'</td>'+
                    '<td>Rp '+addCommas(v.biaya_spp_detail_nominal)+'</td>'+
                    '<td>'+v.biaya_spp_detail_description+'</td>'+
                  '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
       // Open this row
      }
  });
});
</script>
@endsection