<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Costum CSS -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- AOS Animate -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- Boxicons -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Icon -->
    <link rel="icon" href="/images/logo.svg">

    <style>
        body>script+div[style^="text"] {
            display: none
        }

        html,
        body {
            overflow-x: hidden !important
        }
    </style>

    <title>Foodly - Landing Page</title>
</head>

<body>
    <!-- Navbar Section Open -->
        <nav class="navbar navbar-expand-lg sticky-top bg-white">
    <div class="container">
        <a class="navbar-brand" href="/">
        <img src="/images/logo.svg" class="me-3" alt="brand">
        <span class="text-dark">RMS</span>
        </a>

        <!-- 🔹 MOBILE BUTTONS ONLY (≤991px) -->
        <div class="d-lg-none d-flex align-items-center ms-auto gap-2 position-relative">
        <a href="#" id="cart-btn" class="btn btn-primary shadow-none cart-mobile-btn position-relative">
            <i class='bx bx-cart fs-5'></i>
            <span id="cart-count-mobile"
            class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark">0</span>
        </a>
        </div>

        <!-- Collapsible Menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="/reviews">Reviews</a></li>
        </ul>

        <!-- 🔹 DESKTOP BUTTONS ONLY (≥992px) -->
        <div class="d-none d-lg-flex align-items-center gap-2 ms-3">
            <a href="#" id="cart-btn" class="btn btn-primary shadow-none position-relative">
            <i class='bx bx-cart fs-5'></i>
            <span id="cart-count-desktop"
                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark">0</span>
            </a>
            <a href="/signin" class="btn btn-primary" style="margin-left: 20px;">
            <i class='bx bx-user fs-5'></i>
            </a>
        </div>
        </div>
    </div>
    </nav>
    <!-- 🔹 Mobile Bottom Navigation -->
    <nav class="bottom-nav d-lg-none">
    <a href="/" class="nav-item active">
        <i class='bx bx-home'></i>
        <span>Home</span>
    </a>
    <a href="#menu" class="nav-item">
        <i class='bx bx-food-menu'></i>
        <span>Menu</span>
    </a>
    <a href="/reviews" class="nav-item">
        <i class='bx bx-star'></i>
        <span>Reviews</span>
    </a>
    <a href="/signin" class="nav-item">
        <i class='bx bx-user'></i>
        <span>Login</span>
    </a>
    </nav>
    <!-- Navbar Section Close -->

    <!-- Cart -->
    <div class="shopping-cart" id="cart-container">
    <div class="cart-close">
        <i class="bx bx-x" id="close-cart"></i>
    </div>

    <!-- Cart items will be injected here -->
    <div id="cart-items"></div>

    <div class="stotal">
        Sub Total: <span id="cart-subtotal">₹0.00</span>
    </div>
    <div class="tax">
        Tax: <span id="cart-tax">₹0</span>
    </div>
    <div class="total">
        Total: <span id="cart-total">₹0</span>
    </div>

    <!-- Offer + Table number row -->
    <div class="cart-controls">
    <!-- Animated Offer Button -->
    <button class="offer-btn">🎉 Offer</button>
    
    <!-- Table Number Input -->
    <input type="text" class="table-input" placeholder="Table No.">
    </div>

    <!-- Place order full width -->
    <a href="#" type="submit" class="cartbtn">Place Order</a>
    </div>
    <!-- Cart -->

    <!-- Home Section Open -->
    <section class="home" id="home">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12">
                    <div class="home-content" data-aos="fade-up" data-aos-duration="1000">
                        <p class="badge fs-6 fw-normal bg-primary-light text-primary"> You have to try it 😋</p>
                        <h1 class="text-home-bold text-dark mt-1">
                            For you, we serve Best & <span class="text-primary">Delicious..</span>
                        </h1>
                        <h4 class="text-home-reguler fw-normal text-secondary">
                           For you, we serve the best and most delicious meals crafted from fresh ingredients. Our passion is in every plate, bringing you taste, comfort, and satisfaction with every bite.</p>
                        </h4>
                        <div class="home-btn mt-5">
                            <a href="#menu" class="btn btn-primary shadow-none">Order now</a>
                            <a href="#" class="btn btn-video-play">
                                <i class='bx bx-play'></i>
                            </a>
                            <span class="video-play text-dark">See video</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="home-img" data-aos="fade-up" data-aos-duration="2000">
                        <img src="/images/home-img.svg" class="w-100" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Home Section Close -->

    <!-- Services Section Open -->
    <section class="services text-center">
        <div class="container">
            <span class="text-primary">Services</span>
            <h2 class="text-dark mt-3">Our best services</h2>
            <div class="row">
                <div class="col-lg-4 col-md-6 content mt-5" data-aos="fade-up" data-aos-duration="1000">
                    <img src="/images/services-1.svg" alt="">
                    <h5 class="services-title text-dark mt-4">Fastest delivery</h5>
                    <p class="text-secondary mt-3">We can deliver delicious ready-to-eat meals quickly to your
                        doorstep.
                    </p>
                </div>
                <div class="col-lg-4 col-md-6 content mt-5" data-aos="fade-up" data-aos-duration="2000">
                    <img src="/images/services-2.svg" alt="">
                    <h5 class="services-title text-dark mt-4">Affordable prices</h5>
                    <p class="text-secondary mt-3">Every food we provide has an affordable price and according to
                        taste.
                    </p>
                </div>
                <div class="col-lg-4 col-md-6 content mt-5" data-aos="fade-up" data-aos-duration="3000">
                    <img src="/images/services-3.svg" alt="">
                    <h5 class="services-title text-dark mt-4">Delicious & hygienic</h5>
                    <p class="text-secondary mt-3">In every food, we serve it with the best recipe so that it tastes
                        good.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Section Close -->

    <section class="category-section">
        <div class="container">
            <h1></h1>
            <!-- Heading -->

            <!-- rc-carousel wrapper, set total tiles count including duplicate items -->
            <div class="rc-carousel" style="--tiles: 18;">
                <!-- rc-carousel-strip animation -->
                <div class="rc-carousel-strip">
                    <!-- Flexbox -->
                    <div class="rc-carousel-box">
                        <!-- Items start -->
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-1.jpg" alt="dhl" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-2.jpg" alt="fedex" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-3.jpg" alt="ups" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-4.jpg" alt="upsp" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-1.jpg" alt="ems" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-2.jpg" alt="dpd" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-3.jpg" alt="gls" />
                        </div>
                        <div class="rc-carousel-item">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-4.jpg" alt="auspost" />
                        </div>

                        <!-- Items end -->

                        <!-- Duplicate items start, for infinite loop -->
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-1.jpg" alt="dhl" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-2.jpg" alt="fedex" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-3.jpg" alt="ups" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-4.jpg" alt="upsp" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-1.jpg" alt="ems" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-2.jpg" alt="dpd" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-3.jpg" alt="gls" />
                        </div>
                        <div class="rc-carousel-item" aria-hidden="true">
                            <img class="rc-carousel-item-image" src="/images/category-thumb-4.jpg" alt="auspost" />
                        </div>
                        <!-- Duplicate items end -->
                    </div>
                    <!-- Flexbox ends -->
                </div>
                <!-- rc-carousel-strip ends -->
            </div>
            <!-- rc-carousel wrapper ends -->
        </div>
    </section>

    <!-- Menu Section Open -->
    <section class="menu" id="menu">
        <div class="container">
            <span class="text-primary">Our menu</span>
            <h2 class="text-dark mt-3">Order your food</h2>
            <% if (items !='' ) { %>
                <div class="row">
                    <% items.forEach((row, index)=> { %>
                        <div class="col-lg-3 col-md-6">
                            <div class="card-menu bg-white mt-3" data-aos="fade-up" data-aos-duration="1000">
                                <div class="item" data-id="<%= row._id %>">
                                    <img src="/uploads/<%= row.image %>">
                                    <h5 class="menu-title text-dark mt-3">
                                        <%= row.itemName %>
                                    </h5>
                                    <p class="text-secondary mt-2">
                                        <%= row.description %>
                                    </p>
                                    <h4 class="text-secondary fs-5 mt-4"> Price : ₹<%= row.price %>
                                    </h4>
                                     <!-- Quantity Control on the left -->
                                    <div class="d-flex align-items-center justify-content-start mt-3 gap-3">
                                        <div class="quantity-control d-flex align-items-center">
                                            <button class="qty-btn minus">−</button>
                                            <span class="qty-number">1</span>
                                            <button class="qty-btn plus">+</button>
                                        </div>

                                        <!-- Add to Cart Button -->
                                        <a href="#" class="btn btn-primary btn-cart shadow-none add-to-cart">
                                            <i class='bx bx-cart fs-5'></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% }) %>
                    </div>
                <% } else { %>
                    <h2 class="text-center text-secondary mt-5">No Item found!</h2>
                <% } %>
        </div>
    </section>
    <!-- Menu Section Close -->

    <!-- Testimonials Section Open -->
    <section class="testimonials text-center">
        <div class="container">
            <span class="text-primary">Testimonials</span>
            <h2 class="text-dark mt-3">What our customers say?</h2>
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <% if (reviews && reviews.length> 0) { %>
                        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"
                            data-bs-interval="5000">
                            <!-- Indicators -->
                            <div class="carousel-indicators">
                                <% reviews.forEach((row, index)=> { %>
                                    <button type="button" data-bs-target="#carouselExampleIndicators"
                                        data-bs-slide-to="<%= index %>"
                                        class="rounded-circle bg-primary <%= index === 0 ? 'active' : '' %>"
                                        aria-current="<%= index === 0 ? 'true' : 'false' %>"
                                        aria-label="Slide <%= index + 1 %>">
                                    </button>
                                    <% }); %>
                            </div>
                            <!-- Carousel Items -->
                            <div class="carousel-inner">
                                <% reviews.forEach((row, index)=> { %>
                                    <div class="carousel-item <%= index === 0 ? 'active' : '' %>">
                                        <div class="content-testimonials mt-5" data-aos="fade-up"
                                            data-aos-duration="1000">
                                            <img class="rounded-circle" src="/uploads/<%= row.image %>"
                                                style="width: 80px;">
                                            <h5 class="name-testimonials text-dark mt-3">
                                                <%= row.cname %>
                                            </h5>
                                            <i class='bx bxs-star'></i>
                                            <i class='bx bxs-star'></i>
                                            <i class='bx bxs-star'></i>
                                            <i class='bx bxs-star'></i>
                                            <i class='bx bxs-star-half'></i>
                                            <p class="text-secondary mt-3">
                                                <%= row.review %>
                                            </p>
                                        </div>
                                    </div>
                                    <% }); %>
                            </div>
                        </div>
                        <% } else { %>
                            <h2 class="text-center text-secondary mt-5">No review found!</h2>
                            <% } %>
                </div>
            </div>
        </div>
        <div style="margin-top: 100px;">
            <a href="/reviews" class="btn btn-primary w-full" type="submit"> Submit Your Review</a>
        </div>
    </section>
    <!-- Testimonials Section Close -->

    <!-- Promo Section Open -->
    <section class="app-download-section">
        <div class="container">
            <div class="Acontent">
                <div class="text-column">
                    <h6>Dine with us</h6>
                    <h1 class="text-home-bold text-dark">Discover the Future of <span class="text-primary">Dining with
                            us..</span></h1>
                    <p class="text-home-reguler fw-normal text-secondary mt-2">Whether you’re dining solo or with
                        friends, our QR code system ensures you spend less time waiting and more time savoring delicious
                        food.</p>
                    <div class="download-buttons">
                        <a href="#menu" class="btn btn-primary w-full"> Go to Menu</a>
                    </div>
                </div>
                <div class="image-column">
                    <div class="app-image-wrapper">
                        <img src="/images/mobile.png" alt="App Preview">
                        <div class="background-decor"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Promo Section Close -->

    <!-- ***** Reservation Us Area Starts ***** -->
    <section class="section" id="reservation">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 align-self-center">
                    <div class="left-text-content">
                        <div class="section-heading">

                            <h2>Make A Reservation <br> Or Just walkin to our cafe</h2>
                        </div>
                        <p class="text-home-reguler fw-normal">Planning ahead? Reserve your table easily online and skip
                            the wait. Or, if you’re nearby and craving a fresh cup of coffee or a tasty meal, just walk
                            in..!</p>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="phone">
                                    <i class="bx bx-phone"></i>
                                    <h4>Phone Numbers</h4>
                                    <span><a href="#">080-090-0990</a><br><a href="#">080-090-0880</a></span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="message">
                                    <i class="bx bx-envelope"></i>
                                    <h4>Emails</h4>
                                    <span><a href="#">hello@company.com</a><br><a href="#">info@company.com</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                                        <div class="contact-form">
                        <form id="reservationForm" action="/reserve" method="post">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h4>Table Reservation</h4>
                                </div>
                                <div class="col-lg-6 col-sm-12">
                                    <fieldset>
                                        <input name="fullName" type="text" id="name" placeholder="Your Name*" required="">
                                    </fieldset>
                                </div>
                                <div class="col-lg-6 col-sm-12">
                                    <fieldset>
                                        <input name="email" type="text" id="email" pattern="[^ @]*@[^ @]*"
                                            placeholder="Your Email Address" required="">
                                    </fieldset>
                                </div>
                                <div class="col-lg-6 col-sm-12">
                                    <fieldset>
                                        <input name="phone" type="text" id="phone" placeholder="Phone Number*"
                                            required="">
                                    </fieldset>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <fieldset>
                                        <input name="guests" type="text" id="guests" placeholder="Number Of Guests*"
                                            required="">
                                    </fieldset>
                                </div>
                                <div class="col-lg-6">
                                    <div id="filterDate2">
                                        <div class="input-group date">
                                            <input name="date" id="date" type="date" class="form-control">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <fieldset>
                                        <input value="time" name="time" id="time" type="time">
                                    </fieldset>
                                </div>
                                <div class="col-lg-12">
                                    <fieldset>
                                        <textarea name="description" rows="6" id="message" placeholder="Message"
                                            required=""></textarea>
                                    </fieldset>
                                </div>
                                <div class="col-lg-12">
                                    <fieldset>
                                        <button type="submit" id="form-submit"
                                            class="btn btn-primary shadow-sm w-100">Make Reservation</button>
                                    </fieldset>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ***** Reservation Area Ends ***** -->

    <!-- Footer Section Open -->
    <footer class="footer-section">
        <div class="container">
            <div class="row">
                <!-- Column 1: Brand + Description -->
                <div class="col-md-4">
                    <div class="footer-brand">
                        <img src="/images/logo.svg" class="me-3 mb-2" alt="brand">
                        <span class="text-dark fs-5 fw-bold">Foodly</span>
                        <p class="text-secondary mt-3">
                            Foodly is a restaurant that has been <br> around since 1988. <br>
                            We serve the best quality food for you.
                        </p>

                        <!-- Social Media Icons -->
                        <div class="social-icons mt-3 my-3">
                            <a href="#" class="me-2 text-dark"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="me-2 text-dark"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="text-dark"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Column 2: Quick Links -->
                <div class="col-md-4">
                    <div class="footer-content">
                        <span class="fw-bold">Quick Links</span>
                        <ul class="footer-link mt-3 list-unstyled">
                            <li class="py-1 d-flex align-items-start">
                                <a href="/reviews"><i class="fa fa-link" aria-hidden="true"
                                        style="color: orangered;"></i> Reviews</a>
                            </li>
                            <li class="py-1 d-flex align-items-start">
                                <a href="#menu"><i class="fa fa-link" aria-hidden="true" style="color: orangered;"></i>
                                    Our Menu</a>
                            </li>
                            <li class="py-1 d-flex align-items-start">
                                <a href="#reservation"><i class="fa fa-link" aria-hidden="true"
                                        style="color: orangered;"></i> Table Booking</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Column 4: Contact -->
                <div class="col-md-4">
                    <div class="footer-content">
                        <span class="fw-bold">Address & Location</span>
                        <ul class="footer-link mt-3 list-unstyled" style="cursor: pointer;">
                            <li class="py-1 d-flex align-items-start">
                                <i class="fa-solid fa-location-dot me-2 mt-1" style="color: orangered;"></i>
                                <a href="">Hazrat Ganj</a>
                            </li>
                            <li class="py-1 d-flex align-items-start">
                                <i class="fa-solid fa-phone me-2 mt-1" style="color: orangered;"></i>
                                <a href="tel:+919807679767">+91 9807-679-767</a>
                            </li>
                            <li class="py-1 d-flex align-items-start">
                                <i class="fa-solid fa-envelope me-2 mt-1" style="color: orangered;"></i>
                                <a href="">contact@foodly.co.in</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Copyright Row -->
            <div class="row mt-5">
                <p class="copyright text-secondary text-center"> Made with ❤️ | By <a class="text-primary"
                        href="https://ramsondevelopers.com">Ramson Developers</a> </p>
            </div>
        </div>
    </footer>
    <!-- Footer Section Close -->


    <!-- Popup Modal For Resrevation-->
    <div class="modal fade" id="reservationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center p-4">
                <div class="modal-body">
                    <h5 id="modalMessage"></h5>
                    <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>




    <!-- Popup Modal Script -->
    <script>
        document.getElementById('reservationForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const form = e.target;
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            try {
                const res = await fetch('/reserve', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });

                const result = await res.json();

                // Show popup
                const modalMessage = document.getElementById('modalMessage');
                const modal = new bootstrap.Modal(document.getElementById('reservationModal'));

                if (res.ok) {
                    modalMessage.textContent = result.message || 'Reservation successful!';
                    form.reset(); // optional: clear form
                } else {
                    modalMessage.textContent = result.message || 'Something went wrong.';
                }

                modal.show();

            } catch (err) {
                console.error('Error:', err);
                const modalMessage = document.getElementById('modalMessage');
                modalMessage.textContent = 'Unexpected error occurred.';
                const modal = new bootstrap.Modal(document.getElementById('reservationModal'));
                modal.show();
            }
        });
    </script>


    <!-- AOS Animate on Scroll -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <!-- Add Drop Shadow on Scroll -->
    <script>
        window.addEventListener('scroll', (e) => {
            const nav = document.querySelector('.navbar');
            if (window.pageYOffset > 0) {
                nav.classList.add("drop-shadow");
            } else {
                nav.classList.remove("drop-shadow");
            }
        });
    </script>

    <!-- Reservation Script -->
    <script>
        $('.js-input').keyup(function () {
            if ($(this).val()) {
                $(this).addClass('not-empty');
            } else {
                $(this).removeClass('not-empty');
            }
        });
    </script>

   

        <script>
    document.addEventListener("DOMContentLoaded", () => {
    const placeOrderBtn = document.querySelector(".cartbtn");
    if (placeOrderBtn) {
        placeOrderBtn.addEventListener("click", function (e) {
            e.preventDefault();

            // ✅ Get cart from localStorage
            const cart = JSON.parse(localStorage.getItem("cart")) || [];

            // If cart is empty, do nothing
            if (cart.length === 0) {
                showPopup("❌ Cart is empty.");
                return;
            }

            // ✅ Collect totals
            const subtotal = parseFloat(document.getElementById("cart-subtotal")?.textContent.replace(/[^\d.]/g, "")) || 0;
            const tax = parseFloat(document.getElementById("cart-tax")?.textContent.replace(/[^\d.]/g, "")) || 0;
            const total = parseFloat(document.getElementById("cart-total")?.textContent.replace(/[^\d.]/g, "")) || 0;

            // ✅ Build order object
            const orderData = {
                tableNumber: document.querySelector(".table-input")?.value || "NA",
                offer: document.querySelector(".offer-btn")?.classList.contains("active") ? "yes" : "no",
                items: cart.map(item => ({
                    name: item.name,
                    price: item.price,
                    quantity: item.quantity,
                    image: item.image
                })),
                subtotal,
                tax,
                total
            };

            // ✅ Send to backend
            fetch("/place-order", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(orderData)
            })
                .then(response => {
                    if (response.ok) {
                        showPopup("✅ Order placed! Thank You.");

                        // Clear cart in localStorage
                        localStorage.removeItem("cart");

                        // Clear cart items from DOM
                        document.getElementById("cart-items").innerHTML = "";

                        // Clear totals
                        document.getElementById("cart-subtotal").textContent = "₹0.00";
                        document.getElementById("cart-tax").textContent = "₹0";
                        document.getElementById("cart-total").textContent = "₹0";

                        // Clear the table number input
                        document.querySelector(".table-input").value = "";

                        // Deactivate the offer button
                        document.querySelector(".offer-btn")?.classList.remove("active");
                    } else {
                        throw new Error('Order failed');
                    }
                })
                .catch(() => showPopup("❌ Something went wrong."));
        });
    }

    // Popup function
    function showPopup(message) {
        const popup = document.createElement("div");
        popup.innerText = message;
        popup.style.position = "fixed";
        popup.style.top = "20px";
        popup.style.left = "50%";
        popup.style.transform = "translateX(-50%)";
        popup.style.backgroundColor = "#4BB543";
        popup.style.color = "#fff";
        popup.style.padding = "12px 20px";
        popup.style.borderRadius = "8px";
        popup.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";
        popup.style.zIndex = "10000";
        popup.style.fontSize = "16px";
        document.body.appendChild(popup);

        setTimeout(() => popup.remove(), 1000);
    }
    });
    </script>
    
    <script>
        document.querySelector(".offer-btn")?.addEventListener("click", function () {
    this.classList.toggle("active");
    });
    </script>

    <script>
        AOS.init();
    </script>

    <script src="/js/main.js"></script>
    
</body>
</html>