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

</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?= $this->config->item('api_map_key') ?>&sensor=false"></script>
<script src="<?= base_url() ?>assets/js/datepicker-id.js"></script>
<script type="text/javascript">
    $(document).ready(function() {



    });

    $(function() {
        dropdown_karyawan();
        dropdown_cabang();
        dropdown_departemen();

        tanggal();
        hide_table();
        btn_filter_pencarian();
        loadfungsimodaldetail();
        pickrange();
        list_data();

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

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

            $('#view_data').load("<?php echo site_url('reimburse/laporan/data/view-data/') ?>"+tanggal_mulai+'/'+tanggal_selesai+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen, function(){
                $("#content").show();
                loading.stop();
            });
        });

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

            var level_user = "<?= $flag_cabang ?>";

            var tanggal_mulai   = $("#kolom_filter #tanggal_mulai").val();
            var tanggal_selesai = $("#kolom_filter #tanggal_selesai").val();
            var id_karyawan = 0;

            if(level_user == '1'){
                var id_cabang     = ($("#kolom_filter #cabang").val() == '')?"0":$("#kolom_filter #cabang").val();
            }else if(level_user == '2'){
                var id_cabang   = '<?= $this->session->userdata("id_cabang") ?>';
            }

            var id_departemen = ($("#kolom_filter #departemen").val() == null)?"0":$("#kolom_filter #departemen").val();

            $('#view_data').load("<?php echo site_url('reimburse/laporan/data/view-data/') ?>"+tanggal_mulai+'/'+tanggal_selesai+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen, function(){
                $("#content").show();
                loading.stop();
            });

        });
    });

    function list_data() {
        $("#content").show();

        var tanggal_mulai = ($('#kolom_filter #tanggal_mulai').val() != null) ? $('#kolom_filter #tanggal_mulai').val() : "0";
        var tanggal_selesai = ($('#kolom_filter #tanggal_selesai').val() != null) ? $('#kolom_filter #tanggal_selesai').val() : "0";

        var id_karyawan = ($('#kolom_filter #id_karyawan').val() != null) ? $('#kolom_filter #id_karyawan').val() : "0";

        var id_cabang = 0;
        var id_departemen = 0;

        $('#view_data').load("<?php echo site_url('reimburse/laporan/data/view-data/') ?>"+tanggal_mulai+'/'+tanggal_selesai+'/'+id_karyawan+'/'+id_cabang+'/'+id_departemen);
    }


    var date_diff_indays = function(date1, date2) {
        dt1 = new Date(date1);
        dt2 = new Date(date2);
        return Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate())) / (1000 * 60 * 60 * 24));
    }

    function convert(tanggal) {
        var res = tanggal.split("/");
        return res[1] + "/" + res[0] + "/" + res[2];
    }

    function dropdown_karyawan(){
        $('#kolom_filter #id_karyawan').select2({
            placeholder: 'Semua Karyawan',
            allowClear: true,
            ajax: {
                url: '<?= route("reimbursement.laporan.dropdown.karyawan") ?>',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                return {
                        results: data
                    };
                },
                cache: false
            },
            minLength: 3
        });
    }

    function dropdown_cabang(){
        $('#kolom_filter #cabang').select2({
            placeholder: 'Semua Cabang',
            allowClear: true,
            ajax: {
                url: '<?= route("reimbursement.laporan.dropdown.cabang") ?>',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                return {
                        results: data
                    };
                },
                cache: false
            },
            minLength: 3
        });
    }

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

    function dropdown_departemen(){

        var id_cabang     = ($("#kolom_filter #cabang").val() == null)?"0":$("#kolom_filter #cabang").val();

        $("#kolom_filter #departemen").select2({
            placeholder: "Semua Departemen",
            allowClear: true,
            ajax: {
                url: '<?= route("reimbursement.laporan.dropdown.departement") ?>'+'/'+id_cabang,
                dataType: 'json',
                delay: 250,
                processResults:function(data) {
                    return {
                            results: data
                        };
                },
                cache: false
            }
        });
    }

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

    function tanggal() {
        var d = new Date();
        d.setDate(d.getDate()); // - 1
        $('.input-daterange input').each(function() {
            $(this).datepicker({
                orientation: "bottom",
                format: "dd-mm-yyyy",
                endDate: d,
                autoclose: true,
            });
        });
    }

    function hide_table() {
        $("#content").hide();
    }
</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="#">Reimbursement</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> Filter Pencarian <i id="caret" class="fa fa-caret-down"></i>
                </button>
            </div>
        </div>
    </div>
    <hr>
    <div id="kolom_filter">
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label class="align-self-center">PERIODE</label>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            <div class="input-group input-daterange">
                                <input type="text" class="form-control masktanggal" value="<?= $periode_awal; ?>" id="tanggal_mulai" required>
                                <div class="align-self-center">&nbsp;s/d&nbsp;</div>
                                <input type="text" class="form-control masktanggal" value="<?= $periode_akhir; ?>" id="tanggal_selesai" required>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-1">
                    <div class="col-md-2">
                        <label>KARYAWAN</label>
                    </div>
                    <div class="col-md-8">
                        <select id="id_karyawan" class="form-control"></select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="btn_cari" class="ladda-button btn btn-primary col-md-12" data-style="expand-left">CARI</button>
                    </div>
                </div>

                <div class="row mt-1">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>CABANG</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select id="cabang" class="form-control" onchange="onchange_dropdown_cabang()">
                            <option></option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label>DEPARTEMEN</label>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" id="departemen"></select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="btn_filter" class="ladda-button btn btn-primary col-md-12" data-style="expand-left">FILTER</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="content" 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 -->
