@include ('header')
              <!-- Breadcrumb Section -->
              
              <section class="breadCrumArea">
                  
                  <div class="inside_header">
                      <!-- 02-01-2023 -->
                      <!-- <img style="width: auto;" src="images/inside-headers/contact.jpg"> -->
                      <img style="width: auto;" src="new_image/inside-headers/contact.webp">
                  </div>
                  <div >
                  <div class="container" >
                      <div class="row">
                          <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                             <!-- <h1 class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">about <span>us</span></h1> -->
                              <ul class="breadLink wow fadeInUp" data-wow-duration="700ms" data-wow-delay="350ms">
                                  <li><a href="/">Home</a><span>|</span></li>
                                  <li><a href="/contact">Contact</a> </li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
              </section>
                  <div class="it-services">
                   <section class="testiArea commonSection">
                  <div class="container">
                      <div class="row">
                      <div class="singleTesti wow fadeInUp text-center" data-wow-duration="700ms" data-wow-delay="300ms">
                                  <h2>Contact <span> US</span></h2>
                              </div>
              <!-- Map Section -->

              
               <!-- <div class="quote wow fadeInUp welcome-div" data-wow-duration="700ms" data-wow-delay="350ms">
                  <div id="">
                      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15071.086914394113!2d72.8395939!3d19.2051701!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x847b1b2c1a667388!2sMukesoft+IT+Consultants!5e0!3m2!1sen!2sin!4v1489650949318" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                  </div> -->
                <div class="quote wow fadeInUp welcome-div" data-wow-duration="700ms" data-wow-delay="350ms">
                  <div id="">
                      <iframe src="https://maps.google.com/maps?q=101, Munisuvrat Building,  Above Radhe Radhe Collection,  Besides Jain Temple, &t=&z=20&ie=UTF8&iwloc=&output=embed" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
              </section>
              <!-- Contact Section -->
              <section class="contactArea commonSection">
                  <div class="container">
                      <div class="row">
                          <div class="col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12 text-center wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
                              <div class="contactForm">
                                  <h1>Contact <span>Form</span></h1>
                                   @if (session('contact_success'))
          <div class="alert alert-success">
          {{ session('contact_success') }}
          </div>
          @endif
          @if (session('contact_error'))
          <div class="alert" style="background-color: #f5dfde; border-color:#ef1212f5;color:red;">
          {{ session('contact_error') }}
          </div>
          @endif
          <div style=" font-size: 150%;color: orange; margin-top: 5px;" id="test" >
          </div><br>

           <div style=" font-size: 150%;color: orange; margin-top: 5px;" id="con_name_err" >
          </div>

            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_email_err" >
          </div>

            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_city_err" >
          </div>
          
            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_state_err" >
          </div>

            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_country_err" >
          </div>

            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_company_err" >
          </div>
          <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_phone_err" >
          </div>
         
            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_url_err" >
          </div>
          
            <div style="font-size: 150%; color: orange; margin-top: 5px;" id="con_message_err" >
          </div>
  <form action="/contactme" method="POST" id="contactForm" enctype="multipart/form-data" name="contactForm" onsubmit ="return validateContactForm()" >   

       <input type="hidden" name="_token" value="{{ csrf_token() }}" />
       <div class="form-group">
        <input  type="text" class="alphabetswithquotes"  placeholder="Full name*" name="con_name" maxlength="250" value="" required>
      </div>
       <div class="form-group">
         <input  type="email" placeholder="Email address*" id="contact_email" name="email" value="" required>
         
      </div>
      <!-- <div class="form-group">
          <input  type="text" class="alphabetsonly" maxlength="60" placeholder="City/Town*" id="city" name="city" value="{{ old('city') }}">

      </div> -->
      <!-- <div class="form-group">
        <input  type="text" class="alphabetsonly" maxlength="85" placeholder="State*" id="contact_state" name="state" value="{{ old('state') }}">
       
      </div> -->
      <!-- <div class="form-group">
          <input  type="text" class="alphabetsonly" placeholder="Country*" maxlength="50" id="country" name="country" value="{{ old('country') }}">
      
      </div> -->
      <!-- <div class="form-group">
       <input  type="text" placeholder="Company*" maxlength="100" id="contact_company" name="company" value="{{ old('company') }}">
        
      </div> -->
      <!-- <div class="form-group">
        <input  type="text" class="numbersonly" placeholder="Phone*" id="phone" maxlength="10" name="phone" value="{{ old('phone') }}">
      </div> -->
      <!-- <div class="form-group">
          <input  type="text" placeholder="http://www.yoursite.com*" id="contact_url" name="url" value="{{ old('url') }}">
         
      </div> -->
      <!-- <div class="form-group">
        <select class="form-control" name="service" id="service" required>
          <option value="">Select Service</option>
          <option value="IT Consulting">IT Consulting</option>
          <option value="Contract Hiring">Contract Hiring</option>
          <option value="Cloud Application">Cloud Application</option>
          <option value="Custom Web Application">Custom Web Application</option>
          <option value="SEO">SEO</option>
          <option value="Pay Per Click">Pay Per Click</option><option value="Web Analytics">Web Analytics</option>
          <option value="Iphone Development">Iphone Development</option>
          <option value="Android Development">Android Development</option>
          <option value="Windows Development">Windows Development</option>
          <option value="Web Redesign">Web Redesign</option>
          <option value="Web Maintenance">Web Maintenance</option><option value="Open Source Ecommerce">Open Source Ecommerce</option>
          <option value="Custom Ecommerce">Custom Ecommerce</option>
          <option value="Ecommerce Management">Ecommerce Management</option>
        </select>
      </div> -->

      <!-- <div class="clearfix"></div> -->
      <div class="form-group">
      <textarea  placeholder="Message*" name="message" maxlength="5000" required></textarea>

     

      {{-- <div class="g-recaptcha" data-sitekey="6Ld07sMZAAAAABQC1H6cxJzxzDQjTuqcBTpck7pG"></div> --}}
          
      </div>

      <div class="form-group text-left">
         <img src="{{ url('/captcha') }}" class="text-left"  alt="CAPTCHA Image" style="text-align: left;width:60%;height:30%;">
         
      </div>
      <div class="form-group">
         <input  type="text"  placeholder="Captcha" name="captcha_val" maxlength="250" value="" required>     
       
      </div>
       <div class="row">
        <div class="col-sm-12 clo-lg-12">  <button type="submit" id="unConSubmit" style="display: block;">send</button> </div>
       
       </div>
     {{-- <div class="form-group" >
        <button type="submit" id="unConSubmit">send</button>
         </div> --}}
      </form>

     
                              </div>
                          </div>
                           
                      </div>
                  </div>
              </section>
              <!-- Subscribe Section -->
          
            

  <script>
    $("#contactForm").submit(function(event) {
      //alert("hi");
        var recaptcha = $("#g-recaptcha-response").val();
        //alert(recaptcha);
        if (recaptcha === "") {
          document.getElementById("test").innerHTML = "Invalid Captcha" ;
         return false;
          // alert("Please check the recaptcha");

       }
    });
    function validateContactForm() 
    {
      // var x = document.forms["myForm"]["name"].value;
      // if (x == "") {
      //     alert("Please enter your name");
      //     return false;
      // }
     

      var x = document.forms["contactForm"]["con_name"].value;

      if (x == "") 
      {
        document.getElementById("con_name_err").innerHTML = "Enter Name" ;
        return false;
      }
      else
      {
        document.getElementById("con_name_err").innerHTML = "" ;
      }

      // var letters = /^[a-zA-Z\'\/]+$/;

      // if(!x.match(letters))  
      // {  
      //   document.getElementById("con_name_err").innerHTML = "Invalid Name";  
      //   return false;   
      // }  
      // else
      // {
      //   document.getElementById("con_name_err").innerHTML = "";
      // }


      var email = document.forms["contactForm"]["email"].value;

      // if (email == "") 
      // {
      //     alert("Please enter your email");
      //     return false;
      // } 
      if (email == "") 
      {
        document.getElementById("con_email_err").innerHTML = "Enter valid Email" ;
        return false;
      }
      else
      {
        document.getElementById("con_email_err").innerHTML = "" ;
      }
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(!email.match(re))  
      {  
        document.getElementById("con_email_err").innerHTML = "Invalid Email Id";  
        return false;   
      }  
      else
      {
        document.getElementById("con_email_err").innerHTML = "";
      }


       var city = document.forms["contactForm"]["city"].value;

      if (city == "") 
      {
        document.getElementById("con_city_err").innerHTML = "Enter Valid City" ;
        return false;
      }
      else
      {
        document.getElementById("con_city_err").innerHTML = "" ;
      }

      // var letters = /^[a-zA-Z/]+$/;

      // if(!city.match(letters))  
      // {  
      //   document.getElementById("con_city_err").innerHTML = "Invalid City";  
      //   return false;   
      // }  
      // else
      // {
      //   document.getElementById("con_city_err").innerHTML = "";
      // }
       var state = document.forms["contactForm"]["state"].value;

   if (state == "") 
      {
        document.getElementById("con_state_err").innerHTML = "Enter Valid State" ;
        return false;
      }
      else
      {
        document.getElementById("con_state_err").innerHTML = "" ;
      }

      // var letters = /^[a-zA-Z/]+$/;

      // if(!state.match(letters))  
      // {  
      //   document.getElementById("con_state_err").innerHTML = "Invalid State";  
      //   return false;   
      // }  
      // else
      // {
      //   document.getElementById("con_state_err").innerHTML = "";
      // }
       var country = document.forms["contactForm"]["country"].value;

  if (country == "") 
      {
        document.getElementById("con_country_err").innerHTML = "Enter Valid Country" ;
        return false;
      }
      else
      {
        document.getElementById("con_country_err").innerHTML = "" ;
      }

      // var letters = /^[a-zA-Z/]+$/;

      // if(!country.match(letters))  
      // {  
      //   document.getElementById("con_country_err").innerHTML = "Invalid Country";  
      //   return false;   
      // }  
      // else
      // {
      //   document.getElementById("con_country_err").innerHTML = "";
      // }


       var company = document.forms["contactForm"]["company"].value;

  if (company == "") 
      {
        document.getElementById("con_company_err").innerHTML = "Enter Valid Company" ;
        return false;
      }
      else
      {
        document.getElementById("con_company_err").innerHTML = "" ;
      }

      // var letters = /^[a-zA-Z/]+$/;

      // if(!company.match(letters))  
      // {  
      //   document.getElementById("con_company_err").innerHTML = "Invalid Company";  
      //   return false;   
      // }  
      // else
      // {
      //   document.getElementById("con_country_err").innerHTML = "";
      // }

   var y = document.forms["contactForm"]["phone"].value;
      // if (y == "") {
      //     alert("Please enter your mobile number");
      //     return false;
      // }
      if (y == "") 
      {
        document.getElementById("con_phone_err").innerHTML = "Enter Valid Phone No" ;
        return false;
      }
      else
      {
        document.getElementById("con_phone_err").innerHTML = "" ;
      }
      var numbers =/^[0-9]+$/;
      if (!y.match(numbers)) 
      {
        document.getElementById("con_phone_err").innerHTML = "Invalid Phone No";  
        return false;   
      }  
      else
      {
        document.getElementById("con_phone_err").innerHTML = "";
      }

   var url = document.forms["contactForm"]["url"].value;

  if (url == "") 
      {
        document.getElementById("con_url_err").innerHTML = "Enter Valid URL" ;
        return false;
      }
      else
      {
        document.getElementById("con_url_err").innerHTML = "" ;
      }

  //     // var letters = /^[a-zA-Z/]+$/;
  //    var letters = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;

  //     if(!url.match(letters))  
  //     {  
  //       document.getElementById("con_url_err").innerHTML = "Invalid URL";  
  //       return false;   
  //     }  
  //     else
  //     {
  //       document.getElementById("con_url_err").innerHTML = "";
  //     }

      var z = document.forms["contactForm"]["message"].value;
      // if (z == "") {
      //     alert("Please enter your Question");
      //     return false;
      // }
      if (z == "") 
      {
        document.getElementById("con_message_err").innerHTML = "Enter Message" ;
        return false;
      }
      else
      {
        document.getElementById("con_message_err").innerHTML = "" ;
      }
    
    }
    // $(function(){
    //   $('#contactForm').submit(function(event){
    //     alert("sd");
    //     var verified = grecaptcha.getResponse();
    //     alert(verified);
    //     if(verified.length === 0){
    //       event.preventDefault();
    //     }
    //   });
    // });

  </script>

    <!-- Footer Section -->
              @include ('footer')