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

    <!-- MAIN HERO SECTION -->
    <section class="mainSlider p-0">
        <div class="swiper-wrapper">
            @forelse($sliders as $slider)
                <div class="swiper-slide">
                    <img
                        src="{{$slider->image ? asset('upload/images/'.$slider->image) : asset('upload/placeholder.png')}}"
                        alt="image" class="img-fluid imgZoom">
                </div>
            @empty
                <h3 class="text-center"> Slider Not Found</h3>
            @endforelse

        </div>
        <div class="content">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8 col-md-6">
                        <div class="heroText">
                            <h1 data-swiper-parallax="-200">{{$slider->first_heading ? : ''}}</h1>
                            <h4 data-swiper-parallax="-200">{{$slider->second_heading ? : ''}}</h4>
                            <div data-swiper-parallax="-200">
                                {!! $slider->description ?? '' !!}
                            </div>
                            <div class="btngrp">
                                <a href="{{route('front.contact')}}" class="themeBtn">Contact us</a>
                                <a href="tel:+3038502695" class="btn btn-phone">
                                    <figure>
                                        <img src="{{asset("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>
                    <div class="col-lg-4 col-md-5">
                        <div class="bannerForm-wrap">
                            <h3>Learn More About our Services</h3>
                            <p>Provide your contact information and we’ll get back to you promptly.</p>
                            <form action="{{ route('front.services-form-submit') }}" class="bannerForm" method="POST">
                                @csrf
                                <input type="text" name="name" placeholder="Full Name">
                                <input type="tel" name="contact" placeholder="Contact Number">
                                <input type="email" name="email" placeholder="Email Address">
                                <textarea cols="6" name="message" rows="5" placeholder="Your Message"></textarea>
                                {{--<label for="checkBox" class="bannerForm-checkbox">
                                    <input type="checkbox" id="checkBox">
                                    title here
                                </label>--}}
                                <select class="js-example-basic-multiple" name="services[]" multiple >
                                    <option value="" disabled>Select Therapy</option>s
                                @foreach($services as $service)
                                        <option value="{{ $service->id }}">{{ $service->title }}</option>
                                    @endforeach
                                </select>
                                <button type="submit" class="themeBtn border-0 w-100">submit message</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="social-link">
            <li>
                <a href="{{$setting->facebook ? : ''}}"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li>
                <a href="{{$setting->twitter ? : ''}}"><i class="fab fa-twitter"></i></a>
            </li>
            <li>
                <a href="{{$setting->instagram ? : ''}}"><i class="fab fa-instagram"></i></a>
            </li>
            <li><span class="line"></span></li>
            <li class="downlink">
                <a href="#aboutSec">
                    <span class="text">Scroll To Explore</span>
                    <span class="mouse-icon"><span></span></span>
                </a>
            </li>
        </ul>
        <div class="container">
        </div>
    </section>
    <!-- !@MAIN HERO SECTION -->



    <!-- ABOUT SECTION -->
    <section class="about-section" 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="front-web-assets/images/black3.avif" alt="" data-aos="zoom-out" class="img-fluid">
                        <figure class="img-sm" data-aos="zoom-in">
                            <img src="front-web-assets/images/about-img2.webp" 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">{{ $pageData['About']['heading'] ?? '' }}  </h6>
                    <h2 class="heading" data-aos="fade-up">{{ $pageData['About']['sub_heading'] ?? '' }}</h2>
                    <p data-aos="fade-up">
                        {!! $pageData['About']['description'] ?? '' !!}
                    </p>
                    <div class="icon-list">
                        <div class="icon-list-item" data-aos="fade-up" data-aos-delay="50">
                            <figure>
                                <img
                                    src="{{$pageData['About']['individual_therapy'] ? asset('upload/images/'.$pageData['About']['individual_therapy']) : asset('front-web-assets/images/about-icon2.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('ront-web-assets/images/about-icon9.webp')}}"
                                    class="img-fluid" alt="">
                            </figure>
                            <p>Couple's Therapy</p>
                        </div>
                    </div>
                    <div class="btngrp" data-aos="fade-up">
                        <a href="about.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>
        </div>
    </section>
    <!-- !@ABOUT SECTION -->

    <!-- FEATURE SECTION -->
    {{--    <section class="feature-section">--}}
    {{--        <div class="container">--}}
    {{--            <div class="text-center">--}}
    {{--                <h6 class="subtitle" data-aos="fade-up">{{ $pageData['Feature']['title'] ?? '' }}</h6>--}}
    {{--                <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['Feature']['sub_heading'] ?? '' }}</h2>--}}
    {{--            </div>--}}
    {{--            <div class="row">--}}
    {{--                    @forelse($features as $feature)--}}
    {{--                <div class="col-md-4">--}}
    {{--                    <div class="feature-card" data-aos="fade-up" data-aos-delay="50">--}}
    {{--                        <figure>--}}
    {{--                            <img src="{{$feature->image ? asset('upload/images/'.$feature->image) : asset('upload/placeholder.png')}}" class="img-fluid" alt="">--}}
    {{--                        </figure>--}}

    {{--                        <div class="card-content">--}}
    {{--                            <h4>{{$feature->title ? : ''}}</h4>--}}
    {{--                            <p>--}}
    {{--                                {!! $feature->description ? : '' !!}--}}
    {{--                            </p>--}}
    {{--                            <a href="{{route('front.about')}}" class="btn themeBtn">Read More</a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--                @empty--}}
    {{--                        <h3 class="text-center">Feature Not Found</h3>--}}
    {{--                @endforelse--}}

    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </section>--}}
    <!-- !@FEATURE SECTION -->

    <!-- SERVICES SECTION -->
    <section class="services-section">
        <div class=" container">
            <div class="text-center">
                <h6 class="subtitle" data-aos="fade-up">{{ $pageData['Services']['heading'] ?? '' }}</h6>
                <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['Services']['sub_heading'] ?? '' }}</h2>
            </div>
            <div class="services-list">
                @forelse($services as $service)
                    <div class="services-item">
                        <div class="row align-items-center {{ $loop->odd ? 'flex-row-reverse' : '' }}">
                            <div class="col-md-6">
                                <figure data-aos="{{ $loop->odd ? 'fade-right' : 'fade-left' }}">
                                    <img
                                        src="{{$service->image ? asset('upload/images/'.$service->image) : asset('upload/placeholder.png')}}"
                                        class="img-fluid" alt="">
                                </figure>
                            </div>
                            <div class="col-md-5 {{ $loop->odd ? 'mr-auto' : '' }}">
                                <div class="service-content">
                                    <h4 data-aos="{{ $loop->odd ? 'fade-left' : 'fade-right' }}">{{ $service->title }}</h4>
                                    <p data-aos="{{ $loop->odd ? 'fade-left' : 'fade-right' }}">{!! $service->description !!}</p>
                                    <div data-aos="{{ $loop->odd ? 'fade-left' : 'fade-right' }}">
                                        <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>
                @empty
                    <h3 class="text-center">Services Not Found</h3>
                @endforelse

            </div>
        </div>
    </section>
    <!-- !@SERVICES SECTION -->

    <!-- CTA SECTION -->
    <section class="cta-section p-0">
        <div class="container">
            <div class="cta-box">
                <div class="col-lg-8 p-0">
                    <h6 class="subtitle text-white" data-aos="fade-up">Any Problem</h6>
                    <h2 class="heading text-white border-0" data-aos="fade-up">Reach Out to Us to Avail of Our Services
                        and Allow Our Team to Help you in Your Well-Being Journey.</h2>
                    <div data-aos="fade-up">
                        <a href="contact.php" class="btn themeBtn">Contact us</a>
                    </div>
                </div>
            </div>
            <img src="front-web-assets/images/couple-img.webp" class="img-fluid obj" data-aos="fade-left" alt="">
        </div>
    </section>
    <!-- !@CTA SECTION -->

    <!-- VIDEO SECTION -->
    {{--    <section class="video-section">--}}
    {{--        <div class="container">--}}
    {{--            <div class="text-center">--}}
    {{--                <h6 class="subtitle" data-aos="fade-up">{{ $pageData['About']['video_heading'] ?? '' }}</h6>--}}
    {{--                <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['About']['video_sub_heading'] ?? '' }}</h2>--}}
    {{--                <p data-aos="fade-up">  {!! $pageData['About']['video_short_description'] ?? '' !!}</p>--}}
    {{--                <figure class="video-box" data-aos="fade-up">--}}
    {{--                    <img src="{{$pageData['About']['video_first_image'] ? asset('upload/images/'.$pageData['About']['video_first_image']) : asset('upload/placeholder.png')}}" class="img-fluid" alt="">--}}

    {{--                    <div class="control-box">--}}
    {{--                        <a href="{{ $pageData['About']['Video'] ?? '' }}" data-fancybox="">--}}
    {{--                            <i class="fas fa-play"></i>--}}
    {{--                        </a>--}}
    {{--                        <img src="front-web-assets/images/icons/left-icon.webp" class="img-fluid" alt="">--}}
    {{--                    </div>--}}
    {{--                </figure>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </section>--}}
    <!-- !@VIDEO SECTION -->

    <!-- FAQ SECTION -->
    {{--<section class="faq-section">
        <div class="container">
            <div class="text-center">
                <h6 class="subtitle text-white" data-aos="fade-up">FAQ'S</h6>
                <h2 class="heading text-white mx-auto border-white" data-aos="fade-up">frequently asked questions</h2>
                <div class="col-lg-9 col-md-11 mx-auto">
                    <div class="accordion" id="faqModule">

                        @foreach($faqs as $key => $faq)

                        <div class="accordion-item" data-aos="fade-up">
                            <div class="card-header" id="{{$key}}">

                                <button class="btn {{$key == 0 ? 'show' : 'collapsed'}}" type="button" data-toggle="collapse" data-target="#collapseOne{{$key}}" aria-expanded="{{$key == 0 ? 'true' : 'false'}}" aria-controls="{{$key}}">
                                    <span>{{ str_pad($key+1, 2, '0', STR_PAD_LEFT) }}</span> {{ $faq->title ?? '' }}

                                </button>
                            </div>

                            <div id="collapseOne{{$key}}" class="collapse {{$key == 0 ? 'show' : ''}}" aria-labelledby="faqOne{{$key}}" data-parent="#faqModule">
                                <div class="card-body">
                                    <p> {!! $faq->description ?? '' !!}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
                <div data-aos="fade-up">
                    <a href="{{route('front.contact')}}" class="btn themeBtn">Contact us</a>
                </div>
            </div>
        </div>
    </section>--}}
    <!-- !@FAQ SECTION -->


    <!-- STATISTICS SECTION -->
    {{--<section class="statistics-section">
        <div class="container">
            <div class="text-center mb-4">
                <h6 class="subtitle" data-aos="fade-up">{{ $pageData['CompanyStatistic']['heading'] ?? '' }}</h6>
                <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['CompanyStatistic']['sub_heading'] ?? '' }}</h2>
            </div>
            <div class="row no-gutters card-row1">
                @forelse( $company_statistics as  $company_statistic)

                <div class="col-md-3 col-sm-9">
                    <div class="statistics-card" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="{{$company_statistic->image ? asset('upload/images/'.$company_statistic->image) : asset('upload/placeholder.png')}}" alt="" class="img-fluid">
                        </figure>
                        <p>{{$company_statistic->title}}</p>
                        <h4><span>{{$company_statistic->number}}</span>+</h4>
                    </div>
                </div>
                @empty
                    <h3 class="text-center">COMPANY STATISTICS Not Found</h3>
                @endforelse

            </div>
        </div>
    </section>--}}
    <!-- !@STATISTICS SECTION -->

    <!-- TESTIMONIAL SECTION -->
    {{-- <section class="testimonial-section">
         <div class="container">
             <div class="text-center">
                 <h6 class="subtitle" data-aos="fade-up">{{ $pageData['Testimonials']['heading'] ?? '' }}</h6>
                 <h2 class="heading mx-auto" data-aos="fade-up">{{ $pageData['Testimonials']['sub_heading'] ?? '' }}</h2>
             </div>
             <div class="swiper reviewSlider" data-aos="fade-up">
                 <div class="swiper-wrapper">

                     @forelse($testimonials as  $testimonial)
                     <div class="swiper-slide">
                         <div class="review-card">
                             <figure>
                                 <img src="front-web-assets/images/user1.webp" alt="user" class="img-fluid">
                             </figure>
                             <h3>- {{$testimonial->title ? : ''}}</h3>
                             <p>{!! $testimonial->description ? : '' !!} </p>
                             <ul class="rating">
                                 <li><i class="fas fa-star"></i></li>
                                 <li><i class="fas fa-star"></i></li>
                                 <li><i class="fas fa-star"></i></li>
                                 <li><i class="fas fa-star"></i></li>
                                 <li><i class="fas fa-star"></i></li>
                             </ul>
                         </div>
                     </div>
                     @empty
                         <h3 class="text-center">Testimonials Not Found</h3>
                     @endforelse

                 </div>
                 <div class="swiper-pagination"></div>
             </div>
         </div>
     </section>--}}
    <!-- !@TESTIMONIAL SECTION -->

    <!-- BLOG SECTION -->
    {{--<section class="blog-section">
        <div class="container">
            <div class="text-center">
                <h6 class="subtitle" data-aos="fade-up">OUR LATEST BLOGS</h6>
                <h2 class="heading mx-auto" data-aos="fade-up">Read our weekly blogs about</h2>
            </div>
            <div class="row">
                @forelse($blogs as  $blog)
                <div class="col-md-4">
                    <div class="blog-card" data-aos="fade-up" data-aos-delay="50">
                        <figure>
                            <img src="{{ asset('storage/' . $blog->image) }}" alt="" class="img-fluid">
                        </figure>
                        <h4>{{$blog->title ? : ''}}</h4>


                        <p>{!! \Illuminate\Support\Str::limit(strip_tags($blog->detail), 110, '...') !!}</p>
                        <a href="{{route('front.blog')}}" class="btn themeBtn">Read More</a>
                    </div>
                </div>

                @empty
                    <h3 class="text-center">BLOGS Not Found</h3>
                @endforelse
            </div>
        </div>
    </section>--}}
    <!-- !@BLOG SECTION -->

    @include('front.include.contact')
@endsection
@push('script')


<!-- Your custom script and Select2 initialization -->
<script>
    var h4Element = document.querySelectorAll('.heroText h4');

    h4Element.forEach((h4Element1) => {
        var textContent = h4Element1.textContent;
        var words = textContent.split(' ');
        var lastWord = words.pop();
        var spanElement = document.createElement('span');
        spanElement.textContent = lastWord;
        textContent = words.join(' ');
        h4Element1.textContent = textContent;
        h4Element1.appendChild(spanElement);
    });

    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({
            placeholder: 'Select Therapy' // Set your desired placeholder text
        });
    });
</script>
@endpush