@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-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="table_transaksi">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th style="display: none">Transaksi ID</th>
                                    <th>Transaksi Nomor</th>
                                    <th>Nama Siswa</th>
                                    <th>Jumlah Transaksi</th>
                                    <th>Tanggal</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $no=1;
                                @endphp
                                @foreach ($detail_transaksi as $dt)
                                <tr>
                                    <td class="tableClick"></td>
                                    <th style="display: none">{{$dt->transaksi_lain_id}}</th>
                                    <td>{{$dt->transaksi_lain_nomor}}</td>
                                    <td>{{$dt->siswa_name}}</td>
                                    <td>Rp {{number_format($dt->transaksi_lain_jumlah)}}</td>
                                    <td>{{date('d-m-Y', strtotime($dt->transaksi_lain_insert_time))}}</td>
                                <td><a target="blank" class="btn-sm btn btn-info btnprn" href="{{url('/bukti-pembayaran-lain/'.$dt->transaksi_lain_id.'')}}"><i class="fa fa-print"></i> Print </a></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><!--endrow-->
@endsection

@section('js')

<script type="text/javascript">
$(function(){
var table = $('#table_transaksi').DataTable( {
//"ajax": "../ajax/data/objects.txt",
"columns": [
    {
        "className":      'detail-transaksi-lain',
        "orderable":      false,
        "data":           null,
        "defaultContent": ''
    },
    { "data": "transaksi_lain_id"},
    { "data": "transaksi_lain_nomor"},
    { "data": "siswa_name"},
    { "data": "transaksi_lain_jumlah"},
    { "data": "trasaksi_lain_insert_time"},
    { "data": "action" },
],
});

$('#table_transaksi tbody').on('click', 'td.detail-transaksi-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-transaksi-lain/',
            headers : {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data  : { 
                transaksi_lain_id : data_r.transaksi_lain_id,
            },
            success  : function(values){
                $.each(values.data.data.detail_transaksi_lain,function(i,v){
                    var tanggal = new Date(v.transaksi_lain_insert_time);
                tb = 
                '<table class="table table-bordered table-hover" border="2">'+
                    '<thead>'+
                        '<tr>'+
                            '<th width="20%">No Transaksi</th>'+
                            '<td>'+v.transaksi_lain_nomor+'</td>'+
                            '<th width="20%">Kelas</th>'+
                            '<td>'+v.class_id+'</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<th width="20%">NIS</th>'+
                            '<td>'+v.siswa_nisn+'</td>'+
                            '<th width="20%">Tanggal</th>'+
                            '<td>'+tanggal.toLocaleDateString()+'</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<th width="20%">Nama Siswa</th>'+
                            '<td>'+v.siswa_name+'</td>'+
                            '<th width="20%">Jam</th>'+
                            '<td>'+tanggal.toLocaleTimeString()+'</td>'+
                        '</tr>'+
                    '</thead>'+
                    '<thead class="bg-dark text-white">'+
                        '<tr>'+
                            '<td style="font-weight:bold">No</td>'+
                            '<td style="font-weight:bold">Rincian Name</td>'+
                            '<td style="font-weight:bold">Nominal</td>'+
                            '<td style="font-weight:bold">Bayar</td>'+
                        '</tr>'+
                    '</thead>'+
                    '<tbody>';
                })
                
                var z=1;
                $.each(values.data.data.detail_transaksi_lain,function(i,v){
                    tb +=
                    '<tr>'+
                        '<td>'+ z++ +'</td>'+
                        '<td>'+v.tagihan_name+'</td>'+
                        '<td>Rp '+addCommas(v.transaksi_detail_jumlah)+'</td>'+
                        '<td>Rp '+addCommas(v.transaksi_detail_bayar)+'</td>'+
                    '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
       // Open this row
        }
    });
});

</script>

@endsection