@extends('layouts.main',['title'=>'Lookup'])

@section('content')
<section class="mt-4">
	<div class="row g-4">
		@if(empty($settings))
		<div class="col-lg-12">
			<div class="main-card">
				<div class="alert text-warning text-center" role="alert">
					No matching records found.
				</div>
			</div>
		</div>
		@else
		<div class="col-md-2 ">
			<div class="main-card">
				<div class="d-flex flex-column justify-content-between h-100">
					<div>
						<div class="logo-img text-center">
							<img class="img-fluid" src="{{ env('CB_MAIN_APP_URL') . '/' . $settings['web_logo'] }}"
								alt="logo">
						</div>
						<h4 class="font-16 text-center text-uppercase mt-3 mb-4">
							{{ @$settings['lookup_welcome_label'] }}</h4>
						<hr class="m-0 light-gray-divider">
						<p class="font-12 mb-0 mt-4 text-center">
							{!! isset($settings['lookup_welcome_text']) ?
							@htmlspecialchars_decode($settings['lookup_welcome_text']) : '' !!}
						</p>
					</div>
					<div>
						<p class="font-10 text-center m-0">{{ @$settings['lookup_copyright_text'] }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-10 ">
			<div class="row g-4">
				<div class="col-lg-6">
					<div class="main-card">
						<div class="slider-wrapper d-flex justify-content-between">
							<!-- Navigation Thumbnails -->
							<div class="slider-nav main-brand-img col-2 pe-2">
								@if(!$product_images->isEmpty())
								@foreach($product_images as $val)
								<div class="items">
									<img class="img-fluid w-100 mb-2" src="/{{ $val->cbpiUrl }}" alt="">
								</div>
								@endforeach
								@endif
							</div>

							<!-- Main Slider -->
							<div class="slider-for main-brand-img col-10 ">

								@if(!$product_images->isEmpty())
								@foreach($product_images as $key => $val)
								<div class="items {{($key==0) ? 'position-relative' : ''}}" style="opacity: 0;">
									<img class="img-fluid m-0" src="/{{ $val->cbpiUrl }}" alt="">
									<div class="verify-btn">
										<a class="text-decoration-none d-flex align-items-center gap-2"
											href="#0">Verified <span>
												<img src="{{ asset('images/blue-star.svg') }}" alt="star">
											</span>
										</a>
									</div>
								</div>
								@endforeach
								@endif
							</div>
						</div>

					</div>
				</div>
				<div class="col-lg-6">
					<div class="main-card">
						<div class="row ">
							<div class="col-md-7">
								<h2>Welcome To {{ @$settings['lookup_welcome_label'] }} Lookups</h2>
							</div>
							<div class="col-md-5">
								<div class="d-flex flex-column justify-content-between align-items-end h-100">
									<div>
										<img src="{{ asset('images/blue-star.svg') }}" alt="star">
									</div>

									<div class="seller-btn ">

										<a class=" text-decoration-none d-flex align-items-center gap-2 p-2 pe-3 bg-white "
											href="#0">
											<span><svg width="12" height="12" viewBox="0 0 12 12" fill="none"
													xmlns="http://www.w3.org/2000/svg">
													<path
														d="M5.54739 0.964187C5.72735 0.58081 6.27265 0.58081 6.45261 0.964188L7.74075 3.70828C7.81154 3.85907 7.95277 3.96471 8.11741 3.99001L11.0389 4.43903C11.441 4.50083 11.6049 4.99143 11.3207 5.28253L9.17637 7.47867C9.06546 7.59227 9.01508 7.75178 9.04064 7.90847L9.54222 10.9836C9.60941 11.3956 9.17206 11.7036 8.80678 11.5016L6.24196 10.0833C6.0914 10.0001 5.9086 10.0001 5.75804 10.0833L3.19322 11.5016C2.82794 11.7036 2.39059 11.3956 2.45778 10.9836L2.95936 7.90847C2.98492 7.75178 2.93454 7.59227 2.82363 7.47867L0.679347 5.28253C0.395121 4.99143 0.559019 4.50083 0.961143 4.43903L3.88259 3.99001C4.04723 3.96471 4.18846 3.85907 4.25925 3.70828L5.54739 0.964187Z"
														fill="#262626" />
												</svg>
											</span>Best Seller</a>
									</div>
								</div>
							</div>

						</div>
						<hr class=" my-4 soft-blue-divider">
						<div class="d-flex align-items-center gap-2 mb-4">
							<div class="hand-shake-img">
								<img src="{{ asset('images/handshake.png') }}" alt="handshake">
							</div>
							<p class="font-14 m-0 cgm-heading">CGM Fashion</p>

						</div>
						<div class="cgm-content">
							<p class="font-12 m-0">
								Welcome to CGM Monitors, your trusted source for advanced diabetes management solutions.
								We
								specialize in reselling innovative products from Beta Bionics, including the iLet Bionic
								Pancreas
								and iLet Cartridge 1.6mL. Our mission is to empower individuals with diabetes through
								cutting-edge
								technology and exceptional service.
								<br /><br />
								Let us help you take control of your health with reliable and effective tools. Your
								well-being is
								our priority! iLet Bionic Pancreas and iLet Cartridge 1.6mL. Our mission is to empower
								individuals
								with diabetes through cutting-edge.
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="row pt-4 g-4">
				<div class="col-lg-6">
					<div class="main-card feedback-card position-relative overflow-hidden">
						<p class="font-16 m-0 position-relative z-2">Customer Feedback</p>
						<hr class="my-4 soft-blue-divider">
						@if($ratings->count() > 0)
						<div class="feedback-slider position-static">
							@foreach($ratings as $k => $v)
							<div>
								<div class="feedback-slide-card mx-2 bg-white p-3">
									<div class="d-flex align-items-center gap-2">
										<div class="user-img">
											<img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}"
												alt="user">
										</div>
										<div class="user-name">
											<p class="font-10 m-0">{{ $v->cbrName }}</p>
											<div class="rating d-flex align-items-center gap-1 mt-1">
												@for($i=1.0; $i<=$v->cbrRating; $i += 1.0)
													<div class="yellow-star">
														<img class="img-fluid"
															src="{{ asset('images/yellow-star.svg') }}" alt="">
													</div>
													@endfor
											</div>
										</div>
									</div>
									<p class="font-16 m-0 mt-2">
										{{ \Illuminate\Support\Str::limit($v->cbrTopic, 30, '..') }}</p>
									<p class="font-12 m-0 mt-1 line-height-16">
										{{ \Illuminate\Support\Str::limit($v->cbrReview, 70, '..') }}</p>
									<div class="d-flex mt-4 pt-2 gap-2">
										@foreach($v->images as $_k => $_v)
										<div class="feedback-img">
											<img class="img-fluid" src="{{ asset($_v->cbriUrl) }}"
												alt="img_{{$_v->cbriID}}">
										</div>
										@endforeach
									</div>
								</div>
							</div>
							@endforeach
						</div>
						@else
							<div class="d-flex justify-content-center">
								<a class="red-btn d-block text-decoration-none font-12" href="{{ route('rating.rateSeller', $id) }}">Help us improve - share your feedback.</a>
							</div>
						@endif
					</div>
				</div>
				<div class="col-lg-6">
					<div class="d-flex flex-column gap-4">
						<div class="main-card">
							<div class="row g-3">
								<div class="col-md-7">
									<div class="d-flex gap-2 contact-card">
										<div class="contact-icon">
											<img class="img-fluid" src="{{ asset('images/email-icon.svg') }}" alt="">
										</div>
										<div class="contact-info">
											<p class="font-12 m-0">Mail<span>*</span></p>
											<p class="font-12 m-0 mt-1 line-height-16">{{ $seller->cbmEmail }}</p>
										</div>
									</div>
								</div>
								<div class="col-md-5">
									<div class="d-flex gap-2 contact-card">
										<div class="contact-icon">
											<img class="img-fluid" src="{{ asset('images/market-icon.svg') }}" alt="">
										</div>
										<div class="contact-info">
											<p class="font-12 m-0">Marketplace<span>*</span></p>
											<p class="font-12 m-0 mt-1 line-height-16">{{ $seller->cbmMarketPlaces }}
											</p>
										</div>
									</div>
								</div>
								<div class="col-md-7">
									<div class="d-flex gap-2 contact-card">
										<div class="contact-icon">
											<img class="img-fluid" src="{{ asset('images/store-icon.svg') }}" alt="">
										</div>
										<div class="contact-info">
											<p class="font-12 m-0">Seller Name<span>*</span></p>
											<p class="font-12 m-0 mt-1 line-height-16">{{ $seller->cbmName }}</p>
										</div>
									</div>
								</div>
								<div class="col-md-5">
									<div class="d-flex gap-2 contact-card">
										<div class="contact-icon">
											<img class="img-fluid" src="{{ asset('images/store-icon.svg') }}" alt="">
										</div>
										<div class="contact-info">
											<p class="font-12 m-0">Store Name(s)<span>*</span></p>
											<p class="font-12 m-0 mt-1 line-height-16">{{ $seller->cbmStoreNames }}</p>
										</div>
									</div>
								</div>
								<div class="col-md-12">
									<div class="d-flex gap-2 contact-card">
										<div class="contact-icon">
											<img class="img-fluid" src="{{ asset('images/url-icon.svg') }}" alt="">
										</div>
										<div class="contact-info">
											<p class="font-12 m-0">Store URLS(s)<span>*</span></p>
											<p class="font-12 m-0 mt-1 line-height-16 text-break">
												{{ $seller->cbmStoreUrls }}</p>
										</div>
									</div>
								</div>

							</div>
						</div>
						<div class="main-card disclaimer-card">
							<div class="row align-items-center g-4">
								<div class="col-md-8">
									<p class="font-12 mb-1">
										Disclaimer
									</p>
									<p class="disclaimer-card-desc m-0">
										{{ @$settings['lookup_disclaimer'] }}
									</p>
								</div>
								<div class="col-md-4">
									<div class="d-flex justify-content-end">
										<a class="red-btn d-block text-decoration-none font-12"
											href="{{ route('rating.rateSeller', $id) }}">Rate Seller</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			@endif
		</div>

</section>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<script>
	function setEqualHeight() {
		let maxHeight = 0;

		// Reset heights to calculate properly
		$('.feedback-slide-card').css('height', 'auto');

		// Find max height
		$('.feedback-slide-card').each(function () {
			let thisHeight = $(this).outerHeight();
			console.log('thisHeight',thisHeight);
			if (thisHeight > maxHeight) {
				maxHeight = thisHeight;
			}
		});
		console.log('maxHeight',maxHeight);
		// Apply max height to all cards
		$('.feedback-slide-card').outerHeight(maxHeight)
	}
	$(document).ready(function() {
		// Main Slider Configuration
		$('.slider-for').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			fade: true,
			asNavFor: '.slider-nav'
		});

		// Thumbnail Navigation Configuration
		$('.slider-nav').slick({
			slidesToShow: 4,
			slidesToScroll: 1,
			asNavFor: '.slider-for',
			dots: false,
			arrows: false,
			draggable: false,
			focusOnSelect: true,
			vertical: true, // Optional for vertical layout
		});

		$(".feedback-slider").slick({
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			responsive: [{
				breakpoint: 768,
				settings: {
					slidesToShow: 1
				}
			}, ],
			prevArrow: '<button class="feedback-prev d-flex align-items-center justify-content-center" type="button"><svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.909L1.52767 4.28615L4 1.66329L3.23887 0.857574L-1.49868e-07 4.28615L3.23887 7.71472L4 6.909Z" fill="white"/></svg></button>',
			nextArrow: '<button class="feedback-next d-flex align-items-center justify-content-center" type="button"><svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M-2.64516e-07 1.37713L2.47233 3.99999L-3.52189e-08 6.62284L0.761134 7.42856L4 3.99999L0.761133 0.571416L-2.64516e-07 1.37713Z" fill="white"/></svg></button>'
		});

		// Call on load and after slider is initialized
		setEqualHeight();

		// Recalculate on window resize
		$(window).on('resize', function () {
			setEqualHeight();
		});
	});
</script>
@endsection