@include('layouts.header')
 <style>
b#cno {
    background: burlywood;
    color: #fff;
    padding: 4px;
}
</style> 


 <div class="inner-banner wow fadeIn" id="top" data-wow-duration="1s" data-wow-delay="0.5s">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-12 align-self-center">
              <div class="show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
                <div class="row">
                  <div class="col-lg-12" style="text-align:center; ">
                   <h3 class="white-text">If You Have Any Query Feel Free To Contact Us</h3>
                   
                  </div>
                 
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>

   <section class="map">
    <div class="container">
      <div class="row">
       
        <!--<div class="col-lg-10 offset-lg-1"> -->
		<div class="col-lg-12">
          <div class="row">
            <div class="col-lg-3">
              <div class="info-item">
                <i class="fa fa-envelope"></i>
                <h4>Email Us</h4>
                <a href="mailto:support@dealplexus.com">support@dealplexus.com</a>
				<br><br>
              </div>
            </div>
            <div class="col-lg-3">
              <div class="info-item">
                <i class="fa fa-phone"></i>
                <h4>Call Us</h4>
                <a href="tel:7428100654">+91 7428100654</a>
				<br><br>
              </div>
            </div>
            <div class="col-lg-3">
              <div class="info-item">
                <i class="fa fa-map"></i>
                <h4>Visit Us</h4>
                <a href="#">443, 4th Floor, Tower A2, Spaze iTech Park, Sohna Road, Gurgaon 122001</a>
              </div>
            </div>
            <div class="col-lg-3">
              <div class="info-item">
                <i class="fa fa-map"></i>
                <h4>Visit Us</h4>
                <a href="#">115 Christopher Columbus Drive, Jersey City, NJ 07302, United States</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  


  <section class="contact-form">
        <div class="container">   
         <div class="row">
				<div class="col-lg-6">
				<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d56146.863050629756!2d77.042178!3d28.413857!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d22009b740001%3A0x9f15cd4277d86e14!2sDealplexus.com!5e0!3m2!1sen!2sin!4v1679248105528!5m2!1sen!2sin" width="100%" height="530" 
				style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				</div>
					<div class="col-lg-6">
					<h5 class="green">Drop us a message and we will connect back with you</h5>
					<br>
          <div class="alert alert-danger print-error-msg" style="display:none;font-size: 16px;">
            <span></span>
        </div>
        <div class="alert alert-success print-success-msg" style="display:none;font-size: 16px;">
          <span></span>
      </div>
				<form action="{{route('contact_us')}}" method="post" id="contactUsForm">
				<input type="hidden" name="captcha_h" id="captcha_h" value="">
          @csrf
			  <!-- Name input -->
			  <div class="form-outline mb-4">
			  <label class="form-label" for="form4Example1">Full Name<sup style="color:red;">*</sup></label>
				<input type="text" id="name" class="form-control" name="name" onkeyup="value=value.replace(/[^\a-\z\A-\Z ]/g,'')"/>
			  </div>

			  <!-- Email input -->
			  <div class="form-outline mb-4">
			  <label class="form-label" for="form4Example2">Email address<sup style="color:red;">*</sup></label>
				<input type="email" id="email" class="form-control" name="email"/>
			  </div>
			  
			  <div class="form-outline mb-4">
			  <label class="form-label" for="form4Example2">Contact No.<sup style="color:red;">*</sup></label>
				<input type="tel" id="phone" class="form-control" name="phone" maxlength="12" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>
			  </div>
			  
			  <!-- Message input -->
			  <div class="form-outline mb-4">
			  <label class="form-label" for="form4Example3">Message<sup style="color:red;">*</sup></label>
				<textarea class="form-control" id="message" rows="4" name="message"></textarea>
			  </div>
			  
			  <div class="form-outline mb-4">
			  <label class="form-label" for="form4Example2">Enter this number<sup style="color:red;">*</sup>: <b id="cno">  </b>  <i onclick="refresh_captcha()" class="btn fa fa-refresh"> </i></label>
				<input type="tel" id="captcha" class="form-control" name="captcha" maxlength="12" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>
			  </div>

			  <!-- Submit button -->
			  <button type="button" id="contactus_btn" class="btn btn-success btn-block mb-4">Submit</button>
			</form>
     
				</div>
		</div>
	 </div>
	 </section>
   <script>
		function refresh_captcha()
		{
			$.ajax({
            type:'GET',
            url:"{{ route('refresh_captcha') }}",
            data:{              
              _token: "{{ csrf_token() }}",
            },
            success:function(data){
			  $("#cno").html(data.captcha);
			 $("#captcha_h").val(data.captcha);
            }
          });
			
		}
        $("#contactus_btn").click(function(e){
          e.preventDefault();
          var name = $("#name").val();
          var email = $("#email").val();
          var phone = $("#phone").val();
          var message = $("#message").val();
		  var captcha = $("#captcha").val();
		  var captcha_h = $("#captcha_h").val();
      
          $.ajax({
            type:'POST',
            url:"{{ route('contact_us') }}",
            data:{
              name:name, 
              email:email,
              phone:phone,
              message:message,
			  captcha:captcha,
			  captcha_h:captcha_h,
              _token: "{{ csrf_token() }}",
            },
            success:function(data){
              if($.isEmptyObject(data.error)){
                $(".print-error-msg").css('display','none');
                $(".print-success-msg").find("span").html(data.success);
                $(".print-success-msg").css('display','block');
                document.getElementById("contactUsForm").reset(); 
              }else{
                printErrorMsg(data.error);
              }
            }
          });
        });

        function printErrorMsg (msg) {
          $(".print-error-msg").find("span").html('');
          $(".print-error-msg").css('display','block');
          $.each( msg, function( key, value ) {
            $(".print-error-msg").find("span").append('<li>'+value+'</li>');
          });
        }
   </script>

   @extends('layouts.footer')