<script type="text/javascript">
    var level_user = '<?= $this->level_user ?>';
    var multi_cabang = '<?= $this->multi_cabang ?>';

    $(function() {
        if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
            cabang();
            // cabang_selected();
        }
        diagram_pie();
        filter();
        filter_onchange();
    });

    function diagram_pie() {
        if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
            var id_cabang = (!$("#cabang").val()) ? "all" : $("#cabang").val();
        } else {
            var id_cabang = "<?= $this->id_cabang ?>";
        }

        var jam_kerja = (!$("#jam_kerja").val()) ? "all" : $("#jam_kerja").val();
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '<?= route("dashboard.absensi.data.diagram.pie") ?>' + '/' + id_cabang + '/' + jam_kerja,
            complete: function(data) {
                reconfigure(data);
            },
        }).then(function(data) {
            $("#hadir").html(data.absen);
            $("#terlambat").html(data.terlambat);
            $("#belum_absen").html(data.belum_absen);
            $("#izin").html(data.izin);
            $("#cuti").html(data.cuti);
            $("#sakit").html(data.sakit);
            document.getElementById("chart-dashboard").innerHTML = "";
            new Morris.Donut({
                // ID of the element in which to draw the chart.
                element: 'chart-dashboard',
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [{
                        label: "Hadir",
                        value: data.absen
                    },
                    {
                        label: "Terlambat",
                        value: data.terlambat
                    },
                    {
                        label: "Belum Absen",
                        value: data.belum_absen
                    },
                    {
                        label: "Cuti",
                        value: data.cuti
                    },
                    {
                        label: "Izin",
                        value: data.izin
                    },
                    {
                        label: "Sakit",
                        value: data.sakit
                    }
                ],
                colors: [
                    "#2883FA", //hadir
                    "#FFD700", //hadir
                    "#F63939", //Belum absen
                    "#07CF72", //Cuti
                    "#FF9900", //Izin
                    "#BA47E4" //sakit
                ]
            });
        });
    }

    function cabang() {
        $("#cabang").select2({
            placeholder: '<?= $this->lang->line('semua_cabang') ?>',
            allowClear: true,
            ajax: {
                url: '<?= route("dropdown.cabang") ?>',
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: false
            }
        });
    }

    // function cabang_selected() {
    //     var cabang = $('#cabang');
    //     $.ajax({
    //         type: 'GET',
    //         dataType: 'json',
    //         url: '<?= site_url("dashboard/absensi/list_cabang_selected") ?>',
    //         complete : function(data){
    //                     reconfigure(data);
    //                 },
    //     }).then(function (data) {
    //         // create the option and append to Select2
    //         var option = new Option(data.text, data.id, true, true);
    //         cabang.append(option).trigger('change');
    //     });
    // }

    function filter() {
        if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
            var id_cabang = (!$("#cabang").val()) ? "all" : $("#cabang").val();
        } else {
            var id_cabang = "<?= $this->id_cabang ?>";
        }
        $("#jam_kerja").select2({
            // dropdownParent: $("#pilihan"),
            placeholder: '<?= $this->lang->line('semua') ?>',
            allowClear: true,
            ajax: {
                url: '<?= route("dropdown.jamkerja") ?>/' + id_cabang,
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });
    }

    function filter_onchange() {
        $("#jam_kerja").change(function() {
            if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
                var id_cabang = (!$("#cabang").val()) ? "all" : $("#cabang").val();
            } else {
                var id_cabang = "<?= $this->id_cabang ?>";
            }
            var jam_kerja = (!$("#jam_kerja").val()) ? "all" : $("#jam_kerja").val();

            dropdownParent: $("#pilihan"),
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '<?= route("dashboard.absensi.data.diagram.pie") ?>' + '/' + id_cabang + '/' + jam_kerja,
                    complete: function(data) {
                        reconfigure(data);
                    },
                }).then(function(data) {
                    $("#hadir").html(data.absen);
                    $("#terlambat").html(data.terlambat);
                    $("#belum_absen").html(data.belum_absen);
                    $("#izin").html(data.izin);
                    $("#cuti").html(data.cuti);
                    $("#sakit").html(data.sakit);
                    document.getElementById("chart-dashboard").innerHTML = "";
                    new Morris.Donut({
                        // ID of the element in which to draw the chart.
                        element: 'chart-dashboard',
                        // Chart data records -- each entry in this array corresponds to a point on
                        // the chart.
                        data: [{
                                label: "Hadir",
                                value: data.absen
                            },
                            {
                                label: "Terlambat",
                                value: data.terlambat
                            },
                            {
                                label: "Belum Absen",
                                value: data.belum_absen
                            },
                            {
                                label: "Cuti",
                                value: data.cuti
                            },
                            {
                                label: "Izin",
                                value: data.izin
                            },
                            {
                                label: "Sakit",
                                value: data.sakit
                            }
                        ],
                        colors: [
                            "#2883FA", //hadir
                            "#FFD700", //Terlambat
                            "#F63939", //Belum absen
                            "#07CF72", //Cuti
                            "#FF9900", //Izin
                            "#BA47E4" //sakit
                        ]
                    });
                });
        });
    }

    function filter_list() {
        if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
            var id_cabang = (!$("#cabang").val()) ? "all" : $("#cabang").val();
        } else {
            var id_cabang = "<?= $this->id_cabang ?>";
        }

        $("#jam_kerja").val("");

        $("#jam_kerja").select2({
            // dropdownParent: $("#pilihan"),
            placeholder: '<?= $this->lang->line('semua') ?>',
            allowClear: true,
            ajax: {
                url: '<?= route("dropdown.jamkerja") ?>/' + id_cabang,
                dataType: 'json',
                delay: 250,
                complete: function(data) {
                    reconfigure(data);
                },
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: false
            }
        });

        var jam_kerja = (!$("#jam_kerja").val()) ? "all" : $("#jam_kerja").val();
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '<?= route("dashboard.absensi.data.diagram.pie") ?>' + '/' + id_cabang + '/' + jam_kerja,
            complete: function(data) {
                reconfigure(data);
            },
        }).then(function(data) {
            $("#hadir").html(data.absen);
            $("#terlambat").html(data.terlambat);
            $("#belum_absen").html(data.belum_absen);
            $("#izin").html(data.izin);
            $("#cuti").html(data.cuti);
            $("#sakit").html(data.sakit);
            document.getElementById("chart-dashboard").innerHTML = "";
            new Morris.Donut({
                // ID of the element in which to draw the chart.
                element: 'chart-dashboard',
                // Chart data records -- each entry in this array corresponds to a point on
                // the chart.
                data: [{
                        label: "Hadir",
                        value: data.absen
                    },
                    {
                        label: "Terlambat",
                        value: data.terlambat
                    },
                    {
                        label: "Belum Absen",
                        value: data.belum_absen
                    },
                    {
                        label: "Cuti",
                        value: data.cuti
                    },
                    {
                        label: "Izin",
                        value: data.izin
                    },
                    {
                        label: "Sakit",
                        value: data.sakit
                    }
                ],
                colors: [
                    "#2883FA", //hadir
                    "#FFD700", //Terlambat
                    "#F63939", //Belum absen
                    "#07CF72", //Cuti
                    "#FF9900", //Izin
                    "#BA47E4" //sakit
                ]
            });
        });
    }

    function detail() {
        // var level_user = '<?= $this->level_user ?>';
        // var multi_cabang = '<?= $this->multi_cabang ?>';
        if (level_user == "1" || level_user == "4" || multi_cabang == "1") {
            var id_cabang = (!$("#cabang").val()) ? "all" : $("#cabang").val();
        } else {
            var id_cabang = "<?= $this->id_cabang ?>";
        }
        var jam_kerja = (!$("#jam_kerja").val()) ? "all" : $("#jam_kerja").val();
        window.location.href = "<?= route('dashboard.absensi.detail.data') ?>" + '/' + id_cabang + '/' + jam_kerja;
    }
</script>

<?php
if (in_array($this->session->userdata('level_user'), ["1", "6"])) { ?>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-rounded">
                <div class="card-absenku card-header card-info-absenku">
                    <h4 class="card-title"><?= $this->lang->line('paket_aktif') ?></h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collpase show">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h4><img src="<?= base_url('assets/images/icon/absenku.png') ?>"> Layanan</h4>
                                <?php echo $nama_paket; ?>
                            </div>
                            <div class="col-md-4">
                                <h4><img src="<?= base_url('assets/images/icon/user.png') ?>"> Karyawan</h4>
                                <?php echo $jumlah_karyawan . " dari Max " . $max_karyawan . " Karyawan"; ?>
                            </div>
                            <div class="col-md-4">
                                <h4> <img src="<?= base_url('assets/images/icon/24h.png') ?>" alt=""> Masa Aktif </h4>
                                <?= $this->fungsi->tgl_indo($tgl_aktif) ?> - <?= $this->fungsi->tgl_indo($tgl_berakhir) ?>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
<?php
}
?>


<div class="row">
    <div class="col-md-7">
        <div class="card card-rounded">
            <div class="card-absenku card-header card-info-absenku">
                <h4 class="card-title">Rekap Absensi Hari Ini</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                <div class="heading-elements" id="pilihan">
                    <ul class="list-inline mb-0">
                        <li><span class="tgls"></span></li>
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="card-content collpase show">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="<?= site_url('pengaturan/hari-libur') ?>">
                                <button type="button" class="btn btn-outline-primary btn-min-width mr-1 mb-1">
                                    <i class="fa fa-calendar"></i> Kalender Absensi
                                </button>
                            </a>
                            <a href="#">
                                <button type="button" class="btn btn-outline-primary btn-min-width mr-1 mb-1" onclick="detail()">
                                    <i class="fa fa-eye"></i> Lihat Semua
                                </button>
                            </a>
                        </div>
                        <div class="col-md-6">
                            <?php
                            if (in_array($this->session->userdata('level_user'), ["1", "4"]) || $this->session->userdata('multi_cabang') == true) {
                            ?>
                                <div class="row">
                                    <div class="col-md-4 align-self-center">
                                        <label>Cabang</label>
                                        <label class="pull-right">:</label>
                                    </div>
                                    <div class="col-md-8">
                                        <select id="cabang" class="form-control" onchange="filter_list()"></select>
                                    </div>
                                </div>
                            <?php
                            }
                            ?>
                            <div class="row mt-1">
                                <div class="col-md-4 align-self-center">
                                    <label>Jam Kerja</label>
                                    <label class="pull-right">:</label>
                                </div>
                                <div class="col-md-8 align-self-center">
                                    <select id="jam_kerja" class="form-control">
                                        <option value="all" selected="true">Semua</option>
                                        <option value="0">Reguler</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row mt-1">
                        <div class="col-md-6">
                            <div id="chart-dashboard" style="height: 250px;"></div>
                        </div>
                        <div class="col-md-6">
                            <div>
                                <table class="table table-striped">
                                    <tbody>
                                        <tr>
                                            <td>Hadir</td>
                                            <td class="text-center" id="hadir"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                        <tr>
                                            <td>Terlambat</td>
                                            <td class="text-center" id="terlambat"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                        <tr>
                                            <td>Belum Absen</td>
                                            <td class="text-center" id="belum_absen"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                        <tr>
                                            <td>Cuti</td>
                                            <td class="text-center" id="cuti"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                        <tr>
                                            <td>Izin</td>
                                            <td class="text-center" id="izin"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                        <tr>
                                            <td>Sakit</td>
                                            <td class="text-center" id="sakit"></td>
                                            <td class="text-right"> pegawai</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2" style="font-family: 'Poppins Medium';">
                        <div class="col-6 col-md-3">
                            <i class="fa fa-stop" style="color: #2883FA"></i> Hadir
                            <br>
                            <i class="fa fa-stop" style="color: #FFD700"></i> Terlambat
                            <br>
                            <i class="fa fa-stop" style="color: #F63939"></i> Belum Absen
                        </div>
                        <div class="col-6 col-md-3">
                            <i class="fa fa-stop" style="color: #07CF72"></i> Cuti
                            <br>
                            <i class="fa fa-stop" style="color: #FF9900"></i> Izin
                            <br>
                            <i class="fa fa-stop" style="color: #BA47E4"></i> Sakit
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card card-rounded">
            <div class="card-absenku card-header">
                <h4 class="card-title">Daftar Pengajuan</h4>
            </div>
            <div class="card-content collpase show">
                <div class="card-body">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a onclick="loadlst('izin')" class="nav-link active" id="base-tab1" data-toggle="tab" aria-controls="tab1" href="#tab1" aria-expanded="true">Izin/Cuti/Sakit</a>
                        </li>
                        <li class="nav-item">
                            <a onclick="loadlst('lembur')" class="nav-link" id="base-tab2" data-toggle="tab" aria-controls="tab2" href="#tab2" aria-expanded="false">Lembur</a>
                        </li>
                        <!--<li class="nav-item">
                            <a class="nav-link" id="base-tab3" data-toggle="tab" aria-controls="tab3" href="#tab3" aria-expanded="false">Tukar Shift</a>
                        </li> -->
                    </ul>

                    <div class="tab-content daftar-pengajuan">
                        <div role="tabpanel" class="tab-pane active" id="tab1" aria-expanded="true" aria-labelledby="base-tab1">
                            <div class="row">
                                <div class="col-md-12 col-sm-12" id="lstizin" style="height: 330px; overflow-y: auto;">

                                </div>
                                <div class="col-md-12 col-sm-12 text-center">
                                    <a href="<?= route('pengajuan.izin.home'); ?>">
                                        <button type="button" class="btn btn-outline-biru round btn-min-width">
                                            Lihat Semua
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab2" aria-labelledby="base-tab2">
                            <div class="row">
                                <div class="col-md-12 col-sm-12" id="lstlembur" style="height: 330px; overflow-y: auto;">

                                </div>
                                <div class="col-md-12 col-sm-12 text-center">
                                    <a href="<?= site_url('pengajuan/lembur'); ?>">
                                        <button type="button" class="btn btn-outline-biru round btn-min-width">
                                            Lihat Semua
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab3" aria-labelledby="base-tab3">
                            <p>Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?= base_url('assets/js/home_realtime_date.js') ?>"></script>
<script>
    $(document).ready(function() {
        loadlst('izin');
    });

    function loadlst(tp = '') {
        $('#lst' + tp).html('');
        $('#lst' + tp).load('<?php echo route('dashboard.list.data') ?>/' + tp);
    }
</script>
