@extends('front.layout.app')
@section('content')
  
	<section class="service-detail-hero">
			<div class="container">
				<div class="service-detail-hero-inner" data-aos="fade-up" data-aos-duration="1200">
					<span class="service-detail-badge"><i class="fa-solid fa-paint-roller"></i> SERVICE DETAIL</span>
					<h1>{{ $serviceObj->title }}</h1>
					
				</div>
			</div>
		</section>

		<main id="main">
			<section class="service-detail-section py-5">
				<div class="container">
					<div class="row g-4 g-xl-5">
						<div class="col-lg-8">
							
							<article class="service-detail-content" data-aos="fade-up" data-aos-duration="1200">
								<div class="detailimg mb-4">
                                <img src="{{ asset_uploads('services/' . $serviceObj->featured_image) }}"
                                title="{{ $serviceObj->featured_image_title }}" alt="{{ $serviceObj->featured_image_alt }}"></div>
								<h2>{{ $serviceObj->title }}</h2>
							{!! adjustUrl($serviceObj->description) !!}
							</article>
						</div>

						<div class="col-lg-4">
							<aside class="service-detail-sidebar" data-aos="fade-left" data-aos-duration="1200">
								<div class="sidebar-widget">
									<h3>Categories</h3>
								
                                    <ul class="sidebar-links">
                                           @foreach ($allServices as $service)
										<li><a href="{{ url('services/'.$service->slug) }}" class="{{ $service->id == $serviceObj->id ? 'active' : '' }}">{{ $service->title }}</a></li>
										  @endforeach
                                      
         <!--                       @foreach ($allServices as $serviceObj)-->
									<!--	<li><a href="{{ url('services/'.$serviceObj->slug) }}">{{ $serviceObj->title }}</a></li>-->
									<!--	  @endforeach-->
                      
									</ul>
								</div>

								<div class="service-side-card sidebar-widget">
									<h3>Service Snapshot</h3>
									<ul class="side-bullets">
										<li><i class="fa-solid fa-clock"></i><span>Typical timeline:</span> 3–7 days</li>
										<li><i class="fa-solid fa-user-tie"></i><span>Team:</span> Skilled &amp; organized painters</li>
										<li><i class="fa-solid fa-shield"></i><span>Coverage:</span> Licensed &amp; insured</li>
										<li><i class="fa-solid fa-swatchbook"></i><span>Options:</span> Finish level guidance</li>
									</ul>
									<div class="main-btn mt-3">
										<a href="{{ route('contact') }}">REQUEST ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>
									</div>
								</div>

								
							</aside>
						</div>
					</div>
				</div>
			</section>

			@if(count($relatedServices) > 0)
			<section class="related-services-section pb-5 mt-5">
				<div class="container">
					<div class="main_title mb-4 mb-lg-5" data-aos="fade-up" data-aos-duration="1200">
						<span class="subtitle">RELATED SERVICES</span>
						<h2>You May Also Be Interested In</h2>
					</div>

					<div class="row g-4">
						@foreach ($relatedServices as $index => $relatedService)
						<div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}" data-aos-duration="1200">
							<article class="service-tile">
								<div class="service-tile-img">
									<img src="{{ asset_uploads('services/' . $relatedService->featured_image) }}" 
										 alt="{{ $relatedService->featured_image_alt ?? $relatedService->title }}"
										 title="{{ $relatedService->featured_image_title ?? $relatedService->title }}">
									@if(!empty($relatedService->image_icon))
									<span class="service-tile-icon"><i class="{{ $relatedService->image_icon }}"></i></span>
									@else
									<span class="service-tile-icon"><i class="fa-solid fa-paint-roller"></i></span>
									@endif
								</div>
								<div class="service-tile-body">
									<h3>{{ $relatedService->title }}</h3>
									@if(!empty($relatedService->excerpt))
									<p>{{ $relatedService->excerpt }}</p>
									@endif
									<a class="service-tile-btn" href="{{ url('services/' . $relatedService->slug) }}">View Details <i class="fa-solid fa-arrow-right"></i></a>
								</div>
							</article>
						</div>
						@endforeach
					</div>
				</div>
			</section>
			@endif
		</main>
    @endsection

    @section('beforeHeadClose')
        <style>
            .mb-3px {
                margin-bottom: 3px;
            }
        </style>
    @endsection
    @section('beforeBodyClose')
        <div class="modal fade" id="beforeAfterImageModal" tabindex="-1" aria-labelledby="beforeAfterImageModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row text-center" id="beforeAfterImageModalContainer"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function showBeforeAfterModal(image_id, before_image, after_image) {
                var htmlStr = `<img-comparison-slider>
                                    <figure slot="first" class="before">
                                        <img width="100%" src="${before_image}">
                                        <figcaption>Before</figcaption>
                                    </figure>
                                    <figure slot="second" class="after">
                                        <img width="100%" src="${after_image}">
                                        <figcaption>After</figcaption>
                                    </figure>
                                </img-comparison-slider>`;
                $('#beforeAfterImageModalContainer').html(htmlStr);
                $('#beforeAfterImageModal').modal('show');
            }
        </script>
    @endsection