<style>
.booking-exists {
    color: red !important;
}
</style>
<?php   
$domain=$_SERVER['SERVER_NAME']; 
// echo $domain;die;
$curPageName = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1); 
 $curPageName1 = ucfirst(substr($curPageName,0,-4));
?>
  
		<!-- Start Appointment Area -->
		<div class="appointment-area  ">
			<div class="container">
				<div class="bg-color-d19f19">
					<div class="appointment-title">
						<h2>Now Book a Appointment</h2>
					</div>
					<form class="appointment-form" id="form" action="" method="post">
						<div class="row">
						    <div id="check2"></div>
							<div class="col-lg-9">
								<div class="row">
									<div class="col-lg-4">
										<div class="form-group mb-30">
											<input type="text" name="name1" id="name1" class="form-control" placeholder="Your name">
										</div>
									</div>
									<div class="col-lg-4">
										<div class="form-group mb-30">
											<input type="text" name="email" id="email" class="form-control" placeholder="Your email">
										</div>
									</div>
									 <input type="hidden" name="url" id="url" value="<?php echo $curPageName; ?>" class="form-control required" placeholder="url...">

<input type="hidden" name="domain" id="domain" value="<?php echo $domain; ?>" class="form-control required" placeholder="domain...">

<input type="hidden" name="project_unique_code" id="project_unique_code" value="" class="form-control required">
									
									<div class="col-lg-4">
										<div class="form-group mb-30">
											<input type="text" name="phone1" id="phone1" class="form-control" placeholder="Phone">
										</div>
									</div>
									<div class="col-lg-4">
										<div class="form-group mb-30">
											<input type="date" name="date" id="date" class="form-control" >
										</div>
									</div>
									
									<div class="col-lg-4">
    <div class="form-group mb-30">
        <select name="time" id="time" class="form-control">
              <option value="">Select</option>
            <option value="09:00 am">09:00 AM</option>
            <option value="10:00 am">10:00 AM</option>
            <option value="11:00 am">11:00 AM</option>
            <!-- Add more options for other times as needed -->
        </select>
    </div>
</div>
								</div>
							</div>
							<div class="col-lg-3">
								<button type="submit" class="default-btn active mb-30 w-100 d-flex align-items-center justify-content-center" id="submit">
									<div class="d-flex align-items-center">
										<span>Booking Now</span>
										<i class="ri-arrow-right-up-line"></i>
									</div>
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

 

		<!-- End Appointment Area -->

		<!-- Start Footer Area -->
		<div class="footer-area  pt-50 f-bg" >  
			<div class="top-footer"> 
				<div class="container">
					<div class="row align-items-center" data-cues="slideInUp">
						<div class="col-lg-3 col-sm-3">
							<a href="index.php" class="d-inline-block">
								<img src="assets/images/logo.png" alt="logo">
							</a>
						</div> 

						<div class="col-lg-9 col-sm-9">
							<ul class="ps-0 mb-0 mt-3 mt-sm-0 list-unstyled d-flex align-items-center d-flex align-items-center justify-content-sm-end social-link">
								<li>
									<span>Follow Us:</span>
								</li>
								<li>
									<a href="https://www.facebook.com/" target="_blank">
										<i class="ri-facebook-fill"></i>
									</a>
								</li>
								<!--<li>-->
								<!--	<a href="https://www.twitter.com/" target="_blank">-->
								<!--		<i class="ri-twitter-line"></i>-->
								<!--	</a>-->
								<!--</li>-->
								<li>
									<a href="https://www.instagram.com/" target="_blank">
										<i class="ri-instagram-fill"></i>
									</a>
								</li>
								<li>
									<a href="https://www.youtube.com/" target="_blank">
										<i class="ri-youtube-fill"></i>
									</a>
								</li>
								<!--<li>-->
								<!--	<a href="https://www.pinterest.com/" target="_blank">-->
								<!--		<i class="ri-pinterest-line"></i>-->
								<!--	</a>-->
								<!--</li>-->
								<li>
									<a href="https://www.linkedin.com/" target="_blank">
										<i class="ri-linkedin-fill"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="sub-footer pb-10">
				<div class="container">
					<div class="row" data-cues="slideInUp">
						<!--<div class="col-lg-3 col-sm-6">-->
						<!--	<div class="sub-footer-single-item">-->
						<!--		<form>-->
						<!--			<h3>Newsletter</h3>-->
						<!--			<input type="text" class="form-control" placeholder="Your email">-->
						<!--			<button class="default-btn">-->
						<!--				<div class="d-flex align-items-center">-->
						<!--					Subscribe Now -->
						<!--					<i class="ri-arrow-right-up-line"></i>-->
						<!--				</div>-->
						<!--			</button>-->
						<!--		</form>-->
						<!--	</div>-->
						<!--</div>--> 
						<div class=" col-6 col-lg-2 col-sm-6">
							<div class="d-lg-flex justify-content-end">
								<div class="sub-footer-single-item">
									<h3>Quick Links</h3>
									<ul class="import-link ps-0 mb-0 list-unstyled">
										<li>
											<a href="index.php">Home</a>
										</li>
										<li>
											<a href="about.php">About Us</a>
										</li>
										<li>
											<a href="index.php#ser">Services</a>
										</li>
											<li>
											<a href="gallery.php">Gallery</a> 
										</li>
										<li> 
											<a href="Franchise-with-us.php"> Franchise with us</a>
										</li>
										<li>
											<a href="contact-us.php">Contact Us</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class=" col-6 col-lg-3 col-sm-6">
							<div class="d-lg-flex justify-content-end">
								<div class="sub-footer-single-item">
									<h3>Our Services</h3>
									<ul class="import-link ps-0 mb-0 list-unstyled">
                                    <li>
                                    <a href="car-wash.php" >Car Wash Services
                                    </a>
                                    </li>
                                      <li> 
                                    <a href="foam-car-wash.php" >Foam car wash
                                    </a>
                                    </li>
                                    <li>
                                    <a href="Interior-cleaning.php" >Interior Cleaning
                                    </a>
                                    </li>
                                    <li>
                                    <a href="ceramic-coating.php" >Ceramic Coating
                                    </a>
                                    </li>
                                    <li>
                                    <a href="Elastomer-membrane-coating.php" >Elastomer Membrane Coating
                                    </a>
                                    </li>
                                    <li>
                                    <a href="paint-protection-film.php">Paint Protection Film (PPF)</a>
                                    </li>
									</ul>
								</div>
							</div>
						</div>
						<div class=" col-6 col-lg-3 col-sm-6">
							<div class="d-lg-flex justify-content-end">
								<div class="sub-footer-single-item">
									<h3>Our Services</h3>
									<ul class="import-link ps-0 mb-0 list-unstyled">
									     <li>
                                    <a href="hypershield-ppf.php">Hypershield PPF</a>
                                    </li>
                                     <li>
                                    <a href="Proteq-ppf.php">Proteq PPF</a>
                                    </li>
                                     <li>
                                    <a href="llumar-ppf.php">Llumar PPF</a>
                                    </li>
                                    <li>
                                    <a href="3m-ceramic-coating.php" >3M Ceramic Coating
                                    </a>
                                    </li>
                                    <li>
                                    <a href="sonax-ceramic-coating.php" >Sonax Ceramic Coating
                                    </a>
                                    </li>
                                    <li>
                                    <a href="titan-elastomer-membrane-coating.php" >Titan Elastomer Membrane Coating
                                    </a>
                                    </li> 
									</ul>  
								</div>
							</div>
						</div>
							<div class=" col-6 col-lg-4 col-sm-6 ">
							<div class="sub-footer-single-item ms-md-5">
								<h3>Get In Touch</h3>
								<ul class="get-info ps-0 mb-0 list-unstyled">
									<li class="d-flex align-items-center">
										<i class="ri-phone-line"></i>
										<a href="tel:+917030911966">+917030911966</a>
									</li>
									<li class="d-flex align-items-center">
										<i class="ri-mail-line"></i>
										<a href="mailto:getautotherapy@gmail.com" style="word-break: break-word;">getautotherapy@gmail.com</a>
									</li>
									<li class="d-flex">
										<i class="ri-user-location-fill"></i>
										
										<span>
										   Shop No.12, Auto Therapy, Sai Shrushti, Right Canal Rd, Serene Meadows, Anandvalli, Nashik, Maharashtra 422013</span>
									</li>
								</ul>
							</div>
							
							
						
						</div>
					</div>
				</div>
			</div>
			
				<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=+917030911966&text=Welcome to autotherapy" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>


<style>.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	left:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}</style>
			<div class="copy-right">
				<div class="container">
					<ul class="ps-0 mb-0 list-unstyled text-center d-md-flex align-items-center justify-content-between">
						<li>
							<p class="mb-2 mb-sm-0">© <span>Autotherapy</span> All Rights Reserved Made with ❤️ Crafted by-<a href="https://dotphi.com/" target="_blank">Dotphi</a></p> 
						</li>
						<li> 
							<p><a href="#">Terms & Condition</a> / <a href="#">Privacy policy</a></p> 
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End Footer Area -->

		<!-- Start Back To Up Area -->
		<button type="button" id="backtotop">
			<i class="ri-upload-line"></i>
		</button>
		<!-- End Back To Up Area -->

		<!-- Start Dark Mode Area -->
		<!--<div class="dark-mode-btn">-->
		<!--	<div class="container-fluid">-->
		<!--		<div class="dark-version">-->
		<!--			<label id="switch" class="switch">-->
		<!--				<input type="checkbox" onchange="toggleTheme()" id="slider">-->
		<!--				<span class="slider round"></span>-->
		<!--			</label>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--</div>-->
		<!-- End Dark Mode Area -->

        <!-- Link Of JS File -->
  
		<script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/scrollCue.min.js"></script>
        <script src="assets/js/glightbox.min.js"></script>
        <script src="assets/js/before-after.js"></script>
        <script src="assets/js/smoothscroll.min.js"></script>
        <script src="assets/js/custom.js"></script>
    </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
    // Function to check if the selected date and time exist in the booking table
    function checkBooking(date) {
        // Perform an AJAX request to check if the booking exists in the backend
        $.ajax({
            url: 'footer_valid.php', // URL to your backend script for checking bookings
            type: 'POST',
            data: {
                date: date,
                // Include any other necessary data
            },
           success: function(response) {
    // Check if a booking exists
    if (response.exists === true) {
        // If a booking exists, extract the booked times
        var bookingTimes = response.times;
        console.log("Booked times:", bookingTimes);
        
        // Loop through the booked times and mark corresponding options in red
        bookingTimes.forEach(function(time) {
            var $option = $('#time option[value="' + time + '"]');
            if ($option.length > 0) {
                // Add class to mark the option in red
                $option.addClass('booking-exists');
            }
        });
    } else {
        console.log("No booking exists.");
    }
},
            error: function(xhr, status, error) {
                // Handle error
                console.error(error);
            }
        });
    }

    // Event handler for date selection
    $('#date').on('change', function() {
        var selectedDate = $('#date').val();
        // Check if a date is selected
        if (selectedDate) {
            // Call the function to check if booking exists
            checkBooking(selectedDate);
        }
    });
});


</script>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();

    $j(document).ready(function() {
        $j('#form').submit(function(e) {
            e.preventDefault();

            var name1 = $j('#name1').val();
            var email = $j('#email').val();
            var phone1 = $j('#phone1').val();
          
           
            var error = false;

            var nameRegex = /^[a-zA-Z\s]*$/;
            var emailRegex = /\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.in)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi;
            var mobileRegex = /\d{10}/;

            function showError(message) {
                $j('#check2').html(message).css("color", "red");
            }

            if (!name1.match(nameRegex) || name1 === "") {
                showError('** Please Enter your Name **');
                $j("#name1").focus();
                return false;
            }

              if (!email.match(emailRegex) || email === "") {
                showError('** Please Enter your Email **');
                $j("#email").focus();
                return false;
            }

           
            if (!phone1.match(mobileRegex) || phone1 === "") {
                showError('** Please Enter Your Phone No **');
                $j("#phone1").focus();
                return false;
            }

            

            $j('#submit').attr({'disabled': 'true', 'value': 'Sending...'});
            var form = $j('#form')[0];
            var formData = new FormData(form);

            // $j.ajax({
            //     url: "footer_valid1.php",
            //     type: "POST",
            //     data: formData,
            //     contentType: false,
            //     cache: false,
            //     processData: false,
            //     success: function(data) {
            //         if (data === 'sent') {
            //             $j('#submit').removeAttr('disabled').attr('value', 'Sent');
            //             showError('**Thank You For Contacting Us,We Will Contact You Soon.. **');
            //             //   echo "<p style='color: green;'>Thank you for contacting us! We will contact you soon.</p>";
            //             $j("#form").get(0).reset();
            //         } else {
            //             $j('#submit').removeAttr('disabled').attr('value', 'Retry');
            //             showError(data);
            //         }
            //     }
            // });
            $j.ajax({
    url: "footer_valid1.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
        if (data === 'sent') {
            $j('#submit').removeAttr('disabled').attr('value', 'Sent');
            showError('Thank You For Contacting Us, We Will Contact You Soon.');
            resetFormFields(); // Call the function to reset form fields
        } else {
            $j('#submit').removeAttr('disabled').attr('value', 'Retry');
            showError(data);
        }
    }
});
            return false;
        });
    });
    function resetFormFields() {
    // Reset form fields here
    $j("#form").get(0).reset();
}
</script>


</html>