 <style>
.flatpickr-calendar{
  top: 183px !important;
    left: auto !important;
    right: 64px !important;
}
</style>
 <!-- date range picker -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">

      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src="<?= base_url('assets/images/arowleft.svg') ?>" alt="" width="15px"> Back</button>
   
		<div class="row">
      <div class="col-md-8 my-2">
        <div class="d-flex align-items-center gap-2 mb-2">
         <img src="<?= base_url('assets/images/Rare.png') ?>" alt="" height="40px">
         <h3 class="fmon m-0 fw-bolder">Amenities</h3>
        </div>
        </div>
      
    </div>
    <div class="row">
      <div class="col-md-12">
          
            <div class="input-group align-items-center position-relative">
              <span class="input-group-text"><img src="<?= base_url('assets/images/serIcon.png') ?>" alt="" width="25px"></span>
              <input type="text" name="" id="" class="form-control form-Search" placeholder="search">
              <label for="date" class="btn">
                <img src="<?= base_url('assets/images/dat.png') ?>" alt="Select Date">
            </label>
            <input class="d-none" type="date" id="date" name="date">
            </div>
            <div class="my-2 subButtons d-flex align-items-center gap-3">
               <button class="btn"><img src="<?= base_url('assets/images/home.png') ?>" alt=""> House</button>
              <button class="btn"><img src="<?= base_url('assets/images/name.png') ?>" alt="">  Amenity Name</button>
               <button class="btn"><img src="<?= base_url('assets/images/dat.png') ?>" alt=""> Date of Reservation</button>
            
               
              
            </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                  <a href="<?= base_url('site/ammenityview') ?>" class="card custCard p-3 ">
                    <div class="d-flex align-items-center gap-2">
                    <img src="<?= base_url('assets/images/pool.png') ?>" alt="">
                      <div class="my-1">
                        <p class="fos1 m-0">Pool</p>
                        <p class="fos2 mb-0">House 0</p>
                      </div>
                    </div>
                    <div>
                        <p class="mb-1 fos2">Day: <span> wed,June 4,2023
                        </span></p>
                        <p class="mb-1 fos2">Block: <span> From 05:00 am t0 06:00 am
                        </span></p>
                        <p class="mb-1 fos2">Number of people in the reservation: <span> 5
                        </span></p>
                        <p class="mb-1 fos2">Status: <span class="text-success"> Approved by Admin
                        </span></p>
                    </div>
                  </a>
                </div>

           
               
           
              </div>
          </div>
      </div>
  </div>

   <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <!-- data rane picker -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    // Initialize Flatpickr on the input field
    flatpickr("#date", {
        dateFormat: "Y-m-d", // Date format
    });

    // Optionally, trigger the input when the label is clicked
    document.querySelector('label[for="date"]').addEventListener('click', function() {
        document.getElementById('date').click();
    });
</script>

    
  </main>
  <!--end main wrapper-->