@extends('front')
@section('content')
<div class="breadcrumb-bar text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-12">
				<h2 class="breadcrumb-title mb-2">{{ __('Service Details') }}</h2>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb justify-content-center mb-0">
						<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="ti ti-home-2"></i></a></li>
						<li class="breadcrumb-item">{{ __('Services') }}</li>
						<li class="breadcrumb-item active" aria-current="page">{{ __('Service Details') }}</li>
					</ol>
				</nav>
			</div>
		</div>
		<div class="breadcrumb-bg">
			<img src="{{ asset('front/img/bg/breadcrumb-bg-01.png') }}" class="breadcrumb-bg-1" alt="Img">
			<img src="{{ asset('front/img/bg/breadcrumb-bg-02.png') }}" class="breadcrumb-bg-2" alt="Img">
		</div>
	</div>
</div>

<div class="page-wrapper">
	<div class="content">
		<div class="container">
			<div class="row">
				<div class="col-xl-8">
					<div class="card border-0">
						<div class="card-body">
							<div class="service-head mb-2">
								<div class="d-flex align-items-center justify-content-between flex-wrap">
									<h3 class="mb-2"></h3>
									<span class="badge badge-purple-transparent mb-2"><i class="ti ti-calendar-check me-1"></i>{{$order_product_count}}+ {{ __('Bookings') }}</span>
								</div>
								<div class="d-flex align-items-center justify-content-between flex-wrap mb-2">
									<div class="d-flex align-items-center flex-wrap">
										<p class="me-3 mb-2">
											<i class="ti ti-map-pin me-2"></i>
											{{ optional(App\Models\UserDetail::select('city', 'state', 'country')->where('user_id', $products->user_id)->first())->showfulladdress() ?? '' }}
										</p>
										<p class="mb-2"><i class="ti ti-star-filled text-warning me-2"></i><span class="text-gray-9">{{ $ratings['avg_rating'] ?? 0.0 }} </span>({{ $ratings['total_count'] }} {{ __('reviews') }})</p>
									</div>

									<!-- Share Now Button -->
									<a href="javascript:void(0)" id="shareNowBtn" class="d-flex align-items-center m-0" data-bs-toggle="modal" data-bs-target="#shareModal">
										<i class="ti ti-share me-2 text-gray "></i>
										{{ __('share_now') }}
									</a>

									<!-- Share Modal -->
									<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
										<div class="modal-dialog modal-dialog-centered">
											<div class="modal-content border-0 rounded-4">
												<div class="modal-header">
													<h5 class="modal-title" id="shareModalLabel">{{ __('share_now') }}</h5>
													<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
												</div>
												<div class="modal-body">
													@if (!empty($socialMediaShares) && count($socialMediaShares))
														<div class="d-flex flex-wrap gap-2 justify-content-center">
															@foreach ($socialMediaShares as $share)
																@php
																	$currentUrl = urlencode(url()->current());
																	$platform = strtolower($share->platform_name);

																	switch ($platform) {
																		case 'facebook':
																			$targetUrl = "https://www.facebook.com/sharer/sharer.php?u=$currentUrl";
																			break;
																		case 'twitter':
																			$targetUrl = "https://twitter.com/intent/tweet?url=$currentUrl";
																			break;
																		case 'linkedin':
																			$targetUrl = "https://www.linkedin.com/sharing/share-offsite/?url=$currentUrl";
																			break;
																		case 'whatsapp':
																			$targetUrl = "https://api.whatsapp.com/send?text=$currentUrl";
																			break;
																		case 'telegram':
																			$targetUrl = "https://t.me/share/url?url=$currentUrl";
																			break;
																		default:
																			$targetUrl = $share->url ?? "#";
																	}
																@endphp

																<a href="{{ $targetUrl }}" target="_blank" class="rounded-circle d-flex align-items-center justify-content-center"
																title="Share on {{ ucfirst($platform) }}"
																style="width: 40px; height: 40px; background-color: #3b5998;">
																	<i class="{{ $share->icon }} text-white" style="font-size: 18px;"></i>
																</a>
															@endforeach
														</div>
													@else
														<p class="text-center text-muted">{{ __('No Service Links Available') }}</p>
													@endif
												</div>
											</div>
										</div>
									</div>
									<div class="d-flex align-items-center flex-wrap">
										<p class="me-3 mb-2"><i class="ti ti-eye me-2"></i>{{$products->views}} {{ __('Views') }}</p>
									</div>
								</div>
							</div>


							<div class="service-wrap mb-4">
								<div class="slider-wrap">
									<div class="owl-carousel service-carousel nav-center mb-3" id="large-img">
										@if($productImagesUrl && $productImagesUrl->count())
											@foreach($productImagesUrl as $image)
											<img src="{{ $image }}" class="img-fluid img_one" alt="Slider Img">
											@endforeach
										@else
											<img src="{{ asset('front/img/default-placeholder-image.png') }}" class="img-fluid" alt="Default Slider Img">
										@endif
									</div>
								</div>
								<div class="owl-carousel slider-nav-thumbnails nav-center" id="small-img">
									@if($productImagesUrl && $productImagesUrl->count())
										@foreach($productImagesUrl as $image)
										<div><img src="{{ $image }}" class="img-fluid img_two" alt="Slider Img"></div>
										@endforeach
									@else
										<div><img src="{{ asset('front/img/default-placeholder-image.png') }}" alt="img"></div>
									@endif
								</div>
							</div>

							<div class="accordion service-accordion">
								<div class="accordion-item mb-4">
									<h2 class="accordion-header">
										<button class="accordion-button p-0" type="button" data-bs-toggle="collapse" data-bs-target="#overview" aria-expanded="false">
											{{ __('Service Overview') }}
										</button>
									</h2>
									<div id="overview" class="accordion-collapse collapse show">
										<div class="accordion-body border-0 p-0 pt-3">
											<div class="more-text">
												<p>{!! $products->source_description !!} </p>

											</div>
											<a href="javascript:void(0);" class="link-primary text-decoration-underline more-btn mb-4">{{ __('Read More') }}</a>
																						<div class="bg-light-200 p-3 offer-wrap" style="display:none">
												


											</div>
										</div>
									</div>
								</div>

								@if (count($includedServices) > 0)
									<div class="accordion-item mb-4">
										<h2 class="accordion-header">
											<button class="accordion-button p-0" type="button" data-bs-toggle="collapse" data-bs-target="#include" aria-expanded="false">
												{{ __('Includes') }}
											</button>
										</h2>
										<div id="include" class="accordion-collapse collapse show">
											<div class="accordion-body border-0 p-0 pt-3">
												<div class="bg-light-200 p-3 pb-2 br-10">
													@foreach($includedServices as $service)
													<p class="d-inline-flex align-items-center mb-2 me-4">
														<i class="feather-check-circle text-success me-2"></i>{{ $service }}
													</p>
													@endforeach
												</div>
											</div>
										</div>
									</div>
								@endif

								<div class="accordion-item mb-4">
									<h2 class="accordion-header">
										<button class="accordion-button p-0" type="button" data-bs-toggle="collapse" data-bs-target="#gallery" aria-expanded="false">
											{{ __('Gallery') }}
										</button>
									</h2>
									<div id="gallery" class="accordion-collapse collapse show">
										<div class="accordion-body border-0 p-0 pt-3">
											<div class="gallery-slider owl-carousel nav-center gallery-img">
												@if($productImagesUrl && $productImagesUrl->count())
													@foreach($productImagesUrl as $image)
													<a href="{{ $image }}" data-fancybox="gallery" class="gallery-item">
														<img src="{{ $image }}" alt="img">
													</a>
													@endforeach
												@else
													<a href="{{ asset('front/img/default-placeholder-image.png') }}" data-fancybox="gallery" class="gallery-item">
														<img src="{{ asset('front/img/default-placeholder-image.png') }}" alt="img">
													</a>
												@endif
											</div>
										</div>
									</div>
								</div>
								@if ($videolink != "")
									@php
										preg_match('/(?:youtu\.be\/|v=)([^&?]+)/', $videolink, $matches);
										$videoId = $matches[1] ?? null;
										$thumbnail = $videoId ? "https://img.youtube.com/vi/$videoId/maxresdefault.jpg" : null;
									@endphp
									<div class="accordion-item mb-4">
										<h2 class="accordion-header">
											<button class="accordion-button p-0" type="button" data-bs-toggle="collapse" data-bs-target="#video" aria-expanded="false">
												{{ __('Video') }}
											</button>
										</h2>
										<div id="video" class="accordion-collapse collapse show">
											<div class="accordion-body border-0 p-0 pt-3">
												<div class="video-wrap" @if ($thumbnail) style="background-image: url('{{ $thumbnail }}'); background-size: cover; "@endif>
													<a class="video-btn video-effect" data-fancybox="" href="{{$videolink}}">
														<i class="fa-solid fa-play"></i>
													</a>
												</div>
											</div>
										</div>
									</div>
								@endif
							</div>
						</div>
					</div>
					<div class="card border-0 mb-xl-0 mb-4">
						<div class="card-body" id="review_container" data-is_allow_reply="{{ isAllowReply($products->id, Auth::user()->id ?? '') }}">
							<div class="d-flex align-items-center justify-content-between flex-wrap">
								<h4 class="mb-3">{{ __('Reviews') }} (<span class="total_review_count">{{ $ratings['total_count'] }}</span>)</h4>
							</div>
							<div class="row align-items-center">
								<div class="col-md-5">
									<div class="rating-item bg-light-500 text-center mb-3">
										<h5 class="mb-3">{{ __('Customer Reviews & Ratings') }}</h5>
										<div class="d-inline-flex align-items-center justify-content-center" id="stars_container">
											@for ($i = 1; $i <= 5; $i++)
												@if ($i <=floor($ratings['avg_rating']))
												<i class="ti ti-star-filled text-warning me-1"></i>
												@elseif ($i == ceil($ratings['avg_rating']) && $ratings['avg_rating'] > floor($ratings['avg_rating']))
												<i class="ti ti-star-half-filled text-warning me-1"></i>
												@else
												<i class="ti ti-star text-warning me-1"></i>
												@endif
												@endfor
										</div>
										<p class="mb-3">(<span id="avg_rating">{{ $ratings['avg_rating'] ?? '0.0' }}</span> {{ __('out of') }} 5.0)</p>
										<p class="text-gray-9">{{ __('basedon') }} <span class="total_review_count"> {{ $ratings['total_count'] }}</span> {{ __('Reviews') }}</p>
									</div>
								</div>
								<div class="col-md-7">
									<div class="rating-progress mb-3" id="review_progress_container">
										@if ($ratings['star_rating'])
										@foreach (range(5, 1) as $star)
										@php
										$starCount = $ratings['star_rating']['star' . $star] ?? 0;
										$percentage = ($ratings['total_count'] > 0) ? ($starCount / $ratings['total_count']) * 100 : 0;
										@endphp
										<div class="d-flex align-items-center mb-2">
											<p class="me-2 text-nowrap mb-0">{{ $star }} {{ __('Star Ratings') }}</p>
											<div class="progress w-100" role="progressbar" aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100">
												<div class="progress-bar bg-warning" style="width: {{ $percentage }}%"></div>
											</div>
											<p class="progress-count ms-2">{{ $starCount }}</p>
										</div>
										@endforeach
										@endif
									</div>
								</div>
							</div>
							<div class="list-reviews">
							</div>
							<div class="text-center">
								<a href="javascript:void(0);" class="btn btn-light btn-sm d-none" id="load_more_reviews">{{ __('load_more') }}</a>
							</div>
						</div>
					</div>
				</div>

				<div class="col-xl-4 theiaStickySidebar">
					<div class="card border-0">
						<div class="card-body">
							<div class="d-flex align-items-center justify-content-between border-bottom mb-3">
								<div class="d-flex align-items-center">
									<div class="mb-3">
										<h4><span class="display-6 fw-bold">{{$currecy_details->symbol}}{{ $products_details1->source_Values }}</span> / <span class="text-default">{{ formatServicePriceType($products_details1->source_key ?? '', app()->getLocale()) }}</span></h4>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- my booking -->
					<input type="hidden" id="product_slug" value="{{ $products->slug }}">
					@if (Auth::check())