@extends('home.layout-index')
@section('content')
@php
	$modul="Klarifikasi Proses";
	$modula="klarifikasi";
	$no='';
	$ringkasan='';
	$pelapornm='';
	$kuasa_hukum='';
	if(isset($data)){
		$no=$data->no;
		$ringkasan=$data->ringkasan;
		$pelapornm=$data->pelapornm;
		$kuasa_hukum=$data->kuasa_hukum;
	}
	$id_jenislaporan=session('ujenislaporanid');
	
	$jmlhari=0;$scrollcls="";
	if($id_jenislaporan==1){
		$jmlhari=5;
	}
	elseif($id_jenislaporan==2||$id_jenislaporan==3){
		$jmlhari=14;
	}
@endphp
<style>

.progressbar-wrapper {
      background: #fff;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 5px;
	  text-align:center;
}

.progressbar li {
      list-style-type: none;
      width: 20%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #c9c7c7;
}
.progressbar li:before {
    width: 35px;
    height: 35px;
    content: "";
    line-height: 25px;
    border: 5px solid #c9c7c7;
    display: block;
    text-align: center;
    margin: 0 auto 0px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
	color:black;
}
.progressbar li:after {
     width: 100%;
     height: 7px;
     content: '';
     position: absolute;
     background-color: #c9c7c7;
     top: 15px;
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:after {
     content: none;
}
.progressbar li.active {
    color: green;
    font-weight: 500;  
}
.progressbar li.active:before {
    border-color: #ffe7aa;
    background: green;
 }
.progressbar li.active + li:after {
    background-color: #ffe7aa;
}
.progressbar li.active:before {
    background:   url({{asset('media/image/prog_aktif.png')}}) no-repeat center center;
   	color:white;
}
.tm1{
	margin-top:-195px;
	color:red;
}
.tm2{
	margin-top:-308px;
	padding-bottom:112px;
	color:red;
}
.progressbar li::before {
    background:  url({{asset('mediaimage/prog_noaktif.png')}}) no-repeat center center;
	color:white;
	font-weight;400;
}
.progressbar {
    counter-reset: step;
}
.progressbar li:before {
    content: counter(step);
    counter-increment: step; 
}


.scrollbarkotak
{
	margin-left:77px;
	margin-top:80px;
	float: left;
	height: 93px;
	width: 131px;
	background: #fff;
	overflow-y: scroll;
	margin-bottom: 25px;
	text-align:left;
	color:#FF6954;
	position:relative;
}
.scrollbarkotaka
{
	margin-left:5px;
	margin-top:80px;
	height: 93px;
	width: 131px;
	background: #fff;
	overflow-y: scroll;
	margin-bottom: 25px;
	text-align:left;
	color:#FF6954;
	position:relative;
}

.force-overflow
{
	min-height: 154px;
}

.style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar
{
	height:4px;
	width: 4px;
	background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #FF6954;
}

.scrollbara
{
	margin-left:56px;
	margin-top:0px;
	float: left;
	height: 220px;
	width: 90%;
	background: #fff;
	overflow-x: scroll;
	margin-bottom: 25px;
	text-align:left;
	color:#FF6954;
}
.scrollbarb
{
	margin-left:56px;
	margin-top:0px;
	float: left;
	height: 390px;
	width: 90%;
	background: #fff;
	overflow-x: scroll;
	margin-bottom: 25px;
	text-align:center;
	color:#FF6954;
}

.force-overflowa
{
	min-height: 200px;
	min-width: 800px;
}
.force-overflowb
{
	margin-top:30px;
	margin-left:570px;
	min-height: 250px;
	min-width: 800px;
}

.style-2a::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.style-2a::-webkit-scrollbar
{
	height:9px;
	width: 9px;
	background-color: #F5F5F5;
}
.style-2a::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #FF6954;
}


.borderless tr td {
    border: none !important;
}
.dokumenlist tr td{
	padding:2px;
	border:0;
	text-align:left;
}
</style>
<div style="padding-left:7px">
    <div class="row">
		<div class="col-10 title">
			{!!$title!!}
        </div>
    </div>     
	<div style="height:50px"></div>
    <div class="row">
        <div class="col-sm-12 d-none d-md-block ">
			@php 
				if($jmlhari>5){
					$scrollcls="a";
			@endphp
			<div class="scrollbarb style-2a">
				<div class="force-overflowb">
				@php 
					}
				@endphp
					<div class="progressbar-wrapper">
				      <ul class="progressbar d-flex justify-content-center module">
					  	@php
							for ($i = 1; $i <= $jmlhari; $i++) {
									$keg='';
									$liststep=DB::table("t_klarifikasi_proses as a")	
											 ->join("m_klarifikasi_step as b","a.id_step","=","b.id")
											 ->select("b.nama")
											 ->where("a.id_klarifikasi",$id_klarifikasi)
											 ->where("a.harike",$i)
											 ->orderBy("a.id")
											 ->get();
									if($liststep->count()>0){
										$keg.='<table cellpadding=1 width=100%>';
										foreach($liststep as $item){
											$keg.='<tr><td width=1% valign=top>-</td><td width=99%>'.$item->nama.'</td></li>';
										}
										$keg.='</table>';
									}
									$qry=DB::table("t_klarifikasi_proses as a")	
										 ->select("a.tanggal")
										 ->where("a.id_klarifikasi",$id_klarifikasi)
										 ->where("a.harike",$i)
										 ->orderBy("a.id")
										 ->first();
									$step_tanggal=(!empty($qry)?$qry->tanggal:null);
									$step_tanggalnm=(isset($step_tanggal)?konversi_tanggal('d-M-Y',$step_tanggal,'idshort'):'');
									if($liststep){
										$step_sts=true;
									}
									else{
										$step_sts=null;
									}
									if($jmlhari>5){
										if($i%2==1){
											$k=1;
										}
										else{
											$k=2;
										}
									}
									else{
										$k=1;
									}
									$clskeg='';
									if($keg!=''){
										$clskeg='scrollbarkotak'.$scrollcls;
									}
						@endphp
								<li class="{!!(isset($step_sts)?"active":"")!!}"><img src="{!!asset('media/image/kotak/'.$k.(isset($step_sts)?"a":"b").'.png')!!}" style="z-index:1">{!!(isset($step_sts)?'<div class="tm'.$k.'">'.$step_tanggalnm.'&nbsp;</div><div class="'.$clskeg.' style-2"><div class="force-overflow">'.$keg.'</div></div>':'')!!}</li>
						@php 
							} 
						@endphp
				      </ul>
					</div>
			@php 
				if($jmlhari>5){
			@endphp
				 </div>
			</div>
			@php  
				} 
			@endphp
		</div>
	</div>
	<div class=row style="height:20px"></div>
    <div class="row">
        <div class="col-sm-6">
			<div class="table-responsive">
	            <table width="100%" class="table table-hover table-striped table-bordered" id=aexample>
	                <thead>
						<tr>
							<th colspan=4>Detail Proses dan Dokumen</th>
						</tr>
	                    <tr>
	                        <th width=5% style="text-align: center;">Hari Ke</th>
	                        <th width=20% style="text-align: center;">Tanggal</th>
	                        <th width=45% style="text-align: center;">Proses</th>
	                    </tr>
	                </thead>
					<tbody id="show_data">
					@php
	                  if (!empty($list)) {
					  	  $step='';$stepnm='';
	                      foreach ($list as $row) {
						  	if($step==""){
								$step=$row->harike;
								$stepnm=$step;
							}
							else{
								if((int)$step==$row->harike){
									$stepnm='';
								}
								else{
									$step=$row->harike;
									$stepnm=$step;
								}
							}
	                @endphp
						<tr>
							<td valign=top>{!!$stepnm; !!}</td>
							<td valign=top>{!!konversi_tanggal('d-M-Y H:i:s',$row->tanggal,'idshort'); !!}</td>
							<td valign=top>{!!$row->proses; !!}</td>
						</tr>
					@php
							}
						}
					@endphp
					</tbody>
	            </table>
			</div>
        </div>
        <div class="col-sm-6">
			<div class="row">
				<div class="col-sm-12">
					<div class="table-responsive">
		            	<table width="100%" class="table table-bordered">
							<tr>
								<th colspan=4>Detail Laporan/Temuan</th>
							</tr>
		                    <tr>
								<td>
			                        <table width=100% class="borderless">
										<tbody>
											<tr>
												<td width=30%>No Laporan</td>
												<td width=1>:</td>
												<td width=70%>{!!$no!!}</td>
											</tr>
											<tr>
												<td>Pokok Laporan</td>
												<td width=1>:</td>
												<td>{!!$ringkasan!!}</td>
											</tr>
											@if(session('uid')){ !!}
												<tr>
													<td>Pelapor</td>
													<td width=1>:</td>
													<td>{!!$pelapornm!!}</td>
												</tr>
												<tr>
													<td>Kuasa Hukum</td>
													<td width=1>:</td>
													<td>{!!$kuasa_hukum!!}</td>
												</tr>
											@endif
										</tbody>
									</table>
								</td>
		                    </tr>
						</table>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="table-responsive">
			            <table width="100%" class="table table-hover table-striped table-bordered">
			                <thead>
								<tr>
									<th colspan=5>Berkas</th>
								</tr>
			                    <tr>
			                        <th width=10% style="text-align: center;">No</th>
			                        <th width=30% style="text-align: center;">Yang Diserahkan</th>
			                        <th width=10% style="text-align: center;">Banyak</th>
			                        <th width=30% style="text-align: center;">Keterangan</th>
			                        <th width=20% style="text-align: center;">Pihak</th>
			                    </tr>
			                </thead>
							<tbody id="show_data">
							@php
							  $j=1;
			                  if (!empty($listberkas)) {
			                      foreach ($listberkas as $row) {
			                @endphp
								<tr>
									<td>{!!$j; !!}</td>
									<td>{!!$row->diserahkan; !!}</td>
									<td>{!!$row->banyak; !!}</td>
									<td>{!!$row->keterangan; !!}</td>
									<td>{!!$row->pihak; !!}</td>
								</tr>
							@php
									$j++;
									}
								}
							@endphp
							</tbody>
			            </table>
					</div>
				</div>
			</div>
		</div>
    </div>        
</div>
@endsection