<?php
include("config/db.php");
$result = mysqli_query($conn, "SELECT * FROM services ORDER BY id DESC");
?>

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

<head>
    <meta charset="utf-8">
    <title>Cruise Kerala - Services</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">
    <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;
}
.logo-img{
    max-height:50px;
    width:auto;
}

/* Mobile Fix */
@media (max-width: 768px){
    .logo-img{
        max-height:40px;
    }
}
 
    .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;
    }
       #head{
            width: 150px;
            height:65px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            color:white;
         
        }
    </style>
</head>

<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 active">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">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>
    <!-- Navbar End -->


    <!-- Hero Start -->
    <div class="container-fluid pb-5 hero-header page-header-service">
          <div class="container py-5">
            <div class="row g-3 align-items-center">
                <div class="col-lg-6 text-center text-lg-start">
                    <h5 class="display-1 mb-0 animated slideInLeft text-white">Services</h5>
                </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">Services</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->


    <!-- Service Start -->
    <div class="container-fluid py-5" id="service-section">
        <div class="container py-5">
            <div class="row g-5 align-items-center">
                <div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
                    <h1 class="mb-5">Our Premium <span
                            class="text-uppercase text-primary">Services</span></h1>
                    <p class="mb-5">We provide a wide range of services to make your backwater experience unforgettable. From day cruises to overnight stays, we have it all covered with top-notch hospitality.</p>
                    <div class="d-flex align-items-center bg-light">
                        <div class="btn-square flex-shrink-0 bg-primary" style="width: 100px; height: 100px;">
                            <i class="fa fa-phone fa-2x text-white"></i>
                        </div>
                        <div class="px-3">
                            <h3><a href="tel:+919526788688" style="color: inherit; text-decoration: none;">+91 95267 88688</a></h3>
                            <span>Call us direct 24/7 for get a free consultation</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="row g-0">
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.2s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-primary">
                                <a href="day-cruises.php" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/day.jpg" alt="" loading="lazy">
                                    <h3>Day Cruises</h3>
                                </a>
                                <p class="mb-0">Enjoy a relaxing day out on the backwaters with lunch and tea.</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.4s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-light">
                                <a href="overnight-stays.php" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/overnight.jpg" alt="" loading="lazy">
                                    <h3>Overnight Stays</h3>
                                </a>
                                <p class="mb-0">Experience the magic of the backwaters under the stars.</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.6s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-light">
                                <a href="day-and-night-cruise.php" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/day night3.jpg" alt="" loading="lazy">
                                    <h3>Day & Night Cruise</h3>
                                </a>
                                <p class="mb-0">Relax with a one-night houseboat stay and scenic cruise 12pm to 9am</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.8s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-primary">
                                <a href="birthday-and-private-parties.php" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/wedding shoot.jpg" alt="" loading="lazy">
                                    <h3>Birthday & Private Parties</h3>
                                </a>
                                <p class="mb-0">Celebrate Your Special Moments on a Private Luxury Houseboat.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Service End -->


    <!-- Inclusions Start -->
    <div class="container-fluid py-5 bg-fixed-image" id="inclusions-section">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-5">What's <span class="text-primary text-uppercase">Included</span></h1>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-glass-cheers fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Welcome Drink</h5>
                        </div>
                        <p class="mb-0">Refreshing tender coconut or fresh juice upon arrival.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-utensils fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Full Board Meals</h5>
                        </div>
                        <p class="mb-0">Lunch, Evening Tea/Snacks, Dinner, and Breakfast included.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-snowflake fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Air Conditioning</h5>
                        </div>
                        <p class="mb-0">AC in bedrooms (Operational hours vary by package).</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-ship fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Cruise Time</h5>
                        </div>
                        <p class="mb-0">Cruising from 12:00 PM to 5:30 PM and morning 8:00 AM to 9:00 AM.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-music fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Entertainment</h5>
                        </div>
                        <p class="mb-0">TV and Music system available in the living area.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="service-item bg-white p-4 h-100">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa fa-user-shield fa-2x text-primary me-3"></i>
                            <h5 class="mb-0">Safety</h5>
                        </div>
                        <p class="mb-0">Life jackets, fire extinguishers, and trained crew on board.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Inclusions End -->
 
    <!-- Categories Start -->
    <div class="container-fluid py-5 bg-fixed-image">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-5">Houseboat <span class="text-primary text-uppercase">Categories</span></h1>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="service-item bg-light overflow-hidden h-100 p-0 rounded">
                        <img class="img-fluid w-100" src="img/about-3.jpg" alt="Deluxe Houseboat" style="height: 220px; object-fit: cover;" loading="lazy">
                        <div class="p-4">
                            <h5 class="mb-3">Deluxe Houseboat</h5>
                            <p>The standard option for budget travelers. AC is operational in bedrooms from 9 PM to 6 AM. Clean and comfortable with basic amenities.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="service-item bg-light overflow-hidden h-100 p-0 rounded">
                        <img class="img-fluid w-100" src="img/about-1.jpg" alt="Premium Houseboat" style="height: 220px; object-fit: cover;" loading="lazy">
                        <div class="p-4">
                            <h5 class="mb-3">Premium Houseboat</h5>
                            <p>A step up in luxury. AC is operational whenever the boat is docked or upon request. Premium interiors, glass windows, and better food menu.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="service-item bg-light overflow-hidden h-100 p-0 rounded">
                        <img class="img-fluid w-100" src="img/about-2.jpg" alt="Luxury Houseboat" style="height: 220px; object-fit: cover;" loading="lazy">
                        <div class="p-4">
                            <h5 class="mb-3">Luxury Houseboat</h5>
                            <p>The ultimate backwater experience. Full-time AC, luxury furnishings, upper deck, professional chef, and a wide variety of cuisine options.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Categories End -->




    <section class="premium-section">
    <div class="container">
        <h2 class="section-title">Our Services</h2>
        <p class="section-subtitle">Luxury • Comfort • Experience Indian Backwaters</p>

        <div class="boat-grid">
            <?php
            if ($result && mysqli_num_rows($result) > 0) {
                $delay = 0.1;
                while ($row = mysqli_fetch_assoc($result)) {
            ?>
                    <div class="boat-card wow fadeInUp" data-wow-delay="<?php echo $delay; ?>s">
                        <img src="admin/uploads/<?php echo htmlspecialchars($row['image']); ?>" alt="<?php echo htmlspecialchars($row['title']); ?>" loading="lazy">
                        <div class="boat-content">
                            <h3><?php echo htmlspecialchars($row['title']); ?></h3>
                            <p><?php echo htmlspecialchars($row['description']); ?></p>
                            <a href="#" class="book-btn gallery-booking-trigger">Book Now</a>
                        </div>
                    </div>
            <?php
                    $delay += 0.2;
                    if ($delay > 0.5) { // Reset delay for next row
                        $delay = 0.1;
                    }
                }
            } else {
                echo '<p class="text-center col-12">No special services available at the moment. Please check back later.</p>';
            }
            ?>
        </div>
    </div>
</section>

    <!-- Booking Popup Start -->
    <!-- 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="https://www.facebook.com/cruisekerala.official"><i class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="https://www.youtube.com/@CruiseKerala"><i class="fab fa-youtube"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2" href="https://www.instagram.com/cruise_kerala"><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.php">Day Cruises</a>
                    <a class="btn btn-link" href="overnight-stays.php">Overnight Stays</a>
                    <a class="btn btn-link" href="day-and-night-cruise.php">Day & Night Cruise</a>
                    <a class="btn btn-link" href="birthday-and-private-parties.php">Private Parties</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="index.php">Home</a>
                            <a href="#">Cookies</a>
                            <a href="#">Help</a>
                            <a href="#">FAQs</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer 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 -->

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

    <!-- Chat Window -->
    <div class="chat-window">
        <div class="chat-header">
            <h5 class="text-white mb-0">Chat with us</h5>
            <button type="button" class="btn-close btn-close-white"></button>
        </div>
        <div class="chat-body">
            <div class="d-flex flex-column">
                <div class="bg-light p-3 rounded mb-3 align-self-start" style="max-width: 80%;">
                    Hello! How can I help you with your houseboat booking today?
                </div>
            </div>
        </div>
        <div class="chat-footer">
            <input type="text" class="form-control" placeholder="Type a message...">
            <button class="btn btn-primary"><i class="bi bi-send"></i></button>
        </div>
    </div>


    <!-- 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();
    </script>
</body>

</html>