@extends('layouts.main_page_website')
<script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>

@section('content')

<section class="page_title ds s-overlay s-pt-150 s-pb-50">
				<div class="s-blur"></div>
				<div class="container">
					<div class="row">


						<div class="col-md-12 text-center">
							<h1>Contact Us</h1>
							<ol class="breadcrumb">
								<li class="breadcrumb-item">
									<a href="./">Home</a>
								</li>
								<li class="breadcrumb-item">
									<a href="#">Pages</a>
								</li>
								<li class="breadcrumb-item active">
									Contact Us
								</li>
							</ol>
						</div>


					</div>
				</div>
			</section>

			<section class="ls  s-py-xl-150 s-py-lg-130 s-py-md-90 s-py-60 c-gutter-60">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-lg-6 col-xl-7">
							<p class="special-heading color-main sub-title">
								<span class="text-uppercase">
									contact us
								</span>
							</p>
							<h2 class="special-heading">
								<span class="text-capitalize ">
									contact us
								</span>
							</h2>
							<div class="fw-divider-space divider-30 divider-lg-60"></div>
							<div class="media">
										<div class="icon-styled color-main fs-28">
											<i class="fas fa-map-marker-alt"></i>
										</div>

										<div class="media-body">
											<h5>
												Address
											</h5>
											<p>
											{{$profile->address}}
											</p>
										</div>
									</div>
									
									<div class="media">
										<div class="icon-styled color-main fs-28">
											<i class="fas fa-phone"></i>
										</div>
										<div class="media-body">
											<h5>
												Phone:
											</h5>
											<p>
											{{ $profile->number }}
											</p>
										</div>
									</div>
									
									<div class="media">
										<div class="icon-styled color-main fs-28">
											<i class="fas fa-envelope"></i>
										</div>
										<div class="media-body">
											<h5>
												Email:
											</h5>
											<p>
											{{$profile->email}}
											</p>
										</div>
									</div>
							<div class="fw-divider-space divider-30 divider-lg-60"></div>
						
						</div>
						<div class="col-lg-6 col-xl-5 animate" data-animation="scaleAppear">
							<div class="form-wrapper px-lg-70 py-lg-100 px-20 py-60 ds ">
							<form class="contact-form content-center c-mb-20 c-gutter-20" method="post" action="/">
							<input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

									<div class="row ">
										<div class="col-12 form-title  text-center">
											<h5>Contact Form</h5>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="form-group has-placeholder">
												<label for="full_name">Your Full Name <span class="required">*</span></label>

												<input type="text" aria-required="true" size="30" value="" name="full_name" id="full_name" class="form-control contact-us clearContactFormInputs" placeholder="Your Full Name">
												<span id="error_full_name" ></span>

											</div>
										</div>
										<div class="col-sm-12">
											<div class="form-group has-placeholder">
												<label for="contact">Email<span class="required">*</span></label>
												<input type="text" id="email" class="form-control contact-us clearContactFormInputs"  name="email" aria-required="true" placeholder="Email">
												<span id="error_email" ></span>

											</div>
										</div>
										<div class="col-sm-12">
											<div class="form-group has-placeholder">
												<label for="contact">Contact<span class="required">*</span></label>
												<input type="tel" id="contact" class="form-control contact-us clearContactFormInputs" pattern="^[0-9-+\s()]*$" name="contact" maxlength="10" aria-required="true" placeholder="Contact Number">
												<span id="error_contact"></span>

											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12 ">
											<div class="form-group has-placeholder">
												<label for="message">Message</label>
												<textarea aria-required="true" rows="2" cols="45" name="message" id="message" class="form-control contact-us clearContactFormInputs" placeholder="Message"></textarea>
												<span id="error_message" ></span>

											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12 mt-lg-40 mt-15 text-center">
											<div class="form-group">
												<input class="btn btn-maincolor" type="button" onclick="contactUs()" value="Contact us">
											</div>
										</div>
									</div>
								</form>
							</div>

						</div>
						<!--.col-* -->
					</div>
				</div>
			</section>

			<section class="container-px-0">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-12">
							<div class=" ms page_map" data-draggable="false" data-scrollwheel="false">
								<div class="marker">
									<div class="marker-address">sydney, australia, Liverpool street, 66</div>
									<div class="marker-title">Reach Us</div>
									<div class="marker-description">

										<ul class="list-unstyled">
											<li>
												<span class="icon-inline">
													<span class="icon-styled color-main">
														<i class="fa fa-map-marker"></i>
													</span>

													<span>
														Sydney, Australia, Liverpool street, 66
													</span>
												</span>
											</li>

											<li>
												<span class="icon-inline">
													<span class="icon-styled color-main">
														<i class="fa fa-phone"></i>
													</span>

													<span>
														1 (800) 123-45-67
													</span>
												</span>
											</li>
											<li>
												<span class="icon-inline">
													<span class="icon-styled color-main">
														<i class="fa fa-envelope"></i>
													</span>

													<span>
														mail@example.com
													</span>
												</span>
											</li>
										</ul>
									</div>

									<img class="marker-icon" src="images/map_marker_icon.png" alt="">
								</div>
							</div>

						</div>
					</div>
				</div>
			</section>

<!-- The Join MPFI Modal -->
<div class="modal fade" id="errorModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
          
          <button type="button" class="close" data-dismiss="modal" style="text-align:right;margin-right:5px">&times;</button>
        
        <!-- Modal body -->
        <div class="modal-body" id="contact_modal_body">
          
        </div>
        
      
      </div>
    </div>
  </div>
<!-- End of Join MPFI Modal -->
@stop
<script>
	function contactUs(type){
    // alert()
   
	var allow= true;   
	var hasErrorArray=[];
	var removeErrorArray=[];

	$('.contactUs').each(function() {     //input text/number validation
	var sickfull = $(this).val().trim();
	
	if (sickfull == "")
	{
		hasErrorArray.push({'id':$(this).attr('id'),'placeholder':$(this).attr('placeholder')});       
	}
	else{
		removeErrorArray.push({'id':$(this).attr('id'),'placeholder':$(this).attr('placeholder')});       
		// $(this).removeClass('border border-danger');
		//  $('#error_'+id).html('')
	}                    

	});
	console.log(hasErrorArray)
	console.log(removeErrorArray)

	if(hasErrorArray.length > 0 ){
	// $('.error_span').html('');
	for (let index = 0; index < hasErrorArray.length; index++) {
	
		$('#'+hasErrorArray[index].id).addClass('border border-danger');
		$('#error_'+hasErrorArray[index].id).html('').append('<span class="text-danger" style="font-size:8pt;display:block;">'+hasErrorArray[index].placeholder+' input cannot be empty.</span>')
		
		// $('#'+hasErrorArray[0].id).focus();
		
		setTimeout(function() { document.getElementById(hasErrorArray[0].id).focus(); }, 10);
		}
		allow = false;   
	}
		
	
	if(removeErrorArray.length > 0 ){
		
		
			for (let index = 0; index < removeErrorArray.length; index++) {
			$('#'+removeErrorArray[index].id).removeClass('border border-danger');
			$('#error_'+removeErrorArray[index].id).html('')

				const index2 = removeErrorArray.indexOf(removeErrorArray[index].id)
				if (index2 > -1) {
					removeErrorArray.splice(index2, 1);
				}
			}
	}

	var email =$('#email').val().trim();
	if(email.length > 0){
	if (isEmailAddress(email)) {
		$('#error_email').val('').removeClass('border border-danger');
		}else{
		allow = false; 

		$('#email').addClass('border border-danger');
		setTimeout(function() { document.getElementById('email').focus(); }, 10);
		$('#error_email').val('').append('<span class="text-danger" style="font-size:8pt;display:block;">Not a valid Email-Address</span>')
			
			

		}
	}
	
	let contact= $('#contact').val().trim();

	if(contact!=="" ){
	// alert()z
	if(contact.length < 10){
		$('#contact').addClass('border border-danger')
		$('#error_contact').html('').append('<span class="text-danger" style="font-size:8pt;display:block;"> Please enter atleast 10 digit to proceed.</span>');
		allow = false;

	}else{
		$('#contact').removeClass('border border-danger')
		$('#error_contact').html('');
	}
	}
		
		
	console.log(allow)

	
	
		if(!allow)
		{
		return allow;
		}
		let user_contact =$('#contact').val()
		let user_email =$('#email').val()
	var data = new FormData();

	data.append("_token", $("#_token").val()); 
	

	data.append("full_name",$('#full_name').val());
	data.append("email",$('#email').val());
	data.append("contact",$('#contact').val());
	data.append("message",$('#message').val());

	$.ajax({

type: "POST",

url: "/contactUs",
data: data,
processData: false,
contentType: false ,
cache: false, 

  beforeSend: function(){
	swal({
	title: 'Please wait!',
	text: 'Do not refresh or Press back button',
	padding: '2em',
	button:false,
	onOpen: function () {
	swal.showLoading()
	}
});
   
},
complete: function(){

	swal.close();


},
success:function(response){
  var data = JSON.parse(response);
	if(data != ""){
	  if(data.status == "success"){
		
		  console.log(data)
		  new swal({
				title: "Contact us",
				text: "Mail has been sent successfully, we will contact you soon !!",
				icon: "success",

			});

		$('.contact-us').val('');

	   
	 } 
	 if(data.status == "exist"){
		var span = document.createElement("span");
		span.innerHTML = "We have already recieved a request using <strong>'"+user_email+"'</strong> and <strong>'"+user_contact+"'</strong> in combination, kindly use different inputs to proceed.";
		
	
				new swal({
				content: span,
				icon: "error",
				
				})
	   
	 }
	 else{
		
	  console.log(data)
	  
			// swal({
			//     title: "Edit Album ",
			//     text: "Failed to update product details",
			//     icon: "error"
			//   });             
			  
		  } 
 
  
}else{
 
}
}
 });
    }
	function isEmailAddress(str) {
    var pattern =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    return pattern.test(str);  // returns a boolean 
 }
</script>