@extends ('site::public.layout')
@section('content')
	
	<main class="project-page">
		<section class="project-banner">
			<img src="{{ asset('styling/img/blank.png') }}" data-src="{!! $section_data['background'] !!}" class="lazy main-img">
			<div class="container">
				<div class="text">
					<h1 class="display mb-8">
						{!! $section_data['title'] !!}
					</h1>
					<h6>
						{!! $section_data['excerpt'] !!}
					</h6>
				</div>
			</div>
		</section>
		<section class="project-recent">
			<div class="container">
				<div class="h1 display mb-16 text-center">
					{!! $section_data['recent'] !!}
				</div>
				<h6 class="text-center">
					{!! $section_data['recent_excerpt'] !!}
				</h6>
			</div>
			@if($project_featured )
			<div class="news__featured">
				@php  
				$project_thumb = $project_bg = asset('assets/img/no-image.jpg');
				if($project_featured->thumbnail!=''){
					$img = json_decode($project_featured->thumbnail);
					$project_thumb = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
				}
				if($project_featured->background!=''){
					$bg = json_decode($project_featured->background);
					$project_bg = ENV('IMG_URL').str_replace(' ', '%20', $bg->path);
				}
				@endphp
				<img src="{{ asset('styling/img/blank.png') }}" data-src="{{ $project_bg }}" class="lazy bg">
				<div class="news__top">
					<div class="container">
						<div class="news__short">
							<div class="btn-wrapper mb-8">
								<span class="btn btn--border btn--br">
									<img src="{{ asset('styling/img/icon-star.png') }}"> {!! get_staticwording('projecthighlight', session('locale')) !!}
								</span>
								<span class="btn btn--primary btn--br btn--barb">
									{!! strtoupper($project_featured->related_product) !!}
								</span>
							</div>
							<h4>
								<a href="{{ url('project/'.$project_featured->slug) }}">
									{!! $project_featured->title !!}
								</a>
							</h4>
						</div>
						<div class="news__short">
							<p>
								{!! $project_featured->excerpt !!}
							</p>
							<a href="{{ url('project/'.$project_featured->slug) }}" class="btn news__cta">
								<span>
									<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.5C0 4.27709 0.0790218 4.06331 0.219681 3.90568C0.36034 3.74806 0.551114 3.65951 0.750036 3.65951H7.38835L5.23025 1.46303C5.1559 1.38745 5.09585 1.29592 5.05365 1.19387C5.01144 1.09181 4.98795 0.981293 4.98456 0.868873C4.98117 0.756453 4.99795 0.644415 5.03391 0.539396C5.06987 0.434378 5.12428 0.338516 5.1939 0.257492C5.26353 0.176467 5.34696 0.111928 5.43925 0.0676995C5.53155 0.0234707 5.63082 0.000451604 5.7312 6.57867e-06C5.83158 -0.000438447 5.93101 0.0216993 6.02362 0.0651083C6.11622 0.108517 6.20011 0.172315 6.2703 0.252719L9.77047 3.89485C9.84306 3.97325 9.9008 4.06725 9.94024 4.17123C9.97967 4.2752 10 4.38702 10 4.5C10 4.61298 9.97967 4.7248 9.94024 4.82877C9.9008 4.93275 9.84306 5.02675 9.77047 5.10515L6.2703 8.74728C6.20011 8.82768 6.11622 8.89148 6.02362 8.93489C5.93102 8.9783 5.83158 9.00044 5.7312 8.99999C5.63082 8.99955 5.53155 8.97653 5.43925 8.9323C5.34696 8.88807 5.26353 8.82353 5.1939 8.74251C5.12428 8.66148 5.06987 8.56562 5.03391 8.4606C4.99795 8.35558 4.98117 8.24355 4.98456 8.13113C4.98795 8.01871 5.01144 7.90819 5.05365 7.80613C5.09585 7.70407 5.1559 7.61255 5.23025 7.53697L7.38835 5.34049L0.750036 5.34049C0.551114 5.34049 0.36034 5.25194 0.219681 5.09432C0.0790217 4.93669 0 4.72291 0 4.5Z" fill="white"/>
									</svg>
									{!! get_staticwording('readmore', session('locale')) !!}
								</span>
							</a>
						</div>
					</div>
				</div>
			</div>
			@endif
		</section>
		<section class="project-page__list mb-16">
			<div class="container">
				<div class="flex flex-col gap-8 items-start mb-16">
					<h6>
						{!! $section_data['filter_title'] !!}
					</h6>
					{{-- @if($section_data['filter_cta_text']!='')
						<a href="{{ url($section_data['filter_cta_url']) }}" class="btn btn--primary">{!! $section_data['filter_cta_text'] !!}</a>
					@endif --}}
					<div class="flex gap-8 w-full md:flex-col">
						<div class="input w-full">
							<label>{!! $section_data['filter_product'] !!}</label>
							<select class="slc" id="project-filterproduct">
								<option value="all">{!! get_staticwording('allprojectreference', session('locale')) !!}</option>
								@foreach($product as $key=>$prod)
									<option value="{{ $prod->id }}">{{ $prod->outputTranslate('name', session('locale')) }}</option>
								@endforeach
							</select>
						</div>
						<div class="input w-full">
							<label>{!! $section_data['filter_category'] !!}</label>
							<select class="slc" id="project-filtercategory">
								<option value="all">{!! get_staticwording('allprojectcategory', session('locale')) !!}</option>
								@foreach($project_category as $key=>$cat)
									<option value="{{ $cat->id }}">{{ $cat->outputTranslate('title', session('locale')) }}</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<div class="project__slider" id="project-slider">
					<div class="swiper-container">
						<div class="swiper-wrapper" id="project-widget">
							@foreach($project as $key=>$proj)
								@php  
								$project_thumb = $project_bg = asset('assets/img/no-image.jpg');
								if($proj->thumbnail!=''){
									$img = json_decode($proj->thumbnail);
									$project_thumb = ENV('IMG_URL').str_replace(' ', '%20', $img->path);
								}
								if($proj->background!=''){
									$bg = json_decode($proj->background);
									$project_bg = ENV('IMG_URL').str_replace(' ', '%20', $bg->path);
								}
								@endphp
								<div class="swiper-slide">
									<figure>
										<img src="{{ $project_thumb }}" loading="lazy" />
										<div class="swiper-lazy-preloader"></div>
									</figure>
									<div class="project__caption">
										<div class="project__category">
											@php 
												$arr_prod = explode(',', $proj->related_product );
											@endphp
											{!! get_staticwording('project', session('locale')) !!}
											<span>{{ $proj->related_product }}</span>
										</div>
										<div class="project__info">
											<h6>
												<a href="{{ url('project/'.$proj->slug) }}">
													{!! $proj->title !!}
												</a>
											</h6>
											<a class="cta" href="{{ url('project/'.$proj->slug) }}"><img src="{{ asset('styling/img/icon-arrow-right.svg') }}"> lihat detail proyek</a>
										</div>
									</div>	 
								</div>
							@endforeach
						</div>
					</div>
					<button class="swiper-prev"><img src="{{ asset('styling/img/btn-prev-2.svg') }}"></button>
					<button class="swiper-next"><img src="{{ asset('styling/img/btn-next-2.svg') }}"></button>
				</div>
				<div class="swiper-pagination project__slider-pagination"></div>
			</div>
		</section>
	</main>
@endsection

@section('additional_script')
    <script type="text/javascript">
        // $(document).ready(function(){

		// 	function filter_project(prod, cat){
		// 		$.ajaxSetup({
        //             headers: {
        //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             }
        //         });
        //         $.ajax({
        //             type:'POST',
        //             url:SITE_URL+'/project-filter',
        //             dataType: 'JSON',
        //             data:{prod:prod, cat:cat},
        //             success:function(data){
        //                 if(data.status=='false'){
        //                     alert('f')
        //                 }else{
        //                     $('#project-widget').html(data.html);
        //                 }
                        
        //             }
        //         });
		// 	}
            
        //     $('body').on('change', '#project-filterproduct, #project-filtercategory', function(){
        //         var prod = $('#project-filterproduct').val();
        //         var cat = $('#project-filtercategory').val();
		// 		filter_project(prod, cat);
		// 	});

        // });
    </script>
@endsection