@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_psb" class="table table-bordered" width="100%">
              <thead>
                  <tr>
                      <th></th>
                      <th style="display: none;">Biaya PPDB ID</th>
                      <th>Nama Biaya PPDB</th>
                      <th>Periode</th>
                      <th>Biaya PPDB</th>
                      <th>Status</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  @foreach($biayapsb as $dt)
                  <tr>
                      <td class="tableClick"></td>
                      <td style="display: none;">{{$dt->biaya_psb_id}}</td>
                      <td>{{$dt->biaya_psb_name}}</td>
                      <td>{{date('d-m-Y', strtotime($dt->biaya_psb_periode_awal))}} - {{date('d-m-Y', strtotime($dt->biaya_psb_periode_akhir))}}</td>
                      <td>Rp. {{number_format($dt->biaya_psb_nominal)}}</td>
                      <td>
                        @if ($dt->biaya_psb_activeYN=='Y')
                            Active
                        @else
                            in Active
                        @endif
                      </td>
                      <td>
                          <button onclick="edit_all('modal-all-lg',{{$dt->biaya_psb_id}})" type="button" class="btn btn-outline-success btn-sm"> Edit </button>&nbsp;&nbsp;
                          <button onclick="delete_all('biayapsb/{{$dt->biaya_psb_id}}','{{$dt->biaya_psb_id}}')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                      </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-biayapsb" ;
    var url_save = "/save-biayapsb" ;
    var url_edit = "/edit-biayapsb" ;
    var url_update = "/update-biayapsb" ;

  $(function(){
  var table = $('#table_biaya_psb').DataTable( {
    //"ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'detail-biaya-psb',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "biaya_psb_id", visible:true},
        { "data": "biaya_psb_name"},
        { "data": "biaya_psb_periode_awal"},
        { "data": "biaya_psb_nominal"},
        { "data": "biaya_psb_activeYN"},
        { "data": "action" },
    ],
  });

  $('#table_biaya_psb tbody').on('click', 'td.detail-biaya-psb', 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-psb/',
            headers : {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
            data  : { 
                biaya_psb_id : data_r.biaya_psb_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_psb_detail,function(i,v){
                  tb +=
                  '<tr>'+
                    '<td>'+v.biaya_psb_detail_name+'</td>'+
                    '<td>Rp '+addCommas(v.biaya_psb_detail_nominal)+'</td>'+
                    '<td>'+v.biaya_psb_detail_description+'</td>'+
                  '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
       // Open this row
      }
  });
});
</script>
@endsection