<?php
require_once('header.php');
$status=NULL;
if(isset($_GET['status']))
{
    $status=$_GET['status'];
}
?>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<style>
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
        background:#E93E21;
    }
</style>

 <!--=================================
 intro bg -->

<div class="inner-intro parallax bg-overlay-black-50" style="background-image: url(images/bg/reservation.jpg);">
 <div class="container">
    <div class="row text-center intro-title">
      <h1 class="text-orange">Reservation</h1>
      <p class="text-white">Make online reservation</p>
      <ul class="page-breadcrumb">
        <li><a href="index.php"><i class="fa fa-home"></i> Home</a> <i class="fa fa-angle-double-right"></i></li>
        <li>Reservation<i class="fa fa-angle-double-right"></i></li>
     </ul>
    </div>
  </div>
</div>
 
 <!--=================================
 intro bg -->

<!--=================================
 reservation -->

<section class="reservation white-bg">
 <div class="page-section-ptb">
  <div class="container">
   <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="section-title text-center">
      <div class="title-separator">
     <i class="glyph-icon flaticon-food-27"></i>
      </div>
        <h2> <span class="text-orange">Make </span> Reservation</h2>
        <p>We provide free, secure and instantly confirmed online reservation.</p>
      </div>
    </div>
   </div>
   <div class="row">
    <div class="col-lg-10  col-lg-offset-1">
      <form class="form-horizontal"  method="post" action="action.php" >
         <div class="contact-form">
            <div class="row">
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
                <i class="fa fa-pencil"></i>
            <input class="web placeholder" type="text" placeholder="Full Name" name="name"required>
          </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
                <i class="fa fa-phone"></i>
            <input class="web placeholder" type="text" placeholder="Phone Number" name="number" required>
          </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
                <i class="fa fa-envelope-o"></i>
            <input class="web placeholder" type="email" placeholder="Your Email" name="email" required >
          </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
                <i class="fa fa-calendar add-on"></i>
            <input class="datepicker" type="text" placeholder="Select date" name="date" required>
          </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
                <i class="fa fa-clock-o icon-time add-on"></i>
            <input class="timepicker" type="text" placeholder="Select time" name="time" required>
          </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="form-field">
            <div class="selected-box" required>
                   <select name="person">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                </select>
                  </div>
                 </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12">
              <div class="form-field">
               <i class="fa fa-pencil"></i>
                <textarea class="input-message placeholder" placeholder="Comment*" rows="7" name="message" required></textarea>  
              </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12">
              <div class="form-submit mt-10 mb-30 text-center">
                 
                 <button id="submit" name="reservaton_data" type="submit" class="button uppercase"> Book A Table</button>
              </div>
              </div>
            </div>
            <div class="bottom-text text-center">You can also call : + <span class="text-orange"><strong>+32 2 512 94 95</strong></span> to make a reservation.</div>
            </div> 
         </form>
      </div>
   </div>
  </div>
 </div>
 <?php
                      if($status==1)
                      {
                      ?>
                      
                      echo "<script>swal("Thank you for your reservation!", "We have now confirmed your booking. We look forward to seeing you soon.If there are any issues, we will contact you on the details provided and if you would like to make any changes, please call us on the numbers on our website.");</script>";
               
                      <?php } ?>
</section>
<script>
    $('.datepicker-without-calendar').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'DD MM yy',
  beforeShow: function(input) {
    $(input).datepicker("widget").addClass('hide-calendar');
  }
});
$('.datepicker').datepicker();
$('.timepicker').timepicker({
    timeFormat: 'h:mm p',
    interval: 60,
    minTime: '10',
    maxTime: '6:00pm',
    defaultTime: '',
    startTime: '10:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
});
</script>

<!--=================================
 reservation --> 
<?php
require_once('footer.php');
?>