@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())->showaaddress() ?? '' }}
										</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($productImages && $productImages->count())
										@foreach($productImages as $image)
										@if (file_exists(public_path('storage/'. $image)))
										<img src="{{ asset('storage/' . $image) }}" class="img-fluid img_one" alt="Slider Img">
										@else
										<img src="{{ asset('front/img/default-placeholder-image.png') }}" class="img-fluid" alt="Default Slider Img">
										@endif
										@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($productImages && $productImages->count())
									@foreach($productImages as $image)
									@if (file_exists(public_path('storage/'. $image)))
									<div><img src="{{ asset('storage/' . $image) }}" class="img-fluid img_two" alt="Slider Img"></div>
									@else
									<div><img src="{{ asset('front/img/default-placeholder-image.png') }}" alt="img"></div>
									@endif
									@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>

								<div class="accordion-item mb-4"