@extends('front.layout.app')
<title>{{ $title ?? 'Services' }}</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>Services</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="aboutInner serviceInner">
            <div class="container">
                <h2 class="heading text-center pb-5">Our Services</h2>
                @foreach($services as $index => $service)
                    @if($index % 2 == 0)
                        <div class="row flex-row-reverse 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 ?? 'No detailed description available.' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6" data-aos="fade-up">
                                <a href="{{route('service.detail.front',$service->id)}}">
                                    <figure>
                                        <img
                                            src="{{ $service->getFirstMediaUrl('images') ?: asset('assets/images/default.jpg') }}"
                                            class="img-fluid" alt="{{ $service->name }}">
                                    </figure>
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="aboutContent">
                                    @if($service->name === 'Laser Blasting')
                                        <h3 class="heading">{{ $service->name }} (Coming Soon)</h3>
                                    @else
                                        <h3 class="heading">{{ $service->name }}</h3>
                                        @endif

                                    <p data-aos="fade-up">{{ $service->long_description ?? 'No detailed description available.' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6 text-right" data-aos="fade-up">
                                <a href="{{route('service.detail.front',$service->id)}}">
                                    <figure>
                                        <img
                                            src="{{ $service->getFirstMediaUrl('images') ?: asset('assets/images/default.jpg') }}"
                                            class="img-fluid" alt="{{ $service->name }}">
                                    </figure>
                                </a>
                            </div>
                        </div>
                    @endif
                @endforeach


            </div>
        </section>

    </main>

@endsection