@extends('frontend.layouts.app')
@section('content')
    <!-- Slider Section -->
    <div id="demo" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            @foreach ($slider as $key => $slide)
                <button type="button" data-bs-target="#demo" data-bs-slide-to="{{ $key }}"
                    class="{{ $key == 0 ? 'active' : '' }}"></button>
            @endforeach
        </div>

        <div class="carousel-inner">
            @foreach ($slider as $key => $slide)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    <img src="{{ asset('backend/assets/images/sliders/' . $slide->image) }}" alt="{{ $slide->title }}"
                        class="d-block" style="width:100%">
                    <div class="carousel-caption">
                        <h1 class="text-white display-4 mb-2">Experience the Spiritual Essence of Varanasi <span
                                class="banner-title-bg">Like Never Before!</span></h1>
                        <div class="d-xl-block d-lg-block d-none">
                            <p class="text-white mx-auto">Explore the timeless beauty of Varanasi from the serene waters of
                                the Ganges. Our Kashi boat rides offer a unique and unforgettable experience, taking you
                                through the heart of one of India's most sacred cities.</p>
                            <a href="#boats" class="btn btn-primary">Explore All Boats</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Left and right controls/icons -->
        <button class="carousel-control-prev d-xl-block d-lg-block d-none" type="button" data-bs-target="#demo"
            data-bs-slide="prev">
            <i class="fa fa-arrow-left"></i>
        </button>
        <button class="carousel-control-next d-xl-block d-lg-block d-none" type="button" data-bs-target="#demo"
            data-bs-slide="next">
            <i class="fa fa-arrow-right"></i>
        </button>
    </div>
    <!-- /Slider Section -->

    <!-- Category Section -->
    <section class="section destination-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-5 col-lg-10 text-center wow fadeInUp" data-wow-delay="0.2s">
                    <div class="section-header section-header-four text-center">
                        <span class="badge badge-soft-primary rounded-pill mb-2">Featured Categories</span>
                        <h2 class="mb-2">Enjoy Boat Ride in <span class="hero-title-bg">Varanasi</span></h2>
                        <p class="sub-title">Experience the serene beauty of Varanasi from the water and explore the city's
                            iconic ghats and riverfronts with ease.</p>
                    </div>
                </div>
            </div>

            <div class="owl-carousel cruise-slider nav-center wow fadeInUp">
                @foreach ($category as $cat)
                    <div class="category-type">
                        <a href="{{ route('boats.index', $cat->slug) }}">
                            <img src="{{ asset('backend/assets/images/boat_category/' . $cat->image) }}"
                                onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                alt="{{ $cat->image }}">
                            <h6>{{ $cat->name }}</h6>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- /Category Section -->

    <!-- Boats Section -->
    <section class="section place-section" id="boats">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-10 text-center wow fadeInUp" data-wow-delay="0.2s">
                    <div class="section-header section-header-four mb-5 text-center">
                        <span class="badge badge-soft-primary rounded-pill mb-2">Our Boat Package</span>
                        <h2 class="mb-2">Explore Our Exclusive <span class="hero-title-bg">Boats</span></h2>
                        <p class="sub-title">Discover the perfect boat for your needs. Browse our exclusive selection of
                            boats and find the ideal one for your next adventure or voyage.</p>
                    </div>
                </div>
            </div>
            <div class="owl-carousel place-slider nav-center">

                <!-- Boat Item-->
                @foreach ($boats as $boat)
                    <div class="place-item boat-section mb-4 flex-fill">
                        <a href="{{ route('boat.index', $boat->slug) }}">
                            <img src="{{ asset('backend/assets/images/boats/' . $boat->image) }}"
                                onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                class="img-fluid" alt="{{ $boat->name }}">
                        </a>
                        <div class="place-content">
                            <h5><a href="{{ route('boat.index', $boat->slug) }}">{{ $boat->name }}</a></h5>
                            {{-- <p class="d-flex align-items-center fs-14 mb-2"><i
                                    class="isax isax-category me-2"></i>{{ $boat->boat->name }}</p> --}}
                            <p class="d-flex align-items-center fs-14 mb-2">{{ $boat->destination }}</p>
                            <div class="text-center border-top pt-3">
                                <h5 class="text-primary text-nowrap me-2"><span class="text-default fs-15">Starts From -
                                    </span>₹{{ $boat->discount_price }} <del class="fs-14 fw-normal text-default">
                                        ₹{{ $boat->price }}</del></h5>
                                <a href="{{ route('boat.index', $boat->slug) }}"
                                    class="btn btn-primary w-100 align-items-center mt-2"><i
                                        class="isax isax-calendar-2 me-2"></i>Book Now</a>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- /Boat Item-->

            </div>
            <div class="app-wrap bg-light">
                <div class="row">
                    <div class="col-lg-6 d-flex">
                        <div class="app-info flex-fill  wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
                            <h2 class="display-5 mb-3">Scan & Pay for Your <br><span class="hero-title-bg">{{ config('app.name') }}</span></h2>
                            <p class="fw-medium mb-3">Easily book your serene boat ride in Kashi by scanning the QR code. Quick,
                                secure, and hassle-free payments through your favorite UPI apps.</p>
                            <div class="d-flex align-items-center">
                                <a href="{{ route('contactIndex') }}" class="btn btn-dark align-items-center"><i
                                        class="isax isax-message-question5 me-2"></i>Need Help ?</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex">
                        <div class="app-img flex-fill wow zoomIn" style="visibility: visible; animation-name: zoomIn;">
                            <img src="{{ asset('frontend/assets/img/kashi-boat-qr.jpg') }}" width="300" alt="img">
                        </div>
                    </div>
                </div>
                <div class="app-bg">
                    <img src="{{ asset('frontend/assets/img/bg/app-bg-01.png') }}" alt="img" class="app-bg-01">
                    <img src="{{ asset('frontend/assets/img/bg/app-bg-02.png') }}" alt="img" class="app-bg-02">
                </div>
            </div>
        </div>
    </section>
    <!-- / Boats Section -->

    <!-- About Section -->
    <section class="section about-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about-us mb-4 mb-lg-0 wow zoomIn" style="visibility: visible; animation-name: zoomIn;">
                        <div class="row align-items-center gx-0">
                            <div class="col-6">
                                <div class="about-img-01">
                                    <img src="{{ asset('frontend/assets/img/about-1.jpg') }}" alt="img"
                                        class="img-fluid">
                                </div>
                                <div class="about-img-03">
                                    <img src="{{ asset('frontend/assets/img/about-2.jpg') }}" alt="img"
                                        class="img-fluid">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="about-img-02">
                                    <img src="{{ asset('frontend/assets/img/about-3.jpg') }}" alt="img"
                                        class="img-fluid">
                                </div>
                                <div class="about-img-04">
                                    <img src="{{ asset('frontend/assets/img/about-4.png') }}" alt="img"
                                        class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <div class="about-exp">
                            <h2>10+</h2>
                            <p>Years of Experience</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="section-header section-header-four mb-0">
                            <span class="badge badge-soft-primary rounded-pill mb-2">About Kashi Boat Booking</span>
                            <h2 class="mb-3">Explore the Serene Beauty of Varanasi's Ghats by <span
                                    class="hero-title-bg">Boat!</span></h2>
                        </div>
                        <p class="sub-title">Kashi Boat Booking is your one-stop platform for booking boat rides along the
                            iconic ghats of Varanasi. Whether you’re looking for a peaceful morning row, a romantic sunset
                            cruise, or a spiritual journey along the sacred Ganges, our easy-to-use online service ensures
                            you have an unforgettable experience.</p>
                    </div>
                    <div class="about-points mb-3 border-bottom">
                        <div class="mb-3">
                            <h6 class="d-flex align-items-center"><i
                                    class="isax isax-tick-circle5 text-orange fs-24 me-2"></i>Guided Tours</h6>
                            <p>Opt for a guided tour to learn about the rich history, culture, and spirituality of
                                Varanasi’s ghats, temples, and landmarks.</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="d-flex align-items-center"><i
                                    class="isax isax-tick-circle5 text-orange fs-24 me-2"></i>Affordable Prices</h6>
                            <p>We offer a range of options to suit your budget, from short trips to extended experiences,
                                all at competitive prices.</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="d-flex align-items-center"><i
                                    class="isax isax-tick-circle5 text-orange fs-24 me-2"></i>Local Expertise</h6>
                            <p>Our boatmen are experienced locals with deep knowledge of Varanasi’s cultural and spiritual
                                heritage, ensuring you have an authentic and enriching journey.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center flex-wrap gap-3 mb-0 mb-md-4 mb-lg-0">
                        <a href="{{ route('aboutIndex') }}" class="btn btn-dark align-items-center"><i
                                class="isax isax-add-circle5 me-2"></i>Discover More</a>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="counter-wrap">
                        <div class="row">
                            <div class="col-lg-3 col-md-6">
                                <div class="counter-item mb-4">
                                    <h6 class="mb-1 d-flex align-items-center justify-content-center text-teal"><i
                                            class="isax isax-global5 me-2"></i>Boat Tours in Kashi</h6>
                                    <h3 class="display-6"><span class="counter">50</span>+</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="counter-item mb-4">
                                    <h6 class="mb-1 d-flex align-items-center justify-content-center text-purple"><i
                                            class="isax isax-calendar-2 me-2"></i>Bookings Completed</h6>
                                    <h3 class="display-6"><span class="counter">7000</span>+</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="counter-item mb-4">
                                    <h6 class="mb-1 d-flex align-items-center justify-content-center text-pink"><i
                                            class="isax isax-tag-user5 me-2"></i>Satisfied Clients</h6>
                                    <h3 class="display-6"><span class="counter">100</span>%</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="counter-item mb-4">
                                    <h6 class="mb-1 d-flex align-items-center justify-content-center text-info"><i
                                            class="isax isax-status-up5 me-2"></i>Registered Boat Providers</h6>
                                    <h3 class="display-6"><span class="counter">89</span>+</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-bg">
                <img src="{{ asset('frontend/assets/img/bg/about-bg.png') }}" alt="img" class="about-bg-01">
                <img src="{{ asset('frontend/assets/img/bg/about-bg-01.svg') }}" alt="img" class="about-bg-02">
            </div>
        </div>
    </section>
    <!-- /About Section -->

    <!-- Support Section -->
    <section class="support-section bg-main support-section-five wow fadeInDown" data-wow-delay="0.2s">
        <div class="horizontal-slide d-flex" data-direction="left" data-speed="slow">
            <div class="slide-list d-flex">
                <div class="support-item">
                    <h5>Custom Boat Tours</h5>
                </div>
                <div class="support-item">
                    <h5>Seamless Trip Planning</h5>
                </div>
                <div class="support-item">
                    <h5>Expert Local Guides</h5>
                </div>
                <div class="support-item">
                    <h5>Authentic River Experience</h5>
                </div>
                <div class="support-item">
                    <h5>24/7 Customer Support</h5>
                </div>
                <div class="support-item">
                    <h5>Eco-Friendly Initiatives</h5>
                </div>
                <div class="support-item">
                    <h5>Explore Kashi's Ghats</h5>
                </div>
            </div>
        </div>
    </section>
    <!-- /Support Section -->

    <!-- Testimonial Section -->
    <section class="section bgwhite">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-10 text-center">
                    <div class="section-header section-header-four mb-5 text-center">
                        <span class="badge badge-soft-primary rounded-pill mb-2">Our Testimonials</span>
                        <h2 class="mb-2">What’s Our <span class="hero-title-bg">Clients Says</span></h2>
                        <p class="sub-title">Discover the unforgettable experiences and cherished memories of our clients
                            who’ve explored Kashi by boat, creating stories to share for a lifetime.</p>
                    </div>
                </div>
            </div>
            <div class="owl-carousel testimonial-slider">

                <!-- Testimonial Item-->
                @foreach ($testimonials as $testimonial)
                    <div class="card border-white wow fadeInUp" data-wow-delay="0.2s">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between text-center flex-column">
                                <div class="rating d-flex align-items-center me-2 mb-3">
                                    <i class="fa-solid fa-star filled  text-primary me-1 fs-14"></i>
                                    <i class="fa-solid fa-star filled  text-primary me-1 fs-14"></i>
                                    <i class="fa-solid fa-star filled  text-primary me-1 fs-14"></i>
                                    <i class="fa-solid fa-star filled  text-primary me-1 fs-14"></i>
                                    <i class="fa-solid fa-star filled  text-primary me-1 fs-14"></i>
                                </div>
                                <p class="mb-3">{{ $testimonial->description }}</p>
                                <div class="d-flex align-items-center">
                                    <a href="javascript:void(0);" class="avatar avatar-md  flex-shrink-0">
                                        <img src="{{ asset('backend/assets/images/testimonial/' . $testimonial->image) }}"
                                            onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/users/user-01.jpg') }}';"
                                            class="rounded-circle" alt="img">
                                    </a>
                                    <div class="ms-2 d-flex align-items-center">
                                        <h6 class="fs-16 fw-medium"><a
                                                href="javascript:void(0);">{{ $testimonial->title }}</a></h6>
                                        <span class="city-type">{{ $testimonial->designation }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- /Testimonial Item-->
            </div>
        </div>
    </section>
    <!-- /Testimonial Section -->

    <!-- FAQ Section -->
    <section class="place-section section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12 text-center wow fadeInUp" data-wow-delay="0.2s">
                    <div class="section-header section-header-four text-center">
                        <span class="badge badge-soft-primary rounded-pill mb-2">Our Faqs</span>
                        <h2 class="mb-2">Frequently Asked<span class="hero-title-bg"> Questions</span></h2>
                        <p class="sub-title">Connecting Needs with Offers for the Professional Flight Services, </p>
                    </div>
                </div>
            </div>
            <div class="accordion accordion-flush faq-four" id="accordionFaq">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        @foreach ($faqs as $key => $faq)
                            <div class="accordion-item mb-2 wow fadeInUp" data-wow-delay="{{ 0.2 * ($key + 1) }}s">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $key == 0 ? '' : 'collapsed' }}" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#faq-collapse{{ $faq->id }}"
                                        aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"
                                        aria-controls="faq-collapse{{ $faq->id }}">
                                        {{ $faq->question }}
                                    </button>
                                </h2>
                                <div id="faq-collapse{{ $faq->id }}"
                                    class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}"
                                    data-bs-parent="#accordionFaq">
                                    <div class="accordion-body">
                                        <p class="mb-0">{!! $faq->answer !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- /FAQ Section -->

    <!-- Blog Section -->
    <section class="section blog-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 text-center wow fadeInUp" data-wow-delay="0.2s">
                    <div class="section-header section-header-four  text-center">
                        <span class="badge badge-soft-primary rounded-pill mb-2">Our Blogs</span>
                        <h2 class="mb-2">Latest <span class="hero-title-bg">News &amp; Article</span></h2>
                        <p class="sub-title">Exploring the serene beauty of Kashi through boat journeys – the latest
                            updates, tips, and articles to enhance your experience on the holy Ganges.</p>
                    </div>
                </div>
            </div>
            <div class="row g-4 justify-content-center">

                <!-- Blog Item-->
                @foreach ($blogs as $blog)
                    <div class="col-lg-4 col-md-6 d-flex">
                        <div class="blog-item blog-wrap flex-fill wow fadeInUp" data-wow-delay="0.2s">
                            <a href="{{ route('blogDetail', $blog->slug) }}" class="blog-img">
                                <img src="{{ asset('backend/assets/images/blog/' . $blog->image) }}"
                                    onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                    alt="{{ $blog->title }}">
                            </a>
                            <div class="blog-content">
                                <div class="d-flex align-items-center border-bottom justify-content-between mb-2">
                                    <a href="javascript:void(0);" class="d-flex align-items-center mb-2">
                                        <span class="avatar avatar-md flex-shrink-0 me-2">
                                            <img src="{{ asset('frontend/assets/img/users/user-01.jpg') }}"
                                                alt="img" class="rounded-circle">
                                        </span>
                                        <p class="fs-14">{{ config('app.name') }}</p>
                                    </a>
                                    <p class="fs-13 fw-medium d-flex align-items-center mb-2"><i
                                            class="isax isax-calendar-1 text-gray-9 fs-20 me-2"></i>{{ date('d F Y', strtotime($blog->created_at)) }}
                                    </p>
                                </div>
                                <h5><a href="{{ route('blogDetail', $blog->slug) }}">{{ $blog->title }}</a>
                                </h5>
                                <p class="mt-2 text-truncate line-clamb-3">{{ $blog->short_description }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- /Blog Item-->

            </div>
        </div>
    </section>
    <!-- /Blog Section -->
@endsection