<!--New Footer Start from Here-->
<!-- The CSS links and files-->

<?php include_once('footerCSS.php'); ?>

<!--The footer tags are below here-->
<script type="text/javascript">
	function validateFeedback() {
		var type = document.getElementById("type").value;
		var message = document.getElementById("message").value;
		document.getElementById("message").value = message;
		var feedbackError = document.getElementById("feedbackError");
		var messageLength = message.length;
		if (messageLength == 0 || type == "") {
			feedbackError.style.display = "block";
			feedbackError.innerText = "Please fill all the details!!";
		} else {
			feedbackError.style.display = "none";
			//Now we try to add the feedback 
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					feedbackError.style.display = "block";
					feedbackError.innerText = "Thank You for Feedback!";
					window.location.reload();
				}
			};
			xmlhttp.open("GET", "post_feedbackAdd.php?type=" + type + "&message=" + message, true);
			xmlhttp.send();
		}
	}
</script>

<footer class="page-footer font-small unique-color-dark">

	<div style="background-color: #6351ce;">
		<div class="container">

			<!-- Grid row-->
			<div class="row py-4 d-flex align-items-center">

				<!-- Grid column -->
				<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
					<h3 class="mb-0" style="color:white;">Get connected with us on social networks!</h3>
				</div>
				<!-- Grid column -->

				<!-- Grid column -->
				<div class="col-md-6 col-lg-7 text-center text-md-right">

					<!-- Facebook -->
					<a class="fb-ic">
						<i class="fa fa-facebook white-text mr-4" style="font-size:24px"> </i>
					</a>
					<!-- Twitter -->
					<a class="tw-ic">
						<i class="fab fa-twitter white-text mr-4" style="font-size:24px"> </i>
					</a>

					<!--Linkedin -->
					<a class="li-ic">
						<i class="fab fa-linkedin-in white-text mr-4" style="font-size:24px"> </i>
					</a>
					<!--Instagram-->
					<a class="ins-ic">
						<i class="fab fa-instagram white-text" style="font-size:24px"> </i>
					</a>

				</div>
				<!-- Grid column -->

			</div>
			<!-- Grid row-->

		</div>
	</div>

	<!-- Footer Links -->
	<div class="container text-center text-md-left mt-5">

		<!-- Grid row -->
		<div class="row mt-3">

			<!-- Grid column -->
			<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">

				<!-- Content -->
				<h3 class="text-uppercase font-weight-bold">Company name</h3>
				<hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 200px;">
				<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
					consectetur
					adipisicing elit.</p>

			</div>
			<!-- Grid column -->

			<!-- Grid column -->
			<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">

				<!-- Links -->
				<h3 class="text-uppercase font-weight-bold">Useful links</h3>
				<hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 200px;">
				<p>
					<a href="#!" style="text-decoration: none;">SIGN-IN</a>
				</p>
				<p>
					<a href="#!" style="text-decoration: none;">RESEARCH</a>
				</p>
				<p>
					<a href="#!" style="text-decoration: none;">SIGN-UP</a>
				</p>

			</div>

			<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">

				<!-- Links -->
				<h3 class="text-uppercase font-weight-bold">Contact</h3>
				<hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 200px;">
				<p>
					<i class="fas fa-home mr-3" style="font-size:18px"></i>WSU, NSW, AUS</p>
				<p>
					<i class="fas fa-envelope mr-3" style="font-size:18px"></i>info@example.com</p>
				<p>
					<i class="fas fa-phone mr-3" style="font-size:18px"></i> + 01 234 567 88</p>


			</div>
			<!-- Grid column -->

			<!-- Grid column -->
			<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">

				<!-- Links -->
				<h3 class="text-uppercase font-weight-bold">Feedback</h3>
				<hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 200px;">

				<form action="" class="text-center">

					<!-- Subject -->

					<div id="feedbackError" style="display: none;" class="alert alert-danger" role="alert">
						Please fill all details!!
					</div>

					<select id="type" name="type" class="browser-default custom-select mb-4">
						<option value="" selected disabled>Choose option</option>
						<option value="feedback">Feedback</option>
						<option value="bug">Report a bug</option>
						<option value="request">Feature request</option>
					</select>
					<div class="form-group">
						<textarea class="form-control rounded-0" name="message" id="message" rows="2" placeholder="Your Message"></textarea>
					</div>
					<input class="btn btn-primary btn-block" id="feedbackSubmit" type="submit" value="submit" onclick="validateFeedback()" />

				</form>
				<!-- Default form contact -->

			</div>
			<!-- Grid column -->

		</div>
		<!-- Grid row -->

	</div>
	<!-- Footer Links -->

	<!-- Copyright -->
	<div class="footer-copyright text-center py-3">© 2020 Copyright:
		<a href="https://mdbootstrap.com/" style="text-decoration: none;">GEESE.COM.AU</a>
	</div>
	<!-- Copyright -->

</footer>

<!-- JQuery -->
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>

<script>
	// $(document).ready(function(){

	//     $("#feedbackSubmit").click(function(){
	//         var msgType = $("#type").val();
	//         var msg = $("#message").val();
	//         if(msgType == "" || msg.length <= 0){
	//             $("#feedbackError").css("display","block");
	//             return;
	//         }else{
	//             $("#feedbackError").css("display", "none");
	//             //Here we make the ajax call
	//             var str = "type=" + msgType + "&message=" + msg;
	//             var xhttp = new XMLHttpRequest();
	//             xhttp.onreadystatechange = function() {
	//                 if (this.readyState == 4 && this.status == 200) {
	//                     $("#feedbackError").css('display','block');
	//                     if(this.responseText == '1'){
	//                         $("#feedbackError").removeClass('alert-danger');
	//                         $("#feedbackError").addClass('alert-info');
	//                         $("#feedbackError").text('Thank you for the feedback');
	//                     }else{
	//                         $("#feedbackError").removeClass('alert-info');
	//                         $("$feedbackError").addClass('alert-danger');
	//                         $("#feedbackError").text('Server Connection Error!!');
	//                     }
	//                 }
	//             };
	//             xhttp.open("GET", <?php //echo dir_root; 
										?>"php/ajax/post_feedbackAdd.php?" + str, false);
	//             xhttp.send(); 

	//         }
	//     });

	// });
</script>