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

<!-- INNER PAGE HERO SECTION -->
<section class="innerpage-main w-100">
    <img src="{{$pageData['Services']['top_banner_image'] ? asset('upload/images/'.$pageData['Services']['top_banner_image']) : asset('upload/placeholder.png')}}" class="img-fluid zoomAnim w-100 h-100" alt="">
    <div class="innerpage-main__overlay">
        <div class="container">
            <h1>{{ $pageData['Services']['heading'] ?? '' }}</h1>
        </div>
    </div>
</section>
<!-- !@INNER PAGE HERO SECTION -->

<!-- ABOUT SECTION -->
<section class="about-section abtinner" id="aboutSec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-5">
                <figure class="about-figure">
                    <img src="front-web-assets/images/about-img-overlay.webp" alt="" class=" obj">
                    <img src="{{$pageData['About']['first_image'] ? asset('upload/images/'.$pageData['About']['first_image']) : asset('upload/placeholder.png')}}" alt="" data-aos="zoom-out" class="img-fluid">
                    <figure class="img-sm" data-aos="zoom-in">
                        <img src="{{$pageData['About']['second_image'] ? asset('upload/images/'.$pageData['About']['second_image']) : asset('upload/placeholder.png')}}" alt="" class="img-fluid">
                        <img src="front-web-assets/images/about-img-obj.webp" alt="" class="img-fluid obj">
                    </figure>
                </figure>
            </div>
            <div class="col-md-7">
                <h6 class="subtitle" data-aos="fade-up">Services</h6>
                <h2 class="heading" data-aos="fade-up">{{ $pageData['About']['sub_heading'] ?? '' }}</h2>
                <p data-aos="fade-up">
                    {!! $pageData['About']['description'] ?? '' !!}
                </p>


                {{--                <div class="btngrp" data-aos="fade-up">--}}
                {{--                    <a href="contact.php" class="themeBtn">Read More</a>--}}
                {{--                    <a href="tel:+3038502695" class="btn btn-phone">--}}
                {{--                        <figure>--}}
                {{--                            <img src="front-web-assets/images/icons/icon-phone.webp" class="img-fluid" alt="">--}}
                {{--                        </figure>--}}
                {{--                        <div>--}}
                {{--                            <small>QUICK CALL</small>--}}
                {{--                            <span>{{$setting->phone_num ? : ''}}</span>--}}
                {{--                        </div>--}}
                {{--                    </a>--}}
                {{--                </div>--}}
            </div>
            <div class="col-12">
                <div class="icon-list inner">
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="front-web-assets/images/about-icon1.webp" class="img-fluid" alt="">
                        </figure>
                        <p>Individual therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="100">
                        <figure>
                            <img src="{{$pageData['About']['family_therapy'] ? asset('upload/images/'.$pageData['About']['family_therapy']) : asset('front-web-assets/images/about-icon4.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Family Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="150">
                        <figure>
                            <img src="{{$pageData['About']['filial_therapy'] ? asset('upload/images/'.$pageData['About']['filial_therapy']) : asset('front-web-assets/images/about-icon3.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Filial Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="200">
                        <figure>
                            <img src="{{$pageData['About']['sibling_therapy'] ? asset('upload/images/'.$pageData['About']['sibling_therapy']) : asset('front-web-assets/images/about-icon4.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Sibling Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="250">
                        <figure>
                            <img src="{{$pageData['About']['play_therapy'] ? asset('upload/images/'.$pageData['About']['play_therapy']) : asset('front-web-assets/images/about-icon6.webp')}}" class="img-fluid" alt="">

                        </figure>
                        <p>Play Therapy </p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="{{$pageData['About']['theraplay_therapy'] ? asset('upload/images/'.$pageData['About']['theraplay_therapy']) : asset('front-web-assets/images/about-icon6.webp')}}" class="img-fluid" alt="">

                        </figure>
                        <p>Theraplay Therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="100">
                        <figure>
                            <img src="{{$pageData['About']['group_therapy'] ? asset('upload/images/'.$pageData['About']['group_therapy']) : asset('front-web-assets/images/about-icon7.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Group therapy</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="150">
                        <figure>
                            <img src="{{$pageData['About']['havening_technique'] ? asset('upload/images/'.$pageData['About']['havening_technique']) : asset('front-web-assets/images/about-icon8.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Havening Technique</p>
                    </div>
                    <div class="icon-list-item" data-aos="fade-up" data-aos-delay="200">
                        <figure>
                            <img src="{{$pageData['About']['couple_therapy'] ? asset('upload/images/'.$pageData['About']['couple_therapy']) : asset('front-web-assets/images/about-icon9.webp')}}" class="img-fluid" alt="">
                        </figure>
                        <p>Couple's Therapy</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- !@ABOUT SECTION -->

<!-- INNER SERVICES SECTION -->
<section class="inner-services">
    <div class="container">
        @foreach($services as $index => $service)
            <div class="row align-items-center {{ $index % 2 == 0 ? '' : 'flex-row-reverse' }}">
                <div class="col-md-6">
                    <figure class="serv-img">
                        <img src="{{$service->image ? asset('upload/images/'.$service->image) : asset('upload/placeholder.png')}}" class="img-fluid" data-aos="zoom-out" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="services-text-content">
                        <h4 data-aos="fade-up">{{ $service->title ? : '' }}</h4>
                        <div class="col-md-10 p-0">
                            <p data-aos="fade-up">{!! $service->description ? : '' !!} </p>
                            <div data-aos="fade-up">
                                <a href="{{ route('front.contact') }}" class="btn themeBtn">Contact us</a>
                                <a href="{{ route('front.our.services.detail', ['id' => $service->id]) }}" class="btn themeBtn">Detail</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach



        <div class="text-center pt-5">
            <h2 class="heading  mx-auto my-5">{{ $pageData['Services']['psychedelic_assisted_therapy_heading'] ?? '' }}</h2>
        </div>
        @foreach($psychedelic_assisted_therapys as $index => $therapy)
            <div class="row align-items-center {{ $index % 2 == 0 ? '' : 'flex-row-reverse' }}">
                <div class="col-md-6">
                    <figure class="serv-img">
                        <img src="{{$therapy->image ? asset('upload/images/'.$therapy->image) : asset('upload/placeholder.png')}}" class="img-fluid" data-aos="zoom-out" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="services-text-content">
                        <h4 data-aos="fade-up">{{ $therapy->title ? : '' }}</h4>
                        <div class="col-md-12 p-0">

                            {!! $therapy->description ? : '' !!}
                            <div data-aos="fade-up">
                                <a href="{{ route('front.contact') }}" class="btn themeBtn">Contact us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach


    </div>
</section>
<!-- !@INNER SERVICES SECTION -->
@include('front.include.contact')

@endsection