@php
    $siteBreadcumb = [
        ["url"=>"/realisasi-belanja","label"=>$siteTitle],
        ["url"=>"/realisasi-belanja/create","label"=>$sitesubTitle]
    ];   
@endphp

@extends('layouts.empty')
@section('styles')
  <!-- DataTables -->
  <link rel="stylesheet" href="/AdminLTE-3.2.0/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="/AdminLTE-3.2.0/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="/AdminLTE-3.2.0/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css">
@endsection
  
@section('content')
    <div class="card">
        <div class="card-header">
            <h2 class="card-title"><i class="fa fa-th-list mr-2"></i> {{ $sitesubTitle }}</h2>
            <div class="card-tools"></div>
        </div>
        <div class="card-body">
            <form id="uploadData" action="/upload-realisasi-belanja" method="POST" autocomplete="off" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <b>File Gambar</b><br/>
                    <input type="file" name="file" required>
                </div>
                <div class="form-group"><button type="submit" class="btn btn-sm btn-success"><i class="fas fa-file-excel"></i> Upload File</button></div>
                <p><strong>Format:xlsx | Columns:</strong> 
                    "tahun_anggaran",
                    "jenis_belanja",
                    "sub_jenis_belanja",
                    "kode_program",
                    "nama_program",
                    "kode_skpd",
                    "nama_skpd",
                    "kode_kegiatan",
                    "nama_kegiatan",
                    "kode_sub_kegiatan",
                    "nama_sub_kegiatan",
                    "kode_rsk",
                    "nama_rsk",
                    "kode_rekening",
                    "nama_rekening",
                    "jumlah_anggaran",
                    "volume_satuan",
                    "unit_satuan"</p>
            </form>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h2 class="card-title"><i class="fa fa-check mr-2"></i> Validasi Data Rencana Belanja</h2>
            <div class="card-tools">
                {{-- @if(auth()->user()->can('Tambah SKPP')) --}}
                    <button id="upload_validated" class="btn btn-sm btn-default"><i class="fa fa-save"></i>  Upload Data</button>
                {{-- @endif --}}
            </div>
        </div>
        <div class="card-body">
            <table id="tempUploadRealisasi" class="table table-striped jambo_table tblClickRow" style="width:100%">
                <thead>
                    <tr class="headings">
                        <th>No</th>
                        <?php 
                            $arrCol = array("Tahun", "Jenis", "Sub Jenis", "Kode Program", 
                            "Nama Program", "Kode SKPD", "Nama SKPD", "Kode Kegiatan", "Nama Kegiatan", "Kode Sub Kegiatan", 
                            "Nama Sub Kegiatan", "Kode RSK", "Nama RSK", "Kode Rek", "Nama Rek", "Anggaran", 
                            "Volume", "Unit");
                            foreach($arrCol as $rowCol){
                                echo "<th>$rowCol</th>";
                            }
                        ?>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="/AdminLTE-3.2.0/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/jszip/jszip.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
    <script src="/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/js/fixedColumns.bootstrap4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on("click","#upload_validated",function (e){
                e.preventDefault();
                let test = Swal.fire({
                    title: 'Data Rencana Belanja akan diUpload?',
                    showDenyButton: true,
                    showCancelButton: false,
                    confirmButtonText: 'Ya',
                    denyButtonText: "Tidak",
                    icon: "warning",
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        location.href='{{ url('/upload-realisasi-belanja/upload') }}';
                    }
                })
            });

            var dtTable = $('#tempUploadRealisasi').DataTable( {
                "processing": true,
                "serverSide": true,
                "ordering": false,
                "autoWidth": false,
                "ajax": {
                    url: "/upload-realisasi-belanja/datatable",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function (d) {
                    }
                },
                "columnDefs": [
                    //{ className: "td-nowrap", "targets": [ 1 ] }
                ],

                "lengthMenu": [
                    [ 10, 25, 50 ],
                    [ "10", "25", "50" ]
                ],
                "paging": true, // Table pagination
                "columns": [
                    { "data": null},
                    { "data": "tahun_anggaran", "width": "400px" },
                    { "data": "jenis_belanja", "className":"text-left","defaultContent":"-" },                    
                    { "data": "sub_jenis_belanja", "className":"text-left", "defaultContent":"-" },  
                    { "data": "kode_program", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_program", "className":"text-left", "defaultContent":"-" },  
                    { "data": "kode_skpd", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_skpd", "className":"text-left", "defaultContent":"-" },  
                    { "data": "kode_kegiatan", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_kegiatan", "className":"text-left", "defaultContent":"-" },  
                    { "data": "kode_sub_kegiatan", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_sub_kegiatan", "className":"text-left", "defaultContent":"-" },  
                    { "data": "kode_rsk", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_rsk", "className":"text-left", "defaultContent":"-", "width":300 },  
                    { "data": "kode_rekening", "className":"text-center", "defaultContent":"-" },  
                    { "data": "nama_rekening", "className":"text-left", "defaultContent":"-" },  
                    { "data": "jumlah_anggaran", "className":"text-right", "defaultContent":"0" },  
                    { "data": "volume_satuan", "className":"text-center", "defaultContent":"0" },  
                    { "data": "unit_satuan", "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;

                    $("td:eq(0)", nRow).html(index);
                    $("td:eq(15)", nRow).html(separateNumberIndo(aData["jumlah_anggaran"]));

                    return nRow;
                },
                "language": {
                    "lengthMenu": "Tampil _MENU_ data per Halaman",
                    "zeroRecords": "Data tidak ditemukan!",
                    "info": "Halaman _PAGE_ dari _PAGES_ Halaman",
                    "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,
            });
        });
    </script>
@endsection