<script type="text/javascript">
    showOptionForm($("#form_jenis_komponen input[type='radio']:checked").val());

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

    function showPersentase(val) {
        if (val == "1") {
            $("#form_persentase").attr("class", "form-group");
            $("#persentase").focus();
        } else {
            $("#form_persentase").attr("class", "form-group hidden");
        }
    }

    function showOptionForm(val) {
        if (val == "tetap") {
            $("#form_persentase_gapok").attr("class", "form-group");
            showPersentase($("#form_persentase_gapok input[type='radio']:checked").val());
            <?php if ($master != 'potongan') : ?>
                $("#form_bpjs").attr("class", "row");
                $("#form_upah_lembur").attr("class", "row");
            <?php endif; ?>
        } else {
            $("#form_persentase_gapok").attr("class", "form-group hidden");
            showPersentase($("#form_persentase_gapok input[type='radio']:checked").val());
            $("#form_persentase").attr("class", "form-group hidden");
            <?php if ($master != 'potongan') : ?>
                $("#form_bpjs").attr("class", "row hidden");
                $("#form_upah_lembur").attr("class", "row hidden");
            <?php endif; ?>
        }
    }

    $(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" disabled>
    <input type="hidden" id="key" value="<?= ((isset($data->id_item)) ? md5($data->id_item) : "") ?>" readonly>
    <input type="hidden" id="jenis" value="<?= ((isset($data->jenis_komponen)) ? $data->jenis_komponen : "") ?>" readonly>
    <input type="hidden" id="bulanTdkTetap" value="<?= ((isset($data->id_item) && $data->jenis_komponen == 'tidak tetap') ? date('Y-m') : "") ?>" readonly>
    <input type="hidden" id="last_nm_komponen" class="form-control" value="<?= ((isset($data->nm_komponen)) ? $data->nm_komponen : "") ?>">
    <input type="hidden" id="no_urut" value="<?= ((isset($data->no_urut)) ? $data->no_urut : "") ?>" readonly>
    <div id="form_jenis_komponen" class="form-group <?= ($master == 'kehadiran') ? 'hidden' : '' ?>">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Jenis <?= ($master == 'kehadiran') ? 'pendapatan' : $master ?><i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_jenis" value="tetap" onchange="showOptionForm(this.value)" <?= ((isset($data) && $data->jenis_komponen == "tetap") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tetap</span>
                </label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_jenis" value="tidak tetap" onchange="showOptionForm(this.value)" <?= ((isset($data) && $data->jenis_komponen == "tidak tetap") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak Tetap</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5 my-auto">
                <label>Nama <?= ($master == 'kehadiran') ? 'pendapatan' : $master ?><i class="text-danger">*</i></label>
            </div>
            <div class="col-md-7">
                <input type="text" id="nm_komponen" class="form-control" value="<?= ((isset($data->nm_komponen)) ? $data->nm_komponen : "") ?>">
            </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-3">
                <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-4">
                <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>
    <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-4 input-group">
                <input type="text" id="persentase" class="form-control" value="<?= ((isset($data->gapok_persen)) ? $data->gapok_persen : "") ?>">
                <div class="input-group-append">
                    <span class="input-group-text"><b>%</b></span>
                </div>
            </div>
        </div>
    </div>

    <div id="form_diikutsertakan" class="form-group mt-3">
        <?php if ($master === 'kehadiran') : ?>
            <h6 class="font-weight-bold" style="color: #1c77d4;">Diikutsertakan dalam Kehadiran</h6>
            <hr>
            <div class="mb-1">
                <div id="form_cuti" class="row">
                    <div class="col-md-5 my-auto">
                        <label>Cuti<i class="text-danger">*</i></label>
                    </div>
                    <div class="col-md-3">
                        <label id="label">
                            <input type="radio" name="flag_cuti" value="0" <?= ((isset($data) && $data->flag_cuti == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Tidak</span>
                        </label>
                    </div>
                    <div class="col-md-4">
                        <label id="label">
                            <input type="radio" name="flag_cuti" value="1" <?= ((isset($data) && $data->flag_cuti == "1") ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Ya</span>
                        </label>
                    </div>
                </div>
                <div id="form_izin" class="row">
                    <div class="col-md-5 my-auto">
                        <label>Izin<i class="text-danger">*</i></label>
                    </div>
                    <div class="col-md-3">
                        <label id="label">
                            <input type="radio" name="flag_izin" value="0" <?= ((isset($data) && $data->flag_izin == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Tidak</span>
                        </label>
                    </div>
                    <div class="col-md-4">
                        <label id="label">
                            <input type="radio" name="flag_izin" value="1" <?= ((isset($data) && $data->flag_izin == "1") ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Ya</span>
                        </label>
                    </div>
                </div>
                <div id="form_sakit" class="row">
                    <div class="col-md-5 my-auto">
                        <label>Sakit<i class="text-danger">*</i></label>
                    </div>
                    <div class="col-md-3">
                        <label id="label">
                            <input type="radio" name="flag_sakit" value="0" <?= ((isset($data) && $data->flag_sakit == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Tidak</span>
                        </label>
                    </div>
                    <div class="col-md-4">
                        <label id="label">
                            <input type="radio" name="flag_sakit" value="1" <?= ((isset($data) && $data->flag_sakit == "1") ? "checked" : "") ?>>
                            <span class="design"></span>
                            <span class="text">Ya</span>
                        </label>
                    </div>
                </div>
            </div>
        <?php endif; ?>
        <h6 class="font-weight-bold" style="color: #1c77d4;">Diikutsertakan Hitungan</h6>
        <hr>
        <div id="form_bpjs" class="row <?= ((isset($data->jenis_komponen) && $data->jenis_komponen != 'tetap') || ($master == 'potongan')) ? 'hidden' : '' ?>">
            <div class="col-md-5 my-auto">
                <label>BPJS<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_bpjs" value="0" <?= ((isset($data) && $data->flag_bpjs == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak</span>
                </label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_bpjs" value="1" <?= ((isset($data->flag_bpjs) && $data->flag_bpjs == "1") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Ya</span>
                </label>
            </div>
        </div>
        <div id="form_pph21" class="row">
            <div class="col-md-5 my-auto">
                <label>PPH21<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_pph21" value="0" <?= ((isset($data) && $data->flag_pph21 == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak</span>
                </label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_pph21" value="1" <?= ((isset($data->flag_pph21) && $data->flag_pph21 == "1") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Ya</span>
                </label>
            </div>
        </div>
        <div id="form_pot_absensi" class="row <?= ($master == 'potongan') ? 'hidden' : '' ?>">
            <div class="col-md-5 my-auto">
                <label>Potongan Absensi<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_pot_absensi" value="0" <?= ((isset($data) && $data->flag_pot_absensi == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak</span>
                </label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_pot_absensi" value="1" <?= ((isset($data) && $data->flag_pot_absensi == "1") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Ya</span>
                </label>
            </div>
        </div>
        <div id="form_upah_lembur" class="row <?= ((isset($data->jenis_komponen) && $data->jenis_komponen != 'tetap') || ($master == 'potongan')) ? 'hidden' : '' ?>">
            <div class="col-md-5 my-auto">
                <label>Upah Lembur<i class="text-danger">*</i></label>
            </div>
            <div class="col-md-3">
                <label id="label">
                    <input type="radio" name="flag_upah_lembur" value="0" <?= ((isset($data) && $data->flag_upah_lembur == "0") ? "checked" : "") ?> <?= ((!isset($data)) ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Tidak</span>
                </label>
            </div>
            <div class="col-md-4">
                <label id="label">
                    <input type="radio" name="flag_upah_lembur" value="1" <?= ((isset($data) && $data->flag_upah_lembur == "1") ? "checked" : "") ?>>
                    <span class="design"></span>
                    <span class="text">Ya</span>
                </label>
            </div>
        </div>
    </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 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>
