<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="table-responsive">
    <div id="data-actions" class="btn-group pull-right ml-1">
        <button id="excel" type="button" class="btn btn-primary download" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-download"></i> <?= $this->lang->line('button_unduh') ?>
        </button>
    </div>
    <table id="list_data" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr class="bg-tr">
                <th class="text-center no-sort text-uppercase" rowspan="2">NO</th>
                <th class="text-center no-sort text-uppercase" valign="middle" rowspan="2" style="width: 30px"><?= $this->lang->line('nama'); ?></th>
                <th class="text-center no-sort text-uppercase" style="width: 30px"><?= $this->lang->line('cabang'); ?></th>
                <th class="text-center no-sort text-uppercase" colspan="<?= $colspan ?>"><?= $this->lang->line('rekap'); ?></th>
                <th class="text-center no-sort text-uppercase" colspan="<?= $jumlah ?>"><?= $this->lang->line('tgl'); ?></th>
            </tr>
            <tr class="bg-tr">
                <th class="text-center no-sort" style="width: 30px"><?= $this->lang->line('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>
                <?php if ($this->paket_arr['flexible_jam_kerja'] == false) { ?>
                    <th class="text-center no-sort">A</th>
                    <th class="text-center no-sort"><?= $this->lang->line('libur'); ?></th>
                <?php } ?>
                <th class="text-center no-sort">TOTAL<br> <?= $this->lang->line('menu_jam_kerja'); ?></th>
                <?php
                $border_left = false;
                foreach ($header as $row) {
                    if ($row['libur'] == true) {
                        if ($border_left == false) {
                            $border_left_style = $this->config->item('border_left_libur');
                            $border_left       = true;
                        } else {
                            $border_left_style = '';
                        }
                        ?>
                        <th class="text-center no-sort" style="background-color: <?= $row['warna'] ?>; color: <?= $row['warna_teks'] ?>; border-color: <?= $row['warna_teks'] ?>; <?= $border_left_style ?>"><?= $row['tanggal_view']; ?></th>
                    <?php } else {
                        $border_left = false;
                        ?>
                        <th class="text-center no-sort"><?= $row['tanggal_view']; ?></th>
                    <?php }
                } ?>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        var freezeColumns = '<?= ($this->paket_arr['flexible_jam_kerja'] == true) ? 11 : 13; ?>';

        $.fn.dataTableExt.sErrMode = 'none';
        $('#list_data').on('error.dt', function (e, settings, techNote, message) {
            if (confirm('Terjadi kesalahan saat memproses data, muat ulang halaman ?')) {
                window.location.reload();
            }
        }).DataTable({
            'searching': true,
            'paging': true,
            'delay': 1000,
            'lengthChange': true,
            'ordering': true,
            'info': true,
            'scrollX': true,
            'fixedColumns': {
                leftColumns: freezeColumns
            },
            'language': {
                <?php if ($this->code_lang == 'id'): ?> 'url': '<?= base_url("assets/plugins/datatables/dataTables-language-id.json") ?>',
                    'sEmptyTable': 'Tidak ada data untuk ditampilkan',
                    'searchPlaceholder': 'NIK/Nama Karyawan'
                <?php else: ?> 'searchPlaceholder': 'ID/Employee Name'
                <?php endif; ?>
            },
            "processing": true,
            "serverSide": true,
            "order": [],
            "layout": {
                "topEnd": [
                    "search",
                    $("#data-actions")
                ]
            },
            "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']
            },
            {
                targets: [<?= $targets_libur_sisa ?>],
                className: "dt-libur"
            },
            {
                targets: [<?= $targets_libur_left ?>],
                className: "dt-libur-left"
            }
            ],
            "fnDrawCallback": function (setting) {
                $('[data-toggle="tooltip"]').tooltip();
            },
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                var flexible_jam_kerja = '<?= $this->paket_arr['flexible_jam_kerja'] ?>';

                if (flexible_jam_kerja == false) {
                    var jumlah_kolom = 13;
                } else {
                    var jumlah_kolom = 11;
                }


                $('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'
                });

                if (flexible_jam_kerja == false) {
                    $('td:eq(10)', nRow).css({
                        'text-align': 'center'
                    });
                    $('td:eq(11)', nRow).css({
                        'text-align': 'center'
                    });
                }

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

                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>