<style type="text/css">

*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
    }
</style>
<div style="padding:10px;"></div>
<div class="detil" style="padding: 4px;font-size:14px;margin-top:25px;width: 85%;margin: 0 auto;border-color: #FFFFFF;">
	<form id="frm_mediasi" style="padding: 4px;background:white;margin:0;" method="post" action="<?php echo base_url().'savemediasibanding';?>">
		<table id="tableDetilPerkara" style="font-size:14px;">
			<col width="40%">
			<col width="60%">
			<tbody>
				<tr id="tr_pihak">
					<input type="hidden" id="enc" name="enc" value="<?php echo (!empty($enc))? $enc:'';?>">
					<input type="hidden" id="mediasi_id" name="mediasi_id" value="<?php echo (!empty($idmediasi))? $idmediasi:'';?>">					
					<input type="hidden" id="curr_date" value="<?php echo $current_date;?>">
					<input type="hidden" id="enc_act" name="enc_act" value="<?php echo $enc_act;?>">
					<input type="hidden" id="enc_id" name="enc_id" value="<?php echo $enc_id;?>">
					<input type="hidden" id="enc_tahapan" name="enc_tahapan" value="<?php echo $enc_tahapan;?>">
					<td colspan="2" style="padding:4px;background:white;font-size:16px" align="center"><strong>Tambah/Edit Data Mediasi</strong></td>
				</tr>
				<tr>
					<td colspan="2" class="divider">Data Perkara</td>
			    </tr>
				<tr>
					<td>Nomor Perkara</td>
					<td style="padding:0px;padding-left:5px;"><?php echo (!empty($noperkarapn) ? $noperkarapn : '');?></td>
				</tr>
				<tr>
					<td>Tanggal Permohonan <?php echo $permohonan; ?></td>
					<td style="padding:0px;padding-left:5px;"><?php echo (!empty($tglpermohonan) ? $tglpermohonan : '');?></td>
				</tr>
				<tr>
					<td colspan="2" class="divider">Data Mediasi</td>
			    </tr>
				<tr>
					<td>Tanggal Kesepakatan Perdamaian<font color="red">*</font></td>
					<td style="padding:0px;padding-left:5px;">
						<input id="tgl_kesepakatan" name="tgl_kesepakatan" value="<?php echo (!empty($tanggal_kesepakatan) ? $tanggal_kesepakatan : '');?>" class="datepicker" maxlength="10" placeholder="tgl/bln/tahun">
					</td>
				</tr>
				<tr>
					<td>Tanggal Pengajuan Kesepakatan Perdamaian<font color="red">*</font></td>
					<td style="padding:0px;padding-left:5px;">
						<input id="tgl_pengajuan" name="tgl_pengajuan" value="<?php echo (!empty($tanggal_pengajuan) ? $tanggal_pengajuan : '');?>" class="datepicker" maxlength="10" placeholder="tgl/bln/tahun">
					</td>
				</tr>
				<tr>
                	<td>Mediator</td>
                    <td style="padding:0px;padding-left:5px;">
                    	<div id="container">
	                        <?php
	                        $jumlah         = substr_count($mediator_text,"<br/>");
	                        $mediator_text  = explode("<br/>",$mediator_text);
	                        $status         = explode(",",$status_mediator);
	                        $mediator_id 	= explode(",",$idmediator);
	                        $total          = $jumlah+1;
	                        for($i=0; $i<$total; $i++){
	                            if($mediator_text!=''){
	                            	if($i==0){
			                            echo '<input type="text" id="mediator'.$i.'" name="mediator[]" value="'.$mediator_text[$i].'" placeholder="Klik kolom untuk pilih mediator" onclick="popup_mediator(0)" class="standard-input" style="width:220px;"/><a class="first_add" href="#" hidden><img  id="add" src="'.base_url('resources/img/add-user-48.gif').'" style="width: 23px; height: 24px;margin-left: 3px;"></a>';
			                            echo '<input type="hidden" name="mediatorid[]" class="mediator_id'.$i.'"  value="'.base64_encode($this->encrypt->encode($mediator_id[$i])).'"/><br/>';
			                            echo '<input type="hidden" name="status[]" class="status'.$i.'" value="'.$status[$i].'"/>';
			                            echo '<input type="hidden" name="enk_id[]" class="enk_id'.$i.'" value="'.$mediator_id[$i].'" >';
									}else{
			                        	echo '<div id="row'.$i.'">';
											echo '<input type="text" id="mediator'.$i.'" name="mediator[]" value="'.$mediator_text[$i].'" placeholder=" Klik kolom untuk pilih mediator" class="standard-input" style="width:220px;" required="true" oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" onclick="popup_mediator('.$counter.')"/>';
			                                echo '<input type="hidden" name="mediatorid[]" class="mediator_id'.$i.'" value="'.base64_encode($this->encrypt->encode($mediator_id[$i])).'"/>';
			                                echo '<input type="hidden" name="status[]" class="status'.$i.'" value="'.$status[$i].'"/>';
			                                echo '<input type="hidden" name="enk_id[]" class="enk_id'.$i.'" value="'.$mediator_id[$i].'">';
			                                echo '<a href="#" id="'.$i.'" class="btn_remove"><img style="width: 20px; height: 22px; margin-left: 3px;" src="'.base_url('resources/img/remove-user-512.gif').'"></a>';
			                            echo '</div>';
									}
								}
							}
							?>
                        </div>
                    </td>
                </tr>
                <tr>
					<td valign="top" style="vertical-align:top;">Isi Kesepakatan Perdamaian<font color="red">*</font></td>
					<td style="background:white;" id="isi_kesepakatan_text">
						<?php echo $this->ckeditor->editor("isi_kesepakatan",$isi_kesepakatan);?>
					</td>
				</tr>
				<tr>
					<td>Tanggal Pengiriman Kesepakatan Perdamaian Ke <?php echo $kirim_ke; ?></td>
					<td style="padding:0px;padding-left:5px;">
						<input id="tgl_pengiriman" name="tgl_pengiriman" value="<?php echo (!empty($tanggal_pengiriman) ? $tanggal_pengiriman : '');?>" class="datepicker" maxlength="10" placeholder="tgl/bln/tahun">
					</td>
				</tr>
				<tr>
                    <td>Keterangan</td>
                    <td style="padding:0px;padding-left:5px;">
                        <textarea id="keterangan" name="keterangan" class="standard-input" style="resize: none;margin: 0px; width: 880px; height: 60px;"><?php echo (!empty($keterangan)?$keterangan:'');?></textarea>
                    </td>
                </tr>
				<tr>
					<td colspan="2" style="background:white;" align="center">
						<input type="button" value="Kembali" id="kembali" class="btn">
						<?php
						$idmediasi = $this->encrypt->decode(base64_decode($idmediasi));
						if (!empty($idmediasi)) 
						{ 
							echo '<input type="button" id="hapus" value="Hapus" style="text-decoration:none" class="btn btn-danger">';
						}	
						?>
						<input type="submit" id="simpan" value="Simpan" onClick="return check_duplicate()" class="btn">
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</div>
<div style="padding:5px;"></div>
<script type="text/javascript">
function popup_mediator(val){
    $('.first_add').show();
    popup_form2nd('<?php echo base_url("popup_mediator");?>'+'/'+0+'/'+val+'/'+'N');
}

$(document).ready(function(){
    var coun='<?php echo $total; ?>';
	var counter=coun-1;
	$('#mediator0').val()!=''
	if($('#mediator0').val()!=''){
		$('.first_add').show();
	}
    $('#add').click(function(){
       ++counter; 
       $('#container').append('<div id="row'+counter+'"><input type="text" id="mediator'+ counter + '" name="mediator[]" placeholder=" Klik kolom untuk pilih mediator" class="standard-input" style="width:220px;" required="true" oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" onclick="popup_mediator('+counter+')" /><input class="mediator_id'+ counter+ '" type="hidden" name="mediatorid[]"/><input class="status'+counter+'" type="hidden" name="status[]"/> <input type="hidden" class="enk_id'+counter+'" name="enk_id[]">  <a href="#" id="'+counter+'" class="btn_remove"><img style="width: 20px; height: 22px;" src=<?php echo base_url('resources/img/remove-user-512.gif');?>></a></div>');
    });
    $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove(); 
    });  
});

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Pilih Nama Mediator');
    }else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('Silahkan pilih Nama mediator yang telah tersedia');
    }else {
       textbox.setCustomValidity('');
    }
    return true;
}

function check_duplicate(){
    arr = new Array();
    var x = document.getElementsByName("enk_id[]");
    for($i=0; $i<x.length; $i++){
       arr.push(x[$i].value);
    }

    var uniq = arr
    .map((name) => {
    return {
        count: 1, name: name
        }
    })
    .reduce((a, b) => {
    a[b.name] = (a[b.name] || 0) + b.count
    return a
    }, {})

    var duplicates = Object.keys(uniq).filter((a) => uniq[a] > 1)
        if(duplicates!=''){
            message = 'Anda memilih Mediator yang sama, mohon periksa kembali Mediator yang Anda pilih!';
            message_error_show(message);
            return false;
        }
	return true;
}
$('#frm_mediasi').SubmitHandling({
	refresh:1,
	setRefresh:1,
	clicked:1,
	btnClicked:'.close_form',
	whenStatus:1,
	isCKEdit:1,
	tdID:'isi_kesepakatan_text',
	textID:'isi_kesepakatan',
});

$('#kembali').closingFormWin();
$('#hapus').ButtonClickHandling({
	refresh:'1',
	setRefresh:1,
	divRef:'#konten',
	clicked:1,
	btnClicked:'.close_form',
	whenStatus:1,
	actions:'<?php echo base_url()?>detil_banding/hapus_mediasi/',
	formName:'#frm_mediasi',
	actionName:'Hapus Data'
});

$( document ).ready(function() {
	$('.datepicker').ValidateDateInput();
    $( function() {        		
		$('#tgl_kesepakatan').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Ming', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
            //beforeShowDay: $.datepicker.noWeekends,
            onSelect: function(dateText, inst) {
            	var date = $(this).datepicker('getDate');
				
				var tmp = $(this).val().split("/");
				var tmp2 = $('#curr_date').val().split("/");
				if((new Date(tmp[2]+"-"+tmp[1]+"-"+tmp[0]+"T00:00:00").getTime() > new Date(tmp2[2]+"-"+tmp2[1]+"-"+tmp2[0]+"T00:00:00").getTime())){
					message = 'Tidak Dapat Memilih Melebihi Hari ini. Sekarang Tanggal '+$('#curr_date').val();
					message_error_show_parent(message);
					$(this).css("background-color", "red");
				}else{
					$(this).css("background-color", "#dedbdb");
				}
			}
        });

		$('#tgl_pengajuan').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Ming', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
            beforeShowDay: $.datepicker.noWeekends,
            onSelect: function(dateText, inst) {
            	var date = $(this).datepicker('getDate');
				
				var tmp = $(this).val().split("/");
				var tmp2 = $('#curr_date').val().split("/");
				if((new Date(tmp[2]+"-"+tmp[1]+"-"+tmp[0]+"T00:00:00").getTime() > new Date(tmp2[2]+"-"+tmp2[1]+"-"+tmp2[0]+"T00:00:00").getTime())){
					message = 'Tidak Dapat Memilih Melebihi Hari ini. Sekarang Tanggal '+$('#curr_date').val();
					message_error_show_parent(message);
					$(this).css("background-color", "red");
				}else{
					$(this).css("background-color", "#dedbdb");
				}
			}
        });

        $('#tgl_pengiriman').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Ming', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
            beforeShowDay: $.datepicker.noWeekends,
            onSelect: function(dateText, inst) {
            	var date = $(this).datepicker('getDate');
				
				var tmp = $(this).val().split("/");
				var tmp2 = $('#curr_date').val().split("/");
				if((new Date(tmp[2]+"-"+tmp[1]+"-"+tmp[0]+"T00:00:00").getTime() > new Date(tmp2[2]+"-"+tmp2[1]+"-"+tmp2[0]+"T00:00:00").getTime())){
					message = 'Tidak Dapat Memilih Melebihi Hari ini. Sekarang Tanggal '+$('#curr_date').val();
					message_error_show_parent(message);
					$(this).css("background-color", "red");
				}else{
					$(this).css("background-color", "#dedbdb");
				}
			}
        });
    });
});
</script>
