@extends('web.layout.master')
@section('content')
      <section class="section bg-cover overlay" data-background="{{asset('assets/images/backgrounds/page-title.jpg')}}">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <h2 class="text-white mb-md-3 mb-2 head_allpages">Contact Us</h2> 
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent p-0">
                  <li class="breadcrumb-item font-weight-semebold"><a class="text-white" href="javscript:;">Home</a></li>
                  <li class="breadcrumb-item font-weight-semebold active text-primary" aria-current="page">Contact Us</li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
      </section>  
      <section class="section pb-0 py-4">
        <div class="container">
          <div class="row"> 
            <div class="col-md-4 d-flex align-items-stretch">
              <div class="bg-white box-shadow text-center p-5 px-md-2 px-lg-5 my-md-5 my-4 w-100">
                <i class="fa fa-map-marker text-primary icon-lg mb-4"></i>
                <h4 class="mb-4">Our Address</h4>
                <ul class="list-unstyled">
                  <li>Al Saaha Office B, 404, Souk Al Bahar Burj Khalifa District, Dubai, UAE</li>
                </ul>
              </div>
            </div> 
            <div class="col-md-4 d-flex align-items-stretch">
              <div class="bg-white box-shadow text-center p-5 px-md-2 px-lg-5 my-md-5 my-4 w-100">
                <i class="fa fa-phone text-primary icon-lg mb-4"></i>
                <h4 class="mb-4">Phone Number</h4>
                <ul class="list-unstyled">
                  <li>(003) 104-6706-231</li>
                  <li>(003) 104-6706-232</li>
                </ul>
              </div>
            </div> 
            <div class="col-md-4 d-flex align-items-stretch">
              <div class="bg-white box-shadow text-center p-5 px-md-2 px-lg-5 my-md-5 my-4 w-100">
                <i class="fa fa-envelope text-primary icon-lg mb-4"></i>
                <h4 class="mb-4">Message Us</h4>
                <ul class="list-unstyled">
                  <li>info@bexar.com</li>
                  <li>info@example.com</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>  
      <section class="section pt-5">
        <div class="container">
          <div class="row"> 
            <div class="col-md-5 mb-5 mb-md-0">
                <div class="map_canvas">
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.292843149875!2d55.27455931500947!3d25.19334498389794!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f68296f399cb3%3A0x316143983579a165!2sVirtuzone%20Business%20Setup%20%26%20Company%20Formation%2C%20Dubai%2C%20UAE!5e0!3m2!1sen!2sin!4v1651467254437!5m2!1sen!2sin" width="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
            <div  class="col-lg-7 col-md-10">
              <h3 class="section-title">Contact Form</h3>
              <form  id="queryForm"   >
              @csrf
              <div class="row"  >
                <div class="col-md-6">
                  <input type="text" name="name"  class="form-control mb-md-4 mb-3 validate" placeholder="Name">
                  <p id="nameError" class="text-danger"></p>
                </div>
                <div class="col-md-6">
                  <input type="email" name="mail" class="form-control mb-md-4 mb-3 validate" placeholder="Email">
                  <p id="mailError" class="text-danger"></p>
                </div>
                <div class="col-md-6">
                  <input type="text" name="phone"  class="form-control mb-md-4 mb-3 validate" placeholder="Phone">
                  <p id="phoneError" class="text-danger"></p>
                </div>
                <div class="col-md-6">
                  <input type="text" name="subject"  class="form-control mb-md-4 mb-3 validate" placeholder="Subject">
                  <p id="subjectError" class="text-danger"></p>
                </div>
                <div class="col-12">
                  <textarea name="message"  class="form-control mb-md-5 mb-4 py-3 px-md-4 px-3 validate" placeholder="Your Message"></textarea>
                  <p id="messageError" class="text-danger"></p>
                </div>
                <div class="col-12">
                  <button type="button" onclick="sendQuery(this)" class="btn btn-primary hover-ripple">send message</button>
                </div>
                  </div>
              </form>
            </div>
          </div>
        </div>
      </section>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
     
      <script>
          function sendQuery(obj) {
                                        var flag = true;
                                        $(".validate").each(function (i, v) {
                                            var elem = $(this);
                                            var valu = elem.val();
                                            // var email = $("input[name=mail]").val();
                                            // var phone = $("input[name=phone]").val();
                                            // var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
                                            // var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                                            if (valu == null || valu == '' || valu == 0) {
                                                flag = false;
                                                $("#" + elem.attr('name') + 'Error').html('This field is required.');
                                            } else {
                                                $("#" + elem.attr('name') + 'Error').html('');
                                            }
                                      
                                            // if (!filter.test(email)) {
                                            //   $("#mailError").html("Please provide a valid email address");
                                            //  flag = false;
                                            // } else {
   
                                            //       }
                                            //       if (!phoneNum.test(phone)) {
                                            //   $("#phoneError").html("Please provide a valid Phone address");
                                            //  flag = false;
                                            // } else {
   
                                            //       }
                                        });
                                        if (flag) {
                                            $.ajax({
                                                url: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function url() in /home/petclap/public_html/dev.paperless/resources/views/web/contact_us.blade.php:129
Stack trace:
#0 {main}
  thrown in <b>/home/petclap/public_html/dev.paperless/resources/views/web/contact_us.blade.php</b> on line <b>129</b><br />