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

<head>
    <meta charset="utf-8">
    <title>Cruise Kerala - Contact</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Space+Grotesk&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
  
</head>
<style>
          /* Popup Background */
.booking-popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Popup Box */
.booking-popup-content{
    background: #fff;
    max-width: 800px;
    width: 90%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Close Button */
.btn-close-popup{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    border: none;
    background: none;
    cursor: pointer;
}
    .booking-popup .thank-you-message {
        padding: 40px;
        min-height: 330px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #f8faff;
        border-radius: 15px;
        animation: fade-in 0.5s ease;
    }

    /* Increase height of contact form fields */
    .contact-form-wrapper .form-control {
        min-height: 55px;
    }
</style>

<body>
    <!-- Spinner Start -->
    <div id="spinner"
        class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->

    <div class="top-bar">
        <div class="container">
            <div class="left-info">
                <span class="company-name">Cruise Kerala</span>
                <span><i class="fas fa-phone me-2"></i><a href="tel:+919526788688" style="color: inherit; text-decoration: none;">+91 95267 88688</a> / <a href="tel:+918086788688" style="color: inherit; text-decoration: none;">+91 80867 88688</a></span>
                <span class="ms-3"><i class="fas fa-envelope me-2"></i><a href="mailto:cruisekerala.info@gmail.com" style="color: inherit; text-decoration: none;">cruisekerala.info@gmail.com</a></span>
                <span class="ms-3"><i class="fas fa-tag me-2"></i><a href="#" id="topBarQuote" style="color: inherit; text-decoration: none;">Get a Free Quote</a></span>
            </div>
    
            <div class="right-social">
                <a href="tel:+919526788688"><i class="fas fa-phone-alt"></i></a>
                <a href="https://wa.me/919526788688" target="_blank"><i class="fab fa-whatsapp"></i></a>
                <a href="https://www.facebook.com/cruisekerala.official"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.instagram.com/cruise_kerala"><i class="fab fa-instagram"></i></a>
                <a href="https://www.youtube.com/@CruiseKerala"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
    </div>
    <!-- Top Header End -->

    <!-- Navbar Start -->
    <div class="container-fluid sticky-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light border-bottom border-2 border-white">
                <a href="index.php" class="navbar-brand" id="head">
               <img src="img/oglogo2.png" alt="Cruise Kerala Logo" width="110px" height="60px">
                </a>
                <button type="button" class="navbar-toggler ms-auto me-0" data-bs-toggle="collapse"
                    data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav mx-auto">
                        <a href="index.php" class="nav-item nav-link">Home</a>
                        <a href="about.php" class="nav-item nav-link">About</a>
                        <a href="service.php" class="nav-item nav-link">Services</a>
                     
                        <a href="gallery.php" class="nav-item nav-link">Gallery</a>
                        <a href="blog.php" class="nav-item nav-link">Blogs</a>
                        <a href="contact.php" class="nav-item nav-link active">Contact Us</a>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="nav-social-icons">
                            <a href="https://www.instagram.com/cruise_kerala" target="_blank"><i class="fab fa-instagram"></i></a>
                            <a href="https://www.facebook.com/cruisekerala.official" target="_blank"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.youtube.com/@CruiseKerala" target="_blank"><i class="fab fa-youtube"></i></a>
                        </div>
                        <a href="#" id="navBookNow" class="btn btn-primary rounded-pill py-2 px-3">Book Now</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- Hero Start -->
    <div class="container-fluid pb-5 hero-header page-header-contact">
        <div class="container py-5">
            <div class="row g-3 align-items-center">
                <div class="col-lg-6 text-center text-lg-start">
                    <h1 class="display-1 mb-0 animated slideInLeft text-white">Contact Us</h1>
                </div>
                <div class="col-lg-6 animated slideInRight">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center justify-content-lg-end mb-0">
                            <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->


    <!-- Contact Start -->
    <div class="container-fluid py-5 contact-section">
        <div class="container py-5">
            <div class="text-center wow fadeIn" data-wow-delay="0.1s">
                <h1 class="mb-5">Have Any Query? <span class="text-uppercase text-primary">Contact Us</span></h1>
            </div>
            <div class="row g-4 mb-5">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="contact-info-item">
                        <div class="icon">
                            <i class="fa fa-map-marker-alt"></i>
                        </div>
                        <h5>Address</h5>
                        <p class="mb-0">Cruise Kerala, Head Office, Punnamada, Alappuzha – 688006</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="contact-info-item">
                        <div class="icon">
                            <i class="fa fa-envelope-open"></i>
                        </div>
                        <h5>Email Us</h5>
                        <p class="mb-0">cruisekerala.info@gmail.com</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="contact-info-item">
                        <div class="icon">
                            <i class="fa fa-phone-alt"></i>
                        </div>
                        <h5>Call Us</h5>
                        <p class="mb-0">+91 95267 88688</p>
                        <p class="mb-0">+91 80867 88688</p>
                    </div>
                </div>
            </div>
            <div class="row g-5">
                <div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
                    <div class="p-2 rounded-3 shadow-sm" style="background: var(--card-bg);">
                        <iframe class="position-relative rounded-3 w-100 h-100"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3936.643734736686!2d76.33586631479624!3d9.496844993200769!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b0884f1aa296b61%3A0xb84764552c41f85a!2sAlappuzha%2C%2C%20Kerala!5e0!3m2!1sen!2sin!4v1645687289000!5m2!1sen!2sin"
                            frameborder="0" style="min-height: 500px; border:0;" allowfullscreen="" aria-hidden="false"
                            tabindex="0" loading="lazy"></iframe>
                    </div>
                </div>
                <div class="col-lg-7 wow fadeIn" data-wow-delay="0.5s">
                    <div class="contact-form-wrapper p-5">
                        <h3 class="mb-4 text-primary text-center">Send us a message</h3>
                        <form id="contactForm" method="POST" action="save_contact.php">
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-floating" id>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
                                        <label for="name">Your Name</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email">
                                        <label for="email">Your Email</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Your Mobile">
                                        <label for="mobile">Your Mobile</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="date" class="form-control" id="arrival_date" name="arrival_date" placeholder="Arrival Date">
                                        <label for="arrival_date">Arrival Date</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="number" class="form-control" id="num_people" name="num_people" placeholder="Number of People" min="1">
                                        <label for="num_people">Number of People</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary w-100 py-3" type="submit">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!-- Contact End -->

    <!-- Booking Popup Start -->
    <div id="bookingPopup" class="booking-popup">
        <div class="booking-popup-content">
            <div class="row g-0">
                <div class="col-lg-5 d-none d-lg-block">
                    <img src="img/booking.jpg" class="img-fluid h-100" alt="Houseboat" style="object-fit: cover; border-radius: 15px 0 0 15px;">
                </div>
                <div class="col-lg-7 p-5 position-relative">
                    <button type="button" class="btn-close-popup" id="closePopup">&times;</button>
                    <div class="text-center mb-4">
                        <h4 class="text-primary">Book Your Houseboat</h4>
                        <p class="mb-0">Fill in the details below to get a quote</p>
                    </div>
                    <form id="bookingPopupForm" method="POST">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="popupName" name="popupName" placeholder="Your Name" required>
                            <label for="popupName">Your Name</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="tel" class="form-control" id="popupPhone" name="popupPhone" placeholder="Phone Number" required>
                            <label for="popupPhone">Phone Number</label>
                        </div>
                        <div class="form-floating mb-3">
                            <select class="form-select" id="popupBoat" name="popupBoat" required>
                                <option value="" selected disabled>Select Boat</option>
                                <option value="Deluxe">Deluxe Houseboat</option>
                                <option value="Premium">Premium Houseboat</option>
                                <option value="Luxury">Luxury Houseboat</option>
                            </select>
                            <label for="popupBoat">Select Boat</label>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3">Book Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Booking Popup End -->

    <!-- Footer Start -->
    <div class="container-fluid bg-dark text-white-50 footer pt-5">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.1s">
                    <a href="index.php" class="d-inline-block mb-3" style="background: #fff; padding: 5px; border-radius: 5px;">
                        <img src="img/oglogo2.png" alt="Cruise Kerala Logo" style="max-height: 40px;">
                </a>
                    <p class="mb-0">Your gateway to the beautiful backwaters of India. We provide premium houseboat services with a focus on comfort and safety.</p>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.3s">
                    <h5 class="text-white mb-4">Get In Touch</h5>
                    <p><i class="fa fa-map-marker-alt me-3"></i>Cruise Kerala, Head Office, Punnamada, Alappuzha – 688006</p>
                    <p><i class="fa fa-phone-alt me-3"></i>+91 95267 88688, +91 80867 88688</p>
                    <p><i class="fa fa-envelope me-3"></i>cruisekerala.info@gmail.com</p>
                    <div class="d-flex pt-2">
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="#!"><i
                                class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="#!"><i
                                class="fab fa-youtube"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2" href="#!"><i
                                class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.5s">
                    <h5 class="text-white mb-4">Popular Link</h5>
                    <a class="btn btn-link" href="about.php">About Us</a>
                    <a class="btn btn-link" href="service.php">Services</a>
                    <a class="btn btn-link" href="gallery.php">Gallery</a>
                    <a class="btn btn-link" href="blog.php">Blogs</a>
                    <a class="btn btn-link" href="contact.php">Contact Us</a>
                    <a class="btn btn-link" href="terms.html">Terms & Condition</a>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.7s">
                    <h5 class="text-white mb-4">Our Services</h5>
                    <a class="btn btn-link" href="day-cruises.html">Day Cruises</a>
                    <a class="btn btn-link" href="overnight-stays.html">Overnight Stays</a>
                    <a class="btn btn-link" href="honeymoon-special.html">Honeymoon Special</a>
                    <a class="btn btn-link" href="corporate-events.html">Corporate & Group Events</a>
                </div>
            </div>
        </div>
        <div class="container wow fadeIn" data-wow-delay="0.1s">
            <div class="copyright">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                        &copy; <a class="border-bottom" href="#!">Cruise Kerala</a>, All Right Reserved.



                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <div class="footer-menu">
                            <a href="#!">Home</a>
                            <a href="#!">Cookies</a>
                            <a href="#!">Help</a>
                            <a href="#!">FAQs</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer End -->

    <!-- Floating Buttons Start -->
    <div class="floating-buttons">
        <div class="floating-menu">
            <a href="tel:+919526788688" class="btn btn-primary btn-lg-square"><i class="bi bi-telephone-fill"></i></a>
            <a href="https://wa.me/919526788688" target="_blank" class="btn btn-success btn-lg-square"><i class="bi bi-whatsapp"></i></a>
            <a href="#!" class="btn btn-primary btn-lg-square chat-boat"><i class="bi bi-chat-dots"></i></a>
        </div>
        <button class="btn btn-primary btn-lg-square floating-toggle" id="floating"><i class="bi bi-chat-square-text"></i></button>
    </div>
    <!-- Floating Buttons End -->

    <!-- Back to Top -->
   


    <!-- JavaScript Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>

    <!-- Initialize WOW.js -->
    <script>
        new WOW().init();

        document.getElementById('contactForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default HTML form submission

            const form = this;
            const formWrapper = form.parentElement;
            const submitButton = form.querySelector('button[type="submit"]');

            var email = document.getElementById('email').value.trim();
            var mobile = document.getElementById('mobile').value.trim();

            if (email === '' && mobile === '') {
                alert('Please provide either an email or a mobile number.');
                return;
            }
            
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';

            let formData = new FormData(this);
            fetch('save_contact.php', { method: "POST", body: formData })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    form.style.display = 'none';
                    form.previousElementSibling.style.display = 'none'; // Hides the "Send us a message" title

                    const thankYouMessage = `
                        <div class="thank-you-message">
                            <i class="fa fa-check-circle fa-5x mb-4 text-success"></i>
                            <h4 class="text-primary mb-3">Thank You!</h4>
                            <p class="mb-4">${data.message}</p>
                            <a href="index.php" class="btn btn-primary py-3 px-5 rounded-pill">Back To Home</a>
                        </div>
                    `;
                    formWrapper.insertAdjacentHTML('beforeend', thankYouMessage);
                } else {
                    alert(data.message);
                    submitButton.disabled = false;
                    submitButton.innerHTML = 'Submit';
                }
            })
            .catch(err => {
                alert("Something went wrong. Please try again.");
                submitButton.disabled = false;
                submitButton.innerHTML = 'Submit';
            })
        });
    </script>
</body>

</html>