@extends('layouts.front-layout')
@section('title') Services @endsection

@section('content')
    <section class="main-slider innerBanner" id="mainSlider">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="slideOne">
                        <h1>{{$pageData['Services']['services_top_banner_title']}}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="serviceSec serviceInner">
        <div class="container">
            <h2 class="mainHeading text-center mb-5" data-aos="fade-up">{{$pageData['Services']['services_top_banner_title']}}</h2>

            @forelse($get_services as $index =>  $service)

                <div class="row align-items-center no-gutters {{ $index % 2 == 0 ? '' : 'flex-row-reverse align-items-center no-gutters' }}">

                <div class="col-md-6">
                    <div class="srvImg">
                        <img src="{{$service->servicesImage('services_image') ? : ''}}" class="img-fluid" alt="">
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="srvText">
                        <h3>{{$service->heading ? : ''}}</h3>
                        {!! $service->description ? : '' !!}
                        <a href="{{route('tournament.schedule')}}" class="themeBtn">US Tournament Schedule</a>
                    </div>
                </div>
            </div>

            @empty
                <h1 class="mx-auto text-danger">Services Data Not Found </h1>
            @endforelse
        </div>
    </section>
@endsection