@extends('frontend.layouts.app')
@section('meta_title', 'Trade-listing-details')
@section('head')
	
@endsection
@section('content')
<main class="pageMainLayout__wr featureDetailPage__wr" id="print_div">
<section class="innerPageBnrWrap__wr featureDetailPageBnr__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>
<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="swiper proSwiper__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="">
									</picture>
								</div>
							@empty
								<div class="swiper-slide">
									<picture class="img__wr" data-fancybox="gallery" href="images/product-bg-01.jpg">
										<img src="images/product-bg-05.jpg" loading="lazy" decoding="async" class="img-fluid" alt="product-bg" title="product-bg" width="" height="">
									</picture>
								</div>
							@endforelse
							
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="thumb__wr">
						<div thumbsSlider="" class="swiper proThumbSwiper__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="">
											<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="25" height="25">
											</span>
										</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="">
												<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="25" height="25">
												</span>
											</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">
						<span class="badge__wr badge-primary">Featured</span>
					</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="{{ uploaded_asset($product->vendor->user_logo) }}" 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">{{ $product->vendor->name }}</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>
			</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" class="print_me"><img src="images/print-icon.svg" loading="lazy" decoding="async" class="img-fluid" alt="print-icon" title="print-icon" width="25" height="25"></a>
				<a href="javascript:void(0);" aria-label="share" title="share" class="share_me"><img src="images/share-icon.svg" loading="lazy" decoding="async" class="img-fluid" 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>
							@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>
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				@if ($product->list_origin->isNotEmpty())
				<tr>
					<th>Origin:</th>
					<td>
						<ul>
							@foreach ($product->list_origin as $item)
								<li>
									<a href="javascript:void(0);">
										<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>
					<th>Product Temperature:</th>
					<td>
						<ul>
							@foreach ($product->list_temperature as $item)
								<li><a href="javascript:void(0);">{{ $item->temperature->name ?? '' }}</a></li>
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

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

				@if ($product->list_feature->isNotEmpty())
				<tr>
					<th>Special Features:</th>
					<td>
						<ul>
							@foreach ($product->list_feature as $item)
								<li><a href="javascript:void(0);">{{ $item->feature->name ?? '' }}</a></li>
							@endforeach
						</ul>
					</td>
				</tr>
				@endif
				{{-- {{ dd($product->list_applications[0]->application) }} --}}
				@if ($product->list_applications->isNotEmpty())
				<tr>
					<th>Product Applications:</th>
					<td>
						<ul>
							@foreach ($product->list_applications as $item)
								<li><a href="javascript:void(0);">{{ $item->application->name ?? '' }}</a></li>
							@endforeach
						</ul>
					</td>
				</tr>
				@endif

				<tr>
					<th>Available for Export:</th>
					<td>
						<ul>
							@if ($product->is_export == 1)
								<li><a href="javascript:void(0);">Yes</a></li>
							@else
								<li><a href="javascript:void(0);">No</a></li>
							@endif
						</ul>
					</td>
				</tr>

				<tr>
					<th>Private Labeling:</th>
					<td>
						<ul>
							@if ($product->private_label == 1)
								<li><a href="javascript:void(0);">Yes</a></li>
							@else
								<li><a href="javascript:void(0);">No</a></li>
							@endif
						</ul>
					</td>
				</tr>
				@if ($product->overview != null)
				<tr>
					<th>Overview:</th>
					<td><p>{{ $product->overview }}</p></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="card-body">
				<!--begin::Row-->
				<div class="input-group clipBoardWrap__wr">
					<div id="kt_clipboard_4" class="me-5 clipBoardInput__wr">
						<input type="text" class="form-control" value="https://php80.dev-risians.com/foodconn/public/featured-product-details/eyJpdiI6IlZOb2wrWkdtZG40azYzNHJUUXpmMHc9PSIsInZhbHVlIjoiZTRIclJ0a2VRc3dROXRwQ29zT3ZhUT09IiwibWFjIjoiOTM5MTAwMzM1YTZiNzFhYTVlMGM0MTIzODkwZmU0YmJkZDI2MzgxZDA0ZTgwYjY1OGZhZWMwOGNmYTE4ZjllMiIsInRhZyI6IiJ9">
					</div>
					<div class="input-group-append">
						<button class="btn btn__wr" data-clipboard-target="#kt_clipboard_4"><i class="fa-solid fa-copy"></i></button>
					</div>
				</div>
				<!-- <div class="d-flex align-items-center flex-wrap clipBoardWrap__wr">
					<div id="kt_clipboard_4" class="me-5 clipBoardInput__wr"><input type="text" class="form-control" value=""></div>
					<button class="btn btn-icon btn-sm btn-light btn__wr" data-clipboard-target="#kt_clipboard_4">
						<i class="fa-solid fa-copy"></i>
					</button>
				</div> -->
				<!--end::Row-->
			</div>
		</div>
		
	  </div>
	</div>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js" integrity="sha512-iJh0F10blr9SC3d0Ow1ZKHi9kt12NYa+ISlmCdlCdNZzFwjH1JppRTeAnypvUez01HroZhAmP4ro4AvZ/rG0UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	$('.print_me').click(function(){
		// $(".featureDetailPage__wr").printThis();
		window.print();
		// printDiv();
	});
	$('.share_me').click(function(){
		$("#share_modal").modal({
		onOpen: function (dialog) {
			dialog.data.show();
			dialog.container.show();
			dialog.overlay.fadeIn('fast');
		}
		});
	});
	
	
</script>
@endsection