<script src="<?=base_url('assets/js/')?>/autoNumeric.js"></script>

<script>
    $(document).ready(function() {
        $(".numeric").autoNumeric('init', {
            aSep: '.', 
            aDec: ',',
            aForm: true,
            vMax: '100',
            vMin: '0'
        });
    });
</script>

<style>
    .small-font {
        font-size: 11px !important;
    }
</style>

<div class="card-header rounded-0">
    <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="form_input_id_kepribadian" class="form-control" value="<?= ((!empty($data->id_aspek_kepribadian_m))?MD5($data->id_aspek_kepribadian_m):'') ?>">
    
    <div class="row">
        <!-- START KOLOM KIRI -->
        <div class="col-md-6 border-right">
            <div class="row mb-2">
                <div class="col-md-12"><h5 class="content-header-title">Kompetensi</h5></div>
            </div>
            <div class="form-group">
                <label>Untuk Jabatan</label><BR>
                <label id="nama_jabatan_form" class="font-weight-bold"></label>
                <input id="form_input_id_jabatan" type="hidden">
            </div>
            <div class="form-group">
                <label>Personal Aspect <i class="text-danger">*</i></label>
                <input type="text" name="form_input_personal_aspek" id="form_input_personal_aspek" class="form-control" placeholder="Personal Aspect" value="<?= $data->personal_aspek ?>" autocomplete="off">
            </div>
            <div class="form-group">
                <label>Description <i class="text-danger">*</i></label>
                <textarea class="form-control" id="form_input_keterangan" style="height:90px; width=100%"><?= ((!empty($data->keterangan))?($data->keterangan):'') ?></textarea>
            </div>
            <div class="form-group">
                <label>Bobot <i class="text-danger">*</i></label>
                <div class="input-group">
                    <input type="text" name="form_input_bobot" id="form_input_bobot" class="form-control numeric" placeholder="Bobot" value="<?= $data->bobot ?>" autocomplete="off">
                    <div class="input-group-append" style="height:40px;">
                        <span class="input-group-text" style="padding: 0px 5px;">&nbsp; % &nbsp;</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- START KOLOM KANAN -->
        <div class="col-md-6">
            <div class="row mb-2">
                <div class="col-md-12 text-primary"><h5 class="content-header-title">Target</h5></div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label>Target 1 <i class="text-danger">*</i></label>
                    <textarea class="form-control" id="form_input_poin_1" style="height:70px; width=100%"><?= ((!empty($data->poin_1))?($data->poin_1):'') ?></textarea>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label>Target 2 <i class="text-danger">*</i></label>
                    <textarea class="form-control" id="form_input_poin_2" style="height:70px; width=100%"><?= ((!empty($data->poin_2))?($data->poin_2):'') ?></textarea>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label>Target 3 <i class="text-danger">*</i></label>
                    <textarea class="form-control" id="form_input_poin_3" style="height:70px; width=100%"><?= ((!empty($data->poin_3))?($data->poin_3):'') ?></textarea>
                </div>
            </div>
           <div class="row form-group">
                <div class="col-md-12">
                    <label>Target 4 <i class="text-danger">*</i></label>
                    <textarea class="form-control" id="form_input_poin_4" style="height:70px; width=100%"><?= ((!empty($data->poin_4))?($data->poin_4):'') ?></textarea>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label>Target 5 <i class="text-danger">*</i></label>
                    <textarea class="form-control" id="form_input_poin_5" style="height:70px; width=100%"><?= ((!empty($data->poin_5))?($data->poin_5):'') ?></textarea>
                </div>
            </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" onclick="new_input(this)">TAMBAH BARU</button>
            <button class="btn_save ladda-button" data-style="expand-left"></button>
        </div>
    </div>
</div>