<style type="text/css">
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #BCFCA0;font-size: 12px; }
.autocomplete-suggestions strong { font-weight: normal;font-size: 14px; color: #525050;background-color:#BEECFF }
</style>
<script src="<?php echo base_url();?>resources/js/autoNumeric.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>resources/js/jquery.autocomplete.js"></script> 
<div class="centering" style="width:530px;margin-top: 1%;z-index:-100">
    <div id='frm_court_calendar' style="border: 1px solid #ffffff;">
        <div class="detil" style="padding: 2px;background-color: white;">
            <div style="font-size:14px;">                            
                <form id="frm_input_cc" style="background:white;margin:0;" method="post" action="buat_va">                
                    <table id='tableDetilPerkara' style="font-size:14px; width:100%" border="0">
                        <col width="210px">
                        <col>
                        <tbody>
                            <tr><td align="center" style="padding:4px;background:white;font-size:16px;color:#111;" colspan="2">TAMBAH PEMBUATAN VIRTUAL ACCOUNT<br></td></tr>                            
                            <tr><td class="divider" colspan="2"></td></tr> 
                            <tr>
                                <td>Jenis Biaya<font color="red">*</font></td>
                                <td style="padding:0px;padding-left:5px;">
                                   <span class="custom-dropdown custom-dropdown--emerald" style="width:200px">
                                        <select name="jenis_biaya" id="jenis_biaya" style="width:200px" class="custom-dropdown__select custom-dropdown__select--white">
                                            <option value='1' >Panjar Perkara</option>
                                            <option value='2' >Tambah Panjar Perkara</option>
                                        </select>
                                    </span>
                                </td>
                            </tr>
                            <tr class="noPer" style="display:none;"><td class="divider" colspan="2"></td></tr>
                            <tr class="noPer" style="display:none;">
                                <td>Nomor Perkara<font color="red">*</font></td>
                                <td style="padding:0px;padding-left:5px;" colspan="2">
                                    <input type="text" class="autocomplete" id='no_perkara' name='no_perkara' value="" size="50" placeholder="Ketik Nomor Perkara" style="padding: 7px 0;padding-left:4px;border: 1px solid; width: 200px;">
                                    <input type="button" id = "cari_perkara" value="Cari" style="padding: 7px 0;color:white;background: #7f8c8d;border: 0 none;  -webkit-border-radius: 0 0 0 0;width: 90px;">
                                </td>
                            </tr>
                            <tr>
                                <td>Jenis Permohonan<font color="red">*</font></td>
                                <td style="padding:0px;padding-left:5px;" id="alur_pkr1" style="display:none;">
                                   <span class="custom-dropdown custom-dropdown--emerald" style="width:244px">
                                        <select name="alur_perkara_id" id="alur_perkara_id" style="width:244px" class="custom-dropdown__select custom-dropdown__select--white">
                                        <?php 
                                             if($tampil_alur->num_rows()>0){
                                                foreach ($tampil_alur->result() as $row) {
                                                    if($this->session->userdata('jenis_pengadilan')==$row->jenis_pengadilan){
                                                        echo "<option value=".$row->id." >".$row->nama."</option>";
                                                    }
                                                }
                                             }
                                        ?>
                                        </select>
                                    </span>
                                </td>
                                <td style="padding:0px;padding-left:5px;" id="alur_pkr2" style="display:none;">
                                   <span id="alur_perkara_nama"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>Nama Pihak<font color="red">*</font></td>
                                <td style="padding:0px;padding-left:5px;">
                                    <input id="nama_pihak" name="nama_pihak" class="nama_pihak1 standard-input" value="" placeholder="Nama Lengkap Pihak" maxlength="125" width="50px">
                                </td>                                
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>
                                    <input id="email" name="email" class="emailnya standard-input" value="" placeholder="Email@domain.tld" size="50">
                                </td>                                
                            </tr>                   
                            <tr>
                                <td>Telepon/Hp<span style="color:red">*</span></td>
                                <td>
                                    <input id="telepon" name="telepon" class="telepon1 standard-input" value="" placeholder="Nomor Telepon/HP" size="50">
                                </td>                               
                            </tr>
                            <tr>
                                <td>Jumlah Panjar<span style="color:red">*</span></td>
                                <td style="padding:0px;padding-left:5px;">
                                    <input data-a-sep="." data-a-dec="," type="text" id="jumlah" name="jumlah" value="" class="standard-input" style="width:220px;" placeholder="0">

                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="buttongroup">
                                    <input type="button" id='close_frm_cc' value="Kembali" class="btn">
                                    <input type="submit" id="simpan" value="Simpan" class="btn">
                                </td>
                            </tr>         
                            <input type="hidden" id="alur_perkara_id1" name="alur_perkara_id1">  
                            <input type="hidden" id="enc_perkara_id" name="enc_perkara_id">                
                            <input type="hidden" id="refresh" class='detil_perkara_refresh' value="0">                            
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">   
    var site = "<?php echo base_url();?>";
    $(function(){
        $('.autocomplete').autocomplete({
            serviceUrl: site+'cari_nomor_perkara',
            onSelect: function (suggestion) {
               $('#cari_perkara').click();
            }
        });
    }); 
$(document).ready(function() {
    $('#jumlah').ForceNumericOnly();
    $('#jumlah').autoNumeric('init', {mDec: '0'});
});
    // $('#close_frm_cc').closingFormWin();
    $('#frm_input_cc').SubmitHandling({
        refresh:'1',
        setRefresh:1,
        divRef:'#konten',
        clicked:1,
        btnClicked:'#close_frm_cc',
        whenStatus:1
    }); 
    $('#close_frm_cc').click(function(){
        $('#close_frm_cc').closingFormWin();
		location.reload();
    }); 
$("#jenis_biaya").change(function(){
    if($(this).val()==2){
        $("tr.noPer").show();   
        $("#alur_pkr2").show();
        $("#alur_pkr1").hide();
		$("#simpan").val("Tambah Panjar");
    }else{
        $("tr.noPer").hide();
        $("#alur_pkr2").hide();
        $("#alur_pkr1").show();
		$("#simpan").val("Simpan");
    } 
}); 

$("#cari_perkara").click(function() {
    openLoadingDialog()
    $.post('<?php echo base_url()?>c_payment/fetchData', {
        val:$('#no_perkara').val(),
    }, function(response){
        var json = jQuery.parseJSON(response);
        closeLoading()
        if(json.st==1){
            $("#alur_perkara_nama").html("");
            $("#alur_perkara_nama").append(json.nama_alur);
            $("#alur_perkara_id1").html("");
            $("#alur_perkara_id1").val(json.alur_perkara_id);
            $(".nama_pihak1").html("");
            $(".nama_pihak1").val(json.nama_pemohon);
            $(".emailnya").html("");
            $(".emailnya").val(json.email_pemohon);
            $(".telepon1").html("");
            $(".telepon1").val(json.tlp_pemohon); 
            $("#enc_perkara_id").html("");
            $("#enc_perkara_id").val(json.enc_perkara_id);           
            if(json.stTgl==0){
                message_error_show_parent(json.stTglMsg);
            }
        }else if(json.st==0){
            message_error_show_parent(json.msg);
            return
        }
    });
});                
</script>
