<script type="text/javascript">
    $(document).ready(function() {
        $("#download").click(function() {

            var status             = "<?= $status ?>";
            var id_cabang          = "<?= $id_cabang ?>";
            var id_departemen      = "<?= $id_departemen ?>";
            var id_karyawan        = "<?= $id_karyawan ?>";
            var tanggal_mulai      = "<?= $tgl_mulai ?>";
            var tanggal_selesai    = "<?= $tgl_selesai ?>";

            window.location.href = "<?= route('pengajuan.lembur.data.download.excel') ?>"+"/"+tanggal_mulai+'/'+tanggal_selesai+'/'+status+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen;
        });
    });
</script>
<div class="row text-right">
    <div class="col-md-12">
        <button type="button" id="download" class="btn btn-primary">Download</button>
    </div>
</div>
<div class="table-responsive">
    <table id="list_data" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr class="bg-tr">
                <th class="text-center no-sort" rowspan="2">NO</th>
                <th class="text-left no-sort" rowspan="2">NAMA</th>
                <th class="text-center no-sort" rowspan="2">TANGGAL<br>PENGAJUAN</th>
                <th class="text-center no-sort" colspan="3">JAM LEMBUR</th>
                <th class="text-center no-sort" colspan="2">KETERANGAN</th>
                <th class="text-center no-sort" colspan="5">APPROVAL</th>
                <?php
                    if (in_array($this->session->userdata('level_user'), array("1"))) {
                ?>
                <th class="text-center no-sort" rowspan="2">AKSI</th>
                <?php } ?>
            </tr>
            <tr class="bg-tr">
                <th class="text-center no-sort">MULAI</th>
                <th class="text-center no-sort">SELESAI</th>
                <th class="text-center no-sort">LAMA LEMBUR(M)</th>
                <th class="text-center no-sort">MULAI</th>
                <th class="text-center no-sort">SELESAI</th>
                <th class="no-sort">SUPERVISI</th>
                <th class="no-sort">KEP. DEP</th>
                <th class="no-sort">KEP. CAB</th>
                <th class="no-sort">DIREKSI</th>
                <th class="no-sort">HRD</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">
     $(function() {
        list_data = $('#list_data').DataTable({
                    'searching'   : false,
                    'paging'      : true,
                    'lengthChange': true,
                    'ordering'    : true,
                    'info'        : true,
                    'scrollX'     : true,
                    // 'scrollCollapse': true,
                    // 'fixedColumns': true,
                    'language'    :{
                                    'url'         : '<?=base_url("assets/plugins/datatables/dataTables-language-id.json")?>',
                                    'sEmptyTable' : 'Tidak ada data untuk ditampilkan'
                                },
                    "processing"  : true,
                    "serverSide"  : true,
                    "order"       : [],

                    "ajax"        : {
                                    "url": "<?= route('pengajuan.lembur.data.list').'/'.$tgl_mulai.'/'.$tgl_selesai.'/'.$status.'/'.$id_karyawan.'/'.$id_cabang.'/'.$id_departemen ?>",
                                    "type": "GET",
                                    "complete" : function(data){
                                        reconfigure(data);
                                    }
                                    },

                    "aoColumnDefs": [{
                                        'bSortable': false,
                                        'aTargets': ['no-sort']
                                    }],
                    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                            $('td:eq(0)', nRow).css({'text-align':'center','width':'10px'});
                            $('td:eq(1)', nRow).css({'text-align':'left','width':'250px'});
                            $('td:eq(2)', nRow).css({'text-align':'center','width':'100px'});
                            $('td:eq(3)', nRow).css({'text-align':'center','width':'100px'});
                            $('td:eq(4)', nRow).css({'text-align':'center','width':'100px'});
                            $('td:eq(5)', nRow).css({'text-align':'center','width':'100px'});
                            $('td:eq(6)', nRow).css({'text-align':'center','width':'130px'});
                            $('td:eq(7)', nRow).css({'text-align':'center','width':'130px'});
                            $('td:eq(8)', nRow).css({'text-align':'center','width':'8px'});
                            $('td:eq(9)', nRow).css({'text-align':'center','width':'8px'});
                            $('td:eq(10)', nRow).css({'text-align':'center','width':'8px'});
                            $('td:eq(11)', nRow).css({'text-align':'center','width':'8px'});
                            $('td:eq(12)', nRow).css({'text-align':'center','width':'8px'});
                            $('td:eq(13)', nRow).css({'text-align':'center','width':'50px'});
                    }

        });
    });
</script>