@extends('layouts.main_page_website')
 <style>
	.contact-us::-webkit-input-placeholder { 
		color:black; 
	}
	input[type="text"]::-webkit-input-placeholder { 
		color:black; 
	}
	input[type="email"]::-webkit-input-placeholder { 
		color:black; 
	}
	
 </style>
<script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>

@section('content')

<div class="tg-banner tg-haslayout">
			<div class="tg-imglayer">
				<img src="images/bg-pattran.png" alt="image desctription">
			</div>
			<div class="container">
				<div class="row">
					<div class="tg-banner-content tg-haslayout">
						<div class="tg-pagetitle animated flipInY">
								<h1>contact</h1>
						</div>
						<ol class="tg-breadcrumb">
							<!-- <li><a href="#">Home</a></li> -->
							<li class="active">contact us</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<!--************************************
				Banner End
		*************************************-->
		<!--************************************
				Main Start
		*************************************-->
		<main id="tg-main" class="tg-main tg-paddingbottom-zero tg-haslayout">
			<section class="tg-main-section tg-paddingbottom-zero tg-haslayout">
				<div class="container">
					<div class="tg-section-name">
						<h2>contact</h2>
					</div>
					<div class="col-sm-11 col-xs-11 pull-right">
						<div class="row">
							<div class="tg-contactus tg-haslayout">
								<div class="row">
									<div class="col-md-5 col-sm-12 col-xs-12">
										<div class="tg-contactinfobox">
											<div class="tg-section-heading"><h2>feel free to send us your queries, Suggestion &amp; Remarks</h2></div>
											<!-- <div class="tg-description">
												<p>Consectetur adipisicing elit sed do eiusmod temport incididunt utia labore et dolore magna aliqua enima ad minim veniam quistrud on ullamco laboris nisiut aliquip ex ea commodo consequat.</p>
											</div> -->
											<ul class="tg-contactinfo">
												
												<li>
													<i class="fa fa-map-marker"></i>
													<address>404, Timmy Arcade, Makhwana Road, Near Marol Naka Metro Station, Andheri- East, Mumbai- 400059.</address>
												</li>
												<li>
													<i class="fa fa-phone"></i>
													<span>+91 98205 30594 / +91 86556 72184</span>
												</li>
												<li>
													<i class="fa fa-envelope-o"></i>
													<a href="#">goafootballfestival@gmail.com</a>
												</li>
												<!-- <li>
													<i class="fa fa-skype"></i>
													<a href="info%40domain.html">Prosoccer772</a>
												</li> -->
												<li>
													<i class="fa fa-facebook-f"></i>
													<a href="https://www.facebook.com/share/18eeLWwFWs/?mibextid=wwXIfr">facebook.com</a>
												</li>
												<!-- <li>
													<i class="fa fa-twitter"></i>
													<a  href="http://twitter.com">twitter.com</a>
												</li> -->
												<li>
													<i class="fa fa-instagram"></i>
													<a href="https://www.instagram.com/goafootballfestival?igsh=djI4NGZzMjlwYjZ2&utm_source=qr">instagram.com</a>
												</li>
											</ul>
										</div>
									</div>
									<div class="col-md-7 col-sm-12 col-xs-12">
										<form action="#" method="post" class="tg-commentform help-form" id="tg-commentform">
										<input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

											<fieldset>
												<div class="form-group">
													<input type="text" id="name" required="" placeholder="Name*" class="form-control contact-us" name="contact[name]">
													<span id="error_name" ></span>

												</div>
												<div class="form-group">
													<input type="email" required="" id="email" placeholder="Email*" class="form-control contact-us" name="email">
													<span id="error_email" ></span>

												</div>
												<div class="form-group">
													<input type="text" required="" id="contact" placeholder="Contact*" class="form-control contact-us" name="contact">
													<span id="error_contact" ></span>

												</div>
												<div class="form-group">
													<div class="tg-select">
														<select name="contact[type]" id="type" placeholder="Message Type*" class="contact-us">
															<option value="">Message Type*</option>
															<option value="Help">Discussion</option>
															<option value="Help">Help</option>
															<option value="Consutation">Consutation</option>
														</select>
														<span id="error_type" ></span>

													</div>
												</div>
												<div class="form-group">
													<textarea required placeholder="Message*" name="contact[message]" class="contact-us " id="message"></textarea>
													<span id="error_message" ></span>

												</div>
												<div class="form-group">
													<button type="button" onclick="contactUs()" class="tg-btn ">send</button>
												</div>
											</fieldset>
										</form>
									</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="tg-mapcontent" class="tg-mapcontent">
					<div class="">
						<iframe src="https://www.google.com/maps?q=Timmy%20Arcade%2C%20Makwana%20Road%2C%20Gamdevi%2C%20Marol%2C%20Andheri%20East%2C%20Mumbai%2C%20Maharashtra%2C%20India&z=14&t=&ie=UTF8&output=embed" width="600" height="450"></iframe><noscript> Full functionality of this site requires JavaScript to be enabled. Learn how to <a href="https://javascriptdownload.org/">Download JavaScript</a> in your browser.</noscript>
					</div>
					
				</div>
			</section>
		</main>
		<!--************************************
				Main End
		*************************************-->


@stop

<script>
	   function isEmailAddress(str) {
    var pattern =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    return pattern.test(str);  // returns a boolean 
 }

 function contactUs(){
    
                var allow= true;   
                var hasErrorArray=[];
                var removeErrorArray=[];
            
             $('.contact-us').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>')
                       
                        
        
                  }
              }
             
              
            console.log(allow)
    
            //   return false;
              
                    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("type",$('#type').val());
                    data.append("full_name",$('#name').val());
					data.append("contact",user_contact);

                    data.append("email",user_email);
                    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{
                         
                        }
                        }
                         });
    }
</script>