@extends('layouts.front_app')

@section('content')
    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse($slider as $sliders)
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" data-background="{{ $sliders->image }}">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-6">
                                    <div class="slideOne text-center">
                                        <h1 class="mainHeading" data-swiper-parallax="-200">
                                            {!! $sliders->title !!}
                                        </h1>
                                        <a href="{{ route('front.contact') }}" class="themeBtn">Book A RESERVATION</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <div class="swiper-slide"></div>
                @endforelse
            </div>
        </div>
    </section>

    <section class="aboutSec">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 col-md-6">
                    <div class="aboutContent" data-aos="fade-right">
                        <h2 class="mainHeading">{{ $data['section1_heading'] ?? '' }}</h2>
                        <span>{{ $data['section1_title'] ?? ''  }}</span>
                        <p>{!! $data['section1_detail'] ?? ''  !!}</p>
                        <div class="btn-group">
                            <a href="{{ route('front.contact') }}" class="themeBtn">Contact us</a>
                            <a href="{{ route('front.about.us') }}" class="themeBtn themeBtn1">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6" data-aos="fade-up">
                    <div class="aboutImg">
                        <img src="{{ asset('storage/' . $data['section1_image']) }}" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
        </div>
        <img src="images/path1.webp" data-aos="zoom-in" class="img-fluid pathOne" alt="">
    </section>

    <section class="teamSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-3" data-aos="fade-up">Meet The Team</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper teamSlider">
                        <div class="swiper-wrapper">
                            @forelse($our_team as $our_teams)
                                <div class="swiper-slide">
                                    <div class="teamWrap">
                                        <figure>
                                            <img src="{{ $our_teams->image }}" class="img-fluid" alt="">
                                        </figure>
                                        <div class="teamContent">
                                            <h3>{{ $our_teams->title }}</h3>
                                            <p>{!! $our_teams->detail !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="swiper-slide"></div>
                            @endforelse
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </section>

    {{--calendar--}}
    <section class="calenderSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <div id="calendar"></div>
                </div>
                <div class="col-md-5">
                    <figure>
                        <img src="images/clanderdog.png" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="dogsections">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <figure>
                        <img src="images/dogssection.png" class="img-fluid w-100 h-100" alt="image">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="serviceSec">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10 text-center" data-aos="fade-up">
                    <h2 class="mainHeading">Services</h2>
                    <p>{!! $service->content['detail'] ?? '' !!} </p>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="swiper serviceSlider mt-4">
                        <div class="swiper-wrapper">

                            @foreach($services as $service)

                            <div class="swiper-slide">
                                <div class="serviceWraps" data-aos="fade-up">
                                    <figure>
                                        <img src="{{$service->image??''}}" class="img-fluid" alt="">
                                    </figure>
                                    <div class="serviceContent">
                                        <h3>{{$service->title ?? ''}}</h3>
                                        <a href="{{ route('front.services') }}" class="themeBtn2">learn More</a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-button-next swiper-button-next3"></div>
                    <div class="swiper-button-prev swiper-button-prev3"></div>
                </div>
            </div>
        </div>
        <img src="images/path2.webp" data-aos="zoom-in" class="img-fluid pathTwo" alt="">
    </section>

    <section class="careSec">
        <div class="lineCenter innerline">
            <span class="mainLine"></span>
            <span class="circleTop"></span>
            <span class="circleTop circle1"></span>
            <span class="circleTop circle2"></span>
            <span class="circleTop circle3"></span>
            <span class="circleTop circle4"></span>
            <span class="circleTop circle5"></span>
            <span class="circleTop circle6"></span>
            <span class="circleTop circle7"></span>
            <span class="circleTop circle8"></span>
            <span class="circleTop circle9"></span>
        </div>
        <div class="container">
            <h2 class="mainHeading text-center mb-5" data-aos="fade-up">Dog Care</h2>
            @forelse($services as $service)
                <div class="row justify-content-between {{ $loop->even ? 'flex-row-reverse' : '' }}">

                    <div class="col-md-5">
                        <div class="careContent" data-aos="{{ $loop->even ? 'fade-right' : 'fade-left' }}">
                            <h3>{{ $service->title }}</h3>
                            <p class="w-100">{!! htmlspecialchars_decode($service->detail) !!}</p>

                            {{--                            <p class="w-100">{!! $service->detail !!}</p>--}}
                            <a href="{{ route('front.contact') }}" class="themeBtn2">Get InTouch</a>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="careImg care__img" data-aos="{{ $loop->even ? 'fade-right' : 'fade-left' }}">
                            <img src="{{ $service->image }}" class="img-fluid w-100" alt="">
                        </div>
                    </div>

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

    <section class="picutreSec">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper pictureSlider">
                        <div class="swiper-wrapper">
                            @forelse($services as $service)
                                <div class="swiper-slide">
                                    <div class="pictureWrap">
                                        <img src="{{ $service->image }}" class="img-fluid" alt="">
                                    </div>
                                </div>
                            @empty
                                <h3 class="text-center">Service Not Found</h3>
                            @endforelse

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonialSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Testimonials</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper testimonialSlider">
                        <div class="swiper-wrapper">
                            @forelse($testimonial as $testimonials)
                            <div class="swiper-slide">
                                <div class="testimonialWraps">
                                    <div class="userName">
                                        <h3>{{ $testimonials->title }}</h3>
                                        <ul>
                                            <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="far fa-star"></i></li>
                                        </ul>
                                        <div class="quote"><i class="fas fa-quote-right"></i></div>
                                    </div>
                                    <p>{!! $testimonials->detail !!}</p>
{{--                                    <div class="testImg">--}}
{{--                                        <img src="images/testPath.webp" class="img-fluid img1" alt="">--}}
{{--                                        <img src="{{ $testimonials->image }}" class="img-fluid img2" alt="">--}}
{{--                                    </div>--}}
                                    <div class="testImg">
                                        <img src="images/testPath.webp" class="img-fluid img1" alt="">
                                        <img src="{{ $testimonials->image }}" class="img-fluid img2" alt="">
                                    </div>
                                </div>
                            </div>
                            @empty
                                <h3 class="text-center">Testimonial Not Found</h3>
                            @endforelse

                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center mt-5">
                    <a href="{{ route('front.testimonials') }}" class="themeBtn2">View All</a>
                </div>
            </div>
        </div>
        <img src="images/path4.webp" data-aos="zoom-in" class="img-fluid pathForth" alt="">
    </section>

{{--    <section class="faqPage">--}}
{{--        <div class="container">--}}
{{--            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Ask Me Anything</h2>--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-12 col-sm-12">--}}
{{--                    <div class="faq">--}}
{{--                        <div id="accordion" class="accordionStyle">--}}
{{--                            @forelse($faq as $key => $faqs)--}}
{{--                            <div class="card">--}}
{{--                                <div class="card-header" id="headingOne">--}}
{{--                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne{{$key}}"--}}
{{--                                            aria-expanded="true" aria-controls="collapseOne"><span>{{ $key+1 }}</span>--}}
{{--                                        {{ $faqs->title }}<i--}}
{{--                                            class="far fa-angle-down"></i></button>--}}
{{--                                </div>--}}
{{--                                <div id="collapseOne{{$key}}" class="collapse {{ $key == 0 ? 'show' : '' }} " aria-labelledby="headingOne"--}}
{{--                                     data-parent="#accordion">--}}
{{--                                    <div class="card-body">--}}
{{--                                        <p>{!! $faqs->detail !!}.</p>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            @empty--}}
{{--                                <h3 class="text-center">FAQ Not Found</h3>--}}
{{--                            @endforelse--}}


{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}

    <section class="faqPage">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Ask Me Anything</h2>
            <div class="row">
                <div class="col-lg-12 col-sm-12">
                    <div class="faq">
                        <div id="accordion" class="accordionStyle">

                            @forelse($faq as $key => $faqItem)
                                <div class="card">
                                    <div class="card-header" id="heading{{$key}}">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$key}}"
                                                aria-expanded="{{ $key === 0 ? 'true' : 'false' }}" aria-controls="collapse{{$key}}">
                                            <span>{{ $key+1 }}</span>{{ $faqItem->title }}
                                            <i class="far fa-angle-down"></i>
                                        </button>
                                    </div>
                                    <div id="collapse{{$key}}" class="collapse {{ $key === 0 ? 'show' : '' }}" aria-labelledby="heading{{$key}}"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            <p>{!! $faqItem->detail !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="text-center">FAQ Not Found</h3>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="gallerySec galleryInner">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Photo Gallery</h2>

            <div class="galleryMain">
                <div class="row">


                    @forelse($gallery as $galleries)
                        <div class="col-md-3">
                            <div class="galleryWraps" data-aos="fade-up">
                                <a href="{{ asset('storage/' . $galleries->image) }}" data-fancybox=""
                                   class="galleryImg">
                                    <img src="{{ asset('storage/' . $galleries->image) }}" class="img-fluid w-100 h-100"
                                         alt="image">
                                </a>
                            </div>
                        </div>
                    @empty
                        <h3 class="text-center">Gallery Not Found</h3>
                    @endforelse
                        <div class="col-md-12 text-center mt-3">
                            <a href="{{asset('gallery')}}" class="themeBtn2">View All</a>
                        </div>
                </div>
            </div>
        </div>
    </section>


    <section class="blogSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">From Our Blog</h2>
            <div class="row">
                @forelse($blog as $blogs)
                <div class="col-md-4">
                    <div class="blogWraps" data-aos="fade-up">
                        <figure>
                            <img src="{{ $blogs->image }}" class="img-fluid" alt="">
                        </figure>
                        <div class="blogContent">
                            <h3>{{ $blogs->title }}</h3>
                            <p>{!! $blogs->detail !!}</p>
                            <a href="{{ route('front.blog') }}" class="themeBtn2">learn More</a>
                        </div>
                    </div>
                </div>
                @empty
                    <h3 class="text-center">Blog Not Found</h3>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Modal -->

    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalTitle">Event Title</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <p><strong>Date:</strong> <span id="modalDate"></span></p>
                <p><strong>Description:</strong> <span id="modalDescription"></span></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
            </div>
          </div>
        </div>
      </div>

    @include('front.include.contact-form')
@endsection

@push('calendar_script')
    <script>
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            navLinks: true,
            editable: true,
            eventLimit: true,
            events: null,
            eventClick: function(calEvent, jsEvent, view) {
                $('#eventModal').modal('show');
                $('#modalTitle').text(calEvent.title); // Update modal title
                $('#modalDate').text(calEvent.start.format('YYYY-MM-DD')); // Update modal date
                $('#modalDescription').text(calEvent.description); // Update modal description
            }
        });
    </script>
@endpush