</div>

<div class="footer bg-white pb-4">
	<div class="container">

		<div class="row justify-content-center">
			<div class="col-12 my-4"><div class="logo"><img src="/catalog/view/theme/cstyle/images/logo.svg" /></div></div>
			<div class="col-12 col-lg-8 text-center">Delivering high-quality salt tablets for efficient and sustainable water purification across industries.</div>
		</div>

		<div class="row">
			<div class="col-12 text-center">
				<ul class="menu mx-0 my-4 p-0">
					<li><a href="#" class="top"><i class="fa-solid fa-house"></i></a></li>
					<li><a href="#" class="about">About us</a></li>
					<li><a href="#" class="product">Products</a></li>
					<li><a href="#" class="specs">Specification</a></li>
					<li><a href="#" class="contact">Contacts</a></li>
				</ul>
			</div>
		</div>

		<div class="row">
			<div class="col-12 col-lg-6 text-center text-lg-start">saltman.ie © 2024. All rights reserved.</div>
			<div class="col-12 col-lg-6 text-center text-lg-end">
				<ul class="social mx-0 my-4 my-lg-0 p-0">
					<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
					<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
					<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
					<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
					<li><a href="#"><i class="fa-regular fa-envelope"></i></a></li>
				</ul>
			</div>
		</div>

	</div>
</div>

<div class="container-fluid border-top bg-white">
	<div class="row">
		<div class="col-12 text-center" style="line-height:50px;">Design and support&nbsp;&nbsp;&nbsp;<a href="https://cstyle.ie" target="_blank"><img src="/catalog/view/theme/cstyle/images/cs.svg" style="max-height:30px;" /></a></div>
	</div>
</div>

<!-- Contact Form -->
<div class="modal fade" id="order" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Make an order</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="container" id="form_contact">
					<div class="row">
						<div class="col-12">
							<div class="form-group mb-3">
								<input type="text" name="name" value="" placeholder="Your name" id="input-name" class="form-control" />
							</div>

							<div class="form-group mb-3">
								<input type="text" name="company" value="" placeholder="Company" id="input-company" class="form-control" />
							</div>

							<div class="form-group mb-3">
								<input type="text" name="phone" value="" placeholder="Your phone" id="input-phone" class="form-control" />
							</div>

							<div class="form-group mb-3">
								<input type="text" name="email" value="" placeholder="Your email" id="input-email" class="form-control" />
							</div>

							<div class="form-group mb-3">
								<input type="hidden" class="autoSelector" name="autoSelector" value="" />
							</div>

							<div class="form-group mb-3">
								<span class="fs-6 ps-1">Choose a product</span>
								<div class="service">
									<select name="service" class="form-control">
										<option value="" disabled>Choose a product</option>
										<option value="Custom order" class="custom">Custom order</option>
										<option value="OneBag" class="onebag">1 Bag</option>
										<option value="TenBag" class="tenbag">10 Bags</option>
										<option value="Pallet" class="pallet">Pallet (30 Bags)</option>
									</select>
								</div>
							</div>

							<div class="form-group mb-3">
								<textarea name="enquiry" placeholder="Enquiry" rows="10" id="input-enquiry" class="form-control"></textarea>
							</div>
							<div class="form-group mb-3 text-center">
								<script src="//www.google.com/recaptcha/api.js" type="text/javascript"></script>
								<div id="g_captch" class="g-recaptcha text-center" data-sitekey="{{ site_key }}"></div>
								<div id="g_captch"></div>
							</div>
							<input onclick="send_contact_form();" class="btn btn-primary w-100" type="submit" value="Place your order" />
						</div>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12"><button type="button" class="btn btn-secondary w-100" data-bs-dismiss="modal">Close</button></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="order_success" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Make an order</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="container" id="form_contact">
					<div class="row">
						<div class="col-12 text-center my-5">
							<h3>Thank you!</h3>
							<h4>You successfully sended your request</h4>
							<h5>We will contact you shortly.</h5>
						</div>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12"><button type="button" class="btn btn-secondary w-100" data-bs-dismiss="modal">Close</button></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> 

<script>
function send_contact_form() {
	$('.text-danger').remove();
	$.ajax({
		url: '/index.php?route=information/contact/send_form',
		type: 'post',
		data: $('#form_contact input[type=\'text\'], #form_contact textarea, #form_contact select, #form_contact input[type=\'hidden\']'),
		dataType: 'json',		
		success: function(json) {
			if (json['error']) {
				if (json['error']['name']) {
					$('#input-name').after('<div class="text-danger fs-6">Name must be between 3 and 32 characters!</div>');
				}
				if (json['error']['email']) {
					$('#input-email').after('<div class="text-danger fs-6">E-Mail Address does not appear to be valid!</div>');
				}
				if (json['error']['enquiry']) {
					$('#input-enquiry').after('<div class="text-danger fs-6">Enquiry must be between 10 and 3000 characters!</div>');
				}
				
				if (json['error']['captcha']) {
					//alert('captcha');
					$('#g_captch').after('<div class="text-danger fs-6">Verification is not correct!</div>');
				}
				
			}
			if (json['success']) {
				$('#order').modal('hide');
				$('#order_success').modal('show');
			}
		}
	});
}
</script>

</body>

</html>