@extends('frontend.layouts.app')
@section('meta_title', 'Trade Listings')
@section('content')
<main class="pageMainLayout__wr tradeListingPage__wr">
<section class="innerPageBnrWrap__wr tradeListingPageBnr__wr">
	<div class="container">
		<div class="contentWrap__wr">
			<h6 class="bannerTitle__wr">Trade Listings</h6>
			<ol class="breadcrumbWrap__wr">
				<li><a href="{{ links() }}">Home</a></li>
				<li>Trade Listings</li>
			</ol>
		</div>
	</div>
</section>
<form action="" class="innerProPageSec__wr tradeListing__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 listType__wr">
							<div class="dropdown">
								<select title="Listing Type" name="list_type" id="" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
									<option value="offer" class="bs_option" @if(request('list_type' ) == 'offer') selected @endif>Trade Listing (Offer)</option>
									<option value="demand" class="bs_option" @if(request('list_type' ) == 'demand') selected @endif>Trade Listing (Demand)</option>
								</select>
							</div>
						</div>
						<div class="dpWrap__wr proFamily__wr">
							<div class="dropdown">
								<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>
						<div class="dpWrap__wr product__wr">
							<div class="dropdown">
								<select disabled title="Product" id="product_by_family" class="btn__wr rns-selectpicker" data-width="fit" data-style="btn-small">
									
								</select>
							</div>
						</div>
						<input type="hidden" name="product_value" id="hidden_product" value="{{request('product_value')}}">
						<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 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="submit"> 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 mt-2" id="{{ $filter }}" data-key="{{ $key }}">
									<a href="javascript:void(0);" class="badge__wr" title="Click to remove">
										<span class="title__wr">{{ ucwords($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 mt-2" id="{{ $filter }}" data-key="{{ $key }}">
									<a href="javascript:void(0);" class="badge__wr" title="Click to remove">
										<span class="title__wr">{{ ucwords($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" id="" 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 ($all_listings->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="tradeListingWrapSec__wr">
		<div class="container">
			<div class="row">
				@if ($all_listings->isNotEmpty())
					@foreach ($all_listings as $listing)
						<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
							<div class="proParentWrap__wr">
								<div class="proInfoWrap__wr">
									<span class="badge__wr @if($listing->listing_type == 'offer') badge-danger
										@elseif($listing->listing_type == 'demand') badge-success @endif">{{ ucfirst($listing->listing_type) }}</span>
									<span class="date__wr">{{ date('F d Y', strtotime($listing->created_at)) }}</span>
								</div>
								<picture class="image__wr">
									<a href="{{ route('listing.trade-listing-details',encrypt($listing->id)) }}">
										@if ($listing->listing_images->first() != null)
											<img src="{{ uploaded_asset($listing->listing_images->first()->image) }}" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
										@else
											<img src="{{ uploaded_asset('dummy') }}" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
										@endif
									</a>
								</picture>
								<div class="proDetailWrap__wr">
									<div class="wrapper__wr family__wr">
										<span class="heading__wr">Product Family:</span>
										@if ($listing->list_families->isNotEmpty())
											@foreach ($listing->list_families as $item)
											<span class="text__wr"><a href="javascript:void(0)">{{ $item->family->name }} </a></span>
											@endforeach
										@endif
									</div>
									<div class="wrapper__wr name__wr">
										<span class="heading__wr">Product:</span>
										@if ($listing->list_product->isNotEmpty())
											@foreach ($listing->list_product as $item)
												<span class="text__wr">{{ $item->product->name }}</span>
											@endforeach
										@endif
									</div>
									<div class="wrapper__wr origin__wr">
										@if($listing->listing_type == 'demand')
										<span class="heading__wr">Preferred Origins:</span>
										@else
										<span class="heading__wr">Product Origin:</span>
										@endif
										<div class="contryWrap__wr">
											<div class="contry__wr">
												
												@if ($listing->list_origin->isNotEmpty())
													@foreach ($listing->list_origin as $item)
														<a href="javascript:void(0);">
															<span class="flagIcon__wr"><img src="{{ static_asset('backend/images/flags/'.strtolower($item->origin->code).'.svg') }}" loading="lazy" decoding="async" class="img-fluid" alt="flag-india-icon" title="flag-india-icon" width="25" height="18"></span>
															<p class="title__wr">{{ $item->origin->name }}</p>
														</a>
													@endforeach
												@endif
											</div>	
										</div>
									</div>
								</div>
								@if($listing->vendor != null)
									<div class="footWrap__wr">
										<a href="{{ route('corporate-profile', encrypt($listing->vendor->id)) }}">
											<div class="logo__wr"><img src="@if($listing->is_anonymous) {{uploaded_asset(env('ANNONYMOUS_IMAGE', 'dummy'))}} @else {{uploaded_asset($listing->vendor->user_logo)}}  @endif" loading="lazy" decoding="async" class="img-fluid" alt="company-logo-bg" title="company-logo-bg" width="33" height="13"></div>
											<div class="infoWrap__wr">
												<p class="compName__wr">
													@if($listing->is_anonymous)
														{{ env('ANONYMOUS', 'FoodConn') }}
													@else
														{{ $listing->vendor->name }}
													@endif
												</p>
												<div class="contryWrap__wr">
													<span class="flagIcon__wr"><img src="{{ static_asset('backend/images/flags/'.strtolower($listing->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">{{ $listing->vendor->country->name }}</p>
												</div>
											</div>
											<i class="fa-solid fa-chevron-right"></i>
										</a>
									</div>
								@endif
							</div>
						</div>
					@endforeach
				@endif
			</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> --}}
					{{ $all_listings->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');
				var family = $('#product_family').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>"
							});
							$("#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('');
					}

				});
				//RNS.plugins.bootstrapSelect('refresh');
				$("#product_by_family").selectpicker('destroy');
				$("#product_by_family").selectpicker('render');
			}
		})

		$('#sort_by').on('change', function(){
			$('#filter-form').submit();
		})

		$('#product_family').change( function(){
			var family = $(this).find(':selected').data('id');

			$('#family_id').val(family);
		});
		$('.rns-selectpicker').on('change', function(){
			if($(this).attr('id') == 'product_by_family'){
				var product_val = $(this).find(':selected').val();
				$('#hidden_product').val(product_val);
			}
			$('#filter-form').submit();
		})
	</script>
@endsection