@extends('front.layout.app')
@section('beforeHeadClose')
    <link href="{{ asset_storage('') . 'module/blog/front/css/blog.css' }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
   
	<section class="page-title">
			<div class="container">
				<h1>Services</h1>
			</div>
		</section>

		<main id="main">
			 
			<section class="services-page-list py-5">
				<div class="container">
					<div class="row g-4">

                                @if (count($allServices) > 0)
                                @foreach ($allServices as $serviceObj)  
						<div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="1200">
							<article class="service-tile">
								<div class="service-tile-img">
									@php
										$displayImage = (!empty($serviceObj->listing_image) && file_exists(storage_uploads('services/' . $serviceObj->listing_image))) 
											? $serviceObj->listing_image 
											: $serviceObj->featured_image;
										$displayImageTitle = !empty($serviceObj->listing_image) ? $serviceObj->listing_image_title : $serviceObj->featured_image_title;
										$displayImageAlt = !empty($serviceObj->listing_image) ? $serviceObj->listing_image_alt : $serviceObj->featured_image_alt;
									@endphp
									@if (!empty($displayImage) && file_exists(storage_uploads('services/' . $displayImage)))
										<img src="{{ asset_uploads('services/' . $displayImage) }}"
												title="{{ $displayImageTitle }}" alt="{{ $displayImageAlt }}">
									@else
										<img src="{{ asset_uploads('back/images/no_image.jpg') }}"
												title="{{ $displayImageTitle }}" alt="{{ $displayImageAlt }}">
									@endif
									
									<span class="service-tile-icon"><i class="{{ $serviceObj->image_icon }}"></i></span>
								</div>
								<div class="service-tile-body">
									<h3>{{ $serviceObj->title }}</h3>
									<p>{!! Str::words(adjustUrl($serviceObj->description), 25, '...') !!}</p>
									<a class="service-tile-btn" href="{{ url('services/'.$serviceObj->slug) }}">Read More <i class="fa-solid fa-arrow-right"></i></a>
								</div>
							</article>
						</div>
                      @endforeach
                        @else
                        <p style="text-align: center;">No Record Found</p>
                     @endif
						
					</div>
				</div>
			</section>

			<section class="services-page-cta py-5">
				<div class="container">
					<div class="services-cta-box text-center" data-aos="fade-up" data-aos-duration="1200">
						<div class="main_title mb-3">
							<span class="subtitle">NEED HELP CHOOSING?</span>
							<h2>Tell Us Your Goal — We’ll Recommend the Right Service</h2>
						</div>
						<p>Get a clear, written estimate and expert guidance that fits your timeline and budget.</p>
						<div class="main-btn mt-3">
							<a href="{{ route('contact') }}">GET A FREE ESTIMATE <i class="fa-solid fa-arrow-right"></i></a>
						</div>
					</div>
				</div>
			</section>
		</main>
@endsection