@extends('front.include.app')
@section('content')
    <div class="inner-bann">
       <img src="{{ optional($serviceCMS)->getFirstMediaUrl('banner_image') ?: asset('front/images/servc-banner.webp') }}" class="img-fluid" alt="">
           
        <div class="overlay">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-12">
                        <h2>{{  optional($serviceCMS)->banner_title ?? 'Services' }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="services-sec service-page">
        <div class="container">
            <div class="services-main text-center" data-aos="fade-up">
                <h3 class="subHead">{{ $serviceCMS->services_subhead ?? 'our services' }}</h3>
                <h2 class="mainHead">{{ $serviceCMS->services_heading ?? 'How We Support Your Journey' }}</h2>
            </div>

            @foreach ($services as $key => $s)
                <div class="row align-items-center {{ $key % 2 == 0 ? 'flex-row-reverse' : '' }} mb-5" data-aos="fade-up">
                    <div class="col-md-3">
                        <div class="services-wrapp">
                            <figure class="services-img">
                                <img src="{{ $s->getFirstMediaUrl('service_image') ?: asset('front/images/s-1.webp') }}"
                                    class="img-fluid" alt="">
                            </figure>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="services-wrapp">
                            <h3>{{ $s->title }}</h3>
                            <p>{{ $s->full_description }}</p>
                            <a href="{{ route('front.calender') }}" class="themeBtn">Join Now</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="subscribe-sec service-subscribe">
        <div class="container">
            <div class="text-center" data-aos="fade-up">
                <h3 class="subHead">{{ optional($homeContent)->subscription_subhead ?? 'subscription' }}</h3>
                <h2 class="mainHead">{{ optional($homeContent)->subscription_heading ?? 'Affordable Plans' }}</h2>
            </div>
            <div class="row" data-aos="fade-up">
                @foreach(optional($homeContent)->plans ?? [] as $plan)
                <div class="col-md-4">
                    <div class="subscribe-wrapp">
                        <div class="subscribe-main">
                            <div class="subs-top">
                                <h2>{{ $plan['name'] }}</h2>
                                <h5><sup>$</sup><strong>{{ $plan['price'] }}</strong><small>{{ $plan['duration'] }}</small></h5>
                            </div>
                            <div class="subscribe-content">
                                <p>{{ $plan['description'] }}</p>
                                <a href="{{ route('front.calender') }}" class="themeBtn">Pay Now</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection