@extends('layouts.main')
@section('main-section')
<!-- Swiper CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!--Form Back Drop-->
<div class="form-back-drop"></div>

<!-- Hero Area Start -->
 <!-- <section class="hero-area-three bgs-cover overflow-hidden pt-130 pb-100 br-15 rel z-2"
    style="background-image: url(assets/images/hero/hero-three-bg.jpg);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-9 col-lg-10">
                <div class="hero-content-three counter-text-wrap text-white text-center mb-125 rmb-65"
                    data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                    <span class="subtitle mb-15">Ayodhya Dham Holidays</span>
                    <h1> Explore, Discover, Travel with Ayodhya Dham Holidays</h1>
                    <p>Covering <span class="count-text plus" data-speed="3000" data-stop="30">0</span> Destinations, One Memorable Journey at a Time!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-shapes">
        <div class="shape one" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero1.png" alt="Shape">
        </div>
        <div class="shape two" data-aos="fade-down" data-aos-delay="100" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero2.png" alt="Shape">
        </div>
        <div class="shape three" data-aos="fade-down" data-aos-duration="1500" data-aos-offset="50">
            <img src="assets/images/shapes/hero3.png" alt="Shape">
        </div>
        <div class="shape four" data-aos="fade-left" data-aos-delay="100" data-aos-duration="1500"
            data-aos-offset="50">
            <img src="assets/images/shapes/hero4.png" alt="Shape">
        </div>
    </div>

  <div class="container container-1400">
        <div class="search-filter-inner mt-0" data-aos="zoom-out-down" data-aos-duration="1500"
            data-aos-offset="50">
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-map-marker-alt"></i></div>
                <span class="title">Pickup Destinations</span>
                <input type="text" placeholder="Enter the Pickup Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-flag"></i></div>
                <span class="title">Dropoff Location</span>
                <input type="text" placeholder="Enter the Dropoff Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-calendar-alt"></i></div>
                <span class="title">Pickup Date</span>
                <input type="time" placeholder="Enter Pickup Date">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-users"></i></div>
                <span class="title">No of People</span>
                <select name="cuests" id="cuests">
                    <option value="value1">0</option>
                    <option value="value2">1</option>
                    <option value="value2">2</option>
                    <option value="value2">3</option>
                    <option value="value2">4</option>
                    <option value="value2">5</option>
                </select>
            </div>
            <div class="search-button">
                <button class="theme-btn">
                    <span data-hover="Search">Submit</span>
                    <i class="far fa-search"></i>
                </button>
            </div>
        </div>
    </div>
 </section>  -->
<!-- Hero Area End -->
<section id="heroCarousel" class="carousel slide carousel-fade hero-area-three bgs-cover overflow-hidden br-15 rel z-2" data-bs-ride="carousel">
    <div class="carousel-inner">

        <!-- Slide 1 -->
        <div class="carousel-item active" data-bs-interval="3000" style="background-image: url('{{ asset('assets/ban1.webp') }}'); background-size: cover; background-position: center;height:500px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-9 col-lg-10">
                        <div class="hero-content-three counter-text-wrap text-white text-center mb-125 rmb-65 mt-5">
                            <span class="subtitle mb-15">Ayodhya Dham Holidays</span>
                            <h1>Explore, Discover, Travel with Ayodhya Dham Holidays</h1>
                            <p>Covering <span class="count-text plus" data-speed="3000" data-stop="30">0</span> Destinations, One Memorable Journey at a Time!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item" data-bs-interval="3000" style="background-image: url('{{ asset('assets/ban2.webp') }}'); background-size: cover; background-position: center;height:500px;   ">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-9 col-lg-10">
                        <div class="hero-content-three counter-text-wrap text-white text-center mb-125 rmb-65 mt-5">
                            <span class="subtitle mb-15">Your Next Journey Awaits</span>
                            <h1>Comfortable Rides & Divine Destinations</h1>
                            <p>Book your travel now with <strong>Ayodhya Dham Holidays</strong> – We take care of everything!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Controls -->
    <!-- <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button> -->

    <!-- Shapes -->
    <!-- <div class="hero-shapes">
        <div class="shape one"><img src="{{ asset('assets/images/shapes/hero1.png') }}" alt="Shape"></div>
        <div class="shape two"><img src="{{ asset('assets/images/shapes/hero2.png') }}" alt="Shape"></div>
        <div class="shape three"><img src="{{ asset('assets/images/shapes/hero3.png') }}" alt="Shape"></div>
        <div class="shape four"><img src="{{ asset('assets/images/shapes/hero4.png') }}" alt="Shape"></div>
    </div> -->

    <!-- Search Form -->
    <form method="POST" action="{{ route('formpick') }}">
    @csrf
    <div class="container container-1400">
        <div class="search-filter-inner mt-0">
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-map-marker-alt"></i></div>
                <span class="title">Pickup Destinations</span>
                <input type="text" name="pickup" placeholder="Enter the Pickup Destination" required>
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-flag"></i></div>
                <span class="title">Dropoff Location</span>
                <input type="text" name="dropoff" placeholder="Enter the Dropoff Destination" required>
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-calendar-alt"></i></div>
                <span class="title">Pickup Date</span>
                <input type="date" name="date" required>
            </div>
            <div class="filter-item clearfix">
                <div class="icon">
                    <i class="fal fa-phone"></i> <!-- Updated from SVG to font icon for consistency -->
                </div>
                <span class="title">Phone</span>
                <input type="tel" name="number" placeholder="Phone number" required>
            </div>
            <div class="search-button">
                <button type="submit" class="theme-btn">
                    <span data-hover="Search">Submit</span>
                </button>
            </div>
        </div>
    </div>
</form>

</section>

<style>
.rotate-icon {
  transform: rotate(360deg);
}
</style>








<!-- form -->
<!-- <div class="container container-1400">
        <div class="search-filter-inner mt-0" data-aos="zoom-out-down" data-aos-duration="1500"
            data-aos-offset="50">
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-map-marker-alt"></i></div>
                <span class="title">Pickup Destinations</span>
                <input type="text" placeholder="Enter the Pickup Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-flag"></i></div>
                <span class="title">Dropoff Location</span>
                <input type="text" placeholder="Enter the Dropoff Destination">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-calendar-alt"></i></div>
                <span class="title">Pickup Date</span>
                <input type="time" placeholder="Enter Pickup Date">
            </div>
            <div class="filter-item clearfix">
                <div class="icon"><i class="fal fa-users"></i></div>
                <span class="title">No of People</span>
                <select name="cuests" id="cuests">
                    <option value="value1">0</option>
                    <option value="value2">1</option>
                    <option value="value2">2</option>
                    <option value="value2">3</option>
                    <option value="value2">4</option>
                    <option value="value2">5</option>
                </select>
            </div>
            <div class="search-button">
                <button class="theme-btn">
                    <span data-hover="Search">Submit</span>
                    <i class="far fa-search"></i>
                </button>
            </div>
        </div>
    </div> -->
<!-- form -->

<section class="about-us-area pt-70 pb-100 rel z-1">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-5 col-lg-6">
                <div class="about-us-content rmb-55" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
                    <div class="section-title mb-25">
                        <h2>About Us <br> Ayodhya Dham Holidays</h2>
                    </div>
                    <p>Ayodhya Dham Holidays is a trusted travel company offering spiritual and cultural tour experiences across India. We specialize in customized holiday packages, ensuring comfort, devotion, and memorable journeys for pilgrims and travelers seeking divine connection and heritage exploration.</p>
                    <div class="row pt-25">
                        <div class="col-6">
                            <div class="counter-item counter-text-wrap">
                                <span class="count-text" data-speed="2000" data-stop="30">15</span>
                                <span class="counter-title">Popular Destination</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="counter-item counter-text-wrap">
                                <span class="count-text k-plus" data-speed="3000" data-stop="5">0</span>
                                <span class="counter-title">Satisfied Clients</span>
                            </div>
                        </div>
                    </div>
                    <a href="tel:9958707662" class="theme-btn mt-10 style-two">
                        <span data-hover="Make a Call">Make a Call</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-xl-7 col-lg-6" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
                <div class="about-us-page">
                    <img src="{{asset('assets/about.jpg')}}" alt="About">
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Features Area start -->
<section class="features-area-three pt-10 rel z-1">
    <div class="row justify-content-center">
      
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="50"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-secondary">
                <div class="icon"><i class="flaticon-best-price"></i></div>
                <div class="content">
                    <h3><a href="/">Best Price Guarantee</a></h3>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="100"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-primary">
                <div class="icon"><i class="flaticon-travel-1"></i></div>
                <div class="content">
                    <h3><a href="/">Diverse Destinations</a></h3>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-4 col-md-6" data-aos="flip-left" data-aos-delay="150"
            data-aos-duration="1500" data-aos-offset="50">
            <div class="feature-item style-three bgc-pink">
                <div class="icon"><i class="flaticon-guidepost"></i></div>
                <div class="content">
                    <h3><a href="/">Best Travel Guide</a></h3>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Features Area end -->

<!-- Hot Deals Area start -->
{{-- <section class="hot-deals-area pt-70 rel z-1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Discover Hot Tour Packages</h2>
                    <p>Discover More with Every Journey – Tailored Tour Packages for Unforgettable Adventures!</p>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($package as $packages)
            <div class="col-xl-4 col-md-6">
                <div class="destination-item tour-grid style-three bgc-lighter" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                    <div class="image">
                        <a href="#" class="heart"><i class="fas fa-heart"></i></a>
                        <img src="{{asset('uploads/post/'.$packages->image)}}" alt="Tour List">
                    </div>
                    <div class="content">
                        <div class="destination-header">
                            <span class="location"><i class="fal fa-map-marker-alt"></i> Dehradun</span>
                            <div class="ratting">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                        <h5><a href="/packages">{{$packages->name}}</a></h5>
                        <p>{{$packages->para}}</p>
                        <ul class="blog-meta">
                            <li><i class="far fa-clock"></i> 3 days 2 nights</li>
                            <li><i class="far fa-user"></i> 5-8 guest</li>
                        </ul>
                        <div class="destination-footer">
                            <span class="price"><span>₹{{$packages->price}}</span>/person</span>
                            <a href="tel:9958707662 " class="theme-btn style-two style-three">
                                <span data-hover="Book Now">Call Now</span>
                                <i class="fal fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section> --}}
<!-- Hot Deals Area end -->


<!-- Blog Area start -->
<section class="blog-area   rel z-1 pt-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Our Services</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach($service as $services)
            <div class="col-xxl-4 col-12 col-lg-3">
                <div class="blog-item style-two" data-aos="fade-up" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="image">
                        <img style="height:300px;width:100%;object-fit:cover;" src="{{asset('uploads/post/'.$services->image)}}" alt="Blog">
                    </div>
                    <div class="content">
                    <h5><a href="services/{{ $services->id }}">{{$services->name}}</a></h5>
                    <p>{{$services->description}}</p>
                        <a style="text-decoration:none;" href="tel:9958707662" class="read-more text-dark">Enquire Now <i
                                class="fal fa-angle-right"></i></a>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- Blog Area end -->








<!-- Mobile App Area start -->
<section class="mobile-app-area pt-100 rel z-1">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-6">
                <div class="row no-gap rmb-55" data-aos="fade-left" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-business-travel"></i></div>
                            <span class="count-text k-plus" data-speed="3000" data-stop="7K">0</span>
                            <span class="counter-title">Total Clients</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-plane"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="486">0</span>
                            <span class="counter-title">Total tours</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-signpost"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="200">0</span>
                            <span class="counter-title">Tour Guides</span>
                        </div>
                    </div>
                    <div class="col-6 col-small">
                        <div class="counter-item counter-text-wrap style-two">
                            <div class="icon"><i class="flaticon-key"></i></div>
                            <span class="count-text plus" data-speed="3000" data-stop="138">0</span>
                            <span class="counter-title">Luxury Hotel</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-5 col-lg-6">
                <div class="mobile-app-content" data-aos="fade-right" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="section-title mb-30">
                        <h2>Why Choose Us</h2>
                    </div>
                    <p>At Ayodhya Dham Holidays, we understand that every journey is special, and we are dedicated to providing services that meet your unique needs. Here's why you should choose us:
                    </p>
                    <ul class="list-style-two mt-35 mb-30">
                        <li>Experienced Team</li>
                        <li>Comfortable & Well-Maintained Fleet</li>
                        <li>Tailored Travel Experiences</li>
                        <li>Affordable Rates</li>
                    </ul>
                    <a href="tel:9958707662" class="theme-btn style-two">
                        <span data-hover="Make a Call Now">Make a Call Now</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Mobile App Area end -->
<!-- Features Tours Area start -->
<section class="features-tour-area pt-100 rel z-1">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title text-center counter-text-wrap mb-50" data-aos="fade-up"
                    data-aos-duration="1500" data-aos-offset="50">
                    <h2>Our Vehicles</h2>
                    <p>We have a Large Accomodation of Vehicles</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">

            @foreach($vehicles as $vehicle)
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="destination-item style-four no-border" data-aos="flip-left" data-aos-duration="1500"
                    data-aos-offset="50">
                    <div class="image">
                        <a href="#" class="heart"><i class="fas fa-heart"></i></a>
                        <img style="height:350px;width:100%;object-fit:cover;" src="{{asset('uploads/post/'.$vehicle->image)}}" alt="Tour">
                    </div>
                    <div class="content">
                        <h6><a href="/vehicle">{{$vehicle->name}}</a></h6>
                    </div>
                    <div class="destination-footer">
                        <div class="ratting">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <a href="tel:9958707662" class="theme-btn style-three">
                        <span data-hover="Explore">Make a Call</span>
                        <i class="fal fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!-- Features Tours Area end -->
<section class="gallery-slider-area py-100 rel z-1">
    <div class="section-title text-center counter-text-wrap mb-50" data-aos="fade-up" data-aos-duration="1500"
        data-aos-offset="50">
        <h2>Explore Our Photo Gallery</h2>
        <p>Journey Through Moments – Explore Our Travel Memories in the Gallery!</p>
    </div>
    <div class="gallery-slider-active">
        @foreach($gallery as $gallerys)
        <div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
            <div class="image">
                <img style="height:350px;width:100%;object-fit:cover;" src="{{asset('uploads/post/'.$gallerys->image)}}" alt="Gallery">
            </div>
        </div>
        @endforeach

    </div>
</section>


<section style="padding:0px 0px !important;" class="testimonials-area rel z-1">
    <div class="container">
        <div class="testimonials-wrap bgc-lighter">
            <div class="row">
                <div class="col-lg-5 rel" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
                    <div class="testimonial-left-image rmb-55" style="background-image: url(assets/testimonial.jpg);height:600px;width:100%;"></div>
                </div>
                <div class="col-lg-7">
                    <div class="testimonial-right-content" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
                        <div class="section-title mb-55">
                            <h2> See What our Clients Say About Our Services</h2>
                        </div>
                        <div class="testimonials-active">
                            @foreach($testimonial as $testimonals)
                            <div class="testimonial-item">
                                <div class="testi-header">
                                    <div class="quote"><i class="flaticon-double-quotes"></i></div>
                                    <h4>Best Travel Services</h4>
                                    <div class="ratting">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                                <div class="text">{{$testimonals->description}}</div>
                                <div class="author">
                                    <div class="image"><img src="{{asset('uploads/post/'.$testimonals->image)}}" alt="Author"></div>
                                    <div class="content">
                                        <h5>{{$testimonals->name}}</h5>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>




@endsection