<script type="text/javascript">
    function formatangka(objek) {
        a = objek.value;
        b = a.replace(/[^\d]/g,"");
        c = "";
        panjang = b.length;
        j = 0;
        for (i = panjang; i > 0; i--) {
            j = j + 1;
            if (((j % 3) == 1) && (j != 1)) {
            c = b.substr(i-1,1) + "." + c;
            } else {
            c = b.substr(i-1,1) + c;
            }
        }
        objek.value = c;
    }

    var is_karyawan = $("#detail_karyawan .col-md-6 > .row > .col-md-8:eq(0)").text().length
    if (is_karyawan > 3) {
        $("#form_input #id_karyawan").val(location.pathname.match(/detail\/(\w+)/)[1]);
    }

    var gapok = $("#detail_karyawan #gapok").val();
    if (gapok != "-") {
        $("#copy_gapok").html("dari <b>Rp <span>"+gapok+"</span></b>");
        $("#gapok_rp").val(gapok);
    }

    function showPersentase(val) {
        if (val == "1") {
            $("#form_persentase").attr("class","form-group");
            $("#nominal").attr("disabled","true");
            $("#persentase").focus();
            if (gapok == "-") {
                $("#alert_gapok").attr("class","");
                $(".btn_save").attr("disabled","true");
            }else{
                $("#alert_gapok").attr("class","hidden");
                $(".btn_save").removeAttr("disabled");
            }
        }else{
            $("#form_persentase").attr("class","form-group hidden");
            $("#nominal").removeAttr("disabled");
            $("#nominal").focus();
            $("#alert_gapok").attr("class","hidden");
            $(".btn_save").removeAttr("disabled");
        }
    }

    function calculatePersentase(amount) {
        const n = amount.value;
        const x = $("#copy_gapok span").text().replaceAll(".","");

        let nominal = ((Math.round((n / 100) * 10000) / 10000) * x);
        $("#nominal").val(nominal.toString());
        $("#nominal").keyup();
    }

    $(function() {
        // event key enter
        $("#form_input input[type=text]").keydown(function (event) {
            if (event.which == 13) {
                event.preventDefault();
                $('.btn_save').click();
                // alert('click event was trigger');
            }
        });
        $("#persentase").inputmask('decimal', {
            rightAlign: true
        });
    });
</script>
<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 id="form_input" class="card-body">
    <input type="hidden" id="key" value="<?= ((isset($data))?md5($data->id_item):"") ?>" readonly>
    <input type="hidden" id="id_karyawan" value="" readonly>
    <input type="hidden" id="gapok_rp" value="" readonly>
    <input type="hidden" id="periode" value="<?= ((isset($data))?$data->periode:"") ?>" readonly>

    <div class="form-group">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Nama Potongan<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-7">
                <input type="text" id="nm_potongan" class="form-control" value="<?=((isset($data))?$data->nm_potongan:"") ?>">
            </div>
        </div>
    </div>
    <div id="form_persentase_gapok" class="form-group">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Persentase Dari Gapok<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_gapok" value="0" onchange="showPersentase(this.value)" <?= ((isset($data) && $data->flag_persentase_gapok == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak</span>
                </label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_gapok" value="1" onchange="showPersentase(this.value)" <?= ((isset($data) && $data->flag_persentase_gapok == "1") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Ya</span>
                </label>
            </div>
        </div>
        <div class="row justify-content-end">
            <div class="col-md-7">
                <font id="alert_gapok" class="hidden" style='color:Crimson'><i class='fa fa-exclamation-triangle'></i> Master gapok belum diinputkan.</font>
            </div>
        </div>
    </div>
    <div id="form_persentase" class="form-group <?= ((isset($data)) ? (($data->flag_persentase_gapok == "0") ? "hidden" : "") : "hidden" ) ?>">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Persentase<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3 input-group">
                <input type="text" id="persentase" class="form-control" value="<?=((isset($data))?$data->gapok_persen:"") ?>" onkeyup="calculatePersentase(this)">
                <div class="input-group-append">
                    <span class="input-group-text"><b>%</b></span>
                </div>
            </div>
            <div class="col-md-4 my-auto">
                <label id="copy_gapok"></label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Nominal Potongan<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-7">
                <input type="text" id="nominal" class="numberbox form-control" onkeyup="formatangka(this);" value="<?= ((isset($data))?number_format($data->nominal_potongan,0,",","."):'') ?>" <?= ((isset($data)) ? (($data->flag_persentase_gapok == "1") ? "disabled" : "") : "" ) ?>>
            </div>
        </div>
    </div>
</div>
<div class="card-footer">
    <div class="row">
        <div class="col-md-8 text-left">
            <div id="message"></div>
        </div>
        <div class="col-md-4 text-right">
            <button id="btn_new_input" class="btn" style="display:none">TAMBAH BARU</button>
            <button class="btn_save ladda-button" data-style="expand-left"></button>
        </div>
    </div><!-- ./row -->
</div>
