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

            var jenis = $(this).attr('id');
            var cabang = "<?= $cabang ?>";
            var departemen = "<?= $departemen ?>";
            var tanggal_mulai = "<?= $mulai ?>";
            var tanggal_selesai = "<?= $selesai ?>";

            window.location.href = "<?= site_url('rekap/absensi/data/download/') ?>" + tanggal_mulai + '/' + tanggal_selesai + '/' + cabang + '/' + departemen + '/' + jenis;
        });
    });
</script>

<style>
    th, td {
        white-space: nowrap !important;
    }
    div.dataTables_wrapper {
        margin: 0 auto !important;
    }
</style>
<div class="btn-group mb-1">
    <div class="btn-group mb-1">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Download
        </button>
        <div class="dropdown-menu">
            <a id="excel" class="dropdown-item download"><i class="fa fa-file-excel-o"></i> Excel</a>
            <!-- <a id="pdf" class="dropdown-item download"><i class="fa fa-file-pdf-o"></i> PDF</a> -->
        </div>
    </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-center no-sort" valign="middle" rowspan="2" style="width: 30px">NAMA</th>
                <th class="text-center no-sort" style="width: 30px">CABANG</th>
                <th class="text-center no-sort" colspan="9">REKAP</th>
                <th class="text-center no-sort" colspan="<?= $jumlah ?>">TANGGAL</th>
            </tr>
            <tr class="bg-tr">
                <th class="text-center no-sort" style="width: 30px">DEPARTEMEN</th>
                <th class="text-center no-sort">H</th>
                <th class="text-center no-sort">T</th>
                <th class="text-center no-sort">PC</th>
                <th class="text-center no-sort">TAP</th>
                <th class="text-center no-sort">I</th>
                <th class="text-center no-sort">S</th>
                <th class="text-center no-sort">C</th>
                <th class="text-center no-sort">A</th>
                <th class="text-center no-sort">LIBUR</th>
                <?php foreach ($header as $row) { ?>
                    <th class="text-center no-sort"><?= $row; ?></th>
                <?php } ?>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#list_data').DataTable({
            'searching': true,
            'paging': true,
            'lengthChange': true,
            'ordering': true,
            'info': true,
            'scrollX': true,
            'fixedColumns': {
                leftColumns: 12
            },
            'language': {
                'url': '<?= base_url("assets/plugins/datatables/dataTables-language-id.json") ?>',
                'sEmptyTable': 'Tidak ada data untuk ditampilkan',
                'searchPlaceholder': 'NIK/Nama Karyawan'
            },
            "processing": true,
            "serverSide": true,
            "order": [],

            "ajax": {
                "url": "<?= site_url('rekap/absensi/list/data') ?>/<?= $mulai ?>/<?= $selesai ?>/<?= $cabang ?>/<?= $departemen ?>",
                "type": "POST",
                "complete": function(data) {
                    reconfigure(data);
                }
            },

            "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': ['no-sort']
            }],
            "fnDrawCallback":function(setting) {
                $('[data-toggle="tooltip"]').tooltip();
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $('td:eq(0)', nRow).css({'text-align':'center','width':'10px'});
                $('td:eq(1)', nRow).css({'text-align': 'left'});

                $('td:eq(3)', nRow).css({'text-align': 'center'});
                $('td:eq(4)', nRow).css({'text-align': 'center'});
                $('td:eq(5)', nRow).css({'text-align': 'center'});
                $('td:eq(6)', nRow).css({'text-align': 'center'});
                $('td:eq(7)', nRow).css({'text-align': 'center'});
                $('td:eq(8)', nRow).css({'text-align': 'center'});
                $('td:eq(9)', nRow).css({'text-align': 'center'});
                $('td:eq(10)', nRow).css({'text-align': 'center'});
                $('td:eq(11)', nRow).css({'text-align': 'center'});

                var jml_periode = '<?= $jumlah ?>';
                var start_kolom = 12;

                for(i=start_kolom; i<=(parseInt(jml_periode)+start_kolom); i++){
                    // console.log($('td:eq('+i+') span', nRow).text());
                    var jenis_izin = $('td:eq('+i+') span', nRow).text();
                    if(jenis_izin == "libur"){
                        $('td:eq('+i+')', nRow).addClass("bg-danger text-white");
                    }
                    $('td:eq('+i+')', nRow).css({'text-align':'center'});
                }
            }
        });
    });
</script>