@extends('frontend.layouts.app')
@section('meta_title', 'Featured Products')
@section('content')
<main class="pageMainLayout__wr featuredProductsPage__wr">
<section class="innerPageBnrWrap__wr featuredProductsPageBnr__wr">
	<div class="container">
		<div class="contentWrap__wr">
			<h6 class="bannerTitle__wr">Featured Products</h6>
			<ol class="breadcrumbWrap__wr">
				<li><a href="{{ links() }}">Home</a></li>
				<li>Featured Products</li>
			</ol>
		</div>
	</div>
</section>
<form action="{{ route('listing.featured-products') }}" method="GET" id="filter-form" class="innerProPageSec__wr featuredPro__wr">
	<section class="filterWrapSec__wr">
		<div class="container">
			<div class="filterParentWrap__wr">
				<div class="filterWrap__wr">
					<h6 class="labelTitle__wr">Filters:</h6>
					<div class="dropDownWrap__wr">
						<div class="dpWrap__wr proFamily__wr">
							<div class="dropdown proFamily__wr">
								<input type="hidden" id="family_id" name="family_id" value="{{request('family_id')}}">
								<select name="product_family" id="product_family" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" data-selected-text-format="static" title="Product family">
									@if($product_families->isNotEmpty())
										@foreach ($product_families as $key => $product_family)
											<option class="bs_option" data-id="{{ $product_family->id }}" value="{{ $product_family->name }}" @if($product_family->name == $request->product_family) selected @endif>{{ ucfirst($product_family->name) }}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						{{-- @dd($products); --}}
						<div class="dpWrap__wr product__wr">
							<div class="dropdown">
								<select disabled title="Product" name="product" id="product_by_family" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
									@if($products->isNotEmpty())
										@foreach ($products as $key => $product)
											<option class="bs_option" value="{{ $product->name }}" @if($product->name == $request->product) selected @endif>{{ ucfirst($product->name) }}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr proOrigin__wr">
							<div class="dropdown">
								<select disabled title="Product Origin" name="product_origin" id="product_origin" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
									@if($list_origins->isNotEmpty())
										@foreach ($list_origins as $key => $origin)
											<option class="bs_option" value="{{ $origin->origin->name }}"
												@if($origin->origin->name == $request->product_origin) selected @endif
													data-content="<div class='content__wr'><i class='icon__wr'><img src='{{ static_asset('backend/images/flags/'.strtolower($origin->origin->code).'.svg') }}'></i><span class='title__wr'>{{ ucfirst($origin->origin->name) }}</span></div>"></option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr proTemp__wr">
							<div class="dropdown">
								<select disabled name="product_temperature" id="product_temperature" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" data-selected-text-format="static" title="Product Temperature">
									@if($product_tempratures->isNotEmpty())
										@foreach ($product_tempratures as $product_temprature)
											<option value="{{ $product_temprature->temperature->name }}" @if($product_temprature->temperature->name  == $request->product_temperature ) selected @endif>
											{{ ucfirst($product_temprature->temperature->name) ?? '' }}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr specialFeatures__wr">
							<div class="dropdown">
								<select disabled title="Special Features" name="special_feature" id="special_feature" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
									@if($special_features->isNotEmpty())
										@foreach ($special_features as $key => $special_feature)
											<option class="bs_option" value="{{ $special_feature->feature->name }}" @if($special_feature->feature->name  ==  $request->special_feature) selected @endif>{{ ucfirst($special_feature->feature->name) }}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr company__wr">
							<div class="dropdown">
								<select disabled name="vendor" id="vendor" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" title="Company" data-selected-text-format="static">
									@if($vendors->isNotEmpty())
										@foreach ($vendors as $key => $vendor)
											<option value="{{ $vendor->name }}" class="bs_option" @if($vendor->name == $request->vendor) selected @endif data-content="<div class='content__wr'><i class='icon__wr'><img src='{{ static_asset('backend/images/flags/'.strtolower($vendor->country->code).'.svg') }}'></i><span class='title__wr'>{{ $vendor->name }}</span> </div>"></option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						{{-- <button class="btn-filter ml-2" type="button" id="submit_btn"> filter </button> --}}
					</div>
				</div>
				<div class="filterResultWrap__wr">
					<h6 class="labelTitle__wr">Active Filters:</h6>
					<ul class="resultWrap__wr">
						@foreach ($req_array as $key => $filter)
							@if(($filter != null) && ($key == 'product_origin' && $filter != null) || ($key == 'vendor' && $filter != null) )
								@php
									if($key == 'product_origin'){
										$flag = \App\Models\Country::where('name', $filter)->first();
									}elseif($key == 'vendor'){
										$flag = \App\Models\User::where('name', $filter)->first()->country;
									}
								@endphp
								<li class="result__wr" id="{{ $filter }}" data-key="{{ $key }}">
									<a href="javascript:void(0);" class="badge__wr" title="Click to remove">
										<span class="title__wr">{{ $filter }}</span><span class="icon__wr"><img src="{{ static_asset('backend/images/lang/'.strtolower($flag->code).'.png') }}" loading="lazy" decoding="async" class="img-fluid" alt="flag-icon" title="flag-icon" width="22" height="16"></span><span class="close__wr"><i class="fa-light fa-xmark"></i></span>
									</a>
								</li>
							@elseif($filter != null)
								<li class="result__wr" id="{{ $filter }}" data-key="{{ $key }}">
									<a href="javascript:void(0);" class="badge__wr" title="Click to remove">
										<span class="title__wr">{{ $filter }}</span><span class="close__wr"><i class="fa-light fa-xmark"></i></span>
									</a>
								</li>
							@endif
						@endforeach
					</ul>
				</div>
			</div>
			<div class="sortParentWrap__wr">
				<div class="sortWrap__wr">
					<h6 class="labelTitle__wr">Sort By:</h6>
					<div class="dropDownWrap__wr">
						<div class="dpWrap__wr">
							<div class="dropdown">
								<select name="sort_by" id="sort_by" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
										<option value="" class="bs_option" selected>Default</option>
										<option value="RECENT" class="bs_option" @if($request->sort_by == 'RECENT') selected @endif>Recent</option>
										<option value="POPULAR" class="bs_option" @if($request->sort_by == 'POPULAR') selected @endif>Popular</option>
										<option value="ASC" class="bs_option" @if($request->sort_by == 'ASC') selected @endif>Sort Ascending</option>
										<option value="DESC" class="bs_option" @if($request->sort_by == 'DESC') selected @endif>Sort Descending</option>
										<option value="LowToHigh" class="bs_option" @if($request->sort_by == 'LowToHigh') selected @endif>Low to High</option>
										<option value="HighToLow" class="bs_option" @if($request->sort_by == 'HighToLow') selected @endif>High to Low</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	@if ($featured_products->isEmpty())
		<section class="searchErrorWrapSec__wr">
			<div class="container">
				<div class="errorWrapper__wr">
					<h1 class="secTitle">Search results not found</h1>
					<p>Try again with other keywords in search</p>
				</div>
			</div>
		</section>
	@else
		<section class="featureProListingSec__wr">
			<div class="container">
				<div class="row">
					@foreach ($featured_products as $featured_product)
						<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
							<div class="proBlockWrap__wr">
								<div class="imageParentWrap__wr">
									<div class="owl-carousel owl-theme featureProSlider__wr">
										@foreach (get_listing_banner_img($featured_product->id) as $feature_img)
											<div class="item">
												<div class="itemWrapper__wr">
													<picture class="image__wr">
														<a href="{{route('listing.featured-product-details', encrypt($featured_product->id))}}">
															<img src="{{ uploaded_asset($feature_img->banner_image) }}" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
														</a>
													</picture>
												</div>
											</div>
										@endforeach
									</div>
								</div>
								<div class="proDetailWrap__wr">
									<a href="{{route('corporate-profile', encrypt($featured_product->vendor->id))}}">
										<div class="logo__wr"><img src="images/alyasra-logo-bg.svg" loading="lazy" decoding="async" class="img-fluid" alt="company-logo-bg" title="company-logo-bg" width="64" height="26"></div>
										<div class="infoWrap__wr">
											<p class="compName__wr">{{ $featured_product->vendor->name }}</p>
											<div class="contryWrap__wr">
												<span class="flagIcon__wr"><img src="{{ static_asset('backend/images/flags/'.strtolower($featured_product->vendor->country->code).'.svg') }}" loading="lazy" decoding="async" class="img-fluid" alt="flag-kuwait-icon" title="flag-kuwait-icon" width="25" height="18"/></span>
												<p class="title__wr">{{ $featured_product->vendor->country->name }}</p>
											</div>
										</div>
										<i class="fa-solid fa-chevron-right"></i>
									</a>
								</div>
							</div>
						</div>
					@endforeach
					
				</div>
				<nav aria-label="Page navigation" class="paginationWrap__wr">
					<ul class="pagination justify-content-md-end justify-content-sm-center">
						<!-- <li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<img src="images/pegination-arrow-left.svg" loading="lazy" decoding="async" class="img-fluid icon__wr" alt="arrow-right" title="arrow-right" width="11" height="19"/>
							</a>
						</li> -->
						{{-- <li class="page-item active"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
						<li class="page-item"><a class="page-link" href="#">3</a></li>
						<li class="page-item"><a class="page-link" href="#">4</a></li>
						<li class="page-item"><a class="page-link" href="#">5</a></li>
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								<img src="images/pegination-arrow-right.svg" loading="lazy" decoding="async" class="img-fluid icon__wr" alt="arrow-right" title="arrow-right" width="11" height="19"/>
							</a>
						</li> --}}
						{{ $featured_products->appends(request()->query())->links() }}
					</ul>
				</nav>
			</div>
		</section>
	@endif
</form>

@endsection
@section('script')
	<script>
		
		$(document).ready( function(){
			$('.result__wr').click(function() {
				let url = new URL(location.href);
				var attr = $(this).attr("id");
				var stringUrl = url.toString();
				// var value = $(this).data("key")+'%5B%5D='+$(this).attr("id").replace(/ /g, '+')+'&'; //for multiple array values 
				var value = $(this).data("key")+'='+$(this).attr("id").replace(/ /g, '+')+'&'; //sigle values
				
				var newurl = stringUrl.replace(value, "");
				// window.history.pushState({path: newurl}, '', newurl);
				$(this).remove();
				if(newurl.indexOf('product_family') !== -1){
					newurl = newurl;
				}else{
					newurl = newurl.split('?')[0];
				}
				window.location=newurl			
			});
			$product_family = "{{ request('product_family') }}";
			if($product_family != ''){
				let inp = $('#product_by_family, #product_origin, #product_temperature, #special_feature, #vendor');
				inp.removeAttr('disabled', true);
				inp.selectpicker('destroy');
            	inp.selectpicker('render');
			}
		})
		$('#product_family').change( function(){
			var family = $(this).find(':selected').data('id');

			$('#family_id').val(family);
		});
		$('.rns-selectpicker').on('change', function(){
			$('#filter-form').submit();
		})
		
		$('#product_family').change( function(){
			var family = $(this).find(':selected').data('id');
			
			$.ajax({
                method:"post",
                url:"{{route('listing.puduct-by-family')}}",
                data:{
					_token:'{{ csrf_token() }}',
                    product_family : family
                },
                success:function(result){
                    if(result.status == "success"){
                        let options = "";
                        let all_products = result.products;
                        $.each(all_products,function(index,value){
                            options +=  "<option value='"+value.name+"' data-act='"+value.name+"' data-actid='"+value.id+"'>" + value.name + "</option>"
                        });
						console.log(options);
                        $("#product_by_family").html(options);
                        //RNS.plugins.bootstrapSelect("refresh");
						$("#product_by_family").selectpicker('destroy');
						$("#product_by_family").selectpicker('render');
                    }
                },
                error: function(response){
                    // $(".get_products").html('');
                }

            });
		});
	</script>
@endsection