@extends('frontend.layouts.app')
@section('meta_title', 'Trade-listing-details')
@section('content')
<main class="pageMainLayout__wr tradeDetailPage__wr">
<section class="innerPageBnrWrap__wr tradeDetailPageBnr__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>Trade Listings</li>
			</ol>
		</div>
	</div>
</section>
<section class="mainDetailWrapSec__wr">
	<div class="container">
		<div class="row">
			<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
				<div class="proImageWrap__wr">
					<div class="tradeSlider__wr">
						<div class="swiper tradeListProSwiper__wr">
							<div class="swiper-wrapper">
								@forelse ($product->listing_images as $img)
									<div class="swiper-slide">
										<picture class="img__wr" data-fancybox="gallery" href="{{ uploaded_asset($img->image) }}">
											<img src="{{ uploaded_asset($img->image) }}" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
											<span class="zoomIcon__wr">
												<img src="images/magnify-zoom-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="zoom-icon" title="zoom-icon" width="" height="">
											</span>
										</picture>
									</div>
								@empty
									<div class="swiper-slide">
										<picture class="img__wr" data-fancybox="gallery" href="{{ static_asset('frontend/images/product-bg-06.jpg') }}">
											<img src="images/product-bg-06.jpg" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
											<span class="zoomIcon__wr">
												<img src="images/magnify-zoom-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="zoom-icon" title="zoom-icon" width="" height="">
											</span>
										</picture>
									</div>
								@endforelse
							</div>
							<div class="swiper-pagination"></div>
						</div>
					</div>
					<div class="thumb__wr">
						<div thumbsSlider="" class="swiper tradeListProThumbSwiper__wr">
							<div class="swiper-wrapper">
								@forelse ($product->listing_images as $img)
									<div class="swiper-slide">
										<div class="itemWrap__wr">
											<picture class="img__wr">
												<img src="{{ uploaded_asset($img->image) }}" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
											</picture>
										</div>
									</div>
								@empty
									<div class="swiper-slide">
										<div class="itemWrap__wr">
											<picture class="img__wr">
												<img src="images/product-bg-06.jpg" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
											</picture>
										</div>
									</div>
								@endforelse
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</div>
			<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
				<div class="proDetailWrap__wr">
					<div class="proBadgeWrap__wr">
						@if($product->listing_type == 'demand')
							<span class="badge__wr badge-success">Demand</span>
						@elseif($product->listing_type == 'offer')
							<span class="badge__wr badge-danger">Offer</span>
						@endif
					</div>
					<a href="{{ route('corporate-profile', encrypt($product->vendor->id)) }}" class="text-decoration-none">
						<div class="proBoxWrap__wr">
							<div class="wrapper__wr">
								<picture class="image__wr">
									<img src="@if($product->is_anonymous) {{uploaded_asset(env('ANNONYMOUS_IMAGE', 'dummy'))}} @else {{uploaded_asset($product->vendor->user_logo)}}  @endif" 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">
									@if($product->is_anonymous)
										{{ env('ANONYMOUS', 'FoodConn') }}
									@else
										{{ $product->vendor->name }}
									@endif
									</p>
									<div class="contryWrap__wr">
										<span class="flagIcon__wr"><img src="{{ static_asset('backend/images/flags/'.strtolower($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">{{ $product->vendor->country->name }}</p>
									</div>
								</div>
							</div>
							<span class="icon__wr"><i class="fa-solid fa-chevron-right"></i></span>
						</div>
					</a>
					<div class="proInfoWrap__wr">
						<p class="dateInfo__wr">{{ date('F d, Y', strtotime($product->updated_at)) }}</p>
						<p class="idInfo__wr">Listing ID: <span>{{ $product->list_id }}</span></p>
						<p>{{ $product->overview }}</p>
						<div class="contactInfoWrap__wr">
							<a href="mailto:{{ $product->vendor->email }}">
								<span class="icon__wr"><img src="images/envelope-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="email-icon" title="email-icon" width="25" height="18"></span>
								<span class="label__wr">Email</span>
							</a>
							<a href="tel:{{ $product->vendor->phone }}">
								<span class="icon__wr"><img src="images/phone-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="phone-icon" title="phone-icon" width="18" height="18"></span>
								<span class="label__wr">Phone</span>
							</a>
							<a href="{{ $product->vendor->website }}" target="_blank">
								<span class="icon__wr"><img src="images/web-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="phone-icon" title="phone-icon" width="18" height="18"></span>
								<span class="label__wr">Website</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="tableDetailWrapSec__wr">
	<div class="container">
		<div class="tableHeadWrap__wr">
			<h6 class="title__wr">Details</h6>
			<div class="optionWrap__wr">
				<a href="javascript:void(0);" aria-label="print" title="print"><img src="images/print-icon.svg" loading="lazy" decoding="async" class="img-fluid print_me" alt="print-icon" title="print-icon" width="25" height="25"></a>
				<a href="javascript:void(0);" aria-label="share" title="share"><img src="images/share-icon.svg" loading="lazy" decoding="async" class="img-fluid share_me" alt="share-icon" title="share-icon" width="25" height="25"></a>
			</div>
		</div>
		@php
			$and = '&';
		@endphp
		<div class="table-responsive tableBodyWrap__wr">
			<table class="table table-striped">
				@if ($product->list_families->isNotEmpty())
				<tr>
					<th>Product Family:</th>
					<td>
						<ul>
							@foreach ($product->list_families as $item)
								<li><a href="javascript:void(0)">{{ $item->family->name }}</a></li> {{-- {{ url("/trade-listings?product_family=".str_replace(' ','+', $item->family->name)."{$and}") }} --}}
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				@if ($product->list_product->isNotEmpty())
				<tr>
					<th>Product:</th>
					<td>
						<ul>
							@foreach ($product->list_product as $item)
								<li><a href="javascript:void(0)">{{ $item->product->name }}</a></li> {{-- {{ url("/trade-listings?product=".str_replace(' ','+', $item->product->name)."{$and}") }} --}}
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				@if ($product->list_origin->isNotEmpty())
				<tr>
					@if($product->listing_type == 'demand')
						<th>Preferred Origins:</th>
					@elseif($product->listing_type == 'offer')
						<th>Product Origin:</th>
					@endif
					<td class="origin__wr">
						<ul>
							@foreach ($product->list_origin as $item)
								<li>
									<a href="javascript:void(0)"> {{-- {{ url("/trade-listings?product_origin=".str_replace(' ','+', $item->origin->name)."{$and}") }} --}}
										<div class="contryWrap__wr">
											<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-icon" title="flag-icon" width="28" height="20"></span>
											<p class="title__wr">{{ $item->origin->name }}</p>
										</div>
									</a>
								</li>
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				@if ($product->list_temperature->isNotEmpty())
				<tr>
					@if($product->listing_type == 'demand')
						<th>Required Temperature:</th>
					@elseif($product->listing_type == 'offer')
						<th>Product Temperature:</th>
					@endif
					<td>
						<ul>
							@foreach ($product->list_temperature as $item)
								<li><a href="javascript:void(0)">{{ $item->temperature->name ?? '' }}</a></li> {{-- {{ url("/trade-listings?product_temperature=".str_replace(' ','+', $item->temperature->name)."{$and}") }} --}}
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				@if ($product->brands != null)
				<tr>
					@if($product->listing_type == 'demand')
						<th>Preferred Brands:</th>
					@elseif($product->listing_type == 'offer')
						<th>Product Brand:</th>
					@endif
					<td><p>{{ $product->brands }}</p></td>
				</tr>
				@endif

				@if($product->listing_type == 'offer')
					<tr>
						<th>Available for Export:</th>
						@if($product->is_export == 1)
							<td><p><a href="javascript:void(0);">Yes</p></a></td>
						@else
							<td><p><a href="javascript:void(0);">No</a></p></td>
						@endif
					</tr>
				@endif
				{{-- Available for export --}}
				
				@if ($product->specification != null)
				<tr>
					@if($product->listing_type == 'demand')
						<th>Required Specifications:</th>
					@elseif($product->listing_type == 'offer')
						<th>Product Specifications:</th>
					@endif
					<td><p>{{ $product->specification }}</p></td>
				</tr>
				@endif

				@if($product->listing_type == 'offer')
					<tr>
						<th>Production Date:</th>
						<td><a href="javascript:void(0);">{{ date('d/m/Y',strtotime($product->production_date)) }}</a></td>
					</tr>
				@endif
				
				@if($product->listing_type == 'offer')
					<tr>
						<th>Expiry Date:</th>
						@if ($product->expiry_date != null)
							<td><a href="javascript:void(0);">{{ date('d/m/Y',strtotime($product->expiry_date)) }}</a></td>
						@else
							<td><p class="text-muted fst-italic">Not Specified</p></td>
						@endif
					</tr>
				@endif

				{{-- Expiry Date:	 --}}
				@if($product->listing_type == 'demand')
					<tr>
						<th>Minimum Shelf Life:</th>
						@if ($product->min_shelf_life != null)
							<td><a href="javascript:void(0);">{{ $product->min_shelf_life }}</a></td>
						@else
							<td><p class="text-muted fst-italic">Not Specified</p></td>
						@endif
					</tr>
				@endif

				@if($product->unit_measures != null)
				<tr>
					<th>Unit of Measure (UOM):</th>
					<td><a href="javascript:void(0);">{{ $product->unit_measures->name}}</a></td>
				</tr>
				@endif

				@if( $product->curency != null)
				<tr>
					<th>Currency:</th>
					<td>
						<a href="javascript:void(0);">
							{{ $product->curency->name.' - '.$product->curency->symbol  }}							
						</a>
					</td>
				</tr>
				@endif

				@if ($product->prefer_package_size != null)
				<tr>
					@if($product->listing_type == 'demand')
						<th>Preferred Packaging Size:</th>
					@elseif($product->listing_type == 'offer')
						<th>Packaging Size:</th>
					@endif
					
					<td><p>{{ $product->prefer_package_size }}</p></td>
					
				</tr>
				@endif

				@if($product->listing_type == 'offer' && $product->available_quantity != null)
					<tr>
						<th>Available Quantity (per UOM):</th>
						<td><p>{{ $product->available_quantity }}</p></td>
					</tr>
				@endif

				@if($product->listing_type == 'demand' && $product->required_quantity != null)
					<tr>
						<th>Required Quantity (per UOM):</th>
						<td><p>{{ $product->required_quantity }}</p></td>
					</tr>
				@endif

				@if($product->listing_type == 'demand' && $product->max_price != null)
					<tr>
						<th>Max Price (per UOM):</th>
						<td><p>{{ $product->max_price }}</p></td>
					</tr>
				@endif

				@if($product->listing_type == 'offer' && $product->minimum_order != null)
					<tr>
						<th>Minimum Order (per UOM):</th>
						<td><p>{{ $product->minimum_order }}</p></td>
					</tr>
				@endif

				@if($product->listing_type == 'offer' && $product->price != null)
					<tr>
						<th>Price (per UOM):</th>
						<td><p>{{ single_price($product->price) }}</p></td>
					</tr>
				@endif

				@if ($product->delivery_terms != null)
				<tr>
					<th>Delivery Terms:</th>
					<td><p>{{ $product->delivery_terms }}</p></td>
				</tr>
				@endif

				@if($product->listing_type == 'offer' && $product->production_location != null)
					<tr>
						<th>Product Location:</th>
						<td><p>{{ $product->production_location }}</p></td>
					</tr>
				@endif

				@if($product->listing_type == 'offer' && $product->offer_valid != null)
					<tr>
						<th>Offer Valid Until:</th>
						<td><p><a href="javascript:void(0);">{{ date('d/m/Y', strtotime($product->offer_valid)) }}</a></p></td>
					</tr>
				@endif

				@if($product->listing_type == 'demand' && $product->supply_sources->isNotEmpty())
					<tr>
						<th>Preferred Supply Source:</th>
						<td>
							<ul>
								@foreach ($product->supply_sources as $item)
									<li><a href="javascript:void(0);">{{ $item->supply_source->name ?? '' }}</a></li>
								@endforeach
							</ul>
						</td>
					</tr>
				@endif
			</table>
		</div>
	</div>
</section>
<div class="modal" tabindex="-1" id="share_modal">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
	  <div class="modal-content">
		<div class="card card-bordered">
		<div class="modal-header">
			<h5 class="modal-title">Share on Social Media</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
			<div class="card-body">
				<div class="wrapper">
					<a href="https://wa.me/?text={{'Hey! Look What I found on FoodConn!'}}%20{{route('listing.trade-listing-details', encrypt($product->id))}}" class="icon whatsapp">
						<div class="tooltip">Whatsapp</div>
						<span><i class="fab fa-whatsapp"></i></span>
					</a>
					<a href="mailto:someone@example.com?Subject={{'Hey! Look What I found on FoodConn!'}}&body={{route('listing.trade-listing-details', encrypt($product->id))}}" class="icon youtube">
						<div class="tooltip">Email</div>
						<span><i class="fas fa-envelope"></i></span>
					</a>
					<a href="https://www.facebook.com/sharer/sharer.php?u={{route('listing.trade-listing-details', encrypt($product->id))}}" target="_blank" class="icon facebook">
						<div class="tooltip">Facebook</div>
						<span><i class="fab fa-facebook-f"></i></span>
					</a>
					<a href="https://twitter.com/intent/tweet?text={{'Hey! Look What I found on FoodConn!'}}&url={{route('listing.trade-listing-details', encrypt($product->id))}}" target="_blank" class="icon twitter">
						<div class="tooltip">Twitter</div>
						<span><i class="fab fa-twitter"></i></span>
					</a>
					<a href="https://www.linkedin.com/shareArticle?mini=true&url={{route('listing.trade-listing-details', encrypt($product->id))}}&title={{'Hey! Look What I found on FoodConn!'}}" target="_blank" class="icon linkedin">
						<div class="tooltip">Linkedin</div>
						<span><i class="fab fa-linkedin"></i></span>
					</a>
					<a href="https://www.reddit.com/submit?url={{route('listing.trade-listing-details', encrypt($product->id))}}&title={{'Hey! Look What I found on FoodConn!'}}" class="icon reddit">
						<div class="tooltip">Reddit</div>
						<span><i class="fab fa-reddit"></i></span>
					</a>
					<a href="https://www.tumblr.com/share/link?url={{route('listing.trade-listing-details', encrypt($product->id))}}&name={{'Hey! Look What I found on FoodConn!'}}&description={{'Empowering Global Food Trade'}}" target="_blank" class="icon tumblr">
						<div class="tooltip">Tumblr</div>
						<span><i class="fab fa-tumblr"></i></span>
					</a>
					<a href="https://pinterest.com/pin/create/button/?url={{route('listing.trade-listing-details', encrypt($product->id))}}&media={{ uploaded_asset($img->image) }}&description={{'Hey! Look What I found on FoodConn!'}}({{'Empowering Global Food Trade'}})" target="_blank" class="icon pinterest">
						<div class="tooltip">Pinterest</div>
						<span><i class="fab fa-pinterest"></i></span>
					</a>
				</div>
			</div>
		</div>
		
	  </div>
	</div>
</div>
@endsection
@section('script')
<script>
	$('.print_me').click(function(){
		window.print();
	});
	$('.share_me').click(function(){
		$("#share_modal").modal({
		onOpen: function (dialog) {
			dialog.data.show();
			dialog.container.show();
			dialog.overlay.fadeIn('fast');
		}
		});
	});
	
	
</script>
@endsection