<?php
error_reporting(0);
include 'inc/meta.php';

$alt = $_GET['status'];
if($alt == "submitted"){
    $msg = '<div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
     Application Submitted Sucessful!
  </div>';
}elseif($alt == "unsupported"){
    $msg = '<div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
   File Not Supported! Upload only doc, pdf,jpg/jpeg,docx
 </div>';
}elseif($alt=="failed"){
    $msg = '<div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
    Application Submission UnSucessful!
 </div>';
}elseif($alt==""){
    $msg = '';
}

?>
<!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>Visa Application - 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-14 pt-md-19 pb-md-8 text-center py-10">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h1 class="display-1 mb-3">Visa Application</h1>
            

          </div>

        </div>

      </div>

    </section>

    <section class="wrapper bg-light angled upper-end">
      <div class="container pb-11">
        

        <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">Fill Out Form</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" method="post" action="functions/api.php" enctype="multipart/form-data">
            <div class="messages"></div>
           <?php echo $msg; ?>

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

              <div class="col-md-6">
                <div class="form-floating mb-4">
                  <input id="form_middle" type="text" name="mname" class="form-control" placeholder="Kumar" required>
                  <label for="form_lastname">Middle Name </label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter your Middle Name. </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating mb-4">
                  <input id="form_lastname" type="text" name="lname" class="form-control" placeholder="Singh" required>
                  <label for="form_lastname">Last Name *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter your Last Name. </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating mb-4">
                  <input type="date" name="vdate" class="form-control" required>
                  <label for="form_message">Date *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter valid Date. </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating mb-4">
                  <input type="email" name="vemail" class="form-control" placeholder="Your message" required>
                  <label for="form_message">Your Email *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter valid email. </div>
                </div>
              </div>

              <div class="col-12">
                <div class="form-floating mb-4">
                  <input type="text" name="vnum" class="form-control" placeholder="Your message" required>
                  <label for="form_message">Whatsapp / Calling Number *</label>
                  <div class="valid-feedback"> Looks good! </div>
                  <div class="invalid-feedback"> Please enter valid number. </div>
                </div>
              </div>

              <!--<div class="col-12">-->
              <!--  <div class="form-floating mb-4">-->
              <!--    <input type="text" name="vsub" class="form-control" placeholder="Your message" required>-->
              <!--    <label for="form_message">Subject *</label>-->
              <!--    <div class="valid-feedback"> Looks good! </div>-->
              <!--    <div class="invalid-feedback"> Please enter subject. </div>-->
              <!--  </div>-->
              <!--</div>-->
              <div class="col-12">
                <div class="form-floating mb-4">
                  <input type="file" name="vfile[]" class="form-control" multiple="multiple">
                  <p class="text-muted">Upload Front & Back of Passport and ID only. You can select all together</p>
                </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" name="apply">Submit Application</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>