@extends('front.layout.app')
<title>{{ $title ?? 'Service Detail' }}</title>
@section('content')
    <main>

        <!-- Banner -->
        <section class="banner innerBanner">
            <div class="container">
                <div class="banner__content">
                    <div class="row">
                        <div class="col-lg-6">
                            <h1>Service Details</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="aboutInner serviceInner">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="aboutContent">
                            <h3 class="heading">{{ $service->name ?? '' }}</h3>
                            <p data-aos="fade-up">
                                {{ $service->long_description ?? '' }}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 text-right" data-aos="fade-up">
                        <figure>
                            <!-- Display the first image -->
                            <img src="{{ $service->getFirstMediaUrl('images') }}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>

                <!-- Only show this section if there are more than one image -->
                @if ($service->getMedia('images')->count() > 1)
                    <div class="row">
                        <div class="col-12">
                            <h4>Additional Images</h4>
                            <div class="additional-images">
                            @foreach ($service->getMedia('images')->skip(1) as $media) <!-- Skip the first image -->
                            <br>
                                <figure>
                                    <img src="{{ $media->getUrl() }}" class="img-fluid" alt="">
                                </figure>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>


    </main>
@endsection