@extends('be.layout-index')
@section('content')
@php
$modul="Kajian Akhir";
$modula="m_kajianakhir";
$id='';
$no='';
$id_laporan='';
$trendpelanggarannm='';
$rekomendasi_no='';
$rekomendasi_file='';
$locus='';
$stsposisi='';
if(isset($data)){
	$id=$data->id;
	$no=$data->no;
	$id_laporan=$data->id_laporan;
	$trendpelanggarannm=$data->trendpelanggarannm;
	$rekomendasi_no=$data->rekomendasi_no;
	$rekomendasi_file=$data->rekomendasi_file;
	$locus=$data->locus;
	$stsposisi=$data->stsposisi;
}
@endphp
<link rel="stylesheet" href="{{asset('media/assets/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('media/assets/css/select2-bootstrap.css')}}">
<style>
.borderless tr td{
	padding:3px;
	border:0;
	text-align:left;
	background-color:transparent!important;
	font-size:10pt;
}
.borderless tr{
	background-color:transparent!important;
}
</style>
<div class="row">
   <div class="col-12">
       <div class="card">
           	<div class="card-body">
			
<div class="panel-default">
	<div class="content-box-header  panel-heading">
		<div class="panel-title"></div>
	</div>
	<div class="content-box-large box-with-header">
		<form id=frm name=frm method=post action="{!!route($modula.'.save_trend')!!}">
			@csrf
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group row">
						<label class="col-sm-2 control-label">Laporan</label>
						<div class="input-group col-md-4">{!!$no;!!}</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 control-label">Kategori</label>
						<div class="col-sm-5">
							<table class="table borderless" width=100%>
							 <tbody id="tbody">
							@php
								$i=1;
								if(isset($m_kajiankategori)){
									foreach($m_kajiankategori as $item)
									{
										echo '
										<tr>
											<td width=1% valign=top>'.$i.'. </td>
											<td width=99%>
												Kategori : '.$item->kat1nm.'<br>
												Rekomendasi No : '.$item->rekomendasi_no.'<br>';
												if($item->rekomendasi_file!=''){
													echo 'File Rekomendasi : <a href="'.route("download.be_ka_dk")."/".rawurlencode($item->rekomendasi_file).'" class="btn btn-primary btn-xs"><i class=" ti-download"></i> Download</a>';
												}
												else{
													echo 'File Rekomendasi : <br>';
												}
												echo '
											</td>
										</tr>';
										$i++;
									}
								}
								@endphp
								</tbody>
							</table>
						</div>
					</div>
					<div class="form-group row required">
						<label class="col-sm-2 control-label">Trend Pelanggaran</label>
						<div class="col-sm-5">
							<input type="button" id="btnAdd" class="btn btn-secondary btn-sm" onclick="AddDropDownList()" value = "Add Trend" /><div style="height:5px"></div>
							<div id="dvContainer">
								@php
									$n_trend=DB::select("select id_trend from t_kajianakhir_trend where id_kajianakhir='".$id."' order by urut");
									foreach($n_trend as $item_trend){
										echo '<div style="display:flex"><select style="width:330px" class="form-control select2 col-md-12" id=trendpelanggaran[] name=trendpelanggaran[]>
												<option value=""';
												if($item_trend->id_trend==""){echo " selected ";}
												echo ">-Pilih-";
												$n_trendpelanggaran=DB::select("select id,nama from m_trendpelanggaran");
											  	if (!empty($n_trendpelanggaran)) {
						                      		foreach ($n_trendpelanggaran as $row){
														echo "<option value='".$row->id."'";
														if($row->id==$item_trend->id_trend){echo " selected ";}
														echo ">".$row->nama;
													}
												}
										echo'</select><button class="btn btn-outline-secondary" type="button" value = "Remove" onclick="f_remove(this)"><i class="fa ti-trash"></i></button></div>';
									}
									echo '</div>';
								@endphp
							</div>
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group" style="margin-left:13px">
						<div class="col-sm-offset-2 col-sm-10">
							<input name="id" type="hidden" value="{!!$id;!!}"/>
							<input type=hidden name=id_laporan id=id_laporan value="{!!$id_laporan;!!}">
							<input name="id_jenislaporan" type="hidden" value="{!!$id_jenislaporan;!!}"/>
							<button type="submit" class="btn btn-primary btn-sm" name="btnSave"><i class='fa fa-save'></i> Simpan</button>
							<a href="javascript:history.back()" class="btn btn-warning btn-sm"><i class='fa fa-repeat'></i> Batalkan</a>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>	

			</div>
        </div>
    </div>        
</div>

<script>
$(function() {
  $("#frm").validate({
	errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.next('span').next('span'));      // radio/checkbox?
        } else if (element.hasClass('select2')) {    
            error.insertAfter(element.next('span'));  // select2
        } else {         
            error.insertAfter(element);               // default
        }
    },
	highlight: function (element, errorClass, validClass) {
        $(element).addClass(errorClass); //.removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
   	unhighlight: function (element, errorClass, validClass) {
       	$(element).removeClass(errorClass); //.addClass(validClass);
       },
	submitHandler: function(form) {
		if(gosubmit()){
			$("#overlay").fadeIn(300);
			var frm = document.getElementById("frm");
			//frm.submit();
			var formData = new FormData(frm);
			$.ajax({
			    type: "POST",
			    url: "{!!route($modula.'.save_trend')!!}",
			    data: formData,
			    contentType: false,
			    processData: false,
			    beforeSend: function() {
			    },
			    success: function(msg){
					document.location.href=msg
			    },
			    error: function() {
			    }
			});
		}
	}
  });
});
</script>

<script type="text/javascript">
    function AddDropDownList() {
        //Build an array containing Customer records.
        
		var ops ={!!json_encode($m_trendpelanggaran)!!};
		
        //Create a DropDownList element.
        var ddlOps = $("<select name=trendpelanggaran[] id=trendpelanggaran[] class='form-control select2 id_tim'/>");
		option='<option value="">-Pilih-</option>'
		ddlOps.append(option);
        //Add the Options to the DropDownList.
        $(ops).each(function () {
           var option = $("<option />");

            //Set Customer Name in Text part.
            option.html(this.nama);

            //Set CustomerId in Value part.
            option.val(this.id);

            //Add the Option element to DropDownList.
            ddlOps.append(option);
        });

        //Reference the container DIV.
        var dvContainer = $("#dvContainer")

        //Add the DropDownList to DIV.
        var div = $("<div style='display:flex'/>");
        div.append(ddlOps);

        //Create a Remove Button.
        var btnRemove = $("<button class='btn btn-outline-secondary' type='button' value = 'Remove'><i class='fa ti-trash'></i></button>");
        btnRemove.click(function () {
            $(this).parent().remove();
        });

        //Add the Remove Buttton to DIV.
        div.append(btnRemove);

        //Add the DIV to the container DIV.
        dvContainer.append(div);
		$(".select2").select2({ width: '320px'});
		
    };
	function f_remove(o){
        $(o).parent().remove();
    }
</script>
<script src="{!!asset('media/assets/js/select2.full.js')!!}"></script>
<script>
$(".select2").select2();
</script>
@endsection