<?php        include_once('config/vdb.php');  include_once('config/vcheck.php'); 
             
             


?>

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title> Login </title>
  <meta name="description" content="">
  <meta name="keywords" content="">
   <?php include_once('inc/link.php'); ?>
   <link href="inc/vis.css" rel="stylesheet">
   

</head>

<body class="starter-page-page">

  <!-- HEADER-->
     <?php include_once('inc/header.php'); ?>
  <!-- END HEADER-->

  <main class="main">

    <!-- Page Title -->
    <div class="page-title" data-aos="fade" >
     <div class="heading" style="padding-top:20px;background-image: linear-gradient(rgba(255, 34, 255, 0.6) , rgba(255, 34, 255, 0.4) ), 
                 url(img/banner.jpeg) ">
      <!-- <div class="heading" style="padding-top:20px;background-image: linear-gradient(rgba(45, 166, 63, 0.6) , rgba(255, 34, 255, 0.4) ), 
                 url(img/banner.jpeg) "> -->
        <!-- <div class="container">
          <div class="row d-flex justify-content-center text-center">
            <div class="col-lg-8">
              <h1> <i class="fa fa-calendar"></i> DASHBOARD </h1>
              <p class="mb-0">Meets the experienced professionals who guide our vision and operations..</p>
            </div>
          </div>
        </div> -->
      </div>
      <!-- <nav class="breadcrumbs">
        <div class="container">
          <ol>
            <li><a href="index.html">Home</a></li>
            <li class="current">Starter Page</li>
          </ol>
        </div>
      </nav> -->
    </div><!-- End Page Title -->

     <!-- Starter Section Section 
     <section id="starter-section" class="starter-section section">

      
      <div class="container section-title" data-aos="fade-up">
        <h2> Our Team </h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div>

      <div class="container" data-aos="fade-up">
        <p>Use this page as a starter for your own custom pages.</p>
      </div>

      </section>
        /Starter Section Section -->

     

     <section id="contact" class="contact section">
      <!-- Section Title 
      <div class="container section-title" data-aos="fade-up">
        <h2>Contact</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div>
          End Section Title -->


      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row ">
          
               
         
          <div class="col-lg-1"></div>
          

          <div class="col-lg-10">
            
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                              <li class="nav-item" role="presentation">
                              <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">  <i class="bi bi-calendar-check"></i> Dashboard </button>
                              </li>
                              <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"> <i class="bi bi-calendar-plus"></i>  Book Now </button>
                              </li>
                              <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">  <i class="bi bi-calendar-week"></i> My bookings </button>
                              </li>
                              <!-- <li class="nav-item" role="presentation">
                              <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
                              </li> -->
                              </ul>
                              <div class="tab-content" id="pills-tabContent">
                              <hr>
                              <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                                     <div class="row">
                                        <div class="col-md-4">
                                             <div class="card text-center mb-3" style="width: 18rem;">
                                                  <div class="card-body">
                                                    <h5 class="card-title"><i class="bi bi-calendar-check"></i>  ACTIVE BOOKING </h5>
                                                     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                     <a href="#" class="btn btn-primary">Go somewhere</a>
                                                  </div>
                                             </div>
                                        </div>
                                        <div class="col-md-4">
                                             <div class="card text-center mb-3" style="width: 18rem;">
                                                  <div class="card-body">
                                                    <h5 class="card-title"> PENDING BOOKING </h5>
                                                     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                     <a href="#" class="btn btn-warning">Go somewhere</a>
                                                  </div>
                                             </div>
                                        </div>
                                        <div class="col-md-4">
                                             <div class="card text-center mb-3" style="width: 18rem;">
                                                  <div class="card-body">
                                                    <h5 class="card-title"> CLOSED BOOKING </h5>
                                                     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                                     <a href="#" class="btn btn-primary">Go somewhere</a>
                                                  </div>
                                             </div>
                                        </div>
                                     </div>             

                              </div>
                              <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                                                  <div class="row">
                                                            <div class="col-md-3"> 
                                                                 <label > Select a booking type  </label>  
                                                                     <!-- <option selected></option> -->
                                                                      <select class="form-select  "  required="" name="hostingtype"  >
                                                                           <?php $stmt = $conn->prepare("SELECT * FROM rooms  ");
                                                                           $stmt->execute(); foreach ($stmt as $row) {?>
                                                                                
                                                                                <option value="<?php echo $row['id']; ?>"><?php
                                                                                     echo $row['name']; ?></option> <?php } ?>
                                                                      </select> 
                                                            </div>
                                                            <div class="col-md-3">
                                                                 <label> Guest Number  </label>  
                                                                       
                                                                      <select class="form-select   "  required="" name="guest"  >
                                                                           <?php $stmt = $conn->prepare("SELECT * FROM roomsrate  ");
                                                                           $stmt->execute(); foreach ($stmt as $row) {?>
                                                                                <!-- <option></option> -->
                                                                                 
                                                                                <option value="<?php echo $row['id']; ?>"><?php
                                                                                     echo $row['capacity']; ?></option> <?php } ?>
                                                                      </select>
                                                            </div>
                                                       
                                                       <div class="col-md-3">
                                                            <!-- <label> Select number of guest  </label>  -->
                                                                      <label> Checkin date  </label>
                                                                      <input type="date"   autocomplete="off" class="form-control datepicker" name="startdate"   required=""   >
                                                       </div>
                                                       <div class="col-md-3">
                                                            <!-- <label> Select number of guest  </label>  -->
                                                                      <label> Check in time  </label>
                                                                      <input type="time"   autocomplete="off" class="form-control datepicker" name="startdate"   required=""   >
                                                       </div>
                                                       <div class="col-sm-3">
                                                          <label> End Date  </label>
                                                          <input type="date"   autocomplete="off" class="form-control datepicker" name="enddate"   required=""   >
                                                       </div>
                                                       <div class="col-sm-3">
                                                          <label> End Time  </label>
                                                          <input type="time"   autocomplete="off" class="form-control datepicker" name="enddate"   required=""   >
                                                       </div>
                                                       <div class="col-md-3"> 
                                                            <label> Number of days    </label> 
                                                            <input type="" class="form-control" readonly="true" name="noofdays"> 
                                                       </div>
                                                       <div class="col-md-3"> 
                                                            <label> Total Cost    </label> 
                                                            <input type="" class="form-control" readonly="true" name="totalcost"> 
                                                       </div>
                                                       <div class="col-md-3"> 
                                                            <label> Payment Method     </label>
                                                            <select class="form-control  js-example-basic-single "  required="" name="paymode" style="width:100%" >
                                                                 <?php $stmt = $conn->prepare("SELECT * FROM paymentsmode  ");
                                                                 $stmt->execute(); foreach ($stmt as $row) {?>
                                                                      <!-- <option></option> -->
                                                                      <option value="<?php echo $row['id']; ?>"><?php
                                                                           echo $row['name'].' '.$row['account']; ?></option> <?php } ?>
                                                            </select>  
                                                            <!-- <input type="" class="form-control" readonly="true" name="totalcost">  -->
                                                       </div>
                                                        <div class="col-md-3 "> 
                                                            <label> Amount Paid     </label>
                                                            <input type="" class="form-control input-group " readonly="true" name="amountpaid"> 
                                                   
                                                            <!-- <input type="" class="form-control" readonly="true" name="totalcost">  -->
                                                       </div>
                                                       <div class="col-md-3"> 
                                                            <label> Transaction code/ Reference      </label>
                                                            <input type="" class="form-control" readonly="true" name="transactioncode">

                                                       </div>
                                                       <div class="col-md-3"></div>
                                                       <hr>
                                                          <div class="col-md-12 text-center">
                                                            <!-- <div class="loading">Loading</div>
                                                            <div class="error-message"></div>
                                                            <div class="sent-message">Your message has been sent. Thank you!</div> -->

                                                            <button type="submit" name="login" class=" btn btn-success" style="border-radius:25px;"><i class="fa fa-plus"></i> Submit your booking  </button>

                                                            
                                                                 
                                                         </div>

                                                         
                                                  </div>
                                                  

                              </div>
                              <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
                              <!-- <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div> -->
                              </div>

          </div>
          

          <div class="col-lg-1"></div> 

          
        </div> 

      </div>

     </section>


  </main>

  <!-- Footer -->
    <?php include_once('inc/footer.php'); ?>
  <!-- End footer -->

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->

  <?php include_once('inc/linkjs.php'); ?>



</body>
</html>
<script>
     $(document).ready(function() {
    $('.js-example-basic-single').select2();
});

</script>