<!--?php
// Database credentials for XAMPP 2026
$host     = 'localhost';
$db_name  = 'michzylb_cleaning_service_db'; // Replace with your actual database name
$username = 'michzylb_cleaning_service_db';              // Default XAMPP username
$password = 'Temptnot@06';                  // Default XAMPP password is empty
$charset  = 'utf8mb4';           // Recommended charset for 2026

// Data Source Name (DSN)
$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";

// PDO options for security and error handling
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, // Throw exceptions on error
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       // Fetch as associative arrays
    PDO::ATTR_EMULATE_PREPARES   => false,                  // Use real prepared statements
];

try {
    // Creating the $pdo instance
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (\PDOException $e) {
    // In production, log this error instead of echoing it
    die("Database connection failed: " . $e->getMessage());
}
?-->

<!--?php// smtp config
/**
 * db_config.php - Integrated 2026 Version
 * Established PDO connection and automatically retrieves SMTP settings
 */

$host     = 'localhost';
$db_name  = 'michzylb_cleaning_service_db'; 
$username = 'michzylb_cleaning_service_db';              
$password = 'Temptnot@06';                  
$charset  = 'utf8mb4';           

$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,      
    PDO::ATTR_EMULATE_PREPARES   => false,                 
];

try {
    // 1. Establish PDO Connection
    $pdo = new PDO($dsn, $username, $password, $options);

    // 2. Fetch SMTP Settings from 'settings' table
    // Assumes table has 'setting_key' and 'setting_value' columns
    $smtp_settings = [];
    $stmt = $pdo->query("SELECT setting_key, setting_value FROM settings WHERE setting_key LIKE 'smtp_%'");
    
    while ($row = $stmt->fetch()) {
        $smtp_settings[$row['setting_key']] = $row['setting_value'];
    }

    /**
     * Now $smtp_settings is available globally for your mailing scripts:
     * $smtp_settings['smtp_host']
     * $smtp_settings['smtp_user']
     * $smtp_settings['smtp_pass']
     * etc.
     */

} catch (\PDOException $e) {
    // In production, use error_log() instead of die()
    error_log("Database connection failed: " . $e->getMessage());
    die("A system error occurred. Please try again later.");
}
?-->


<!--?php
// Database credentials for XAMPP 2026
$host     = 'localhost';
$db_name  = 'michzylb_cleaning_service_db'; // Replace with your actual database name
$username = 'michzylb_cleaning_service_db';              // Default XAMPP username
$password = 'Temptnot@06';                  // Default XAMPP password is empty
$charset  = 'utf8mb4';           // Recommended charset for 2026

// Data Source Name (DSN)
$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";

// PDO options for security and error handling
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, // Throw exceptions on error
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       // Fetch as associative arrays
    PDO::ATTR_EMULATE_PREPARES   => false,                  // Use real prepared statements
];

try {
    // Creating the $pdo instance
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (\PDOException $e) {
    // In production, log this error instead of echoing it
    die("Database connection failed: " . $e->getMessage());
}
?-->

<!--?php
// Database credentials for XAMPP 2026
$host     = 'localhost';
$db_name  = 'michzylb_cleaning_service_db'; 
$username = 'michzylb_cleaning_service_db';              
$password = 'Temptnot@06';                  
$charset  = 'utf8mb4';           

$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";

$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, 
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       
    PDO::ATTR_EMULATE_PREPARES   => false,                  
];

try {
    // 1. Create PDO Instance
    $pdo = new PDO($dsn, $username, $password, $options);

    /**
     * 2. HELPER FUNCTION
     * Retrieves specific values from the settings table
     */
    function getAppSetting($pdo, $key) {
        $stmt = $pdo->prepare("SELECT setting_value FROM settings WHERE setting_key = ? LIMIT 1");
        $stmt->execute([$key]);
        return $stmt->fetchColumn();
    }

    /**
     * 3. AUTO-LOAD SMTP CONFIGURATION
     * Fetches credentials into a global array for use in PHPMailer
     */
    $smtp_conf = [
        'host'       => getAppSetting($pdo, 'smtp_host') ?: 'mail.uniqprocleaners.com',
        'user'       => getAppSetting($pdo, 'smtp_user') ?: 'info@uniqprocleaners.com',
        'pass'       => getAppSetting($pdo, 'smtp_pass') ?: '',
        'port'       => getAppSetting($pdo, 'smtp_port') ?: 587,
        'encryption' => getAppSetting($pdo, 'smtp_encryption') ?: 'tls',
        'notify_to'  => getAppSetting($pdo, 'booking notification') // Your specific request
    ];

} catch (\PDOException $e) {
    // In production 2026, log to file instead of die()
    error_log("Connection failed: " . $e->getMessage());
    die("Database connection failed. Please check server logs.");
}
?-->


<!--?php
/**
 * db_config.php - Unified 2026 Version
 * Combined Database Connection & SMTP Settings Loader
 */

$host     = 'localhost';
$db_name  = 'michzylb_cleaning_service_db'; 
$username = 'michzylb_cleaning_service_db';              
$password = 'Temptnot@06';                  
$charset  = 'utf8mb4';           

$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, 
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       
    PDO::ATTR_EMULATE_PREPARES   => false,                  
];

try {
    // 1. Establish PDO Connection
    $pdo = new PDO($dsn, $username, $password, $options);

    // 2. Define Helper Function (Checks both setting_key and name columns)
    if (!function_exists('getAppSetting')) {
        function getAppSetting($pdo, $key) {
            try {
                $stmt = $pdo->prepare("SELECT setting_value FROM settings WHERE setting_key = ? OR name = ? LIMIT 1");
                $stmt->execute([$key, $key]);
                return $stmt->fetchColumn();
            } catch (Exception $e) {
                return null;
            }
        }
    }

    // 3. Load SMTP and Notification Settings into a global array
    $smtp_conf = [
        'host'       => getAppSetting($pdo, 'smtp_host') ?: 'mail.uniqprocleaners.com',
        'user'       => getAppSetting($pdo, 'smtp_user') ?: 'info@uniqprocleaners.com',
        'pass'       => getAppSetting($pdo, 'smtp_pass') ?: '',
        'port'       => getAppSetting($pdo, 'smtp_port') ?: 587,
        'encryption' => getAppSetting($pdo, 'smtp_encryption') ?: 'tls',
        'notify_to'  => getAppSetting($pdo, 'booking notification') ?: 'admin@uniqprocleaners.com'
    ];

} catch (\PDOException $e) {
    // Log the actual error to the server error log
    error_log("Database connection failed: " . $e->getMessage());
    // Display a clean message to the user
    die("A system error occurred. Please try again later.");
}
?-->

<!--?php
// Database configuration
$host    = 'localhost';     // Usually localhost
$db_name = 'your_database'; // Replace with your actual database name
$username = 'root';          // Replace with your database username
$password = '';              // Replace with your database password
$charset  = 'utf8mb4';       // Best practice for supporting all characters

// Data Source Name
$dsn = "mysql:host=$host;dbname=$db_name;charset=$charset";

// Options for high security and error handling
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, // Throws errors as exceptions
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,       // Returns data as associative arrays
    PDO::ATTR_EMULATE_PREPARES   => false,                  // Uses real prepared statements
];

try {
    // Create the connection
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (\PDOException $e) {
    // If connection fails, stop and show error
    // In production, you might want to log this instead of echoing it
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
?-->


 <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>UP-Clean - Unique Professional Cleaners</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="Uniques Professional Cleaners" name="keywords">
        <meta content="Uniques Professional Cleaners" name="description">

        <!-- Favicon -->
        <link href="img/favicon.ico" rel="icon">

        <!-- Google Font -->
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap" rel="stylesheet">
        
        <!-- CSS Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="css/style.css" rel="stylesheet">
		
		
    </head>
	</html>     <div class="header home">
                <div class="container-fluid">
                    <div class="header-top row align-items-center">
                        <div class="col-lg-3">
                            <div class="brand">
                                <a href="index.html">
                                    <!--CleanMe-->
                                    <!-- <img src="img/logo.png" alt="Logo"> -->
									<img src="img/logo.jpeg" alt="Logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="topbar">
                                <div class="topbar-col">
                                    <a href="tel:+012 345 67890"><i class="fa fa-phone-alt"></i>+1 (872) 355-6091</a>
                                </div>															
                                <div class="topbar-col">
                                    <a href="mailto:info@example.com"><i class="fa fa-envelope"></i>info@uniqprocleaners.com</a>
                                </div>
                                <!--div class="topbar-col">
                                    <div class="topbar-social">
                                        <a href=""><i class="fab fa-twitter"></i></a>
                                        <a href=""><i class="fab fa-facebook-f"></i></a>
                                        <a href=""><i class="fab fa-youtube"></i></a>
                                        <a href=""><i class="fab fa-instagram"></i></a>
                                        <a href=""><i class="fab fa-linkedin-in"></i></a>
                                    </div>
                                </div-->
								
								 <div class="topbar-col">
                                    <div class="topbar-social">
                                        <!--a href=""><i class="fab fa-twitter"></i></a-->
                                        <!--a href="https://web.facebook.com/Gr8tDaveHouseOfOilPerfumes/"><i class="fab fa-facebook-f"></i></a-->
										 <a href="https://www.facebook.com/share/16Dm9DU8sN/"><i class="fab fa-facebook-f"></i></a>
										
										
                                        <!--a href=""><i class="fab fa-youtube"></i></a-->
                                        <!--a href="https://www.instagram.com/gr8daveservices?igsh=MTlpczRwaHZyM29pNg=="><i class="fab fa-instagram"></i></a-->
										 <a href="https://www.instagram.com/uniqueprofessionalcleaners/=="><i class="fab fa-instagram"></i></a>
										<!--a href="https://wa.link/0fzl77"><i class="fab fa-whatsapp"></i></a-->
										<a href="https://wa.me/18723556091?text=Welcome%20to%20%Unique%20Professional%20Cleaners%20%Best%26Trusted%20Cleaning%20Service"><i class="fab fa-whatsapp"></i></a>
										<!--a href="https://wa.me/c/2347044614605"><i class="fab fa-whatsapp"></i></a-->
                                        <!--a href=""><i class="fab fa-linkedin-in"></i></a-->
                                    </div>
                                </div>
								
								
                            </div>
							
													
                            <div class="navbar navbar-expand-lg bg-light navbar-light">
                                <a href="#" class="navbar-brand">MENU</a>
                                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                
							<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                                    <div class="navbar-nav ml-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="index.html" class="nav-item nav-link active">Home</a> -->
                                        <!-- <a href="about.html" class="nav-item nav-link">About</a> -->
									 <div class="nav-item dropdown">
                                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Services</a>
                                          
										  <div class="dropdown-menu">
                                                <a href="residence_cleaning.php" class="dropdown-item">Reseidence Cleaning</a>
                                                <a href="commercial_cleaning.php" class="dropdown-item">Commercial Cleaning</a>
												 <!--a href="uniform_cleaning.php" class="dropdown-item">Uniform Cleaning</a-->
												  <a href="deep_cleaning.php" class="dropdown-item">Deep Cleaning</a>
												  <a href="move_in_out.php" class="dropdown-item">Move In/Out Cleaning</a>
                                            </div>
                                        </div>
                                        <!--a href="service.html" class="nav-item nav-link">Service</a-->
                                        <!-- <a href="portfolio.html" class="nav-item nav-link">Project</a-->
                                        <!--a href="single.html" class="nav-item nav-link">Single</a> -->
                                        <!--a href="contact_us.php" class="nav-item nav-link">Contact</a-->
										  <a href="new_contact_us.php" class="nav-item nav-link">Contact</a>
										<!--0a href="contact.html" class="nav-item nav-link">Locations</a-->
										 <div class="nav-item dropdown">
                                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Features</a>
                                          
										  <div class="dropdown-menu">
                                                <a href="all_members.php" class="dropdown-item">Our Team</a>
                                                <!-- <a href="#" class="dropdown-item">Testimonial</a> -->
											<!--a href="#" class="dropdown-item">Schedule Appointment</a-->
                                            </div>
                                        </div>
										
										
										 <div class="nav-item dropdown">
                                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Connections</a>
                                          
										  <div class="dropdown-menu">
												<!-- <a href="login.php" class="dropdown-item">Login</a>
												<a href="register.php" class="dropdown-item">Register</a> -->
                                                <!--a href="login.php" class="dropdown-item">Login</a>
												<a href="register.php" class="dropdown-item">Register</a--->
												<a href="login.php" class="dropdown-item">Login</a>
												<a href="admin_login.php" class="dropdown-item">Admin Login</a>
                                            </div>
                                        </div>
                                       <a href="faq_main.php" class="nav-item nav-link">FAQ</a>
                                        <a href="#" class="btn">Get A Quote</a>
                                    </div>
								

                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!--div class="hero row align-items-center">
                        <div class="col-md-7">
                            <h2>Best & Trusted</h2>
                            <h2><span>Cleaning</span> Service</h2>
                            <p>Not just sparkling, we give you healthy services </p>
                            <a class="btn" href="">Explore Now</a>
                        </div>
						
						
                        <div class="col-md-5">
                            <div class="form">
                                <h3>Get A Quote</h3>
                                <!--form>
                                    <input class="form-control" type="text" placeholder="Your Name">
                                    <input class="form-control" type="text" placeholder="Mobile Number">
                                    <div class="control-group">
                                        <select class="custom-select">
                                            <option selected>Choose a service</option>
                                            <option value="1">House Cleaning</option>
                                            <option value="2">Apartment Cleaning</option>
                                            <option value="3">Office Cleaning</option>
                                        </select>
                                    </div>
                                    <textarea class="form-control" placeholder="Comment"></textarea>
                                    <button class="btn btn-block">Get A Quote</button>
                                </form-->
								
								<!--form action="process_form.php" method="POST">
							<input class="form-control" type="text" name="name" placeholder="Your Name" required>
							<input class="form-control" type="text" name="mobile" placeholder="Mobile Number" required>
							<div class="control-group">
								<select class="custom-select" name="service" required>
									<option value="" selected disabled>Choose a service</option>
									<option value="House Cleaning">House Cleaning</option>
									<option value="Apartment Cleaning">Apartment Cleaning</option>
									<option value="Office Cleaning">Office Cleaning</option>
								</select>
							</div>
							<textarea class="form-control" name="comment" placeholder="Comment"></textarea>
							<button class="btn btn-block" type="submit">Get A Quote</button>
						</form-->
						
						
											<!--form action="submit_form.php" method="POST">
						<input class="form-control" name="user_name" type="text" placeholder="Your Name" required>
						<input class="form-control" name="user_mobile" type="text" placeholder="Mobile Number" required>
						<div class="control-group">
							<select class="custom-select" name="service_type">
								<option selected disabled>Choose a service</option>
								<option value="House Cleaning">House Cleaning</option>
								<option value="Apartment Cleaning">Apartment Cleaning</option>
								<option value="Office Cleaning">Office Cleaning</option>
							</select>
						</div>
						<textarea class="form-control" name="user_comment" placeholder="Comment"></textarea>
						<button type="submit" class="btn btn-block">Get A Quote</button>
					</form-->

                            </div>
                        </div>
                    </div-->
                </div>
            </div>
			
			
			<!-- JavaScript Libraries -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <script src="lib/isotope/isotope.pkgd.min.js"></script>
        <script src="lib/lightbox/js/lightbox.min.js"></script>

        <!-- Template Javascript -->
        <script src="js/main.js"></script>        
        
        
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Complete Your Booking | UP-Clean</title>
        <!-- Google Font & Icons --> 
    <link href="https://fonts.googleapis.com" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com" rel="stylesheet"> 
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <style>
        :root { --primary-color: #002349; --accent-color: #FFCC05; --success-color: #28a745; } 
        body { background: #f8f9fa; font-family: 'Montserrat', sans-serif; color: #333; }
        .booking-wrapper { max-width: 900px; margin: 40px auto; } 
        .card-main { border: none; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden; }
        .header-section { background: var(--primary-color); color: white; padding: 40px 20px; text-align: center; }  
        .header-section h2 { font-weight: 700; margin-bottom: 10px; }     
        .price-badge { background: var(--accent-color); color: var(--primary-color); padding: 10px 25px; border-radius: 50px; font-weight: 700; display: inline-block; font-size: 1.5rem; margin-top: 15px; }
        .form-section-title { font-weight: 700; border-left: 5px solid var(--accent-color); padding-left: 15px; margin: 30px 0 20px; color: var(--primary-color); }
        .form-control { border-radius: 8px; border: 1px solid #ddd; padding: 12px; transition: all 0.3s; }
        .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0,35,73,0.1); }
        .addon-card { border: 1px solid #e0e0e0; border-radius: 12px; padding: 15px; margin-bottom: 15px; transition: all 0.3s; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }  
        .addon-card:hover { border-color: var(--accent-color); background: #fffdf5; transform: translateY(-2px); }
        .addon-card.selected { border-color: var(--accent-color); background: #fffdf5; box-shadow: 0 5px 15px rgba(255,204,5,0.2); }
        .addon-info { display: flex; align-items: center; }
        .custom-checkbox { width: 22px; height: 22px; margin-right: 15px; cursor: pointer; accent-color: var(--primary-color); }
        .addon-name { font-weight: 600; font-size: 1rem; }
        .addon-price { color: var(--success-color); font-weight: 700; }
        .btn-confirm { background: var(--success-color); color: white; padding: 15px; border-radius: 10px; font-weight: 700; font-size: 1.2rem; border: none; transition: 0.3s; width: 100%; margin-top: 30px; box-shadow: 0 5px 15px rgba(40,167,69,0.3); }
        .btn-confirm:hover { background: #218838; transform: translateY(-2px); color: white; } 
        label { font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
    </style>
</head>
<body>
<div class="container booking-wrapper">
        <div class="card card-main">
        <div class="header-section">
            <p class="text-uppercase mb-2" style="letter-spacing: 2px; font-size: 0.8rem; color: #ccc;">Secure Booking</p>
            <h2>Commercial Cleaning Plan</h2> 
            <div class="pricing-container">
    <ul class="list-unstyled d-flex flex-wrap justify-content-center align-items-center text-center">
                    <li class="small mx-3 mb-2">
                <i class="fa fa-check text-success mr-1"></i> 
                Office Workstation Disinfection            </li>
                    <li class="small mx-3 mb-2">
                <i class="fa fa-check text-success mr-1"></i> 
                Commercial Restroom Intensive            </li>
                    <li class="small mx-3 mb-2">
                <i class="fa fa-check text-success mr-1"></i> 
                Lobby &amp; Common Area Care            </li>
                    <li class="small mx-3 mb-2">
                <i class="fa fa-check text-success mr-1"></i> 
                Full Floor Scrub &amp; Buff            </li>
            </ul>
</div>

            <div class="price-badge"> Total: $<span id="total-price-display">250.00</span>
           
          
            </div> 
           
            
        </div>  
                <div class="card-body p-4 p-md-5">
     <form action="process_booking.php" method="post" id="final_booking_form">
    <!-- Hidden Fields -->
    <input type="hidden" name="plan_id" value="6">
    <input type="hidden" name="plan_name" value="Commercial Cleaning">
    <input type="hidden" name="base_price" value="250.00">
    <input type="hidden" name="service_id" value="6"> 

    <h5 class="form-section-title">1. Your Details</h5>
    
    <div class="row g-3">
        <!-- Personal Info -->
        <div class="col-md-6">
            <label class="form-label"><i class="fas fa-user me-2"></i>Full Name</label>
            <input type="text" name="customer_name" class="form-control" placeholder="John Doe" required>
        </div>
        <div class="col-md-6">
            <label class="form-label"><i class="fas fa-envelope me-2"></i>Email Address</label>
            <input type="email" name="customer_email" class="form-control" placeholder="john@example.com" required>
        </div>
        <div class="col-md-6">
            <label class="form-label"><i class="fas fa-phone me-2"></i>Phone Number</label>
            <input type="tel" name="phone" id="phone" class="form-control" placeholder="(555) 000-0000" required>
        </div>
        <div class="col-md-6">
            <label class="form-label"><i class="fas fa-calendar-alt me-2"></i>Service Date</label>
            <input type="date" name="service_date" class="form-control" required min="2026-01-16">
        </div>

        <!-- Street Address -->
        <div class="col-12">
            <label class="form-label"><i class="fas fa-map-marker-alt me-2"></i>Street Address</label>
            <input type="text" name="street_address" class="form-control" placeholder="1234 Main St" required>
        </div>
    </div>

    <!-- City, State, Zip Row (Reduced Gutter and Optimized Widths) -->
    <!-- Horizontal City, State, Zip Row -->

<div class="row g-2 mt-2 align-items-center">
    <!-- Inline style added to labels to prevent splitting -->
    <style>
        .compact-label {
            font-size: 0.75rem !important; /* Smaller text */
            white-space: nowrap;          /* Prevents text wrapping to second line */
            padding-right: 5px;
        }
    </style>
    
    <!-- 1. City Group -->
    <div class="col-md-3">
        <div class="row g-0 align-items-center">
            <label class="col-sm-4 col-form-label pb-0 compact-label">City</label>
            <div class="col-sm-8">
                <input type="text" name="city" class="form-control form-control-sm" placeholder="Houston" required>
            </div>
        </div>
    </div>

    <!-- 2. State Group -->
    <div class="col-md-3">
        <div class="row g-0 align-items-center">
            <label class="col-sm-4 col-form-label pb-0 compact-label">State</label>
            <div class="col-sm-8">
                <select class="form-select form-select-sm" name="state_code" required>
                    <option value="" selected disabled>...</option>
                    <option value="TX">TX</option>
                    <option value="NY">NY</option>
                    <option value="CA">CA</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 3. Zip Group -->
    <div class="col-md-3">
        <div class="row g-0 align-items-center">
            <label class="col-sm-4 col-form-label pb-0 compact-label">Zip</label>
            <div class="col-sm-8">
                <input type="text" name="zip_code" class="form-control form-control-sm" pattern="[0-9]{5}" placeholder="77054" required>
            </div>
        </div>
    </div>

    <!-- 4. Area Code Group -->
    <div class="col-md-3">
        <div class="row g-0 align-items-center">
            <label class="col-sm-5 col-form-label pb-0 compact-label">Area Code</label>
            <div class="col-sm-7">
                <input type="text" name="area_code" class="form-control form-control-sm" pattern="[0-9]{3}" placeholder="832" required>
            </div>
        </div>
    </div>
</div>


    <h5 class="form-section-title mt-4">2. Enhance Your Cleaning</h5>
    <div class="price-body">
        <div class="addon-container">
                        <label class="addon-card" id="addon-label-2">
                <div class="addon-info">
                    <input class="custom-checkbox addon-checkbox" 
                           type="checkbox" 
                           name="addon_ids[]" 
                           value="2" 
                           data-price="15.00"
                           onchange="toggleHighlight(this, 'addon-label-2')">
                    <span class="addon-name">Window &amp; Blind Refresh (Per Room)</span>
                </div>
                <span class="addon-price">+$15.00</span>
            </label>
                        <label class="addon-card" id="addon-label-4">
                <div class="addon-info">
                    <input class="custom-checkbox addon-checkbox" 
                           type="checkbox" 
                           name="addon_ids[]" 
                           value="4" 
                           data-price="15.00"
                           onchange="toggleHighlight(this, 'addon-label-4')">
                    <span class="addon-name">Lifestyle &amp; Eco-Addition (Green Supplies &amp; Dish Wash)</span>
                </div>
                <span class="addon-price">+$15.00</span>
            </label>
                        <label class="addon-card" id="addon-label-1">
                <div class="addon-info">
                    <input class="custom-checkbox addon-checkbox" 
                           type="checkbox" 
                           name="addon_ids[]" 
                           value="1" 
                           data-price="25.00"
                           onchange="toggleHighlight(this, 'addon-label-1')">
                    <span class="addon-name">Kitchen Master Bundle (Fridge, Oven, Cabinets)</span>
                </div>
                <span class="addon-price">+$25.00</span>
            </label>
                        <label class="addon-card" id="addon-label-3">
                <div class="addon-info">
                    <input class="custom-checkbox addon-checkbox" 
                           type="checkbox" 
                           name="addon_ids[]" 
                           value="3" 
                           data-price="60.00"
                           onchange="toggleHighlight(this, 'addon-label-3')">
                    <span class="addon-name">Whole-Home Surface Restoration (Deep Carpet e.t.c)</span>
                </div>
                <span class="addon-price">+$60.00</span>
            </label>
                        <label class="addon-card" id="addon-label-5">
                <div class="addon-info">
                    <input class="custom-checkbox addon-checkbox" 
                           type="checkbox" 
                           name="addon_ids[]" 
                           value="5" 
                           data-price="150.00"
                           onchange="toggleHighlight(this, 'addon-label-5')">
                    <span class="addon-name">Move-In Ready Total Package (Heavy Scrub All Areas)</span>
                </div>
                <span class="addon-price">+$150.00</span>
            </label>
                    </div>
    </div>

    <div class="alert alert-light border mt-4 text-center">
        <p class="mb-0 text-muted">By clicking confirm, you agree to our 2026 Service Terms.</p>
    </div>

    <button type="submit" class="btn btn-confirm w-100 py-3">
        <i class="fas fa-check-circle me-2"></i>Confirm Booking
    </button>
</form>


        </div>
    </div>
</div>
<script>
function toggleHighlight(checkbox, labelId) {
    const label = document.getElementById(labelId);
    if (checkbox.checked) {
        label.classList.add('selected');
    } else {
        label.classList.remove('selected');
    }
}
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.addon-checkbox');
    const display = document.getElementById('total-price-display');
    const basePrice = parseFloat(250.00);
    function updateTotal() {
        let addonTotal = 0;
        checkboxes.forEach(cb => {
            if(cb.checked) addonTotal += parseFloat(cb.dataset.price);
        });
        const final = basePrice + addonTotal;
        display.innerText = final.toLocaleString(undefined, {minimumFractionDigits: 2});
    }
    checkboxes.forEach(cb => cb.addEventListener('change', updateTotal));
    updateTotal(); 
});</script>
</body>
</html>
<div class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-contact">
                                <h2>Get In Touch</h2>
                                <!--p><i class="fa fa-map-marker-alt"></i>123 Street, New York, USA</p-->
                                <p><i class="fa fa-phone-alt"></i>+1 (872) 355-6091</p>
                                   <p><i class="fa fa-envelope"></i>support@uniqprocleaners.com</p>
                                <div class="footer-social">
                                    <a href=""><i class="fab fa-twitter"></i></a>
                                    <!--a href=""><i class="fab fa-facebook-f"></i></a-->
									 <a href=https://www.facebook.com/share/16Dm9DU8sN/"><i class="fab fa-facebook-f"></i></a>
                                    <!--a href=""><i class="fab fa-youtube"></i></a-->
                                    <a href="https://www.instagram.com/uniqueprofessionalcleaners/"><i class="fab fa-instagram"></i></a>
                                    <!--a href=""><i class="fab fa-linkedin-in"></i></a-->
									<a href="https://wa.me/c/2347044614605"><i class="fab fa-whatsapp"></i></a>
                                </div>
                            </div>
                        </div>
						
						
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-link">
                                <h2>Useful Link</h2>
                                <!--a href="">About Us</a-->
                                <!--a href="">Our Story</a-->
                                <a href="our_services.php">Our Services</a>
                                <!--a href="">Our Projects</a-->
                                <a href="contact_us.php">Contact Us</a>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-link">
                                <h2>Useful Link</h2>
                                <!-- <a href="">Our Clients</a> -->
                                <!-- <a href="">Clients Review</a> -->
                                <!-- <a href="">Ongoing Project</a> -->
                                <a href="">Customer Support</a>
							     <a href="">FAQs</a>
					<!--section class="faq-container">
        <div class="container">
            <h2 style="text-align: center;">Frequently Asked Questions</h2>
            <details>
                <summary>Do I need to provide cleaning supplies?</summary>
                <p>No, our professional team arrives with eco-friendly supplies and high-end equipment.</p>
            </details>
            <details>
                <summary>What is your 24-hour guarantee?</summary>
                <p>If you aren't satisfied, we return within 24 hours to fix it for free.</p>
            </details>
            <details>
                <summary>Are the cleaners background checked?</summary>
                <p>Absolutely. Every member of our staff undergoes a rigorous 2025 security screening.</p>
            </details>
        </div>
    </section-->
                            </div>
							
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-form">
                                <h2>Stay Updated</h2>
                                <p>
                                    Subscribe To Our Newsletter.
                                </p>
                                <!--input class="form-control" placeholder="Email here">
                                <button class="btn">Submit</button-->
								
								
								<form action="subscribe.php" method="POST">
								<input class="form-control" type="email" name="email" placeholder="Enter your email" required>
									<button class="btn" type="submit">Subscribe</button>
									</form>
													
                            </div>
                        </div>
                    </div>
                </div>
				<div class="">
                   
					</div>
                <div class="container footer-menu">
                    <div class="f-menu">
                        <!-- <a href="">Terms of use</a> -->
                        <a href="">Privacy policy</a>
                        <a href="">Cookies</a>
                        <a href="">Help & FAQs</a>
                        <a href="">Contact us</a>
                    </div>
                </div>
                <div class="container copyright">
                    <div class="row">
                        <div class="col-md-6">
                            <p>&copy; <a href=#">Gr8Davies</a>, All Right Reserved.</p>
                        </div>
                        <div class="col-md-6">
                            <p>Designed By <a href="#">Gr8Davies Integrated Services</a></p>
                        </div>
                    </div>
                </div>
            </div>