<!-- 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-dialog").removeClass("modal-lg");
                $('#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;
            }
            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;
            }
            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;
            }
            <?php if ($pengaturan_pph->aktif === '1') : ?>
                if ($("#form_hitung #tgl_pemotong").val() == "") {
                    $('#message').html("<font style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Tanggal pemotongan belum diisi</font>");
                    $('#form_hitung #tgl_pemotong').focus();
                    return false;
                }
            <?php endif; ?>

            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();
            param.tgl_pemotong = $("#form_hitung #tgl_pemotong").val();
            param.status_aktif_pph = "<?= ($pengaturan_pph->aktif === '1') ? '1' : '0' ?>";

            var progress;
            var progressBar = $("#progressbar .progress-bar");
            $.ajax({
                type: 'POST',
                url: "<?= route('payroll.gaji.hitung') ?>",
                data: param,
                dataType: 'JSON',
                beforeSend: function(thisXHR) {
                    $("#progressbar").show();
                    // reset progress
                    progressBar.attr("aria-valuenow", "0");
                    progressBar.css("width", "0%");
                    // start progress
                    progress = setInterval(function() {
                        if (thisXHR.readyState == 1) {
                            let random = Math.floor(Math.random() * 10);
                            let val = progressBar.attr("aria-valuenow");
                            if (val < 95) {
                                progressBar.attr("aria-valuenow", parseInt(val) + random);
                                progressBar.css("width", val + "%");
                            } else {
                                $('#message').html("<i class='fa fa-info-circle text-warning'></i> Sedang menghitung gaji...");
                            }
                        }
                    }, 250);
                    loading.start();
                    $('#message').show();
                    $('#message').html("<i class='fa fa-info-circle text-warning'></i> Mohon Tunggu...");
                    $("#modal_form .close").hide();
                    $("#form_hitung :input").prop("disabled", true);
                },
                success: function(result) {
                    clearInterval(progress);
                    $("#progressbar").hide();

                    loading.stop();
                    $('#message').show();
                    $('#message').html(result.message);
                    if (result.success == true) {
                        if (result.type == 'save') {
                            $('.btn_proses_hitung').hide();
                            $("#modal_form .close").show();
                            // $('#btn_new_input').show();
                            $('#filter #btn_filter').click()
                        }
                    } else {
                        $("#modal_form .close").show();
                        $("#form_hitung :input").prop("disabled", false);
                    }
                },
                error: function() {
                    clearInterval(progress);
                    $("#progressbar").hide();
                    loading.stop();
                    $("#modal_form .close").show();
                    $("#form_hitung :input").prop("disabled", false);
                    $('#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 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 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 UNPUBLISH ALL

        // BEGIN DETAIL UPAH LEMBUR
        $(document).on("click", ".detail_upah_lembur", function() {
            const id = $(this).data('upah-lembur');
            $('#tampil_form').load("<?= route('payroll.gaji.detail.upah_lembur', ['id' => '"+id+"']) ?>", function() {
                $("#modal_form .modal-dialog").addClass("modal-lg");
                $('#modal_form').modal('show');
                $("#modal_form .title").text("Detail Upah Lembur");
            });
        });
        // END DETAIL UPAH LEMBUR

        // BEGIN DETAIL POTONGAN ABSENSI
        $(document).on("click", ".detail_pot_absensi", function() {
            const id = $(this).data('pot-absensi');
            $('#tampil_form').load("<?= route('payroll.gaji.detail.pot_absensi', ['id' => '"+id+"']) ?>", function() {
                $("#modal_form .modal-dialog").addClass("modal-lg");
                $('#modal_form').modal('show');
                $("#modal_form .title").text("Detail Potongan Absensi");
            });
        });
        // END DETAIL POTONGAN ABSENSI
    });
</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 mt-4">
    <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">
                <a href="<?= route('payroll.gaji.ptkp.index') ?>" class="btn btn-warning">
                    <i class="fa fa-info-circle"></i> PTKP KARYAWAN YANG BELUM DIATUR
                </a>
                <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 FORMAT 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-->
