@extends('frontend.layouts.app')
@section('meta_title', 'Foodconn Universe')
@section('content')
<main class="pageMainLayout__wr foodconnUniversePage__wr">
<section class="innerPageBnrWrap__wr foodconnUniversePageBnr__wr">
	<div class="container">
		<div class="contentWrap__wr">
			<h6 class="bannerTitle__wr">Foodconn Universe</h6>
			<ol class="breadcrumbWrap__wr">
				<li><a href="{{ links() }}">Home</a></li>
				<li>Foodconn Universe</li>
			</ol>
		</div>
	</div>
</section>
<form action="" class="innerProPageSec__wr universe__wr" id="filter-form">
	<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 country__wr">
							<div class="dropdown">
								<select name="country" id="" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" title="Country" data-selected-text-format="static">
									@if($countries->isNotEmpty())
										@foreach ($countries as $key => $country)
										<option value="{{ $country->name }}" class="bs_option" @if($country->name == $request->country) selected @endif data-content="<div class='content__wr'><i class='icon__wr'><img src='{{ static_asset('backend/images/flags/'.strtolower($country->code).'.svg') }}'></i><span class='title__wr'>{{ $country->name }}</span></div>"></option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr businessDomain__wr">
							<div class="dropdown">
								<select name="business_domain" id="" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" title="Business Domain" data-selected-text-format="static">
									@if($bs_domains->isNotEmpty())
										@foreach ($bs_domains as $key => $domain)
										<option value="{{ $domain->name }}" class="bs_option" @if($domain->name == $request->business_domain) selected @endif data-content="<div class='content__wr'><i class='icon__wr dIcon__wr'><img src='{{ uploaded_asset($domain->icon) }}'></i><span class='title__wr'>{{ $domain->name }}</span> </div>"></option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="dpWrap__wr proSpl__wr">
							<div class="dropdown">
								<select name="pro_specialization" id="" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small" title="Product Specialization" data-selected-text-format="static">
									@if($pro_specializations->isNotEmpty())
										@foreach ($pro_specializations as $key => $specialization)
											<option value="{{ $specialization->name }}" class="bs_option" @if($specialization->name == $request->pro_specialization) selected @endif >{{ $specialization->name }}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="serachWrap__wr">
							<input type="text" name="vendor_email" class="form-control" placeholder="Enter Company Name" value="{{ $request->vendor_email }}">
							<button type="submit" class="btn btn__wr"><span class="labelText__wr">Search</span></button>
						</div>
					</div>
				</div>
				<div class="filterResultWrap__wr">
					<h6 class="labelTitle__wr">Active Filters:</h6>
					<ul class="resultWrap__wr">
						@foreach ($req_array as $key => $filter)
							@if(($key == 'country' && $filter != null) || ($key == 'business_domain' && $filter != null))
								@if($key == 'country')
									@php $flag = \App\Models\Country::where('name', $filter)->first()->code; @endphp
									<li class="result__wr mt-2" 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).'.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($key == 'business_domain')
									@php $flag = \App\Models\BusinessDomain::where('name', $filter)->first()->icon; @endphp
									<li class="result__wr mt-2" 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 dIcon"><img src="{{ uploaded_asset($flag) }}" 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>
								@endif
							@elseif($filter != null)
								<li class="result__wr mt-2" 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" title="Short By">
									<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($vendors->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="universeListingSec__wr">
			<div class="container">
				<div class="row">
					@if($vendors->isNotEmpty())
						@foreach ($vendors as $vendor)
							<div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 d-flex">
								<div class="itemWrapper__wr">
									<a href="{{route('corporate-profile', encrypt($vendor->id))}}">
										<picture class="image__wr">
											<img src="{{ uploaded_asset($vendor->user_logo ?? 'dummy') }}" loading="lazy" decoding="async" class="img-fluid" alt="company-logo-bg" title="company-logo-bg" width="108" height="44">
										</picture>
										<div class="infoWrap__wr">
											<p class="compName__wr">{{ $vendor->name }}</p>
											<div class="contryWrap__wr">
												<span class="flagIcon__wr"><img src="{{ static_asset('backend/images/flags/'.strtolower($vendor->country->code).'.svg') }}" loading="lazy" decoding="async" class="img-fluid" alt="flag-icon" title="flag-icon" width="25" height="18"></span>
												<p class="title__wr">{{ $vendor->country->name }}</p>
											</div>
										</div>
									</a>
								</div>
							</div>
						@endforeach
					@endif
				</div>
				<nav aria-label="Page navigation" class="paginationWrap__wr">
					<ul class="pagination justify-content-md-end justify-content-sm-center">
						{{ $vendors->appends(request()->query())->links() }}
						<!-- <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> --}}
					</ul>
				</nav>
			</div>
		</section>
	@endif
</form>
@endsection
@section('script')
		<script>
			$('#sort_by').on('change', function(){
				$('#filter-form').submit();
			})
			$('.rns-selectpicker').on('change', function(){
				$('#filter-form').submit();
			})
			$(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();
				window.location=newurl			
			})
		})
		</script>
@endsection