@extends('layouts.front-layout')

@section('content')

    <div class="preLoader black">
        <img src="{{( isset($setting) && $setting->getFirstMediaUrl('logo') ?  $setting->getFirstMediaUrl('logo') : asset('upload/placeholder.png'))}}
            " alt="img">
    </div>
    <div class="preLoader white"></div>
    <section class="innerBaner">
        <img src="{{( isset($service_single) && $service_single->getFirstMediaUrl('services_top_banner_image') ?  $service_single->getFirstMediaUrl('services_top_banner_image') : asset('upload/placeholder.png'))}}" class="w-100" alt="img">
        <div class="container">
            <div class="content">
                <h2>{{ $pageData['Services']['top_title'] ?? '' }}</h2>
                <!-- <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li><i class="far fa-long-arrow-alt-right"></i></li>
                    <li><span>{{ $pageData['Services']['top_title'] ?? '' }}</span></li>
                </ul> -->
            </div>
        </div>
    </section>


    @forelse($services as $index => $service)
    <section class="about-page {{ $index % 2 == 0 ? '' : 'services--page' }}">

            <div class="container">
                <div class="row align-items-center {{ $index % 2 == 0 ? '' : 'flex-row-reverse' }}">
                    <div class="col-md-6">
                        <figure class="abt_img">
                            <img src="{{ $service->getFirstMediaUrl('services_image') ? $service->getFirstMediaUrl('services_image') : asset('upload/placeholder.png') }}" class="img-fluid" alt="img">
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <div class="aboutpg-content">
                            <!-- <h2 class="sub-heading">{{ $service->title ?: '' }}</h2> -->
                            <h3 class="heading">{{ $service->heading ?: '' }}</h3>
                            <p>{!! $service->description ?: '' !!}</p>
                        </div>
                    </div>
                </div>
            </div>

    </section>
    @empty
        <h3 class="text-center">Services Not Found</h3>
    @endforelse



@endsection