<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_approval" class="card-body" disabled>
    <input type="hidden" id="id" value="<?= ((isset($data))?MD5($data->id_pkwt):'') ?>">
    <input type="hidden" id="path_ttd" value="<?= $direktur->path_ttd ?>">
    <input type="hidden" id="nm_direktur" value="<?= $direktur->nm_direktur ?>">
    <input type="hidden" id="tgl_pkwt_mulai" value="<?= $data->tgl_pkwt_mulai ?>">
    <input type="hidden" id="tgl_pkwt_selesai" value="<?= $data->tgl_pkwt_selesai ?>">
    <input type="hidden" id="no_pkwt" value="<?= $data->no_pkwt ?>">
    <input type="hidden" id="gapok" value="<?= $data->gapok ?>">
    <input type="hidden" id="jkk" value="<?= $data->jkk ?>">

    <div class="row">
        <div class="col-md-4"><label>Nama Karyawan</label></div>
        <div class="col-md-8">
            <input type="text" class="form-control" value="<?= $data->nik .' - '.$data->nama_lengkap ?>" disabled>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-4"><label>Approval</label></div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                    <section class="light">
                        <label id="label">
                            <input type="radio" id="status" name="status" value="4" checked>
                            <span class="design"></span>
                            <span class="text">Setuju</span>
                        </label>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="light">
                        <label id="label">
                            <input type="radio" id="status" name="status" value="3">
                            <span class="design"></span>
                            <span class="text">Tolak</span>
                        </label>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <div id="div_ket_tolak" class="row mt-2" style="display:none">
        <div class="col-md-4"><label>Keterangan Tolak</label></div>
        <div class="col-md-8">
            <textarea id="ket_tolak" rows="5" style="width:100%;"></textarea>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-4"><label>Nama Direktur</label></div>
        <div class="col-md-8">
            <select name="ttd_direktur" id="ttd_direktur" class="form-control" style="width: 100%"></select>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-12">
            <label>Tandatangan Direktur</label><br>
            <img id="image_ttd" src="<?= $this->config->item('base_image').'image?_t=file&_d='.$direktur->path_ttd ?>" class="portrait" height="200px">
        </div>
    </div>
</div>
<div class="card-footer">
    <div class="row">
        <div class="col-md-7 text-left">
            <div id="message_approval"></div>
        </div>
        <div class="col-md-5 text-right">
            <button class="btn_submit_approve btn btn-primary ladda-button" data-style="expand-left">SUBMIT</button>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#form_input_approval #ttd_direktur").select2({
            placeholder: 'Pilih Tandatangan Direktur',
            allowClear: true,
            dropdownParent: $('#form_input_approval'),
            ajax: {
                url: "<?= route('dropdown.pkwt.direktur') ?>",
                data: function (params) {
                    var query = {
                        search: params.term,
                        belum_diinput: false
                    }

                    // Query parameters will be ?search=[term]&belum_diinput=false
                    return query;
                },
                dataType: 'json',
                processResults: function (data) {
                    // Transforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: data
                    };
                }
            }
        });

        // ONCHANGE TTD DIREKTUR
        $("#form_input_approval #ttd_direktur").change(function(){
            var id_karyawan = $(this).val();
            $.ajax({
                type: 'GET',
                url: '<?= route("pkwt.verifikasi.onchange.path.ttd") ?>'+'?id_karyawan='+id_karyawan,
                dataType: 'json',
                success: function(result){
                    if(result.success){
                        $("#form_input_approval #path_ttd").val(result.data.path_ttd);
                        
                        var base_image = '<?= $this->config->item('base_image') ?>image?_t=file&_d=' + result.data.path_ttd;
                        $("#form_input_approval #image_ttd").attr("src", base_image);
                    } else {
                        var base_image = '<?= $this->config->item('base_image') ?>image?_t=file&_d=';
                        $("#form_input_approval #image_ttd").attr("src", base_image);
                    }
                }
            })
        });
    });

    $(document).on('click','input[name=status]:checked',function(){
        var status = $(this).val();
        if(status == "4"){
            $('#form_input_approval #div_ket_tolak').hide();
        }else{
            $('#form_input_approval #div_ket_tolak').show();
        }
    });
</script>