@extends('frontend.layouts.app')

@section('content')
    <!-- ====================================== About Hero Section ===================================== -->
    <section class="heroSection">
        <div class="container">
            <h1 class="img-header-text fade_down">Our Services</h1>
            <div class="breadcrumb-group fade_up">
                <a href="index-slider.html">HOME / </a>
                <a href="services.html">SERVICES</a>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Nine ===================================== -->
    <section class="section-eight testimonial-page">
        <div class="container">
            <h2 class="d-none">hidden</h2>
            <div class="row services-page-row">
                @forelse($services as $service)
                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
                    <div class="cleaning-card">
                        <div class="cleaning-card-img-main">
                            <img src="{{ asset('storage/' . $service->img) }}" alt="{{ $service->title }}">
                        </div>
                        {{-- <div class="services-svg-main">
                            <img src="/frontend/assets/images/svg/services-svg{{ $loop->iteration }}.svg" alt="services-svg{{ $loop->iteration }}">
                        </div> --}}
                        <div class="card-containe">
                            <h3 class="services-name">{{ $service->title }}</h3>
                            <p class="services-card-sub-text">{{ $service->short_desc }}</p>
                        </div>

                          <a href="/service_detail/{{ $service->slug }}" class="card-learn-more">
                         {{-- <a href="{{ route('service_detail/{{ $product->slug }}"', $service->slug) }}" class="card-learn-more"> --}}
                            Learn More
                            <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                        </a>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <div class="text-center">
                        <p>No services available at the moment.</p>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </section>
    <!-- ====================================== Section Blog ===================================== -->

    <!-- ====================================== Section Form ===================================== -->

<style>
/* Fix for service page image sizing */
.services-page-row .cleaning-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services-page-row .cleaning-card-img-main {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.services-page-row .cleaning-card-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px 20px 0 0;
    transition: transform 0.7s ease;
}

.services-page-row .card-containe {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.services-page-row .services-card-sub-text {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Ensure consistent card heights */
.services-page-row .col-xxl-4,
.services-page-row .col-xl-4,
.services-page-row .col-lg-4,
.services-page-row .col-md-6 {
    display: flex;
    margin-bottom: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-page-row .cleaning-card-img-main {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .services-page-row .cleaning-card-img-main {
        height: 180px;
    }
}
</style>
@stop