<!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>Reviews</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="/"  class="btn btn-primary shadow-none cart-mobile-btn position-relative">
                    <i class='bx bx-home fs-5'></i>
                </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">
        <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 active">
        <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 Open -->


    <!-- Review Section Open -->
    <section class="review" id="review">
        <div class="container">
           <span class="text-primary">Reviews</span>
            <h2 class="fw-bold text-dark mt-3">Please Review us..</h2>
          <div class="row align-items-center">
              <!-- Left Column: Text Content + Form -->
              <div class="col-lg-6 col-md-12">
                  <div class="row">
                      <div class="col-md-11">
                          <!-- Review Submission Form -->
                          <div class="card p-4 shadow-sm border-0" data-aos="fade-up" data-aos-duration="1200">
                            <%- include ("./partials/messages"); %>
                              <form action="add_reviews" method="POST" enctype="multipart/form-data">
                                  <div class="mb-3">
                                      <label for="name" class="form-label">Your Name</label>
                                      <input type="text" class="form-control" id="cname" name="name" placeholder="Enter your name" required>
                                  </div>

                                  <div class="mb-3">
                                      <label for="review" class="form-label">Your Review</label>
                                      <textarea class="form-control" id="review" name="review" rows="4" placeholder="Write your feedback..." required></textarea>
                                  </div>

                                  <div class="mb-3">
                                      <label for="image" class="form-label">Upload Your Image</label>
                                      <input class="form-control" type="file" id="image" name="image" accept="image/*" required>
                                  </div>

                                  <button type="submit" class="btn btn-primary shadow-sm w-100">Submit Review</button>
                              </form>
                          </div>
                          <!-- End of Form -->
                      </div>
                  </div>
              </div>

              <!-- Right Column: Image -->
              <div class="col-lg-6 col-md-12">
                  <div class="review-img" data-aos="fade-up" data-aos-duration="2000">
                      <img src="/images/gallery-img.svg" class="w-100" alt="Gallery Image">
                  </div>
              </div>
          </div>
        
        </div>
       
    </section>
    <!-- Review 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>
         <div style="text-align: center; margin-top: 100px;">
          <a href="/" class="btn btn-primary mb-4">← Back to Home</a>
        </div>
    </section>


    <!-- ***** 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>
                                        <select value="number-guests" name="guests" id="number-guests">
                                            <option value="number-guests">Number Of Guests</option>
                                            <option name="1" id="1">1</option>
                                            <option name="2" id="2">2</option>
                                            <option name="3" id="3">3</option>
                                            <option name="4" id="4">4</option>
                                            <option name="5" id="5">5</option>
                                            <option name="6" id="6">6</option>
                                            <option name="7" id="7">7</option>
                                            <option name="8" id="8">8</option>
                                            <option name="9" id="9">9</option>
                                            <option name="10" id="10">10</option>
                                            <option name="11" id="11">11</option>
                                            <option name="12" id="12">12</option>
                                        </select>
                                    </fieldset>
                                </div>
                                <div class="col-lg-6">
                                    <div id="filterDate2">
                                        <div class="input-group date" data-date-format="dd/mm/yyyy">
                                            <input name="date" id="date" type="text" class="form-control"
                                                placeholder="dd/mm/yyyy">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <fieldset>
                                        <select value="time" name="time" id="time">
                                            <option value="time">Time</option>
                                            <option name="Breakfast" id="Breakfast">Breakfast</option>
                                            <option name="Lunch" id="Lunch">Lunch</option>
                                            <option name="Dinner" id="Dinner">Dinner</option>
                                        </select>
                                    </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="">+0628-2267-9981</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.id</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>

    <!-- 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>

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

</body>
</html>
