<script type="text/javascript">
    $(document).ready(function () {
        $(".download").click(function () {
            var jenis = $(this).attr('id');
            window.location.href = "<?= route('laporan.absensi.download') . '?periode_awal=' . $periode_awal . '&periode_akhir=' . $periode_akhir . '&hadir=' . $hadir . '&terlambat=' . $terlambat . '&pc=' . $pc . '&tap=' . $tap . '&alpa=' . $alpa . '&sakit=' . $sakit . '&izin=' . $izin . '&cuti=' . $cuti . '&libur=' . $libur . '&id_karyawan=' . $id_karyawan . '&id_cabang=' . $id_cabang . '&id_departemen=' . $id_departemen ?>" + "&jenis=" + jenis;
        });
    });
</script>
<div class="table-responsive">
    <div id="data-actions" class="btn-group pull-right">
        <?php
        if (in_array($this->level_user, array('3', '7'))) { ?>
            <button type="button" class="btn btn-primary download" id="pdf" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-download"></i> <?= $this->lang->line('button_unduh') ?>
            </button>
        <?php } else { ?>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-download"></i> <?= $this->lang->line('button_unduh') ?>
            </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>
        <?php } ?>
    </div>
    <table id="list_data" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th class="text-center no-sort" rowspan="2">NO</th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('tgl')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('nama')); ?></th>
                <th class="text-center no-sort"><?= strtoupper($this->lang->line('cabang')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('kode')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('absen_masuk')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('absen_pulang')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('istirahat_mulai')); ?></th>
                <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('istirahat_selesai')); ?></th>
                <?php if ($this->level_user == 1) { ?>
                    <th class="text-center no-sort" rowspan="2"><?= strtoupper($this->lang->line('aksi')); ?></th>
                <?php } ?>
            </tr>
            <tr>
                <th class="text-center no-sort"><?= strtoupper($this->lang->line('departemen')); ?></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">

    var m_jam_kerja_libur = <?= $m_jam_kerja_libur ?>;
    var m_libur_nasional = <?= $m_libur_nasional ?>;

    $(function () {
        table = $('#list_data').DataTable({
            'searching': false,
            'paging': true,
            'lengthChange': true,
            'ordering': true,
            'info': true,
            'scrollX': true,
            'language': {
                <?php if ($this->code_lang == 'id'): ?> 'url': '<?= base_url("assets/plugins/datatables/dataTables-language-id.json") ?>',
                    'sEmptyTable': 'Tidak ada data untuk ditampilkan',
                    'searchPlaceholder': 'Kode/Nama'
                        <?php else: ?> 'searchPlaceholder': 'Code/Name'
                        <?php endif; ?>
            },
            "processing": true,
            "serverSide": true,
            "order": [],
            "layout": {
                "topEnd": [
                    $("#data-actions")
                ]
            },
            "ajax": {
                "url": "<?= route('laporan.absensi.data.list') . '?periode_awal=' . $periode_awal . '&periode_akhir=' . $periode_akhir . '&hadir=' . $hadir . '&terlambat=' . $terlambat . '&pc=' . $pc . '&tap=' . $tap . '&alpa=' . $alpa . '&sakit=' . $sakit . '&izin=' . $izin . '&cuti=' . $cuti . '&libur=' . $libur . '&id_karyawan=' . $id_karyawan . '&id_cabang=' . $id_cabang . '&id_departemen=' . $id_departemen ?>",
                "type": "GET",
            },
            "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': ['no-sort']
            }],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $('td:eq(0)', nRow).css({ 'width': '10px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(1)', nRow).css({ 'width': '100px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(2)', nRow).css({ 'text-align': 'left', 'vertical-align': 'top' });
                $('td:eq(3)', nRow).css({ 'width': '200px', 'text-align': 'left', 'vertical-align': 'top' });
                $('td:eq(4)', nRow).css({ 'width': '120px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(5)', nRow).css({ 'width': '120px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(6)', nRow).css({ 'width': '120px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(7)', nRow).css({ 'width': '120px', 'text-align': 'center', 'vertical-align': 'top' });
                $('td:eq(8)', nRow).css({ 'width': '120px', 'text-align': 'center', 'vertical-align': 'top' });
                <?php if ($this->level_user == 1) { ?>
                    $('td:eq(-1)', nRow).css({ 'width': '10px', 'text-align': 'center' });
                <?php } ?>
                set_background_libur(aData[1], nRow);
            },
        });
    });

    function set_background_libur(data, row) {
        var temp = data.split("<br>");
        var tanggal = temp[1];
        var week_of_day = moment(tanggal, "DD-MM-YYYY").format("E");
        var y_m_d = moment(tanggal, "DD-MM-YYYY").format("YYYY-MM-DD");

        if (m_jam_kerja_libur.includes(week_of_day) || m_libur_nasional.includes(y_m_d)) {
            $(row).css('background-color', '<?= $this->config->item("warna_background_libur") ?>');
        }
    }
</script>