<?php
include 'inc/meta.php';

?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
  <meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
  <meta name="author" content="elemis">
  <title>Contact - Dubai Tour Visa</title>
  <link rel="shortcut icon" href="./assets/img/favicon.png">
  <link rel="stylesheet" href="./assets/css/plugins.css">
  <link rel="stylesheet" href="./assets/css/style.css">
  <?php echo  $gtag; ?>
  <?php echo  $meta_home;?>

</head>

<body>
  <div class="content-wrapper">
    <?php include 'inc/nav.php'; ?>



    <section class="wrapper bg-white">
      <div class="container pt-17 pb-20 pt-md-19 pb-md-21 text-center py-14">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h1 class="display-1 mb-3">Get in Touch</h1>
            <nav class="d-inline-block" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact</li>
              </ol>
            </nav>

          </div>

        </div>

      </div>

    </section>

    <section class="wrapper bg-light angled upper-end">
      <div class="container pb-11">
        <div class="row mb-14 mb-md-16">
          <div class="col-xl-10 mx-auto mt-n19">
            <div class="card">
              <div class="row gx-0">
                <div class="col-lg-6 align-self-stretch">
                  <div class="map map-full rounded-top rounded-lg-start">
                    <iframe src="https://maps.google.com/maps?q=Musalla%20Tower,%20Bur%20Dubai,%20Dubai%20DU%20122347,%20United%20Arab%20Emirates&t=&z=13&ie=UTF8&iwloc=&output=embed" style="width:100%; height: 100%; border:0" allowfullscreen></iframe>
                  </div>

                </div>

                <div class="col-lg-6">
                  <div class="p-10 p-md-11 p-lg-14">
                    <div class="d-flex flex-row">
                      <div>
                        <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
                      </div>
                      <div class="align-self-start justify-content-start">
                        <h5 class="mb-1">Address</h5>
                        <address>1202, Musalla Tower, Bur Dubai,
                          <br class="d-none d-md-block" />Dubai DU 122347, United Arab Emirates
                        </address>
                      </div>
                    </div>

                    <div class="d-flex flex-row">
                      <div>
                        <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
                      </div>
                      <div>
                        <h5 class="mb-1">Phone</h5>
                        <p>+971 42087445</p>
                      </div>
                    </div>

                    <div class="d-flex flex-row">
                      <div>
                        <div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-envelope"></i> </div>
                      </div>
                      <div>
                        <h5 class="mb-1">E-mail</h5>
                        <p class="mb-0"><a href="mailto:inquiry@onlydubaivisa.com" class="link-body">inquiry@onlydubaivisa.com</a></p>
                      </div>
                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

        <div class="row">
          <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
            <h2 class="display-4 mb-3 text-center">Drop Us a Line</h2>
            <p class="lead text-center mb-10">Reach out to us from our contact form and we will get back to you shortly.
            </p>
            <!-- <form class="contact-form"> -->
            <div class="messages"></div>
            <p class="text-muted" id="alert"></p>

            <div class="row gx-4">
              <div class="col-md-6">
                <div class="form-floating mb-4">
                  <input id="form_name" type="text" name="name" class="form-control" placeholder="Jane Kumar" required>
                  <label for="form_name">Full Name *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter your full name. </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="form-floating mb-4">
                  <input id="form_email" type="email" name="email" class="form-control" placeholder="hello@dubai.com" required>
                  <label for="form_lastname">Your Email *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter your Email. </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating mb-4">
                  <textarea id="form_message" name="message" class="form-control" placeholder="Your message" style="height: 150px" required></textarea>
                  <label for="form_message">Message *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter your messsage. </div>
                </div>
              </div>

              <div class="col-12 text-center">
                <button class="btn btn-primary btn-send mb-3" onclick="SendMessage()" id="btntext">Send message </button>
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
              </div>

            </div>

            <!-- </form> -->

          </div>

        </div>

      </div>

    </section>

   

  </div>

  <?php include 'inc/foot.php'; ?>

  <div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
      <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
    </svg>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script>
    function SendMessage() {
      $('#btntext').text("Sending Message!")
      var nm = $('#form_name').val();
      var em = $('#form_email').val();
      var msg = $('#form_message').val();
      if (nm != '') {
        if (em != '') {
          if (msg != '') {
            const settings = {
              "async": true,
              "crossDomain": true,
              "url": "functions/form.php",
              "method": "POST",
              "headers": {},
              "data": {
                "name": nm,
                "email": em,
                "message": msg
              }
            };

            $.ajax(settings).done(function(response) {
              $('#btntext').text("Send Message")

              $('#alert').text(response)

            });
          } else {
            $('#alert').text('Message is Required!')
            $('#btntext').text("Send Message")

          }
        } else {
          $('#alert').text('Email is Required!')
          $('#btntext').text("Send Message")

        }
      } else {
        $('#alert').text('name is Required!')
        $('#btntext').text("Send Message")

      }


    }
  </script>
  <script src="./assets/js/plugins.js"></script>
  <script src="./assets/js/theme.js"></script>
</body>

</html>