<?php
$title = 'Contact Us';
$menu = 'contact_us';
require 'includes/header-includes.php';
?>
		<div class="body">
			<?php require 'includes/header-menu.php'; ?>
			<div role="main" class="main">
				<section class="page-header mb-0">
					<div class="container">
						<div class="row align-items-center">
							<div class="col-md-12 text-Center">
								<h1 class="font-weight-bold">Contact Us</h1>
							</div>
						</div>
					</div>
				</section>

				<section class="section">
					<div class="container">
						<div class="row text-center">
							<div class="col">
								<!--<span class="top-sub-title text-color-primary appear-animation" data-appear-animation="fadeInUpShorter">LOREM IPSUM DOLOR SIT</span>-->
								<h2 class="font-weight-bold appear-animation" data-appear-animation="fadeInUpShorter">Get in Touch With Us</h2>
								<p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">If you have any further questions or queries please do not hesitate to get in touch.</p>
							</div>
						</div>
						<div class="row pt-5">
							<div class="col-lg-4">
								<div class="row">
									<div class="col-12 col-md-4 col-lg-12 mb-lg-4 appear-animation"
										data-appear-animation="fadeInLeftShorter">
										<div class="icon-box icon-box-style-1">
											<div class="icon-box-icon">
												<i class="lnr lnr-apartment text-color-primary"></i>
											</div>
											<div class="icon-box-info mt-1">
												<div class="icon-box-info-title">
													<h3 class="font-weight-bold text-color-dark text-4 mb-0">Address</h3>
												</div>
												<p>
													R Sathish Kumar & R Ramesh<br>
													Preci Craft CNC Works<br>
													SF NO- 410/1B3 ,Door No 1C,1D,1E,<br>
													Shankar Nagar, Maniyakaranpalayam,<br>
													Idigarai - Thudiyalur Main Road,<br>
													Coimbatore - 641022
												</p>
											</div>
										</div>
									</div>
									<div class="col-12 col-md-4 col-lg-12 mb-lg-4 appear-animation"
										data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="200">
										<div class="icon-box icon-box-style-1">
											<div class="icon-box-icon">
												<i class="lnr lnr-envelope text-color-primary line-height-07"></i>
											</div>
											<div class="icon-box-info mt-1">
												<div class="icon-box-info-title">
													<h3 class="font-weight-bold text-color-dark text-4 mb-0">Email Address</h3>
												</div>
												<p><a href="mailto:info@precicraftcncworks.com">info@precicraftcncworks.com</a></p>
											</div>
										</div>
									</div>
									<div class="col-12 col-md-4 col-lg-12 appear-animation"
										data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400">
										<div class="icon-box icon-box-style-1">
											<div class="icon-box-icon">
												<i class="lnr lnr-phone-handset text-color-primary"></i>
											</div>
											<div class="icon-box-info mt-1">
												<div class="icon-box-info-title">
													<h3 class="font-weight-bold text-color-dark text-4 mb-0">Phone Number</h3>
												</div>
												<p>
													<a href="tel:+919994928283">+91 99949 28283</a><br>
													<a href="tel:+919843598306">+91 98435 98306</a>
												</p>
											</div>
										</div>
									</div>
									<div class="col-12 col-md-4 col-lg-12 appear-animation"
										data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400">
										<div class="icon-box icon-box-style-1">
											<div class="icon-box-icon">
												<i class="lnr lnr-link text-color-primary"></i>
											</div>
											<div class="icon-box-info mt-1">
												<div class="icon-box-info-title">
													<h3 class="font-weight-bold text-color-dark text-4 mb-0">Website</h3>
												</div>
												<p>
													<a href="https://www.precicraftcncworks.com/" target="_blank">www.precicraftcncworks.com</a>
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-8 appear-animation" data-appear-animation="fadeInRightShorter">
								<form class="contact-form form-style-2" method="POST" id="contact-us-form">
									<div class="contact-form-success alert alert-success d-none" id="successMessage">
										<strong>Success!</strong> <span id="successContent"></span>
									</div>
									<div class="contact-form-error alert alert-danger d-none" id="errorMessage">
										<strong>Error!</strong> <span id="errorContent"></span>
										<span class="mail-error-message d-block"></span>
									</div>
									<div class="form-row row mb-3">
										<div class="form-group col-md-6">
											<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" placeholder="Name" required>
										</div>
										<div class="form-group col-md-6">
											<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" placeholder="E-mail" required>
										</div>
									</div>
									<div class="form-row row mb-3">
										<div class="form-group col">
											<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject" placeholder="Subject" required>
										</div>
									</div>
									<div class="form-row row mb-3">
										<div class="form-group col">
											<textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" placeholder="Message" required></textarea>
										</div>
									</div>
									<div class="form-row row mb-3 mt-2">
										<div class="col">
											<input type="submit" value="SEND MESSAGE" class="btn btn-primary btn-rounded btn-4 font-weight-semibold text-0" data-loading-text="Loading...">
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>

				<div id="googlemaps" class="google-map">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d250694.8049870932!2d76.76000538632474!3d10.955340242729108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba8f734e0f96e1f%3A0x6716f1c4683f37cd!2sPRECICRAFT%20CNC%20WORKS!5e0!3m2!1sen!2sin!4v1771784155418!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				</div>
				
			</div>
 
			<footer id="footer" class="footer-hover-links-light mt-0">
				<div class="container">

				</div>
				
				<?php require 'includes/footer-copyright.php'; ?>
			</footer>
		</div>
		<?php require 'includes/footer-includes.php'; ?>
		<script>
			$(document).ready(function() {
				$("#contact-us-form").submit(function(event) {
					event.preventDefault(); // Prevent standard submission
					var form = $(this);
					var url = "send_email.php"; // Get target URL

					$.ajax({
						type: "POST",
						url: url,
						data: form.serialize(), // Serialize data
						success: function(response) {
							var parsedResponse = JSON.parse(response);
							if (parsedResponse.status == "0") {
								$("#errorContent").html(parsedResponse.message);
								$("#errorMessage").removeClass("d-none").addClass("d-block");
								$("#successMessage").addClass("d-none").removeClass("d-block");
								return false;
							}
							$("#errorMessage").addClass("d-none").removeClass("d-block"); // Hide error message
							$("#successContent").html(parsedResponse.message);
							$("#successMessage").removeClass("d-none").addClass("d-block"); // Show success message
							$("#contact-us-form")[0].reset(); // Reset form
						},
						error: function(jqXHR, textStatus, errorThrown) {
							$("#errorContent").html(errorThrown);
							$("#errorMessage").removeClass("d-none").addClass("d-block");
							$("#successMessage").addClass("d-none").removeClass("d-block");
							console.error(textStatus, errorThrown); // Log error
						}
					});
				});
			});
		</script>