<!-- BAGIN DATATABLE -->
<script type="text/javascript">
    $(document).ready(function() {
        view($("#filter #bulan").val(), "all", "all", "all");

        $(document).on('click','.btn_download_excel',function(){
            var bulan           = $(this).attr("bulande");
            var id_cabang       = $(this).attr("idcabang");
            var id_departemen   = $(this).attr("iddepartemen");
            var id_karyawan     = $(this).attr("idkaryawan");
            var urlExcel        = "<?= route('payroll.gaji.download.excel', ['bulan' => '"+bulan+"', 'id_cabang' => '"+id_cabang+"', 'id_departemen' => '"+id_departemen+"', 'id_karyawan' => '"+id_karyawan+"']) ?>";

            downloadFile(urlExcel, this);
        });

        $(document).on('click','.btn_download_transfer_bank',function(){
            var bulan           = ($("#bulan").val()) ? $("#bulan").val() : "<?= date('m-Y') ?>";
            var id_cabang       = ($("#cabang").val()) ? $("#cabang").val() : "all";
            var id_departemen   = ($("#departemen").val()) ? $("#departemen").val() : "all";
            var id_karyawan     = ($("#id_karyawan").val()) ? $("#id_karyawan").val() : "all";
            var urlExcel        = "<?= route('payroll.gaji.download.excel.bank', ['bulan' => '"+bulan+"', 'id_cabang' => '"+id_cabang+"', 'id_departemen' => '"+id_departemen+"', 'id_karyawan' => '"+id_karyawan+"']) ?>";

            downloadFile(urlExcel, this);
        });
    });

    function view(bulan, id_cabang, id_departemen, id_karyawan) {
        $.get('<?= site_url("payroll/gaji/view") ?>/'+bulan+'/'+id_cabang+'/'+id_departemen+'/'+id_karyawan, function(result) {
            $('#view').html(result);
        });
    }
</script>
<!-- END DATATABLE -->


<!-- BEGIN FORM INPUT -->
<script type="text/javascript">
    $(function() {
        // BEGIN HAPUS
        $(document).on('click','.btn_delete',function(){
            var id = $(this).attr('id');
            var bulan = $(this).attr('bulan');
            $('#modal_hapus').modal('show');
            $("#modal_hapus .title").html('Apakah Anda ingin menghapus data ini?');
            $("#modal_hapus .card-body").show();
            $("#modal_hapus .card-footer").show();

            $('.btn_hapus').on('click',function(){
                var loading = Ladda.create(this);
                loading.start();
                $.ajax({
                    type: 'POST',
                    url: "<?= route('payroll.gaji.delete') ?>",
                    data: 'id='+id+'&bulan='+bulan,
                    dataType:'JSON',
                    success: function(result){
                        $("#modal_hapus .card-body").hide();
                        $("#modal_hapus .card-footer").hide();
                        $("#modal_hapus .title").html(result.message);
                        loading.stop();

                    },
                    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>Gagal : Terjadi Kesalahan</strong></font>');
                    }
                });
            });
        });
        //END HAPUS

        $(document).on("click",".btn_hitung",function(){
            $('#tampil_form').load("<?= route('payroll.gaji.form.hitung') ?>",function(){
                $('#modal_form').modal('show');
                $("#modal_form .title").text("Form Hitung Gaji");
                $(".btn_proses_hitung").addClass("btn_proses_hitung btn btn-biru");
                $(".btn_proses_hitung").append('<i class="fa fa-save"></i> ');
                $(".btn_proses_hitung").append('HITUNG');
                $("#btn_new_input").hide();
            });
        });

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

            if($("#form_hitung #bulan").val() ==""){
                $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Bulan belum dipilih</font>");
                $('#form_hitung #bulan').focus();
                return false;
            }else if($("#form_hitung #periode_mulai").val() ==""){
                $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Periode mulai belum diisi</font>");
                $('#form_hitung #periode_mulai').focus();
                return false;
            }else if($("#form_hitung #periode_selesai").val() ==""){
                $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Periode selesai belum diisi</font>");
                $('#form_hitung #periode_selesai').focus();
                return false;
            }

            loading.start();

            var param = {};
            param.bulan                 = $("#form_hitung #bulan").val();
            param.periode_mulai         = $("#form_hitung #periode_mulai").val();
            param.periode_selesai       = $("#form_hitung #periode_selesai").val();
            param.id_cabang             = (!$("#form_hitung #id_cabang").val())?"all":$("#form_hitung #id_cabang").val();
            param.id_departemen         = (!$("#form_hitung #id_departemen").val())?"all":$("#form_hitung #id_departemen").val();
            param.id_karyawan           = (!$("#form_hitung #id_karyawan").val())?"all":$("#form_hitung #id_karyawan").val();

            $.ajax({
                type: 'POST',
                url: "<?= route('payroll.gaji.hitung') ?>",
                data: param,
                dataType:'JSON',
                success: function(result) {
                    if(result.success == true){
                        if(result.type == 'save'){
                            $("#form_hitung :input").prop("disabled", true);
                            $('.btn_proses_hitung').hide();
                            // $('#btn_new_input').show();
                        }

                    }
                    loading.stop();
                    $('#message').show();
                    $('#message').html(result.message);
                },
                error:function(){
                    loading.stop();
                    $('#message').show();
                    $('#message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                }
            });
        });

    });
</script>
<!-- END FORM INPUT -->

<script type="text/javascript">
    $(document).ready(function() {

        $("#jadwal_publish").datepicker( {
            format: "dd-mm-yyyy",
            orientation: "bottom",
            todayHighlight: true,
            autoclose: true,
        });

        // BEGIN PUBLISH
        $(document).on('click','.btn_publish',function(){
            var loading = Ladda.create(this);
            loading.start();
            var params = "id="+$("#form_input #id").val()+
                        "&publish="+$("#form_input #publish").val();
            $.ajax({
                type: 'POST',
                url: "<?= route('payroll.gaji.publishunpublish') ?>",
                data: params,
                dataType:'JSON',
                success: function(result){
                    $("#modal_form .card-body").hide();
                    $("#modal_form .card-footer").hide();
                    $("#modal_form .title").html(result.message);
                },
                error:function(){
                    loading.stop();
                    $("#modal_form .card-body").hide();
                    $("#modal_form .card-footer").hide();
                    $("#modal_form .title").html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                }
            });
        });
        //END BEGIN PUBLISH

        // BEGIN PUBLISH ALL
        $(document).on('click','.btn_publish_all',function(){
            var bulan = $("#filter #bulan").val();
            $('#modal_publish_all').modal('show');
            $("#modal_publish_all .card-body").show();
            $("#modal_publish_all .card-footer").show();
            $("#modal_publish_all .title").text("Apakah Anda ingin publish semua data gaji karyawan bulan "+bulan+"?");

            $('.btn_confrim_publish_all').on('click',function(){
                var loading = Ladda.create(this);
                loading.start();

                var param = {};
                param.bulan = bulan;
                param.jadwal = $("#jadwal_publish").val();

                $.ajax({
                    type: 'POST',
                    url: "<?= route('payroll.gaji.publishall') ?>",
                    data: param,
                    dataType:'JSON',
                    success: function(result){
                        $("#modal_publish_all .card-body").hide();
                        $("#modal_publish_all .card-footer").hide();
                        $("#modal_publish_all .title").html(result.message);
                        loading.stop();
                    },
                    error:function(){
                        loading.stop();
                        $("#modal_publish_all .card-body").hide();
                        $("#modal_publish_all .card-footer").hide();
                        $("#modal_publish_all .title").html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                    }
                });
            });
        });
        // END BEGIN PUBLISH ALL

         // BEGIN UNPUBLISH ALL
        $(document).on('click','.btn_unpublish_all',function(){
            var bulan = $("#filter #bulan").val();
            $('#modal_unpublish_all').modal('show');
            $("#modal_unpublish_all .card-body").show();
            $("#modal_unpublish_all .card-footer").show();
            $("#modal_unpublish_all .title").text("Apakah Anda ingin publish semua data gaji karyawan bulan "+bulan+"?");

            $('.btn_confrim_unpublish_all').on('click',function(){
                var loading = Ladda.create(this);
                loading.start();
                $.ajax({
                    type: 'POST',
                    url: "<?= route('payroll.gaji.unpublishall') ?>",
                    data: 'bulan='+bulan,
                    dataType:'JSON',
                    success: function(result){
                        $("#modal_unpublish_all .card-body").hide();
                        $("#modal_unpublish_all .card-footer").hide();
                        $("#modal_unpublish_all .title").html(result.message);
                        loading.stop();
                    },
                    error:function(){
                        loading.stop();
                        $("#modal_unpublish_all .card-body").hide();
                        $("#modal_unpublish_all .card-footer").hide();
                        $("#modal_unpublish_all .title").html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                    }
                });
            });
        });
        // END BEGIN UNPUBLISH ALL
    });

</script>

<!-- BEGIN FILTER DATA -->
<script type="text/javascript">
    $(document).ready(function() {
        dropdown_cabang();
        dropdown_departemen();

        $("#filter #bulan").inputmask({'alias':'datetime','inputFormat': 'mm-yyyy'});
        $("#filter #bulan").datepicker({
            format: "mm-yyyy",
            viewMode: "months",
            orientation: 'bottom',
            minViewMode: "months",
            autoclose: true,
            endDate: "today"
        });


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

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

            var bulan           = ($("#filter #bulan").val() == null)?"0":$("#filter #bulan").val();
            var id_cabang       = "all";
            var id_departemen   = "all";
            var id_karyawan     = ($("#filter #id_karyawan").val() == null)?"all":$("#filter #id_karyawan").val();

            view(bulan, id_cabang, id_departemen, id_karyawan);
            // SET ATRIBUTE DOWNLOAD EXCEL
            $(".btn_download_excel").attr("bulande",bulan);
            $(".btn_download_excel").attr("idcabang",id_cabang);
            $(".btn_download_excel").attr("iddepartemen",id_departemen);
            $(".btn_download_excel").attr("idkaryawan", id_karyawan);
            loading.stop();
        });

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

            var bulan           = (!$("#filter #bulan").val())?"0":$("#filter #bulan").val();
            var id_cabang       = (!$("#filter #cabang").val())?"all":$("#filter #cabang").val();
            var id_departemen   = (!$("#filter #departemen").val())?"all":$("#filter #departemen").val();
            var id_karyawan     = "all";

            view(bulan, id_cabang, id_departemen, id_karyawan);
            $(".btn_download_excel").attr("bulande",bulan);
            $(".btn_download_excel").attr("idcabang",id_cabang);
            $(".btn_download_excel").attr("iddepartemen",id_departemen);
            $(".btn_download_excel").attr("idkaryawan", id_karyawan);
            loading.stop();
        });
    });

    function dropdown_cabang(){
        $('#filter #cabang').select2({
            placeholder: '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(){
        $("#filter #departemen").val('').trigger('change');
        dropdown_departemen();
    }

    function dropdown_departemen(){

        var id_cabang   = ($("#filter #cabang").val() == null)?"all":$("#filter #cabang").val();


        $("#filter #departemen").select2({
            placeholder: "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
            }
        });
    }

</script>
<!-- END FILTER DATA -->
<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="#">Payroll</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" class="btn_hitung btn btn-biru">
                    <i class="fa fa-plus"></i> HITUNG GAJI
                </button>
            </div>
        </div>
    </div>
    <hr>
    <div id="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">BULAN</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" id="bulan" class="form-control" autocomplete="off" placeholder="mm-yyyy" spellcheck="false" value="<?= date('m-Y') ?>">
                        </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 class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12 d-flex justify-content-between">
                    <div>
                        <button class="btn_download_excel btn btn-primary ladda-button" data-style="expand-left"><i class="fa fa-file-excel-o"></i> DOWNLOAD GAJI</button>
                        <button class="btn_download_transfer_bank btn btn-biru text-white ladda-button" data-style="expand-left"><i class="fa fa-file-excel-o"></i> DOWNLOAD DAFTAR TRANSFER BANK</button>
                    </div>
                    <div>
                        <button class="btn_publish_all btn btn-biru ladda-button"><i class="fa icon-check"></i> PUBLISH SEMUA</button>
                        <button class="btn_unpublish_all btn btn-danger ladda-button"><i class="fa fa-remove"></i> UNPUBLISH SEMUA</button>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-12 table-responsive" id="view"></div>
            </div>
        </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 HAPUS-->
<div id="modal_hapus" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <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">Apakah Anda ingin menghapus data ini?</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 btn btn-danger ladda-button" data-style="expand-left"><i class="fa fa-trash"></i> HAPUS</button>
                    </div>
                </div><!-- ./row -->
            </div>
        </div>
    </div>
</div>
<!-- END TAMPIL MODAL HAPUS-->

<!-- START TAMPIL MODAL PUBLISH ALL-->
<div id="modal_publish_all" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <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-body">
                <div class="form-group">
                    <label>Jadwal Publish</label>
                    <input type="text" id="jadwal_publish" class="form-control" autocomplete="off" placeholder="dd-mm-yyyy" spellcheck="false">
                </div>
            </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_confrim_publish_all btn btn-biru ladda-button" data-style="expand-left"><i class="fa icon-check"></i> PUBLISH SEMUA</button>
                    </div>
                </div><!-- ./row -->
            </div>
        </div>
    </div>
</div>
<!-- END TAMPIL MODAL PUBLISH ALL-->

<!-- START TAMPIL MODAL UNPUBLISH ALL-->
<div id="modal_unpublish_all" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <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_confrim_unpublish_all btn btn-danger ladda-button" data-style="expand-left"><i class="fa icon-remove"></i> UNPUBLISH SEMUA</button>
                    </div>
                </div><!-- ./row -->
            </div>
        </div>
    </div>
</div>
<!-- END TAMPIL MODAL UNPUBLISH ALL-->
