@extends('layout.app_706')
@section('title')
	{{ $data->judul }}
@endsection
@section('content')	
	@php
		$nama = '';
		$user_img_none = asset('avatar/user-pdam.png');
		if (empty($data->user_pemohon)) {
			$user_img 	= asset('avatar/user-pdam.png');
			$path_user 	= 'avatar/'.strtolower(trim($data->nip_spvworker)).'.jpg' ;
			if (file_exists($path_user)){
				$user_img 	= asset($path_user);
			}
			$nama 		= 'SPV TSI';
			$bagian 	= '';
			$TitleTask  = 'Tugas Tambahan';
			$addJobs 	= true;
		} else {
			$user_img 	= asset( 'avatar/'.strtolower(trim($data->user_pemohon->nip)).'.jpg') ;
			$path_user 	= 'avatar/'.strtolower(trim($data->user_pemohon->nip)).'.jpg' ;
			if (file_exists($path_user)){
				$user_img 	= asset($path_user);
			}
			else {
				$user_img 	= asset('avatar/user-pdam.png');
			}
			$nama 		= $data->user_pemohon->nama;
			$bagian 	= str_replace('Manajer ','',isset($data->jabatan->namajabatan)?$data->jabatan->namajabatan:'');
			$TitleTask  = 'Task Detail';
			$addJobs 	= false;
		}
		
		if (isset($data->mjr_pemohon->nip)) {
			$m_img 		= asset( 'avatar/'.strtolower(trim($data->mjr_pemohon->nip)).'.jpg') ;
			$m_path 	= 'avatar/'.strtolower(trim($data->mjr_pemohon->nip)).'.jpg' ;
			if (file_exists($m_path)){
				$m_img 	= asset($m_path);
			}
			else {
				$m_img 	= asset('avatar/user-pdam.png');
			}
			$m_nama 	= $data->mjr_pemohon->nama;
		} else {
			$m_img 		= false;
			$m_nama 	= false;
		}

		if (isset($data->mjr_tsi->nip)) {
			$m_tsi_img 		= asset( 'avatar/'.strtolower(trim($data->mjr_tsi->nip)).'.jpg') ;
			$m_tsi_path 	= 'avatar/'.strtolower(trim($data->mjr_tsi->nip)).'.jpg' ;
			if (file_exists($m_tsi_path)){
				$m_tsi_img 	= asset($m_tsi_path);
			}
			else {
				$m_tsi_img 	= asset('avatar/user-pdam.png');
			}
			$m_tsi_nama 	= $data->mjr_tsi->nama;
		} else {
			$m_tsi_img 		= false;
			$m_tsi_nama 	= false;
		}

		$hd_akses 	= $spv_akses = false;
		if ($data->status == 2 and empty($data->u_helpdesk)) {
			$hd_akses 	= true;
			$pageWizardx = 1;
		}

		if ($data->status_spvworker < 2 and in_array( $data->status , [3, 4])) {
			if ( $data->nip_spvworker == Auth::user()->userid) {
				$spv_akses = true;
			}

			$pageWizardx = 2;
		}
		
		if ($data->status_spvworker == 2 and in_array( $data->status , [3, 4])) {
			$pageWizardx = 3;
		}

		if ($data->status_spvworker == 2 and in_array( $data->status , [10])) {
			$pageWizardx = 4;
		}

		$prosen = $data->ket_status->urutan / 6 * 100;

		$file_helpdesk = false; 
		$nama_helpdesk = false; 
		if (!empty($data->u_helpdesk)) {
			$url_helpdesk 	= asset( 'avatar/'.strtolower(trim($data->u_helpdesk)).'.jpg');
			$path_helpdesk 	= 'avatar/'.strtolower(trim($data->u_helpdesk)).'.jpg';

			if (file_exists($path_helpdesk)) {
				$file_helpdesk = true; 
				if( !empty( $data->helpdesk) ){
					$nama_helpdesk = $data->helpdesk->nama; 
				}
			}
		}

		$file_spv = false; 
		$nama_spv = false; 
		if (!empty( $data->nip_spvworker)) {
			$url_spv 	= asset( 'avatar/'.strtolower(trim($data->nip_spvworker)).'.jpg') ;
			$path_spv 	= 'avatar/'.strtolower(trim($data->nip_spvworker)).'.jpg' ;
			if (file_exists($path_spv)){
				$file_spv = true; 
				if( !empty( $data->data_spv) ){
					$nama_spv = $data->data_spv->nama;
				}
			}
		}

		$file_checker = false; 
		$nama_checker = false; 
		if (!empty( $data->nip_checker)) {
			$url_checker 	= asset( 'avatar/'.strtolower(trim($data->nip_checker)).'.jpg');
			$path_checker 	= 'avatar/'.strtolower(trim($data->nip_checker)).'.jpg';
			if (file_exists($path_checker)){
				$file_checker = true; 
				if( !empty( $data->checker) ){
					$nama_checker = $data->checker->nama; 
				}
			}
		}

		$file_worker = false;
		$nama_worker = [];
		if (count($data->data_requirement) !== 0) {
			foreach($data->data_requirement as $row){
				if( !empty($row->worker) ){
					if( $row->status==11 || $row->status == 10 ){
						$_pageWizard = 5;
					}
					$nama_worker[] 	= $row->worker->nama;
					$path_worker 	= 'avatar/'.strtolower(trim($row->worker->nip)).'.jpg';
					if (file_exists($path_worker)){
						$file_worker = true; 
						$worker_img[] 	= asset('avatar/'.strtolower(trim($row->worker->nip)).'.jpg');
					}
					else {
						$worker_img[] 	= asset('avatar/user-pdam.png'); 
					}
				}
			}
		}

		if ($data->ket_status->urutan == '6') {
			$_pageWizard = 6;
		}
		
	@endphp

    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <div class="d-flex align-items-center flex-wrap mr-2">
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">                    
					<a href="{{ route('task.index') }}" 
						class="btn btn-clean btn-icon btn-sm mr-6" 
						data-inbox="back"
						data-toggle="tooltip"
						data-original-title="Back to Task List">
						<i class="flaticon2-left-arrow-1"></i>
					</a>
					<span class="text-muted">{{ $TitleTask }} : </span>
					<span class="_d-none">ID : {{ $data->recid }}</span>
					<span class="text-truncate" title="{{ $data->judul }}">{{ $data->judul }}</span>
                </h5>
            </div>
        </div>
    </div>
	
    <div class="d-flex flex-column-fluid">
        <div class="container-fluid">
			<div class="card card-custom gutter-b">
				<div class="card-body">
					<div class="d-flex">
						<div class="flex-shrink-0 mr-7">
							<div class="symbol symbol-50 symbol-lg-120 symbol-light-danger">
								<img class="" src="{{ $user_img }}" onerror="this.onerror=null; this.src='avatar/user-pdam.png'" alt="photo">
							</div>
						</div>

						<div class="flex-grow-1">
							<div class="d-flex align-items-center justify-content-between flex-wrap">
								<div class="mr-3">
									<div class="d-flex align-items-center mr-3">
										<a href="#" class="d-flex align-items-center text-dark text-hover-primary font-size-h5 font-weight-bold mr-3">
											{{ $nama }}
										</a>
									</div>

									<div class="d-flex flex-wrap my-2">
										<a href="#" class="text-muted text-hover-primary font-weight-bold">
											<span class="svg-icon svg-icon-md svg-icon-gray-500 mr-1">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<rect x="0" y="0" width="24" height="24"></rect>
														<path d="M9.82829464,16.6565893 C7.02541569,15.7427556 5,13.1079084 5,10 C5,6.13400675 8.13400675,3 12,3 C15.8659932,3 19,6.13400675 19,10 C19,13.1079084 16.9745843,15.7427556 14.1717054,16.6565893 L12,21 L9.82829464,16.6565893 Z M12,12 C13.1045695,12 14,11.1045695 14,10 C14,8.8954305 13.1045695,8 12,8 C10.8954305,8 10,8.8954305 10,10 C10,11.1045695 10.8954305,12 12,12 Z" fill="#000000"></path>
													</g>
												</svg>
											</span> 
											{{ $bagian }}
										</a>
									</div>

									<div class="d-flex flex-wrap my-2">
										<span class="text-muted text-hover-primary font-weight-bold">
											<i class="pl-1 mr-1 text-dark-50 flaticon2-phone"></i> {{ $data->kontak }}
										</span>
									</div>
								</div>
								<div class="mb-10">
									@if (!empty($akses['Super Admin']))
										<a href="javascript:void(0);" data-action="delTask" data-recid="{{ $data->recid }}" class="btn btn-sm btn-light-danger font-weight-bolder text-uppercase mr-2"><i class="flaticon2-rubbish-bin _text-white mr-2"></i> Hapus Permohonan</a>
									@endif
									<a href="javascript:void(0);" data-action="log" data-href="{{ route('task.log.data',Crypt::encryptString($data->recid) ) }}"  class="_d-none btn btn-sm btn-light-success font-weight-bolder text-uppercase mr-2"><i class="flaticon2-hourglass-1 _text-white mr-2"></i> Log Aktivitas</a>
									<a href="javascript:void(0);" data-action="go-to-wizard" class="btn btn-sm btn-light-primary font-weight-bolder text-uppercase mr-2">
										<i class="flaticon2-calendar-9 _text-white mr-2"></i> Task : {{ $data->ket_status->ket }}</a>
								</div>
							</div>

							<div class="d-flex align-items-top _flex-wrap justify-content-between">
								<div class="flex-grow-1 text-muted-50 py-2 py-lg-2 mr-5">
									{!! $data->uraian??$data->judul !!}
									<div class="mt-1 d-block text-muted font-weight-bold">
										<i class="mr-2 text-dark-50 flaticon-calendar-with-a-clock-time-tools"></i>
										{{ \Carbon\Carbon::parse($data->tgl_entri)->format('d-m-Y')  }}
									</div>
								</div>
								<div class="d-flex py-2 py-lg-2 _mt-4 _mt-sm-0">
									<span class="font-weight-bold mr-4">Progress</span>
									<div class="progress progress-xs mt-2 mb-2 flex-shrink-0 w-150px w-xl-250px">
										<div class="progress-bar bg-success" role="progressbar" style="width: {{ round($prosen) }}%;" aria-valuenow="{{ $data->ket_status->urutan }}" aria-valuemin="0" aria-valuemax="6"></div>
									</div>
									<span class="font-weight-bolder text-dark ml-4">{{ round($prosen) }}%</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="card card-custom">
				<div class="card-body p-0">
					<div class="wizard wizard-1" id="kt_projects_add" data-wizard-state="pending" _data-wizard-state="step-first" data-wizard-clickable="true">
						<div class="kt-grid__item">
							<div class="wizard-nav border-bottom">
								<div class="wizard-steps p-8 p-lg-10">

									<div id="wizard_user" class="wizard-step" data-wizard-type="step" data-wizard-state="current">
										<div class="wizard-label">
											<span class="svg-icon svg-icon-4x wizard-icon" 
											data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $nama }}" >
												<img class="" _width="24px" _height="24px" src="{{ $user_img }}" onerror="this.onerror=null; this.src='avatar/user-pdam.png'" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
											</span>
											<h3 class="wizard-title">User</h3>
										</div>
										<span class="svg-icon svg-icon-xl wizard-arrow">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24" />
													<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
													<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
												</g>
											</svg>
										</span>
									</div>

									@if (isset($data->data_jenis->m_approve) and $data->data_jenis->m_approve == 1)
									<div id="wizard_manajer" class="wizard-step" data-wizard-type="step">
										<div class="wizard-label">
											<span class="svg-icon svg-icon-4x wizard-icon" 
											@if (!empty($m_nama))
											data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $m_nama }}" 
											@endif
											>
												@if (!empty($m_img))
													<img class="{{ $pageWizard < 2 ? 'opacity-50':'' }}" _width="24px" _height="24px" src="{{ $m_img }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
												@else
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24"/>
													<path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
													<path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
												</g>
												</svg>
												@endif
											</span>
											<h3 class="wizard-title">Manajer</h3>
										</div>
										<span class="svg-icon svg-icon-xl wizard-arrow">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24" />
													<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
													<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
												</g>
											</svg>
										</span>
									</div>
									@endif

									<div id="wizard_helpdesk" class="wizard-step" data-wizard-type="step">
										<div class="wizard-label">
											<span class="svg-icon svg-icon-4x wizard-icon" 
											@if ($nama_helpdesk)
											data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $nama_helpdesk }}" 
											@endif
											>
												@if ($file_helpdesk)
													<img class="{{ $pageWizard < 3 ? 'opacity-50':'' }}" _width="24px" _height="24px" src="{{ $url_helpdesk }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
												@else
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<rect x="0" y="0" width="24" height="24" />
														<path d="M4.875,20.75 C4.63541667,20.75 4.39583333,20.6541667 4.20416667,20.4625 L2.2875,18.5458333 C1.90416667,18.1625 1.90416667,17.5875 2.2875,17.2041667 C2.67083333,16.8208333 3.29375,16.8208333 3.62916667,17.2041667 L4.875,18.45 L8.0375,15.2875 C8.42083333,14.9041667 8.99583333,14.9041667 9.37916667,15.2875 C9.7625,15.6708333 9.7625,16.2458333 9.37916667,16.6291667 L5.54583333,20.4625 C5.35416667,20.6541667 5.11458333,20.75 4.875,20.75 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
														<path d="M2,11.8650466 L2,6 C2,4.34314575 3.34314575,3 5,3 L19,3 C20.6568542,3 22,4.34314575 22,6 L22,15 C22,15.0032706 21.9999948,15.0065399 21.9999843,15.009808 L22.0249378,15 L22.0249378,19.5857864 C22.0249378,20.1380712 21.5772226,20.5857864 21.0249378,20.5857864 C20.7597213,20.5857864 20.5053674,20.4804296 20.317831,20.2928932 L18.0249378,18 L12.9835977,18 C12.7263047,14.0909841 9.47412135,11 5.5,11 C4.23590829,11 3.04485894,11.3127315 2,11.8650466 Z M6,7 C5.44771525,7 5,7.44771525 5,8 C5,8.55228475 5.44771525,9 6,9 L15,9 C15.5522847,9 16,8.55228475 16,8 C16,7.44771525 15.5522847,7 15,7 L6,7 Z" fill="#000000" />
													</g>
												</svg>
												@endif
											</span>
											<h3 class="wizard-title">Helpdesk</h3>
										</div>
										<span class="svg-icon svg-icon-xl wizard-arrow">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24" />
													<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
													<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
												</g>
											</svg>
										</span>
									</div>

									@if (!in_array($data->status, [15]))
										<div id="wizard_spv" class="wizard-step" data-wizard-type="step">
											<div class="wizard-label">
												<span class="svg-icon svg-icon-4x wizard-icon"
												@if($nama_spv)
												data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $nama_spv }}" 
												@endif
												>
													@if( $file_spv )
														<img class="" _width="24px" _height="24px" src="{{ $url_spv }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
													@else
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
														<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
															<rect x="0" y="0" width="24" height="24" />
															<path d="M11,20 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,20 L15.5,20 C15.7761424,20 16,20.2238576 16,20.5 C16,20.7761424 15.7761424,21 15.5,21 L8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L11,20 Z" fill="#000000" opacity="0.3" />
															<path d="M3,5 L21,5 C21.5522847,5 22,5.44771525 22,6 L22,16 C22,16.5522847 21.5522847,17 21,17 L3,17 C2.44771525,17 2,16.5522847 2,16 L2,6 C2,5.44771525 2.44771525,5 3,5 Z M4.5,8 C4.22385763,8 4,8.22385763 4,8.5 C4,8.77614237 4.22385763,9 4.5,9 L13.5,9 C13.7761424,9 14,8.77614237 14,8.5 C14,8.22385763 13.7761424,8 13.5,8 L4.5,8 Z M4.5,10 C4.22385763,10 4,10.2238576 4,10.5 C4,10.7761424 4.22385763,11 4.5,11 L7.5,11 C7.77614237,11 8,10.7761424 8,10.5 C8,10.2238576 7.77614237,10 7.5,10 L4.5,10 Z" fill="#000000" />
														</g>
													</svg>
													@endif
												</span>
												<h3 class="wizard-title">SPV</h3>
											</div>
											<span class="svg-icon svg-icon-xl wizard-arrow">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24" />
														<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
														<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
													</g>
												</svg>
											</span>
										</div>
									@endif

									@if(!empty($data->m_tsi))
										<div id="wizard_manajer_tsi" class="wizard-step" data-wizard-type="step">
											<div class="wizard-label">
												<span class="svg-icon svg-icon-4x wizard-icon" 
												@if(!empty($m_tsi_nama))
												data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $m_tsi_nama }}" 
												@endif
												>
													@if( !empty($m_tsi_img))
														<img class="{{ $pageWizard < 2 ? 'opacity-50':'' }}" _width="24px" _height="24px" src="{{ $m_tsi_img }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
													@else
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24"/>
														<path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
														<path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
													</g>
													</svg>
													@endif
												</span>
												<h3 class="wizard-title text-truncate">Manajer TSI</h3>
											</div>
											<span class="svg-icon svg-icon-xl wizard-arrow">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24" />
														<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
														<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
													</g>
												</svg>
											</span>
										</div>
									@endif

									@if( !in_array( $data->status , [10,15]) )
										<div id="wizard_worker" class="wizard-step" data-wizard-type="step">
											<div class="wizard-label">
												<span class="svg-icon svg-icon-4x wizard-icon">
													@if( $file_worker )
													<div class="symbol-group symbol-hover py-2">
														@foreach( $nama_worker as $key => $row )
														<div class="symbol symbol-50" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $row }}">
															<img alt="Pic" class="serial {{ $pageWizard < 4 ? 'opacity-50':'' }}" src="{{ $worker_img[$key] }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; ">
														</div>
														@endforeach
													</div>
													@else
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
														<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
															<rect x="0" y="0" width="24" height="24" />
															<path d="M13,18.9450712 L13,20 L14,20 C15.1045695,20 16,20.8954305 16,22 L8,22 C8,20.8954305 8.8954305,20 10,20 L11,20 L11,18.9448245 C9.02872877,18.7261967 7.20827378,17.866394 5.79372555,16.5182701 L4.73856106,17.6741866 C4.36621808,18.0820826 3.73370941,18.110904 3.32581341,17.7385611 C2.9179174,17.3662181 2.88909597,16.7337094 3.26143894,16.3258134 L5.04940685,14.367122 C5.46150313,13.9156769 6.17860937,13.9363085 6.56406875,14.4106998 C7.88623094,16.037907 9.86320756,17 12,17 C15.8659932,17 19,13.8659932 19,10 C19,7.73468744 17.9175842,5.65198725 16.1214335,4.34123851 C15.6753081,4.01567657 15.5775721,3.39010038 15.903134,2.94397499 C16.228696,2.49784959 16.8542722,2.4001136 17.3003976,2.72567554 C19.6071362,4.40902808 21,7.08906798 21,10 C21,14.6325537 17.4999505,18.4476269 13,18.9450712 Z" fill="#000000" fill-rule="nonzero" />
															<circle fill="#000000" opacity="0.3" cx="12" cy="10" r="6" />
														</g>
													</svg>
													@endif
												</span>
												<h3 class="wizard-title">Worker</h3>
											</div>
											<span class="svg-icon svg-icon-xl wizard-arrow">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24" />
														<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
														<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
													</g>
												</svg>
											</span>
										</div>
										<div id="wizard_checker" class="wizard-step" data-wizard-type="step">
											<div class="wizard-label">
												<span class="svg-icon svg-icon-4x wizard-icon" 
												@if($nama_checker)
												data-toggle="tooltip" data-placement="top" title="" data-original-title="{{ $nama_checker }}" 
												@endif
												>
													@if( $file_checker )
														<img class="{{ $pageWizard < 5 ? 'opacity-50':'' }}" src="{{ $url_checker }}" onerror="this.onerror=null; this.src=`{{ asset('avatar/user-pdam.png') }}`;" alt="photo" style="object-fit: cover; object-position: 50% 15%;">
													@else
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
														<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
															<rect x="0" y="0" width="24" height="24" />
															<path d="M13.2070325,4 C13.0721672,4.47683179 13,4.97998812 13,5.5 C13,8.53756612 15.4624339,11 18.5,11 C19.0200119,11 19.5231682,10.9278328 20,10.7929675 L20,17 C20,18.6568542 18.6568542,20 17,20 L7,20 C5.34314575,20 4,18.6568542 4,17 L4,7 C4,5.34314575 5.34314575,4 7,4 L13.2070325,4 Z" fill="#000000" />
															<circle fill="#000000" opacity="0.3" cx="18.5" cy="5.5" r="2.5" />
														</g>
													</svg>
													@endif
												</span>
												<h3 class="wizard-title">Checker</h3>
											</div>
											<span class="svg-icon svg-icon-xl wizard-arrow">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
														<polygon points="0 0 24 0 24 24 0 24" />
														<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
														<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
													</g>
												</svg>
											</span>
										</div>
									@endif
									
									@if($data->ket_status->urutan == '6')
									@endif
									
									<div id="wizard_selesai" class="wizard-step" data-wizard-type="step">
										<div class="wizard-label">
											<span class="svg-icon svg-icon-4x wizard-icon">
												<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24"/>
													<rect fill="#000000" opacity="0.3" x="12" y="4" width="3" height="13" rx="1.5"/>
													<rect fill="#000000" opacity="0.3" x="7" y="9" width="3" height="8" rx="1.5"/>
													<path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"/>
													<rect fill="#000000" opacity="0.3" x="17" y="11" width="3" height="6" rx="1.5"/>
												</g>
												</svg>
											</span>
											@switch($data->status)
												@case(40)
													<h3 class="wizard-title">Confirmed</h3>
													@break
												@case(30)
													<h3 class="wizard-title">Unconfirmed</h3>													
													@break
												@default
												<h3 class="wizard-title">Selesai</h3>
											@endswitch
										</div>
										<span class="svg-icon svg-icon-xl wizard-arrow last">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<polygon points="0 0 24 0 24 24 0 24" />
													<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1" />
													<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) " />
												</g>
											</svg>
										</span>
									</div>
									
								</div>
							</div>
						</div>
						<div class="row justify-content-center my-10 px-8 my-lg-15 px-lg-10">
							<div class="col-xl-12 col-xxl-7">
								<div class="form" id="kt_projects_add_form">
									<!--begin::Step 1-->
									@include('task.view_user')
									<!--end::Step 1-->

									@if(isset($data->data_jenis->m_approve) and $data->data_jenis->m_approve==1 )
										@include('task.view_manajer')
									@endif

									<!--begin::Step 2-->
									@include('task.view_helpdesk')
									<!--end::Step 2-->

									@if( !in_array( $data->status , [15]) or ($data->status == '6' and !empty($data->m_tsi)))
										<!--begin::Step 3-->
										@include('task.view_spv')
										<!--end::Step 3-->
									@endif

									@if(!empty($data->m_tsi))
										@include('task.view_manajer_tsi')
									@endif

									@if( !in_array( $data->status , [10,15]) )
										<!--begin::Step 4-->
										@include('task.view_worker')
										<!--end::Step 4-->

										<!--begin::Step 5-->
										@include('task.view_checker')
										<!--end::Step 5-->
									@endif

									<!--begin::Step 6-->									
									@if($data->ket_status->urutan == '6')
									@endif
									@include('task.view_selesai')
									<!--end::Step 6-->

									<!--begin::Actions-->
									<div class="d-none _d-flex justify-content-between border-top mt-5 pt-10">
										<div class="mr-2">
											<button type="button" class="btn btn-light-primary font-weight-bold text-uppercase px-9 py-4" data-wizard-type="action-prev">Previous</button>
										</div>
										<div>
											<button type="button" class="btn btn-success font-weight-bold text-uppercase px-9 py-4" data-wizard-type="action-submit">Submit</button>
											<button type="button" class="btn btn-primary font-weight-bold text-uppercase px-9 py-4" data-wizard-type="action-next">Next Step</button>
										</div>
									</div>
									<!--end::Actions-->
									
								</div>
								<!--end::Form Wizard-->
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<!--end::Container-->
	</div>
	
	<div class="modal px-0" id="modal_ajax" role="dialog" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg" role="document">
			<div id="modal_ajax-content"></div>
		</div>
	</div>

@endsection

@section('css')
	<link href="{{asset('assets_7.0.6/css/pages/wizard/wizard-1.css?v=7.0.6')}}" rel="stylesheet" type="text/css" />
	<link href="{{asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> 
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/themes/explorer/theme.min.css" media="all" rel="stylesheet" type="text/css" />
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css" />
		
	<style type="text/css">
		@media (min-width: 992px){
			.modal-lg {
				max-width: 75%;
			}	
			.modal-xxl {
				max-width: 90%;
			}	
			.table {
				table-layout: fixed;
				/* min-width: 768px; */
			}
			.td-w-medium {
				width: 5rem;
			}
			.td-w-truncate div {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
		.svg-icon.svg-icon-4x img:not(.serial) {
			height: 4rem !important;
			width: 4rem !important;
			overflow: hidden;
			vertical-align: middle;
			border-radius: 0.42rem;
		}
		img.opacity-50 {
			opacity: 0.5;
		}
		body.modal-open {
			overflow: hidden;
			position: fixed;
			width: 100%;
		}
	</style>
@endsection

@section('js')
	<script src="{{ asset('global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/plugins/piexif.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/fileinput.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.0.8/themes/fa/theme.js"></script>    

	<script src="{{asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}" type="text/javascript"></script>
	<!-- <script src="{{asset('assets_7.0.6/plugins/custom/clamp/clamp.min.js?v=7.0.6')}}"></script> -->
	<script src="{{asset('assets_7.0.6/plugins/custom/moment/moment_locales.min.js?v=7.0.6')}}"></script>
	<script src="{{asset('assets_7.0.6/plugins/custom/moment/moment.min.js?v=7.0.6')}}"></script>
	<script src="{{asset('assets_7.0.6/plugins/custom/extensions/rowlink.js?v=7.0.6')}}"></script>
	{{--
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js" charset="utf-8"></script> 
	<script src="https://cdn.jsdelivr.net/npm/fusioncharts@3.12.2/fusioncharts.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
	<script src="{{asset('assets_7.0.6/plugins/custom/ui/ripple.min.js?v=7.0.6')}}"></script>
	--}}

	<script type="text/javascript">
		function scrollWizard() {			
			var kt_content 		= $("#kt_content").offset().top;
			var kt_projects_add = $("#kt_projects_add").offset().top;
			$('html, body').animate({ scrollTop: kt_projects_add - kt_content });
			$(document).on( 'change keyup keydown paste cut', '#kt_projects_add_form  textarea:visible', function (){
                $(this).height(0).height(this.scrollHeight);
            })
            .find( 'textarea' ).change();
		}
		
		// function close_(id) {
		// 	// alert('aa');
		// 	$('#dataID_').val('');
		// 	$('#dataID_').val(id);
		// 	$('#modal_close').modal('show');
		// }

		jQuery(document).ready(function () {
			// KTProjectsAdd.init();
			var disableStep 	= [3,4];
			var _wizardEl 		= KTUtil.getById('kt_projects_add');
			var _formEl 		= KTUtil.getById('kt_projects_add_form');
			var _wizard;
			var _avatar 		= new KTImageInput('kt_projects_add_avatar');
			var _validations 	= [];
			// var kt_content 		= $("#kt_content").offset().top;
			// var kt_projects_add = $("#kt_projects_add").offset().top;

			// _validations form wizard
				// Step 1
				_validations.push(FormValidation.formValidation(
					_formEl,
					{
						fields: {
							projectname: {
								validators: {
									notEmpty: {
										message: 'Project name is required'
									}
								}
							},
							projectowner: {
								validators: {
									notEmpty: {
										message: 'Project owner is required'
									}
								}
							},
							customername: {
								validators: {
									notEmpty: {
										message: 'Customer name is required'
									}
								}
							},
							phone: {
								validators: {
									notEmpty: {
										message: 'Phone is required'
									},
									phone: {
										country: 'US',
										message: 'The value is not a valid US phone number. (e.g 5554443333)'
									}
								}
							},
							email: {
								validators: {
									notEmpty: {
										message: 'Email is required'
									},
									emailAddress: {
										message: 'The value is not a valid email address'
									}
								}
							},
							companywebsite: {
								validators: {
									notEmpty: {
										message: 'Website URL is required'
									}
								}
							}
						},
						plugins: {
							trigger: new FormValidation.plugins.Trigger(),
							bootstrap: new FormValidation.plugins.Bootstrap()
						}
					}
				));

				// Step 2
				_validations.push(FormValidation.formValidation(
					_formEl,
					{
						fields: {
							// Step 2
							communication: {
								validators: {
									choice: {
										min: 1,
										message: 'Please select at least 1 option'
									}
								}
							},
							language: {
								validators: {
									notEmpty: {
										message: 'Please select a language'
									}
								}
							},
							timezone: {
								validators: {
									notEmpty: {
										message: 'Please select a timezone'
									}
								}
							}
						},
						plugins: {
							trigger: new FormValidation.plugins.Trigger(),
							bootstrap: new FormValidation.plugins.Bootstrap()
						}
					}
				));

				// Step 3
				_validations.push(FormValidation.formValidation(
					_formEl,
					{
						fields: {
							address1: {
								validators: {
									notEmpty: {
										message: 'Address is required'
									}
								}
							},
							postcode: {
								validators: {
									notEmpty: {
										message: 'Postcode is required'
									}
								}
							},
							city: {
								validators: {
									notEmpty: {
										message: 'City is required'
									}
								}
							},
							state: {
								validators: {
									notEmpty: {
										message: 'state is required'
									}
								}
							},
							country: {
								validators: {
									notEmpty: {
										message: 'Country is required'
									}
								}
							},
						},
						plugins: {
							trigger: new FormValidation.plugins.Trigger(),
							bootstrap: new FormValidation.plugins.Bootstrap()
						}
					}
				));

			// Initialize form wizard
				_wizard = new KTWizard(_wizardEl, {
					startStep: {{ $pageWizard??1 }}, // initial active step number
					clickableSteps: true  // allow step clicking
				});
				
				
				// Validation before going to next page
				_wizard.on('beforeNext', function (wizard) {
					// Don't go to the next step yet
					_wizard.stop();
					_wizard.goNext();
					scrollWizard();
					/*
					// Validate form
					var validator = _validations[wizard.getStep() - 1]; // get validator for currnt step
					validator.validate().then(function (status) {
						if (status == 'Valid') {
							// var clickStep = 2; //wizard.getNewStep();
							// if( disableStep.includes(clickStep) ){
							// 	Swal.fire({
							// 		text: "Proses Belum Tersedia!!!",
							// 		icon: "error",
							// 		buttonsStyling: false,
							// 		confirmButtonText: "Ok",
							// 		customClass: {
							// 			confirmButton: "btn font-weight-bold btn-light"
							// 		}
							// 	}).then(function () {
							// 		scrollWizard();
							// 	});
							// }
							// else {
							// }
							_wizard.goNext();
							scrollWizard();
						} else {
							Swal.fire({
								text: "Sorry, looks like there are some errors detected, please try again.",
								icon: "error",
								buttonsStyling: false,
								confirmButtonText: "Ok, got it!",
								customClass: {
									confirmButton: "btn font-weight-bold btn-light"
								}
							}).then(function () {
								// KTUtil.scrollTop();
								scrollWizard();
							});
						}
					});
					*/
				});

				// Change Event
				_wizard.on('change', function (wizard) {
					// KTUtil.scrollTop();
					// console.log(wizard.currentStep);
					// console.log(wizard.getNextStep());
					scrollWizard();
				});

			$("[data-action='go-to-wizard']").on( 'click', function () {
				_wizard.goTo({{ $pageWizard??1 }});
				scrollWizard();
			});
			
			$("[data-action='log']").on( 'click', function (e) {
				e.preventDefault();			
				var urlModal = $(this).data('href');	
				KTApp.block("#kt_projects_add_form",{
					overlayColor:"#000000",
					type:"loader",
					state:"success",
					message:"Please wait...",
					// baseZ: 1000, 
				});
				$('#modal_ajax-content').empty().load(urlModal,
					function(data, status, jqXGR) { 
						KTApp.unblock("#kt_projects_add_form");
						$('#modal_ajax').modal('show');
						$('.modal-dialog').addClass('modal-dialog-scrollable d-block');
					}
				);	
				return false;
			});

			@if( !empty($akses['Super Admin']) )
				$("[data-action='delTask']").on( 'click', function (){
					var recid = $(this).data('recid');
					// console.log(recid);
					Swal.fire({
						title 	: "Apakah Anda Yakin?",
						text 	: "Hapus Data Permohonan.",
						icon 	: "warning",
						showCancelButton 	: true,
						confirmButtonText 	: '<i class="flaticon2-rubbish-bin text-white mr-2"></i> Hapus',
						cancelButtonText 	: '<i class="flaticon2-reply text-white mr-2"></i> Batal',
						// confirmButtonColor	: '#d33',
						customClass: {
							confirmButton 	: 'bg-danger'
						}
					}).then(function(result) {
						if (result.value) {
							KTApp.block("#kt_projects_add_form",{
								overlayColor:"#000000",
								type:"loader",
								state:"success",
								message:"Please wait...",
								// baseZ: 1000, 
							});
							$.ajax({
								type: "POST",
								url: "{{route('task.delete')}}",
								data: {recid: recid, _token: "{{ csrf_token() }}"},
								success: function (result)
								{                        
									if (result.status==true){
										KTApp.unblock("#kt_projects_add_form");
										Swal.fire(
											"Information",
											"Permohonan berhasil dihapus",
											"success"
										)
										location.href = "{{route('task.index')}}";
									} else{
										$('body').append(result.message);
									}
								}
							});
						}
					});
				});			
			@endif
			$('.clamp').each(function (index, element) {
				$clamp(element, { clamp: 1, useNativeClamp: false });
			});
			
			$(document).on('change keyup keydown paste cut', '#kt_projects_add_form textarea:visible', function () {
                $(this).height(0).height(this.scrollHeight);
            }).find('textarea').change();
		});
	</script>

	@stack('scripts')

	@stack('scripts_user')
	@stack('scripts_helpdesk')
	@stack('scripts_spv')
	@stack('scripts_mgr_tsi')
	@stack('scripts_worker')
	@stack('scripts_checker')
	@stack('scripts_selesai')

@endsection