<?php
session_start();
if (!isset($_SESSION['otp_verified']) || !$_SESSION['otp_verified']) {
    echo "<script>alert('Unauthorized access. Please verify OTP first.'); window.location.href='forgot-password.php';</script>";
    exit();
}
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Login || CarConnect </title>
    <!-- favicons Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/images/favicons/site.webmanifest">
    <meta name="description" content="CarConnect">

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="../../../css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">


    <link href="../../../css2-1?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">


    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/custom-animate.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome-all.css">
    <link rel="stylesheet" href="assets/css/jarallax.css">
    <link rel="stylesheet" href="assets/css/jquery.magnific-popup.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/odometer.min.css">
    <link rel="stylesheet" href="assets/css/timePicker.css">


    <link rel="stylesheet" href="assets/css/module-css/slider.css">
    <link rel="stylesheet" href="assets/css/module-css/footer.css">
    <link rel="stylesheet" href="assets/css/module-css/sliding-text.css">
    <link rel="stylesheet" href="assets/css/module-css/services.css">
    <link rel="stylesheet" href="assets/css/module-css/about.css">
    <link rel="stylesheet" href="assets/css/module-css/booking.css">
    <link rel="stylesheet" href="assets/css/module-css/counter.css">
    <link rel="stylesheet" href="assets/css/module-css/listing.css">
    <link rel="stylesheet" href="assets/css/module-css/video.css">
    <link rel="stylesheet" href="assets/css/module-css/pricing.css">
    <link rel="stylesheet" href="assets/css/module-css/popular-car.css">
    <link rel="stylesheet" href="assets/css/module-css/testimonial.css">
    <link rel="stylesheet" href="assets/css/module-css/faq.css">
    <link rel="stylesheet" href="assets/css/module-css/team.css">
    <link rel="stylesheet" href="assets/css/module-css/call.css">
    <link rel="stylesheet" href="assets/css/module-css/download-app.css">
    <link rel="stylesheet" href="assets/css/module-css/brand.css">
    <link rel="stylesheet" href="assets/css/module-css/blog.css">
    <link rel="stylesheet" href="assets/css/module-css/lets-talk.css">
    <link rel="stylesheet" href="assets/css/module-css/process.css">
    <link rel="stylesheet" href="assets/css/module-css/why-choose.css">
    <link rel="stylesheet" href="assets/css/module-css/gallery.css">
    <link rel="stylesheet" href="assets/css/module-css/page-header.css">
    <link rel="stylesheet" href="assets/css/module-css/error.css">
    <link rel="stylesheet" href="assets/css/module-css/shop.css">

    <!-- template styles -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>

<body class="custom-cursor">
    <div class="body-bg-shape" style="background-image: url(assets/images/shapes/body-bg-shape.jpg);"></div>
    <div class="custom-cursor__cursor"></div>
    <div class="custom-cursor__cursor-two"></div>

    <!--Start Preloader-->
    <div class="loader js-preloader">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <!--End Preloader-->







    <!-- Start sidebar widget content -->
    <div class="xs-sidebar-group info-group info-sidebar">
        <div class="xs-overlay xs-bg-black"></div>
        <div class="xs-sidebar-widget">
            <div class="sidebar-widget-container">
                <div class="widget-heading">
                    <a href="#" class="close-side-widget">X</a>
                </div>
                <div class="sidebar-textwidget">
                    <div class="sidebar-info-contents">
                        <div class="content-inner">
                            <div class="logo">
                                <a href="index.php"><img src="assets/images/resources/logo-2.png" alt=""></a>
                            </div>
                            <div class="content-box">
                                <h4>Car Rental Booking</h4>
                                <div class="inner-text">
                                    <p>Book a car in minutes with CarConnect. Choose from a wide fleet, compare transparent rates, and receive instant confirmation. Enjoy flexible pickup/drop‑off, 24/7 customer support, optional driver service, and easy cancellations — everything designed to make your rental hassle‑free.</p>
                                </div>
                            </div>

                            <div class="form-inner">
                                <h4>Reserve your Car</h4>
                                <form action="../backend/sidebar_booking.php" method="post">
                                    <div class="form-group">
                                        <input type="text" name="name" placeholder="Name" required="">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" name="email" placeholder="Email" required="">
                                    </div>
                                    <div class="form-group">
                                        <textarea name="message" placeholder="Message..."></textarea>
                                    </div>
                                    <div class="form-group message-btn">
                                        <button type="submit" class="thm-btn form-inner__btn">Book Now</button>
                                    </div>
                                </form>
                            </div>

                            <div class="sidebar-contact-info">
                                <h4>Contact Info</h4>
                                <ul class="list-unstyled">
                                    <li>
                                        <span class="icon-pin"></span> Coimbatore,Tamil Nadu
                                    </li>
                                    <li>
                                        <span class="icon-call"></span>
                                        <a href="tel:+919345535141">+91 93455 35141</a>
                                    </li>
                                    <li>
                                        <span class="icon-envelope"></span>
                                        <a href="mailto:info@example.com">carrental@gmail.com</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="thm-social-link1">
                                <ul class="social-box list-unstyled">
                                    <li>
                                        <a href="#"><i class="icon-facebook" aria-hidden="true"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="icon-twitter" aria-hidden="true"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="icon-linkedin" aria-hidden="true"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="icon-dribble-big-logo" aria-hidden="true"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End sidebar widget content -->








    <div class="page-wrapper">
        <header class="main-header-two">
            <div class="main-menu-two__top">
                <div class="main-menu-two__top-inner">
                    <ul class="list-unstyled main-menu-two__contact-list">
                        <li>
                            <div class="icon">
                                <i class="icon-call-2"></i>
                            </div>
                            <div class="text">
                                <p><a href="tel:+919345535141">+91 93455 35141</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="icon-envelope-2"></i>
                            </div>
                            <div class="text">
                                <p><a href="mailto:support@gmail.com">carrental@gmail.com</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="icon">
                                <i class="icon-pin-2"></i>
                            </div>
                            <div class="text">
                                <p>Coimbatore,Tamil Nadu</p>
                            </div>
                        </li>
                    </ul>
                    <div class="main-menu-two__top-right">
                        <div class="main-menu-two__top-login-reg-box">
                            <a href="login.php">Login</a>
                            <p>or</p>
                            <a href="sign-up.php">Register</a>
                        </div>
                        <div class="main-menu-two__social">
                            <a href="#"><i class="icon-facebook"></i></a>
                            <a href="#"><i class="icon-twitter"></i></a>
                            <a href="#"><i class="icon-instagram"></i></a>
                            <a href="#"><i class="icon-youtube"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="main-menu main-menu-two">
                <div class="main-menu-two__wrapper">
                    <div class="main-menu-two__wrapper-inner">
                        <div class="main-menu-two__left">
                            <div class="main-menu-two__logo">
                                <a href="index.php"><img src="assets/images/resources/logo-2.png" alt=""></a>
                            </div>
                        </div>
                        <div class="main-menu-two__middle-box">
                            <div class="main-menu-two__main-menu-box">
                                <a href="#" class="mobile-nav__toggler"><i class="fa fa-bars"></i></a>
                                <ul class="main-menu__list">
                                    <li>
                                        <a href="index.php">Home </a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#">About Us</a>
                                        <ul class="shadow-box>">
                                            <li><a href="about.php">About Us</a></li>
                                            <li><a href="faq.php">FAQs</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="rental-agreement.php">Rental Agreement</a>
                                        <!-- <ul class="shadow-box">
                                            
                                            <li><a href="drivers.php">Drivers</a></li>
                                            <li><a href="driver-details.php">Driver Details</a></li>
                                            <li><a href="testimonials.php">Testimonials</a></li>
                                            <li><a href="pricing.php">Pricing</a></li>
                                            <li><a href="faq.php">FAQs</a></li>
                                            <li><a href="404.php">404 Error</a></li>
                                        </ul> -->
                                    </li>
                                    <li><a href="services.php">Services</a></li>
                                    <li>
                                        <a href="cars.php">Cars & Tariff</a>
                                        <!-- <ul class="shadow-box">
                                            <li><a href="cars.php">Cars</a></li>
                                            <li><a href="car-list-v-1.php">Car Listing V-1</a></li>
                                            <li><a href="car-list-v-2.php">Car Listing V-2</a></li>
                                            <li><a href="car-list-v-3.php">Car Listing V-3</a></li>
                                            <li><a href="listing-single.php">Car Listing Single</a></li>
                                        </ul> -->
                                    </li>
                                    <!-- <li class="dropdown">
                                        <a href="#">Shop</a>
                                        <ul class="shadow-box">
                                            <li><a href="products.php">Products</a></li>
                                            <li><a href="product-details.php">Product Details</a></li>
                                            <li><a href="cart.php">Cart</a></li>
                                            <li><a href="checkout.php">Checkout</a></li>
                                            <li><a href="wishlist.php">Wishlist</a></li>
                                            <li><a href="sign-up.php">Sign Up</a></li>
                                            <li><a href="login.php">Login</a></li>
                                        </ul>
                                    </li> -->
                                    <!-- <li class="dropdown">
                                        <a href="#">Blog</a>
                                        <ul class="shadow-box">
                                            <li><a href="blog.php">Blog</a></li>
                                            <li><a href="blog-standard.php">Blog Standard</a></li>
                                            <li><a href="blog-left-sidebar.php">Blog Left Sidebar</a></li>
                                            <li><a href="blog-right-sidebar.php">Blog Right Sidebar</a></li>
                                            <li><a href="rental-agreement.php">Blog Details</a></li>
                                        </ul>
                                    </li> -->
                                    <li>
                                        <a href="contact.php">Contact Us</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="main-menu-two__search-cart-box">
                                <!-- <div class="main-menu-two__search-box">
                                    <a href="#" class="main-menu-two__search search-toggler icon-search"></a>
                                </div> -->
                                <!-- <div class="main-menu-two__cart-box">
                                    <a href="cart.php" class="main-menu-two__cart">
                                        <span class="far fa-shopping-cart"></span>
                                        <span class="main-menu-two__cart-count">02</span>
                                    </a>
                                </div> -->
                            </div>
                        </div>
                        <div class="main-menu-two__right">
                            <div class="main-menu-two__call">
                                <div class="main-menu-two__call-icon">
                                    <i class="icon-call-3"></i>
                                </div>
                                <div class="main-menu-two__call-content">
                                    <p class="main-menu-two__call-sub-title">Call Anytime</p>
                                    <h5 class="main-menu-two__call-number"><a href="+919345535141">+91 93455 35141</a>
                                    </h5>
                                </div>
                            </div>
                            <div class="main-menu-two__nav-sidebar-icon">
                                <a class="navSidebar-button" href="#">
                                    <span class="icon-dots-menu-one"></span>
                                    <span class="icon-dots-menu-two"></span>
                                    <span class="icon-dots-menu-three"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <div class="stricky-header stricked-menu main-menu main-menu-two">
            <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
        </div><!-- /.stricky-header -->


        <!--Page Header Start -->
        <section class="page-header">
            <div class="page-header__bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg);">
            </div>
            <!-- <div class="page-header__shape-1" style="background-image: url(assets/images/shapes/page-header-shape-1.png);"></div> -->
            <div class="container">
                <div class="page-header__inner">
                    <h3>Forget Password</h3>
                    <div class="thm-breadcrumb__inner">
                        <ul class="thm-breadcrumb list-unstyled">
                            <li><a href="index.php">Home</a></li>
                            <li><span class="icon-arrow-left"></span></li>
                            <li><a href="./login.php">Login</a></li>
                            <li><span class="icon-arrow-left"></span></li>
                            <li>Forget Password</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!--Page Header End -->

        <div class="reset-box">
            <h2>Reset Password</h2>
            <form action="../backend/reset_password.php" method="POST">
                <input type="password" name="new_password" placeholder="Enter new password" required>
                <input type="password" name="confirm_password" placeholder="Confirm new password" required>
            <button type="submit">Update Password</button>
            </form>
        </div>

        <!--Site Footer Start-->
        <footer class="site-footer">
            <div class="site-footer__bg" style="background-image: url(assets/images/backgrounds/site-footer-bg.jpg);">
            </div>
            <div class="site-footer__top">
                <div class="container">
                    <div class="site-footer__top-inner">
                        <div class="row">
                            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                                <div class="footer-widget__about">
                                    <div class="footer-widget__about-logo">
                                        <a href="index.php"><img src="assets/images/resources/footer-logo.png" alt=""></a>
                                    </div>
                                    <p class="footer-widget__about-text">Car Is Where Early Adopters And Innovation
                                        Seekers Find Lively
                                        Imaginative Tech.</p>
                                    <form class="footer-widget__form" id="subscribeForm">
                                        <div class="footer-widget__input">
                                            <input type="email" id="emailInput" placeholder="Your Email" required>
                                        </div>
                                        <button type="submit" class="footer-widget__btn"><i class="icon-right-arrow"></i></button>
                                    </form>
                                    <!-- Message area -->
                                    <p id="subscribeMessage" style="color: #fff; margin-top: 10px;"></p>
                                </div>
                            </div>
                            <div class="col-xl-2 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="200ms">
                                <div class="footer-widget__links">
                                    <h4 class="footer-widget__title">Quick links</h4>
                                    <ul class="footer-widget__links-list list-unstyled">
                                        <li><a href="index.php">Home</a></li>
                                        <li><a href="about.php">About Us</a></li>
                                        <li><a href="faq.php">Faq</a></li>
                                        <li><a href="services.php">Services</a></li>
                                        <li><a href="rental-agreement.php">Rental Agreement</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="400ms">
                                <div class="footer-widget__services">
                                    <h4 class="footer-widget__title">Our Services</h4>
                                    <ul class="footer-widget__links-list list-unstyled">
                                        <li><a href="cars.php">Cars & Tariff</a></li>
                                        <li><a href="contact.php">Contact Us</a></li>
                                        <li><a href="sign-up.php">Sign In</a></li>
                                        <li><a href="login.php">Login</a></li>
                                        <!-- <li><a href="listing-single.php">Dash Transport</a></li> -->
                                    </ul>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="300ms">
                                <div class="footer-widget__contact">
                                    <h3 class="footer-widget__title">Contact Us</h3>
                                    <ul class="footer-widget__contact-list list-unstyled">
                                        <li>
                                            <div class="icon">
                                                <span class="icon-pin"></span>
                                            </div>
                                            <p>Coimbatore,Tamil Nadu
                                                <br> India
                                            </p>
                                        </li>
                                        <li>
                                            <div class="icon">
                                                <span class="icon-call"></span>
                                            </div>
                                            <p><a href="tel:+919345535141">+91 93455 35141</a></p>
                                        </li>
                                        <li>
                                            <div class="icon">
                                                <span class="icon-envelope"></span>
                                            </div>
                                            <p><a href="mailto:example@gmail.com">carrental@gmail.com</a></p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer__bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="site-footer__bottom-inner">
                                <div class="site-footer__copyright">
                                    <p class="site-footer__copyright-text">© 2025 CarConnect | Designed by Zemaraim Technology Pvt. Ltd.</p>
                                </div>
                                <div class="site-footer__bottom-menu-box">
                                    <ul class="list-unstyled site-footer__bottom-menu">
                                        <li><a href="about.php">Terms of Service</a></li>
                                        <li><a href="about.php">Privacy policy</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!--Site Footer End-->




    </div><!-- /.page-wrapper -->


    <div class="mobile-nav__wrapper">
        <div class="mobile-nav__overlay mobile-nav__toggler"></div>
        <!-- /.mobile-nav__overlay -->
        <div class="mobile-nav__content">
            <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>

            <div class="logo-box">
                <a href="index.php" aria-label="logo image"><img src="assets/images/resources/logo-2.png" width="140" alt=""></a>
            </div>
            <!-- /.logo-box -->
            <div class="mobile-nav__container"></div>
            <!-- /.mobile-nav__container -->

            <ul class="mobile-nav__contact list-unstyled">
                <li>
                    <i class="fa fa-envelope"></i>
                    <a href="mailto:needhelp@packageName__.com">needhelp@gorent.com</a>
                </li>
                <li>
                    <i class="fas fa-phone"></i>
                    <a href="tel:666-888-0000">666 888 0000</a>
                </li>
            </ul><!-- /.mobile-nav__contact -->
            <div class="mobile-nav__top">
                <div class="mobile-nav__social">
                    <a href="#" class="fab fa-twitter"></a>
                    <a href="#" class="fab fa-facebook-square"></a>
                    <a href="#" class="fab fa-pinterest-p"></a>
                    <a href="#" class="fab fa-instagram"></a>
                </div><!-- /.mobile-nav__social -->
            </div><!-- /.mobile-nav__top -->



        </div>
        <!-- /.mobile-nav__content -->
    </div>
    <!-- /.mobile-nav__wrapper -->

    <div class="search-popup">
        <div class="search-popup__overlay search-toggler"></div>
        <!-- /.search-popup__overlay -->
        <div class="search-popup__content">
            <form action="#">
                <label for="search" class="sr-only">search here</label><!-- /.sr-only -->
                <input type="text" id="search" placeholder="Search Here...">
                <button type="submit" aria-label="search submit" class="thm-btn">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
        <!-- /.search-popup__content -->
    </div>
    <!-- /.search-popup -->

    <a href="#" data-target="html" class="scroll-to-target scroll-to-top">
        <span class="scroll-to-top__wrapper"><span class="scroll-to-top__inner"></span></span>
        <span class="scroll-to-top__text"> Go Back Top</span>
    </a>


    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/jarallax.min.js"></script>
    <script src="assets/js/jquery.ajaxchimp.min.js"></script>
    <script src="assets/js/jquery.appear.min.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <script src="assets/js/jquery.circle-progress.min.js"></script>
    <script src="assets/js/knob.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.validate.min.js"></script>
    <script src="assets/js/wNumb.min.js"></script>
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/jquery-ui.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/jquery-sidebar-content.js"></script>
    <script src="assets/js/gsap/gsap.js"></script>
    <script src="assets/js/gsap/ScrollTrigger.js"></script>
    <script src="assets/js/gsap/SplitText.js"></script>
    <script src="assets/js/marquee.min.js"></script>
    <script src="assets/js/odometer.min.js"></script>
    <script src="assets/js/timePicker.js"></script>
    <script src="assets/js/typed-2.0.11.js"></script>
    <script src="assets/js/aos.js"></script>
        <script>
document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("subscribeForm");
  const messageBox = document.getElementById("subscribeMessage");

  if (!form) return;

  // 🔹 Helper function for fade effect
  function showMessage(text, color) {
    messageBox.textContent = text;
    messageBox.style.color = color;
    messageBox.style.opacity = "0";
    messageBox.style.transition = "opacity 0.5s ease";
    messageBox.style.display = "block";

    // Fade in
    setTimeout(() => {
      messageBox.style.opacity = "1";
    }, 50);

    // Fade out after 3 seconds
    setTimeout(() => {
      messageBox.style.opacity = "0";
    }, 3000);
  }

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const email = document.getElementById("emailInput").value.trim();

    if (!email) {
      showMessage("Please enter a valid email.", "orange");
      return;
    }

    try {
      const res = await fetch("../backend/save_email.php", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: "email=" + encodeURIComponent(email),
      });

      const text = await res.text();
      showMessage(text, text.includes("Thank") ? "lightgreen" : "red");
      form.reset();
    } catch (err) {
      showMessage("Something went wrong!", "red");
    }
  });
});
</script>




    <!-- template js -->
    <script src="assets/js/script.js"></script>
</body>

</html>