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

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title> Contact us- Farm Stay  </title>
  <meta name="description" content="">
  <meta name="keywords" content="">
   <?php include_once('wsite/inc/link.php'); ?>
   <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> -->

</head>
<style>



.wizard {
    margin: 20px auto;
    
}

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #ff00ff;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

.connecting-line {
    height: 2px;
    background: #ff00ff;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #ff00ff;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
/* span.round-tab i{
    color:##00ffff;
} */
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid #ff00ff;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #ff00ff;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #ff00ff;
}

.wizard .nav-tabs > li a {
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }
}

</style>

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

  <!-- HEADER-->
   <?php include_once('wsite/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(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> Book a room   </h1>
              <p class="mb-0">Have questions or need assistance? We're here to help. Reach out to our team for support.</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>Starter Section</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 -->
          

     <!-- New wizard -->
        <section class="mt-0">
          <div class="container">
          <form class="card">
               <div class="card-header">
               <nav class="nav nav-pills nav-fill">
                    <a class="nav-link tab-pills" href="#"> <i class="bi bi-calendar-plus"></i>  Booking details </a>
                    <a class="nav-link tab-pills" href="#"> <i class="bi bi-person-add"></i> Visitor Information </a>
                    <a class="nav-link tab-pills" href="#"> <i class="bi bi-cash-coin"></i>  Payments Details</a>
                    <a class="nav-link tab-pills" href="#"> <i class="bi bi-check-circle"></i> Review & Submit </a>
               </nav>
               </div>
               <div class="card-body">
               <div class="tab d-none">
                     <!-- <div class="mb-3">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Please enter name">
                    </div>
                    <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="Please enter email">
                    </div>
                    <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="Please enter password">
                    </div> -->
                    <div class="row mb-0 ">
                          <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> Check In 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"    >
                      </div>
                      <div class="col-sm-3">
                          <label> End Date  </label>
                          <input type="date"   autocomplete="off" class="form-control datepicker" name="enddate"     >
                      </div>
                      <div class="col-sm-3">
                          <label> End Time  </label>
                          <input type="time"   autocomplete="off" class="form-control datepicker" name="enddate"      >
                      </div>
                      <div class="col-md-3"> 
                          <label> Number of days    </label> 
                          <input type="" class="form-control" required="" name="noofdays"> 
                      </div>
                      <div class="col-md-3"> 
                          <label> Total Cost    </label> 
                          <input type="" class="form-control disabled " readonly="true "   name="totalcost" disabled readonly > 
                      </div>
                    </div>

                    <!-- <div class="row">
                      <div class="col-12 text-right">
                        <button class="btn btn-primary" data-next>Next <i class="bi bi-arrow-right-circle"></i> </button>
                      </div>
                    </div> -->
               </div>

               <div class="tab d-none">
                    <div class="mb-3">
                      <div class="row">
                         <div class="col-md-3"> 
                                <label > Select Your country   </label>  
                                    <select class="form-select "  required="" name="countryoforigin"  >
                                        <option value=110 selected > Kenya </option>
                                          <?php $stmt = $conn->prepare("SELECT * FROM countries  ");
                                          $stmt->execute(); foreach ($stmt as $row) {?>
                                              <!-- <option >  </option> -->
                                              <option value="<?php echo $row['id']; ?>"><?php
                                                    echo $row['name']; ?></option> <?php } ?>
                                    </select> 
                         </div>

                         <div class="col-md-3">
                              <label> Full Name </label>
                              <input type="text" name="idno" class="form-control"  autocomplete="true"  required="">
                         </div>
                         <div class="col-md-3">
                              <label> Passport/ ID No </label>
                              <input type="text" name="idno" class="form-control"  autocomplete="true"  required="">
                         </div>

                         <div class="col-md-3">
                              <label> Phone Number </label>
                              <input type="text" name="phone" class="form-control"  autocomplete="true"  required="">
                         </div>
                         <div class="col-md-3">
                              <label> Email Address  </label>
                              <input type="text" name="email" class="form-control" autocomplete="true"  required="">
                         </div>
                         <div class="col-md-3">
                              <label> Password  </label>
                              <input type="text" name="password" class="form-control" placeholder="password " required="">
                         </div>
                         <div class="col-md-3">
                              <label> Re-enter password  </label>
                              <input type="text" name="reenterpassword" class="form-control" placeholder="re-enter password " required="">
                         </div>
                         <div class="col-md-3 nonke ">
                              <div class="nonke">
                                        <label> Arrival Date  </label>
                                        <input type="date"   autocomplete="off" class="form-control datepicker" name="enddate"     >
                              </div>
                         </div>
                    <!-- <label for="name" class="form-label">Address 1</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Please enter address 1">
                    </div>
                    <div class="mb-3">
                    <label for="email" class="form-label">Address 2</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="Please enter address 2">
                    </div>
                    <div class="row">
                    <div class="mb-3 col-md-6">
                    <label for="city" class="form-label">City</label>
                    <input type="text" class="form-control" name="city" id="city" placeholder="Please enter city">
                    </div>
                    <div class="mb-3 col-md-6">
                    <label for="state" class="form-label">State</label>
                    <input type="state" class="form-control" name="state" id="state" placeholder="Please enter state">
                    </div>
                    </div> -->
                  </div>
                 </div>
               </div>

               <div class="tab d-none">
                    <div class="row">
                         <div class="col-md-6"> 
                              <label> Select 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-6"> 
                              <label> Transaction code/ Reference      </label>
                              <input type="" class="form-control" readonly="true" name="transactioncode">

                         </div>

                    </div>

                    <!-- <div class="mb-3">
                    <label for="company_name" class="form-label">Company Name</label>
                    <input type="text" class="form-control" name="company_name" id="company_name" placeholder="Please enter company name">
                    </div>
                    <div class="mb-3">
                    <label for="company_address" class="form-label">Company Address</label>
                    <textarea class="form-control" name="company_address" id="company_address" placeholder="Please enter company address"></textarea>
                    </div> -->
               </div>

               <div class="tab d-none">
                    <!-- <p>All Set! Please submit to continue. Thank you</p> -->
                     <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkDefault">
                      <label class="form-check-label" for="checkDefault">
                        I agree with Farm & Stay terms & conditions 
                      </label>
                    </div>

               </div>
               </div>
               <div class="card-footer text-end">
               <div class="d-flex">
                    <button type="button" id="back_button" class="btn  btn-outline-warning btn-link" onclick="back()">Back</button>
                    <button type="button" id="next_button" class="btn btn-primary ms-auto" onclick="next()">Next <i class="bi bi-arrow-right"></i> </button>
               </div>
               </div>
          </form>
          </div>
          </section>
      
     <!-- End new wizard -->



    <!-- Call To Action Section -->
     <section id="call-to-action" class="call-to-action section accent-background">
      <div class="container">
        <div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
          <div class="col-xl-10">
            <div class="text-center">
              <h3>Still Have Questions?</h3>
              <p>Our customer service team is available to assist you with any inquiries..</p>
              <!-- <a class="#" href="#appointment">Contact us </a> -->
              <a class="cta-btn  " href="#appointment">Contact us </a>
            </div>
          </div>
        </div>
      </div>
     </section>
     <!-- /Call To Action Section -->


  </main>





  
  

   <!-- Footer -->
    <?php include_once('wsite/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('wsite/inc/linkjs.php'); ?>
   <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>


   

<script>
     // Found This Useful -> Subscribe my Youtube Channel
// https://bit.ly/3m9avif



    //Initialize tooltips
 var current = 0;
var tabs = $(".tab");
var tabs_pill = $(".tab-pills");

loadFormData(current);

function loadFormData(n) {
  $(tabs_pill[n]).addClass("active");
  $(tabs[n]).removeClass("d-none");
  $("#back_button").attr("disabled", n == 0 ? true : false);
  n == tabs.length - 1
    ? $("#next_button").text("Submit").removeAttr("onclick")
    : $("#next_button")
        .attr("type", "button")
        .text("Next")
        .attr("onclick", "next()");
}

function next() {
  $(tabs[current]).addClass("d-none");
  $(tabs_pill[current]).removeClass("active");

  current++;
  loadFormData(current);
}

function back() {
  $(tabs[current]).addClass("d-none");
  $(tabs_pill[current]).removeClass("active");

  current--;
  loadFormData(current);
}


  $(".nonke").hide();
    $("select[name='countryoforigin']") .change(function()
      {  
          var  countryoforigin = $("select[name='countryoforigin']").val(); 
        //  alert(countryoforigin);
          if(countryoforigin == 110){
                $(".nonke").hide();
            }
          else if( countryoforigin != 110 )
              {
                  $(".nonke").show();
              } else{}
        });


  $("select[name='guest']") .change(function()
        {    

                // counter++; 
                 var  guest = $("select[name='guest']").val(); 
                 alert(guest); 
                  //  $.ajax({
                  //       async: false, 
                  //       'type': "POST",                                          
                  //       'url': "orderajax.php",
                  //       'data': { product:product,counter:counter },
                  //       'success': function (data) {  
                  //                                      $('#item_table').append(data);
                                                  
                  //                                       calculateTotal (); 
                                                         
                  //                                          $("input[name='orderitems']").val(counter);                                                                                                                                          
                  //                                 }     
                  //       }); 
                                   
       });


</script>

</body>

</html>

