<style>
    #btn_filter_pencarian {
        background-color: Transparent;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }

    #tanggal_mulai, #tanggal_selesai{
        z-index: 0 !important;
    }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?= $this->config->item('api_map_key') ?>&sensor=false"></script>
<script type="text/javascript">
        function validasiinput()
        {
            var ok = true;
            if ($("#jam_mulai").val() == "") {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> <?= $this->lang->line('error_jam_mulai'); ?></font>");
                    $('#jam_mulai').focus();
                    ok = false;
            } else if ($("#jam_selesai").val() == "") {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> <?= $this->lang->line('error_jam_selesai'); ?></font>");
                    $('#jam_selesai').focus();
                    ok = false;
            } else if ($("#jam_mulai").val() != '' && validasijam24($("#jam_mulai").val()) != true) {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Format jam tidak sesuai</font>");
                    $('#jam_mulai').focus();
                    ok = false;
            } else if ($("#jam_selesai").val() != '' && validasijam24($("#jam_selesai").val()) != true) {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> <?= $this->lang->line('error_format_jam'); ?></font>");
                    $('#jam_selesai').focus();
                    ok = false;
            }if ($("#tgl_mulai").val() != "") {
                if (!validasitanggal($("#tgl_mulai").val())) {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> <?= $this->lang->line('error_format_tanggal'); ?></font>");
                    $('#tgl_mulai').focus();
                    ok = false;
                }
            } else if($("#tgl_selesai").val() != "") {
                if (!validasitanggal($("#tgl_selesai").val())) {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> <?= $this->lang->line('error_format_tanggal'); ?></font>");
                    $('#tgl_selesai').focus();
                    ok = false;
                }
            }

            return ok;
        }
    $(document).ready(function() {
        btn_filter_pencarian();
        dropdown_karyawan();
        dropdown_cabang();
        dropdown_departemen();

        list_data();
        loadfungsimodaldetail();
        hapus();
        hapus_lembur_selesai();

        $('#btn_cari').click(function(){
            var loading = Ladda.create(this);
            loading.start();

            var tanggal_mulai   = ($('#tanggal_mulai').val() != null) ? $('#tanggal_mulai').val() : "0";
            var tanggal_selesai = ($('#tanggal_selesai').val() != null) ? $('#tanggal_selesai').val() : "0";
            var status          = $('#status').val();
            var id_karyawan     = (!$('#id_karyawan').val())?"0":$('#id_karyawan').val();
            var id_cabang       = 0;
            var id_departemen   = 0;

            $('#view_data').load("<?= route('pengajuan.lembur.data.view') ?>"+"/"+tanggal_mulai+'/'+tanggal_selesai+'/'+status+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen, function(){
                loading.stop();
            });
        });


        $('#btn_filter').click(function(){
            var loading = Ladda.create(this);
            loading.start();

            var level_user          = '<?= $level_user ?>';
            var multi_departemen    = '<?= $multi_departemen ?>';
            var multi_cabang        = '<?= $multi_cabang ?>';

            var tanggal_mulai   = $("#tanggal_mulai").val();
            var tanggal_selesai = $("#tanggal_selesai").val();
            var status          = $('#status').val();

            if(level_user == "3"){
                var id_karyawan = "<?= $this->id_karyawan ?>";
            }else{
                var id_karyawan = 0;
            }


            if(level_user == "1" || level_user == "4"){ // ADMIN HR DAN DIREKSI
                var id_cabang     = (!$("#cabang").val())?"0":$("#cabang").val();
                var id_departemen = (!$("#departemen").val())?"0":$("#departemen").val();
            }else if(level_user == "5"){ // KEPALA CABANG
                if(multi_cabang == '1'){
                    var id_cabang   = (!$("#cabang").val())?"0":$("#cabang").val();
                }else{
                    var id_cabang   = '<?= $this->session->userdata("id_cabang") ?>';
                }
                var id_departemen   = (!$("#departemen").val())?"0":$("#departemen").val();
            }else if(level_user == "2"){ // KEPALA DEPARTEMEN
                var id_cabang     = '<?= $this->session->userdata("id_cabang") ?>';
                if(multi_departemen == '1'){
                    var id_departemen   = (!$("#departemen").val())?"0":$("#departemen").val();
                }else{
                    var id_departemen   = '<?= $this->session->userdata("id_departemen") ?>';
                }
            }else{
                var id_cabang       = '<?= $this->session->userdata("id_cabang") ?>';
                var id_departemen   = '<?= $this->session->userdata("id_departemen") ?>';
            }

            $('#view_data').load("<?= route('pengajuan.lembur.data.view') ?>"+"/"+tanggal_mulai+'/'+tanggal_selesai+'/'+status+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen, function(){
                loading.stop();
            });

        });

        $(document).on('click', '.btn_verif_spv', function() {
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/spv/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("<?= $this->lang->line('approval_supervisi'); ?>");

                //Setuju
                $(".btn_setuju").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    if(!validasiinput()) {
                        return false;
                    }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-spv') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });

                //Tolak
                $(".btn_tolak").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-spv') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });
            });
        });

        $(document).on('click', '.btn_verif_kedep', function() {
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/kedep/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("<?= $this->lang->line('approval_kedep'); ?>");

                //setuju
                $(".btn_setuju").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    if(!validasiinput()) {
                        return false;
                    }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-kedep') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });

                //tolak
                $(".btn_tolak").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-kedep') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });
            });
        });

        $(document).on('click', '.btn_verif_kacab', function() {
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/kacab/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("<?= $this->lang->line('approval_kacab'); ?>");

                //setuju
                $(".btn_setuju").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    if(!validasiinput()) {
                        return false;
                    }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-kacab') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>"<?= $this->lang->line('error'); ?>"</strong></font>');
                        }
                    });
                });

                //tolak
                $(".btn_tolak").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-kacab') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });
            });
        });

        $(document).on('click', '.btn_verif_hrd', function() {
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/hrd/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("<?= $this->lang->line('approval_hrd'); ?>");

                //setuju
                $(".btn_setuju").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    if(!validasiinput()) {
                        return false;
                    }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-hrd') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });

                //tolak
                $(".btn_tolak").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-hrd') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });
            });
        });

        $(document).on('click', '.btn_verif_direksi', function() {
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/direksi/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("<?= $this->lang->line('approval_direksi'); ?>");

                //setuju
                $(".btn_setuju").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    if(!validasiinput()) {
                        return false;
                    }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-direksi') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });

                //tolak
                $(".btn_tolak").on("click", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-direksi') ?>",
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true) {
                                setTimeout(function(){
                                    $('#modal_form').modal('hide');
                                }, 500);
                                // list_data();
                            }
                            loading.stop();
                            $('#message').show();
                            $('#message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#message').show();
                            $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error'); ?></strong></font>');
                        }
                    });
                });
            });
        });

        $(document).on('click', '.btn_detail', function() {
            $('#tampil_form').load("<?php echo site_url('pengajuan/lembur/detail/') ?>" + $(this).attr('id'), function() {
                $('#modal_form').modal('show');
                $(".title").text("Detail Data");
                $(".btn_save").append('<i class="fa fa-close"></i> ');
                $(".btn_save").append("<?= $this->lang->line('button_form_kembali'); ?>");
                $(".btn_save").attr("data-dismiss", "modal");
                $(".btn_save").removeClass("btn_save").addClass("btn_kembali btn btn-danger");
            });
        });

        $(document).on('click', '.btn_edit', function() {
            var id = $(this).attr('id');
            window.location.href = "<?= site_url('pengajuan/lembur/edit/') ?>" + id
        });

        function hapus() {
            //btn_delete
            $(document).on('click', '.btn_delete', function() {
                var id = $(this).attr('id');
                $("#modal_hapus #id").val(id);
                $('#modal_hapus').modal('show');
                $(".title").text("<?= $this->lang->line('title_form_hapus_data') ?>");
                $(".btn_hapus").removeClass("btn_hapus").addClass("btn_hapus btn btn-danger");
            });
            //btn_delete

            //btn_hapus
            $(document).on('click','.btn_hapus',function(){
                var loading = Ladda.create(this);
                loading.start();
                id = $('#modal_hapus #id').val();
                $.ajax({
                    type: 'POST',
                    url: "<?php echo site_url('pengajuan/lembur/delete/') ?>" + id,
                    data: 'id_lembur=' + id,
                    dataType: 'JSON',
                    complete: function(data) {
                        reconfigure(data);
                    },
                    success: function(result) {
                        loading.stop();
                        $("#modal_hapus").modal('hide');
                        // list_data();
                    },
                    error: function() {
                        loading.stop();
                        $("#modal_hapus .card-body").hide();
                        $("#modal_hapus .card-footer").hide();
                        $("#modal_hapus .title").html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error') ?></strong></font>');
                    }
                });
            });
            //btn_hapus
        }

    });


    function hapus_lembur_selesai() {
        //btn_hapus_lselesai
        $(document).on('click', '.btn_delete_lselesai', function() {
            var id = $(this).attr('id');
            $("#modal_hapus_lselesai #id").val(id);
            $('#modal_hapus_lselesai').modal('show');
            $(".title").text("<?= $this->lang->line('title_form_hapus_data') ?>");
            $(".btn_hapus_lselesai").removeClass("btn_hapus_lselesai").addClass("btn_hapus_lselesai btn btn-danger");
        });

        $(document).on('click','.btn_hapus_lselesai',function(){
            var loading = Ladda.create(this);
            loading.start();
            id = $("#modal_hapus_lselesai #id").val();
            $.ajax({
                type: 'POST',
                url: "<?php echo site_url('pengajuan/lembur/delete_lembur_selesai/') ?>" + id,
                data: 'id=' + id,
                dataType:'JSON',
                success: function(result){
                    $("#modal_hapus_lselesai").modal('hide');
                    loading.stop();
                },
                error:function(){
                    loading.stop();
                    $("#modal_hapus_lselesai .card-body").hide();
                    $("#modal_hapus_lselesai .card-footer").hide();
                    $("#modal_hapus_lselesai .title").html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong><?= $this->lang->line('error') ?></strong></font>');
                }
            });
        });
        //btn_hapus_lselesai
    }

    function dropdown_karyawan() {
        $('#id_karyawan').select2({
            placeholder: "<?= $this->lang->line('semua_karyawan') ?>",
            allowClear: true,
            ajax: {
                url: '<?= route("pengajuan.lembur.dropdown.karyawan")  ?>',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                return {
                        results: data
                    };
                },
                cache: false
            },
            minLength: 3
        });
    }

    function dropdown_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
            },
            minLength: 3
        });
    }

    function onchange_dropdown_cabang(){
        $("#departemen").val('').trigger('change');
        dropdown_departemen();
    }

    function dropdown_departemen(){

        var level_user = '<?= $level_user ?>';
        var multi_cabang = '<?= $multi_cabang ?>';
        if(level_user == "1" || level_user == "4" || (level_user == 5 && multi_cabang == true)){
            var id_cabang = $("#cabang").val();
        }else{
            var id_cabang = '<?= $this->session->userdata('id_cabang') ?>';
        }

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

    function list_data() {
        var level_user = "<?= $this->level_user ?>";
        var tanggal_mulai   = ($('#tanggal_mulai').val() != null) ? $('#tanggal_mulai').val() : "0";
        var tanggal_selesai = ($('#tanggal_selesai').val() != null) ? $('#tanggal_selesai').val() : "0";
        var status          = $('#status').val();

        if(level_user == "3"){
            var id_karyawan = "<?= $this->id_karyawan ?>";
        }else{
            var id_karyawan = 0;
        }

        var id_cabang       = 0;
        var id_departemen   = 0;

        $('#view_data').load("<?= route('pengajuan.lembur.data.view') ?>"+"/"+tanggal_mulai+'/'+tanggal_selesai+'/'+status+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen);
    }


    function btn_filter_pencarian() {
        $("#btn_filter_pencarian").click(function() {
            if ($("#kolom_filter").is(":visible") == true) {
                $("#caret").removeClass("fa-caret-down");
                $("#caret").addClass("fa-caret-up");
                $("#kolom_filter").hide();
            } else {
                $("#caret").addClass("fa-caret-down");
                $("#caret").removeClass("fa-caret-up");
                $("#kolom_filter").show();
            }
        });
    }
</script>
<div class="content-header">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $judul ?></h3>
            <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#"><?= $this->lang->line('menu_kelola_absensi'); ?></a>
                        </li>
                        <li class="breadcrumb-item active"><?= $judul ?>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">
            <div class="float-md-right">
                <button type="button" id="btn_filter_pencarian">
                    <i class="fa fa-filter"></i> <?= $this->lang->line('button_filter_pencarian'); ?> <i id="caret" class="fa fa-caret-down"></i>
                </button>
            </div>
        </div>
    </div>
    <hr>
    <div id="kolom_filter">
        <div class="row filter">
            <div class="col-md-12">
                <div class="form-group row">
                    <label class="col-md-1 text-uppercase"><?= $this->lang->line('periode'); ?></label>
                    <div class="col-md-5">
                        <div class="input-group input-daterange">
                            <input type="text" name="tanggal_mulai" id="tanggal_mulai" class="form-control datepicker masktanggal" autocomplete="off" placeholder="dd-mm-yyyy" value="<?= $periode_awal ?>">
                            <div class="align-self-center">&nbsp;<?= $this->lang->line('s/d'); ?>&nbsp;</div>
                            <input type="text" id="tanggal_selesai" class="form-control datepicker masktanggal" autocomplete="off" placeholder="dd-mm-yyyy" value="<?= $periode_akhir ?>">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-1">STATUS</label>
                    <div class="col-md-5">
                        <select class="form-control" name="status" id="status" class="select2 form-control" style="border-radius: 5px; width: 100%;">
                            <option value="1" selected="true"><?= $this->lang->line('pengajuan'); ?></option>
                            <option value="3"><?= $this->lang->line('disetujui'); ?></option>
                            <option value="2"><?= $this->lang->line('ditolak'); ?></option>
                            <option value="0"><?= $this->lang->line('semua'); ?></option>
                        </select>
                    </div>
                    <?php
                        if($level_user == "3") {
                    ?>
                            <div class="col-md-1">
                                <button type="button" id="btn_filter" class="ladda-button btn-block btn btn-primary" data-style="expand-left">FILTER</button>
                            </div>
                    <?php
                        }
                    ?>
                </div>
                <?php
                    if($level_user != "3") {
                ?>
                        <div class="form-group row">
                            <label class="col-md-1 text-uppercase"><?= $this->lang->line('karyawan'); ?></label>
                            <div class="col-md-5">
                                <select id="id_karyawan" class="select2 form-control"></select>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="btn_cari" class="btn btn-primary btn-block ladda-button" data-style="expand-left"><?= $this->lang->line('button_cari'); ?></button>
                            </div>
                        </div>
                <?php
                    }
                ?>

                <div class="form-group row">
                    <?php
                    if(in_array($level_user, array("1", "4")) || $multi_cabang == true) {
                    ?>
                        <label class="col-md-1 text-uppercase"><?= $this->lang->line('cabang'); ?></label>
                        <div class="col-md-2">
                            <select id="cabang" class="form-control" onchange="onchange_dropdown_cabang()"></select>
                        </div>
                    <?php } ?>
                    <?php
                        if (in_array($level_user, array("1", "4", "5")) || $multi_departemen == true) {

                            if(in_array($level_user, array("1", "4"))){
                                $class = "col-md-2";
                            }else if($level_user == "5"){
                                if($multi_cabang == true){
                                    $class = "col-md-2";
                                }else{
                                    $class = "col-md-5";
                                }
                            }else{
                                $class = "col-md-5";
                            }
                    ?>
                            <div class="col-lg-1">
                                <label class="text-uppercase"><?= $this->lang->line('departemen'); ?></label>
                            </div>
                            <div class="<?= $class ?>">
                                <select id="departemen" class="form-control"></select>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="btn_filter" class="ladda-button btn-block btn btn-primary" data-style="expand-left">FILTER</button>
                            </div>
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div id="view_data"></div> <!-- class="col-md-12 bbna" -->
        </div>
    </div>
</div>

<!-- START TAMPIL MODAL -->
<div id="modal_form" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div id="tampil_form" class="modal-content"></div>
    </div>
</div>
<!-- END TAMPIL MODAL -->

<!-- START TAMPIL MODAL -->
<div id="modal_hapus" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div id="tampil_hapus" class="modal-content">
            <input type="hidden" id="id">
            <div class="card-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h3 class="title modal-title"></h3>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-7 text-left">
                        <div id="message"></div>
                    </div>
                    <div class="col-md-5 text-right">
                        <button class="btn_hapus ladda-button" id="btn_hapus" data-style="expand-left"><i class="fa fa-trash"></i> <?= $this->lang->line('button_form_hapus'); ?></button>
                    </div>
                </div><!-- ./row -->
            </div>
        </div>
    </div>
</div>
<!-- END TAMPIL MODAL -->

<!-- START TAMPIL MODAL HAPUS SELESAI LEMBUR -->
<div id="modal_hapus_lselesai" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div id="tampil_hapus_pulang" class="modal-content">
            <input type="hidden" id="id">
            <div class="card-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h3 class="title modal-title"></h3>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-7 text-left">
                        <div id="message"></div>
                    </div>
                    <div class="col-md-5 text-right">
                        <button class="btn_hapus_lselesai ladda-button" id="btn_hapus_lselesai" data-style="expand-left"><i class="fa fa-trash"></i> <?= $this->lang->line('button_form_hapus') ?></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END TAMPIL MODAL HAPUS SELESAI LEMBUR -->