@section('styles')
  <!-- DataTables -->
  <link rel="stylesheet" href="{{ $baseUrl }}/AdminLTE-3.2.0/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="{{ $baseUrl }}/AdminLTE-3.2.0/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="{{ $baseUrl }}/AdminLTE-3.2.0/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="{{ $baseUrl }}/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css">
@endsection

<table id="tblRSK" class="table table-striped jambo_table tblClickRow" style="width:100%;">
    <thead>
        <tr class="headings">
            <th>No</th>
            <?php 
                $arrCol = array(
                    "SKPD", 
                    "Sub Kegiatan", 
                    "RSK", 
                    "Anggaran", 
                    "Aksi"
                );

                foreach($arrCol as $rowCol){
                    echo "<th>$rowCol</th>";
                }
            ?>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript">
    $(document).ready(function(){
        $("#srcTA").on("change",function(){
            dtTable.draw();
        });

        $('#skpd').select2({
            placeholder: 'Pilih SKPD',
            allowClear: true,
            ajax: {
                url: '{{ $baseUrl }}/skpd-search?realisasi-belanja=ya&ta='+$("#srcTA").val(),
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });

        $('#skpd').on('select2:select', function (e) {
            dtTable.draw();
        })

        $('#skpd').on('select2:clear', function (e) {
            dtTable.draw();
        })

        var dtTable = $('#tblRSK').DataTable( {
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "autoWidth": false,
            "ajax": {
                url: "{{ $baseUrl }}/realisasi-belanja/create-from-rsk/datatable",
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: function (d) {
                    d.src = $("#src").val()
                }
            },
            "columnDefs": [
                //{ className: "td-nowrap", "targets": [ 1 ] }
            ],
            "dom": "<\"top\" <\"row\"<\"col-md-6\"l><\"col-md-6 text-right\"f>>>rt<\"bottom\" <\"row\"<\"col-md-6\"i><\"col-md-6\"p>> ><\"clear\">",
            "lengthMenu": [
                [ 10, 25, 50 ],
                [ "10", "25", "50" ]
            ],
            "paging": true, // Table pagination
            "columns": [
                { "data": null},
                { "data": null, "className":"text-left", "defaultContent":"-" },  
                { "data": null, "className":"text-left", "defaultContent":"-" },
                { "data": null, "className":"text-left", "defaultContent":"-" },  
                { "data": null, "className":"text-right", "defaultContent":"-" },  
                { "data": null, "className":"text-center", "defaultContent":"-" },  
            ],
            "rowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull, oSettings) {
                let info = dtTable.page.info();
                let numStart = info.page;
                let index = (numStart * dtTable.page.len()) + iDisplayIndex + 1;
                let realisasi = aData["jml"] > 0 ? "<span class='bg-warning p-1'>"+separateNumberIndo(aData["jml"])+"</span>":"";
                //let btnInput = {{ empty(Auth::user()->can("Input Realisasi DBH Realisasi Belanja"))?"false":Auth::user()->can("Input Realisasi DBH Realisasi Belanja") }}?'<a class="btn btn-sm btn-success modalButton" title="Input Realisasi" href="/dbh/realisasi-belanja/'+aData["id"]+'/inputRealisasi"><i class="fa fa-paper-plane"></i> Input Realisasi</a>':''; 
                let btnInput = "";
                $("td:eq(0)", nRow).html(index);
                $("td:eq(1)", nRow).html("<div style='width:200px;'>"+aData["c_opd"]+" | "+aData["n_opd"]+"</div>");
                $("td:eq(2)", nRow).html("<div style='width:200px;'>"+aData["c_subgiat"]+" | "+aData["n_subgiat"]+"</div>");
                $("td:eq(3)", nRow).html("<div style='width:200px;'>"+aData["i_id"]+" | "+aData["n_rsk"]+"</div>");
                $("td:eq(4)", nRow).html(separateNumberIndo(aData["v_angg_tapd"]));
                $("td:eq(5)", nRow).html('<a href="{{ $baseUrl }}/realisasi-belanja/create?rsk='+aData["i_id"]+'" class="btn btn-sm btn-info mr-2"><i class="fa fa-edit"></i></a>');
                
                return nRow;
            },
            "language": {
                "lengthMenu": "Tampil _MENU_ data per Halaman",
                "zeroRecords": "Data tidak ditemukan!",
                "info": "Halaman _PAGE_ dari _PAGES_ Halaman ( _TOTAL_ Data )",
                "infoEmpty": "Data tidak tersedia",
                "infoFiltered": "(Disaring dari _MAX_ Data)",
                "paginate": {
                    "previous": "<i class='fas fa-angle-double-left'></i>",
                    "next": "<i class='fas fa-angle-double-right'></i>",
                },
                "processing": "<div class='loading'></div>",
            },
            scrollX:true,
            scrollY: "350px",
            buttons: [
                {
                    extend: "collection",
                    text: "Export",
                    buttons: [
                        {
                            text: "<i class=\'fas fa-file-excel\'></i> Excel",
                            className: "export-data link-excel",
                            attr: {
                                formid: "frmRealisasi",
                                extype: "excel"
                            }    
                        },
                    ],
                }
            ],
        });
    });
</script>