@extends('frontend.layouts.master')
@section('title') {{ __('header.home_title') }} @endsection
@section('main-content')
@include('frontend.layouts.notification')
@php
    $banners = $banners ?? [];
@endphp


    <!-- Body main wrapper start -->
    <main class="main-area fix">
        @if(count($banners) > 0)
        <!-- Banner area start -->
        <section class="bd-banner-area banner-style-two banner-slider-mask">
            <div class="banner-booking-two">
                <div class="container">
                    <form action="{{route('tour.search')}}" method="POST">
                        @csrf
                    <div class="row justify-content-center">
                        <div class="col-xxl-8 col-xl-10 col-lg-11">
                            <div class="banner-search-wrapper style-two wow fadeIn" data-wow-delay="1.2s">
                                <div class="banner-search-box">
                                    <div class="banner-search-form">
                                        <div class="banner-search-field has-separator d-flex align-items-center gap-10">
                                            <div class="search-icon-bg">
                                                <span><i class="fa-regular fa-location-dot"></i></span>
                                            </div>
                                            <div class="form-group">
                                                <p class="b2 mb-0 fw-5">Where to</p>
                                                    <select name="location" id="location" class="form-control">
                                                        @foreach($location_categories as $location_category)
                                                        <option value="{{$location_category->id}}">{{$location_category->title}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                        </div>
                                        <div class="banner-search-field has-separator d-flex align-items-center gap-10">
                                            <div class="search-icon-bg">
                                                <span><i class="icon-cleander"></i></span>
                                            </div>
                                            <div class="banner-search-item">
                                                <p class="b2 mb-0 fw-5">Duration</p>
                                                <div class="banner-form-input">
                                                    <input type="text" name="duration" class="form-control" id="selectingMultipleDates" type="text" placeholder="Select Your date" readonly="readonly">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="banner-search-field d-flex align-items-center gap-10">
                                            <div class="search-icon-bg">
                                                <span><i class="fa-regular fa-location-dot"></i></span>
                                            </div>
                                            <div class="form-group">
                                                <p class="b2 mb-0 fw-5">Tour Types</p>
                                                <div class="form-group">
                                                    <select name="tour_type" id="tour_type" class="form-control">
                                                        @foreach($tour_tags as $tour_tag)
                                                        <option value="{{$tour_tag->id}}">{{$tour_tag->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="banner-search-button">
                                        <button type="submit" class="banner-btn banner-square-btn bd-btn btn-style radius-10"><span>
                                    <i class="fa-regular fa-magnifying-glass"></i></span> Search
                                        </button>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
            <div class="swiper banner-two-active p-relative">
                <div class="swiper-wrapper">
                    @foreach($banners as $key => $banner)
                    <div class="swiper-slide {{ $key == 0 ? 'active' : '' }}">
                        <div class="banner-slider-wrapper">
                            <div class="banner-two-image" data-background="{{ Storage::url($banner->photo) }}">
                            </div>
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-xxl-9 col-xl-9 col-lg-10">
                                        <div class="banner-two-content">
                                            <h1 class="banner-title medium fw-7 mb-20 white-text">
                                                {{ $banner->title }}
                                            </h1>
                                            <p class="banner-description mb-20" style="font-size: 26px;" ><strong>{{ $banner->subtitle }}</strong></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <!-- navigation button start -->
                <div class="banner-nav-btn d-none d-md-block">
                    <div class="banner-navigation-btn-2">
                        <button class="banner-navigation-prev"><i class="fa-regular fa-angle-left"></i></button>
                        <button class="banner-navigation-next"><i class="fa-regular fa-angle-right"></i></button>
                    </div>
                </div>
                <!-- navigation button end -->
            </div>
        </section>
        <!-- Banner area start -->
        @endif
        <!-- chose area start -->
        <section class="bd-chose-area section-space">
            <div class="container">
                <div class="row align-items-center justify-content-center section-title-space">
                    <div class="col-xl-6">
                        <div class="section-title-wrapper text-center">
                            <span class="section-subtitle mb-10">Why chose us</span>
                            <h2 class="section-title">Our Unique Offerings</h2>
                        </div>
                    </div>
                </div>
                <div class="row gy-24">
                    <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                        <div class="chose-wrapper">
                            <div class="chose-item">
                                <div class="chose-icon"><span><i class="fa-regular fa-user"></i></span></div>
                                <h6 class="chose-title">Expert Guidance</h6>
                                <p class="chose-desc">Access to knowledgeable travel agents we can provide personalized and
                                    insights based on your preferences and budget.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".4s">
                        <div class="chose-wrapper">
                            <div class="chose-item">
                                <div class="chose-icon"><i class="icon-hourglass"></i></div>
                                <h6 class="chose-title">Time Efficiency</h6>
                                <p class="chose-desc">Save time by letting professionals handle itinerary planning, booking
                                    accommodations, transportation, and activities.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                        <div class="chose-wrapper">
                            <div class="chose-item">
                                <div class="chose-icon"><i class="fa-sharp fa-light fa-face-smile"></i></div>
                                <h6 class="chose-title">Stress Reduction</h6>
                                <p class="chose-desc">Minimize stress and hassle associated with trip planning, especially for
                                    complex itineraries or unfamiliar destinations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".6s">
                        <div class="chose-wrapper">
                            <div class="chose-item">
                                <div class="chose-icon"><i class="fa-sharp fa-regular fa-lock"></i></div>
                                <h6 class="chose-title">Safety and Security</h6>
                                <p class="chose-desc">Benefit from enhanced safety measures, emergency support, and assistance
                                    in case of circumstances during your travels.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- chose area end -->        
        <!-- destination area start -->
        <section class="bd-destination-area section-space p-relative half-bg">
            <div class="container">
                <div class="row gy-24 align-items-center justify-content-between section-title-space">
                    <div class="col-xl-6 col-md-7">
                        <div class="section-title-wrapper">
                            <span class="section-subtitle white-text mb-10">Destinations</span>
                            <h2 class="section-title white-text">Featured Destinations</h2>
                        </div>
                    </div>
                    <div class="col-xl-2 col-md-3">
                        <div class="destination-btn text-md-end">
                            <a href="{{route('destination')}}" class="bd-primary-btn btn-style has-arrow is-bg btn-tertiary is-white radius-60">
                                <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                <span class="bd-primary-btn-text">See all</span>
                                <span class="bd-primary-btn-circle"></span>
                                <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="swiper activity-activation">
                    <div class="swiper-wrapper">
                        @if($destinations->isNotEmpty())  
                        @foreach($destinations as $destination)
                        <div class="swiper-slide">
                            <div class="activity-wrapper activity-style-three">
                                <div class="activity-thumb image-overly">
                                    <a href="{{route('destination.detail',$destination->slug)}}"><img src="{{ Storage::url($destination->photo) }}" alt="image"></a>
                                </div>
                                <div class="activity-content-wrap text-center">
                                    <div class="activity-btn">
                                        <a class="bd-icon-btn small" href="{{route('destination.detail',$destination->slug)}}"><i class="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                    <div class="activity-content">
                                        <h6 class="underline"><a href="{{route('destination.detail',$destination->slug)}}">{{$destination->title}}</a></h6>
                                        {{-- <p>90+ Tours</p> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <div class="swiper-slide">
                            <div class="activity-wrapper activity-style-three">
                                <div class="activity-thumb image-overly">
                                    <a href="#"><img src="{{ asset('frontend/assets/images/trip/trip-img-7.png') }}" alt="image"></a>
                                </div>
                                <div class="activity-content-wrap text-center">
                                    {{--<div class="activity-btn">
                                        <a class="bd-icon-btn small" href="#"><i class="fa-solid fa-arrow-right"></i></a> 
                                    </div> --}}
                                    <div class="activity-content">
                                        <h6 class="underline"><a href="#">No destination found</a></h6>
                                        <p>No destination found</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="slider-pagination-wrapper">
                        <div class="slider-pagination bd-pagination mt-50 justify-content-center"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- destination area end -->

        <!-- section divider start -->
        <div class="section-divider"></div>
        <!-- section divider start -->

        <!-- tour area start -->
        <section class="bd-service-area section-space">
            <div class="container">
                <div class="row gy-24 align-items-center justify-content-center section-title-space">
                    <div class="col-lg-6 col-md-8">
                        <div class="section-title-wrapper text-center">
                            <span class="section-subtitle mb-10">OUR STATISTICS</span>
                            <h2 class="section-title">No Reason To Hesitate</h2>
                        </div>
                    </div>
                </div>
                {{-- <div class="row gy-24">
                    @if($tours->isNotEmpty())
                    @foreach($tours as $tour)
                    <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                        <div class="tour-wrapper style-one">
                            <div class="p-relative">
                                <div class="tour-thumb image-overly">
                                    <a href="{{route('tour.detail',$tour->slug)}}"><img src="{{ Storage::url($tour->photo) }}" alt="image"></a>
                                </div>
                                <div class="tour-meta d-flex align-items-center justify-content-between">
                                    <button class="tour-favorite tour-like">
                                        <i class="icon-heart"></i>
                                    </button>
                                    <div class="tour-location">
                                        <span><a href="{{route('tour.detail',$tour->slug)}}"><i class="fa-regular fa-location-dot"></i> {{ $tour->location }}</a></span>
                                    </div>
                                </div>
                            </div>
                            <div class="tour-content">
                                <div class="tour-rating d-flex flex-wrap align-items-center gap-10 mb-10">
                                    <div class="tour-rating-icon fs-14 d-flex rating-color">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                    <div class="tour-rating-text">
                                        <span>4.8 (313 Ratings)</span>
                                    </div>
                                </div>
                                <h5 class="tour-title fw-5 underline mb-5"><a href="{{route('tour.detail',$tour->slug)}}">{{ $tour->title }}</a></h5>
                                <span class="tour-price b3">${{ $tour->price }} per Person</span>
                                <div class="tour-divider"></div>

                                <div class="tour-meta d-flex align-items-center justify-content-between">
                                    <div class="time d-flex align-items-center gap--5">
                                        <i class="icon-clock"></i>
                                        <span>{{ $tour->number_of_days }} {{ $tour->number_of_days == 1 ? 'day' : 'days' }}</span>
                                    </div>
                                    <div class="tour-btn">
                                        <a class="bd-text-btn style-two" href="{{ route('book') }}">Book Now
                                            <span class="icon__box">
                                                <i class="fa-regular fa-arrow-right-long icon__first"></i>
                                                <i class="fa-regular fa-arrow-right-long icon__second"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div> --}}
            </div>
        </section>
        <!-- tour area end -->

        <!-- offer area start -->
        <section class="bd-offer-area section-space-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="offer-wrapper p-relative offer-thumb-bg offer-style-three image-bg" data-background="assets/images/offer/offer-img-3.png">
                            <div class="offer-mask">
                                <img src="{{ asset('frontend/assets/images/shapes/offer-bg-shape.png') }}" alt="mask">
                            </div>
                            <div class="offer-shape">
                                <img src="{{ asset('frontend/assets/images/shapes/offer-shape.png') }}" alt="shape">
                            </div>
                            <div class="offer-content-wrap">
                                <div class="offer-content">
                                    <div class="section-title-wrapper mb-30">
                                        <span class="section-subtitle color-warning mb-15" style="font-size: 16px; color: #fff;">GET STARTED NOW  </span>
                                        <h2 class="section-title white-text mb-20">Ultimate Adventure Awaits!</h2>
                                        <p style="font-size: 16px;">Are you ready?</p>
                                    </div>
                                    <div class="offer-btn">
                                        <a href="{{route('book')}}" class="bd-primary-btn btn-style has-arrow is-bg btn-tertiary is-white radius-60">
                                            <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                            <span class="bd-primary-btn-text">Book Now</span>
                                            <span class="bd-primary-btn-circle"></span>
                                            <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="counter-wrapper counter-style-two counter-top">
                    @if($statistics->isNotEmpty())
                    @foreach($statistics as $statistic)
                    <div class="counter-item">
                        <div class="counter-content">
                            <h2><span data-purecounter-duration="1" data-purecounter-end="{{$statistic->price}}"class="purecounter">{{$statistic->price}}</span></h2>
                            <p>{{$statistic->title}}</p>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </section>
        <!-- offer area end -->


        <!-- tour area start -->
        <section class="bd-tour-area section-space">
            <div class="container">
                <div class="row gy-24 align-items-center justify-content-between section-title-space">
                    <div class="col-lg-6 col-md-8">
                        <div class="section-title-wrapper">
                            <span class="section-subtitle mb-10">Tours</span>
                            <h2 class="section-title">Featured Tours</h2>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-3 col-sm-3">
                        <div class="tour-navigation btn-navigation p-relative style-three d-flex justify-content-md-end">
                            <button class="tourigo-navigation-prev"><i class="fa-regular fa-angle-left"></i></button>
                            <button class="tourigo-navigation-next"><i class="fa-regular fa-angle-right"></i></button>
                        </div>
                    </div>
                </div>
                <div class="row gy-24">
                    <div class="col-xxl-3 col-xl-3 col-lg-4 order-lg-0 order-1">
                        <div class="cta-wrapper cta-style-four">
                            {{-- <div class="cta-thumb-four">
                                <img src="{{ asset('frontend/assets/images/cta/cta-img-4.jpg') }}" alt="image">
                            </div>
                            <div class="cta-content">
                                <span class="cta-subtitle">Get Featured Tours</span>
                                <h3 class="cta-title white-text mb-25">Book Your Tickets Now</h3>
                                <div class="cta-button">
                                    <a href="{{route('book')}}" class="bd-primary-btn btn-style has-arrow is-bg btn-tertiary is-white radius-60">
                                        <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                        <span class="bd-primary-btn-text">Book Now</span>
                                        <span class="bd-primary-btn-circle"></span>
                                        <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                                    </a>

                                </div> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-9 col-xl-9 col-lg-8 order-lg-1 order-0">
                        <div class="tour-slide-wrapper p-relative">
                            <div class="swiper tour__active_two">
                                <div class="swiper-wrapper">
                                    @if($trending_tours && count($trending_tours) > 0)
                                        @foreach($trending_tours as $trending_tour)
                                        <div class="swiper-slide">
                                            <div class="tour-wrapper style-one">
                                                <div class="p-relative">
                                                    <div class="tour-thumb image-overly">
                                                        <a href="{{ route('tour.detail', $trending_tour->slug) }}">
                                                            @if($trending_tour->photo)
                                                                <img src="{{ Storage::url($trending_tour->photo) }}" alt="image">
                                                            @else
                                                                <img src="assets/images/tour/tour-img-12.png" alt="image">
                                                            @endif
                                                        </a>
                                                    </div>
                                                    <div class="tour-meta d-flex align-items-center justify-content-between">
                                                        <button class="tour-favorite tour-like">
                                                            <i class="icon-heart"></i>
                                                        </button>
                                                        <div class="tour-location">
                                                            <span><a href="{{ route('tour.detail', $trending_tour->slug) }}"><i class="fa-regular fa-location-dot"></i> {{ $trending_tour->location }}</a></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tour-content">
                                                    <div class="tour-rating d-flex flex-wrap align-items-center gap-10 mb-10">
                                                        <div class="tour-rating-icon fs-14 d-flex rating-color">
                                                            
                                                        </div>
                                                        <div class="tour-rating-text">
                                                            <span>({{ $trending_tour->views }} Views)</span>
                                                        </div>
                                                    </div>
                                                    <h5 class="tour-title fw-5 underline mb-5"><a href="{{ route('tour.detail', $trending_tour->slug) }}">{{ Str::limit($trending_tour->title, 50) }}</a></h5>
                                                    <span class="tour-price b3">${{ number_format($trending_tour->price, 2) }}</span>
                                                    <div class="tour-divider"></div>

                                                    <div class="tour-meta d-flex align-items-center justify-content-between">
                                                        <div class="time d-flex align-items-center gap--5">
                                                            <i class="icon-clock"></i>
                                                            <span>{{$trending_tour->number_of_days}} {{$trending_tour->number_of_days == 1 ? 'day' : 'days'}}</span>

                                                        </div>
                                                        <div class="tour-btn">
                                                            <a class="bd-text-btn style-two" href="{{ route('book') }}">Book Now
                                                                <span class="icon__box">
                            <i class="fa-regular fa-arrow-right-long icon__first"></i>
                            <i class="fa-regular fa-arrow-right-long icon__second"></i>
                        </span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    @else
                                        {{-- Fallback static content if no trending tours --}}
                                        <div class="swiper-slide">
                                            <div class="tour-wrapper style-one">
                                                <div class="p-relative">
                                                    <div class="tour-thumb image-overly">
                                                        <a href="#"><img src="assets/images/tour/tour-img-12.png" alt="image"></a>
                                                    </div>
                                                    <div class="tour-meta d-flex align-items-center justify-content-between">
                                                        <button class="tour-favorite tour-like">
                                                            <i class="icon-heart"></i>
                                                        </button>
                                                        <div class="tour-location">
                                                            <span><a href="#"><i class="fa-regular fa-location-dot"></i> No tours available</a></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tour-content">
                                                    <div class="tour-rating d-flex flex-wrap align-items-center gap-10 mb-10">
                                                        <div class="tour-rating-icon fs-14 d-flex rating-color">
                                                            <i class="fa-solid fa-star"></i>
                                                            <i class="fa-solid fa-star"></i>
                                                            <i class="fa-solid fa-star"></i>
                                                            <i class="fa-solid fa-star"></i>
                                                            <i class="fa-solid fa-star"></i>
                                                        </div>
                                                        <div class="tour-rating-text">
                                                            <span>0 Views</span>
                                                        </div>
                                                    </div>
                                                    <h5 class="tour-title fw-5 underline mb-5"><a href="#">Coming Soon</a></h5>
                                                    <span class="tour-price b3">$0.00</span>
                                                    <div class="tour-divider"></div>

                                                    <div class="tour-meta d-flex align-items-center justify-content-between">
                                                        <div class="time d-flex align-items-center gap--5">
                                                            <i class="icon-heart"></i>
                                                            <span>0 days</span>
                                                        </div>
                                                        <div class="tour-btn">
                                                            <button class="bd-text-btn style-two" disabled>Coming Soon</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- tour area end -->

        <!-- testimonial area start -->
        <section class="bd-testimonial-area testimonial-space section-space-top flash-white p-relative">
            <div class="container">
                <div class="row gy-24 align-items-center text-center justify-content-center section-title-space">
                    <div class="col-xl-6">
                        <div class="section-title-wrapper">
                            <span class="section-subtitle mb-10">Testimonials</span>
                            <h2 class="section-title">Customers Feedback</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="swiper testimonial-active-two">
                    <div class="swiper-wrapper">
                        @if($testimonials->isNotEmpty())
                            @foreach($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="testimonial-wrapper testimonial-style-two">
                                <div class="testimonial-content p-relative">
                                    <div class="testimonial-avatar flex-wrap">
                                        <div class="testimonial-avatar-wrap">
                                            <div class="avatar-thumb">
                                                <img src="{{ Storage::url($testimonial->photo) }}" alt="">
                                            </div>
                                            <div class="avatar-meta">
                                                <h6 class="avatar-meta-title">{{$testimonial->name}}</h6>
                                                <p>{{$testimonial->position}}</p>
                                            </div>
                                        </div>
                                        <div class="avatar-rating p-relative">
                                            <div class="fs-14 d-flex rating-color">
                                                {{-- <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i> --}}
                                            </div>
                                            <div class="testimonial-quot">
                                                <img src="{{ asset('frontend/assets/images/testimonial/quot-shape-2.png') }}" alt="shape">
                                            </div>
                                        </div>
                                    </div>
                                    <p class="testimonial-desc">{!!$testimonial->message!!}</p>
                                </div>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="slider-pagination-wrapper">
                        <div class="slider-pagination bd-pagination mt-50 justify-content-center"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- testimonial area start -->

        <!-- blog area start -->
        <section class="bd-blog-area section-space">
            <div class="container">
                <div class="row gy-24 align-items-center justify-content-between section-title-space">
                    <div class="col-xl-8 col-lg-8">
                        <div class="section-title-wrapper">
                            <span class="section-subtitle mb-10">Our Updates</span>
                            <h2 class="section-title">Recent Updates</h2>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3">
                        <div class="blog-btn text-md-end">
                            <a href="{{route('blog')}}" class="bd-primary-btn btn-style has-arrow is-bg radius-60">
                                <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                <span class="bd-primary-btn-text">See More</span>
                                <span class="bd-primary-btn-circle"></span>
                                <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="swiper blog_activation">
                    <div class="swiper-wrapper">
                        @if($recent_posts->isNotEmpty())
                            @foreach($recent_posts as $post)
                        <div class="swiper-slide">
                            <article class="bd-blog-wrapper blog-default blog-style-three">
                                <div class="blog-thumb image-hover-effect">
                                    <a href="{{route('blog.detail',$post->slug)}}"><img src="{{ Storage::url($post->photo) }}" alt="img"></a>
                                </div>
                                <div class="blog-tag">
                                    @php
                                        $tags = explode(',', $post->tags);
                                    @endphp
                                    @foreach($tags as $tag)
                                        <span><a href="{{route('blog.detail',$post->slug)}}">{{$tag}}</a></span>
                                    @endforeach
                                </div>
                                <div class="blog-content">
                                    <div class="blog-meta-list">
                                       
                                        <div class="blog-meta-item">
                                            <span class="meta-icon">
                                                <i class="icon-cleander-check"></i>
                                            </span>
                                            <span class="meta-text"><a href="{{route('blog.detail',$post->slug)}}">{{$post->created_at->format('d M , Y. D')}}</a></span>
                                        </div>
                                    </div>
                                    <h5 class="blog-title mb-30 underline"><a href="{{route('blog.detail',$post->slug)}}">{{$post->title}}</a></h5>
                                    <div class="blog-btn">
                                        <a href="{{route('blog.detail',$post->slug)}}" class="bd-primary-btn btn-style has-arrow radius-60">
                                            <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                            <span class="bd-primary-btn-text">Read More</span>
                                            <span class="bd-primary-btn-circle"></span>
                                            <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                                        </a>

                                    </div>
                                </div>
                            </article>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
                <div class="blog-slider-pagination bd-pagination mt-20 justify-content-center"></div>
            </div>
        </section>
        <!-- blog area end -->

        <!-- team area start -->
        <section class="bd-team-area section-space flash-white">
            <div class="container">
                <div class="row gy-24 align-items-center text-center justify-content-center section-title-space">
                    <div class="col-xl-6">
                        <div class="section-title-wrapper">
                            <span class="section-subtitle mb-10">Our Team</span>
                            <h2 class="section-title">Ready To Serve You</h2>
                        </div>
                    </div>
                </div>
                <div class="row gy-24">
                    @if($teams->isNotEmpty())
                        @foreach($teams as $team)
                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 wow fadeInUp" data-wow-delay=".3s">
                        <div class="team-wrapper team-style">
                            <div class="team-content-wrap position-relative">
                                <div class="team-thumb">
                                    <a href="javascript:void(0)"><img src="{{ Storage::url($team->photo) }}" alt="image"></a>
                                </div>
                                <div class="team-content">
                                    <h6 class="team-member-name b3 underline"><a href="javascript:void(0)">{{$team->name}}</a></h6>
                                    <span>{{$team->position}}</span>
                                </div>
                            </div>
                            <div class="team-social">
                                {{-- <a class="icon-01" target="_blank" href="https://www.facebook.com/"><i class="icon-facebook"></i></a>
                                <a class="icon-02" target="_blank" href="https://www.instagram.com/"><i class="icon-instagram"></i></a>
                                <a class="icon-03" target="_blank" href="https://twitter.com/"><i class="icon-twitter-x"></i></a>
                                <a class="icon-04" target="_blank" href="https://www.linkedin.com/"><i class="icon-linkedin"></i></a> --}}
                            </div>
                        </div>
                    </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
        <!-- team area end -->

        <!-- cta area start -->
        <section class="bd-cta-section theme-bg fix p-relative">
            <div class="cta-shape-bg" data-background="{{ asset('frontend/assets/images/cta/cta-img-2-bg.jpg') }}">
            </div>
            <div class="container">
                <div class="cta-three-shape">
                    <div class="cta-three-shape-one p-absolute">
                        <img src="{{ asset('frontend/assets/images/shapes/cta-star.png') }}" alt="shape">
                    </div>
                    <div class="cta-three-shape-two p-absolute">
                        <img src="{{ asset('frontend/assets/images/shapes/cta-eye.png') }}" alt="shape">
                    </div>
                    <div class="cta-three-shape-three p-absolute">
                        <img src="{{ asset('frontend/assets/images/shapes/cta-x.png') }}" alt="shape">
                    </div>
                    <div class="cta-three-shape-four p-absolute">
                        <img src="{{ asset('frontend/assets/images/shapes/cta-star.png') }}" alt="shape">
                    </div>
                    <div class="cta-three-shape-six p-absolute">
                        <img src="{{ asset('frontend/assets/images/shapes/cta-x.png') }}" alt="shape">
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-4 order-lg-0 order-1 wow fadeInLeft">
                        <div class="cta-thumb-wrap cta-style-two p-relative">
                            <div class="cta-thumb-two">
                                {{-- <img src="{{ asset('frontend/assets/images/cta/cta-img-2.png') }}" alt="image"> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-lg-6 order-lg-1 order-0">
                        <div class="cta-wrapper cta-style-two">
                            <div class="section-title-wrapper mb-35">
                                <h2 class="section-title small white-text mb-15" style="position: relative">Subscribe To Our Mailing List & Stay Up To Date
                                </h2>
                                <p class="white-text" style="position: relative">Get exclusive access to our latest  updates and offers by subscribing to our newsletter</p>
                                <div class="cta-form">
                                    <form id="newsletter-form">
                                        @csrf
                                        <div class="cta-input white-button">
                                            <input type="email" name="email" id="newsletter-email" placeholder="Your email address" required>
                                            <button type="submit" class="bd-primary-btn btn-style has-arrow is-bg radius-8" id="newsletter-submit">
                                                <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                                <span class="bd-primary-btn-text">Subscribe Now</span>
                                                <span class="bd-primary-btn-circle"></span>
                                                <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                                            </button>
                                        </div>
                                        <div id="newsletter-message" style="margin-top: 10px; display: none;"></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- cta area end -->

    </main>
    <!-- Body main wrapper end -->

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const newsletterForm = document.getElementById('newsletter-form');
        const newsletterMessage = document.getElementById('newsletter-message');
        const newsletterSubmit = document.getElementById('newsletter-submit');
        const newsletterEmail = document.getElementById('newsletter-email');

        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = newsletterEmail.value.trim();
            if (!email) {
                showMessage('Please enter your email address.', 'error');
                return;
            }

            // Disable submit button
            newsletterSubmit.disabled = true;
            newsletterSubmit.innerHTML = '<span class="bd-primary-btn-text">Subscribing...</span>';

            // Send AJAX request
            fetch('{{ route("subscribe") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    email: email
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage(data.message, 'success');
                    newsletterEmail.value = '';
                } else {
                    showMessage(data.message, 'error');
                }
            })
            .catch(error => {
                showMessage('Something went wrong. Please try again later.', 'error');
            })
            .finally(() => {
                // Re-enable submit button
                newsletterSubmit.disabled = false;
                newsletterSubmit.innerHTML = '<span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span><span class="bd-primary-btn-text">Subscribe Now</span><span class="bd-primary-btn-circle"></span><span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>';
            });
        });

        function showMessage(message, type) {
            newsletterMessage.textContent = message;
            newsletterMessage.style.display = 'block';
            newsletterMessage.style.color = type === 'success' ? '#28a745' : '#dc3545';
            newsletterMessage.style.fontSize = '14px';
            newsletterMessage.style.textAlign = 'center';
            
            // Hide message after 5 seconds
            setTimeout(() => {
                newsletterMessage.style.display = 'none';
            }, 5000);
        }
    });
    </script>
@endsection