<?php include("header.php")?>
<!-- banner -->
	<div class="banner10" id="home1">
		<div class="container">
			<h2>Contact Us</h2>
		</div>
	</div>
<!-- //banner -->

<!-- breadcrumbs -->
	<div class="breadcrumb_dress">
		<div class="container">
			<ul>
				<li><a href="index.php"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a> <i>/</i></li>
				<li>Contact Us</li>
			</ul>
		</div>
	</div>
<!-- //breadcrumbs -->

<!-- mail -->
	<div class="mail">
		<div class="container">
			<h3>Contact Us</h3>
			<div class="agile_mail_grids">
				<div class="col-md-5 contact-left">
					<h4>Address</h4>
					<p>2A Cormack street,Mt Roskill</br>
                    Auckland-1041
					<ul>
						<li>Phone No&nbsp; : +64-27-1800 1055</li>
						<li>Mobile No : +64-21-0639987</li>
						<li><a href="#">t&csports.com</a></li>
					</ul>
				</div>
				<div class="col-md-7 contact-left">
					<h4>Contact Form</h4>
					<form action="contact_save.php" method="post" id="contact-form">
                    <div class="col-6">
                    <input type="text" name="name" id="name" placeholder="Full Name" required>
					<!-- <div class="error-message" style="color:red" id="name-error" ></div> -->
						
                    </div>
					
					<div>
					<input type="text" name="email" id="email" placeholder="email address" required>
					<!-- <div class="error-message" id="email-error" style="color:red"></div> -->
					</div>
					
					<div>
					<input type="text" name="phone" id="phone" placeholder="phone number" required>
					<!-- <div class="error-message" id="phone-error" style="color:red"></div> -->
					</div>
					
					<div>
					<textarea name="message" id="message" placeholder="message" required></textarea>
					<!-- <div class="error-message" id="message-error" style="color:red"></div> -->
					</div>
					
						<input type="submit" value="Submit" >
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>

			<div class="contact-bottom">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3189.902166794998!2d174.72754347584373!3d-36.916603472214156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d4687150be967%3A0xf87d86eac880bbc7!2s2A%20Cormack%20Street%2C%20Mount%20Roskill%2C%20Auckland%201041%2C%20New%20Zealand!5e0!3m2!1sen!2sin!4v1721296020734!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
			</div>
		</div>
	</div>
<!-- //mail -->

<script>
    document.getElementById('contact-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent form submission

        // Clear previous error messages
        document.querySelectorAll('.error-message').forEach(function(element) {
            element.textContent = '';
        });

        // Validate fields
        let isValid = true;

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const message = document.getElementById('message').value;

        if (name === '') {
            document.getElementById('name-error').textContent = 'Name is required';
            isValid = false;
        }

        if (email === '') {
            document.getElementById('email-error').textContent = 'Email is required';
            isValid = false;
        } else if (!validateEmail(email)) {
            document.getElementById('email-error').textContent = 'Invalid email format';
            isValid = false;
        }

        if (phone === '') {
            document.getElementById('phone-error').textContent = 'Phone number is required';
            isValid = false;
        }

        if (message === '') {
            document.getElementById('message-error').textContent = 'Message is required';
            isValid = false;
        }

        // If the form is valid, send the data using fetch API
        if (isValid) {
            fetch('contact_save.php', {
                method: 'POST',
                body: new FormData(document.getElementById('contact-form'))
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('contact-form').reset();
                    Toastify({
                        text: data.message,
                        duration: 3000,
                        close: true,
                        gravity: "top", // `top` or `bottom`
                        position: "right", // `left`, `center` or `right`
                        backgroundColor: "green",
                    }).showToast();
                   
                } else {
                    Toastify({
                        text: data.message,
                        duration: 3000,
                        close: true,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "red",
                    }).showToast();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Toastify({
                    text: "An error occurred. Please try again later.",
                    duration: 3000,
                    close: true,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "red",
                }).showToast();
            });
        }
    });

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }
</script>
<?php include("footer.php")?>