 <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">

      <h3 class=" fmon fw-bolder "><img src="<?php echo base_url(); ?>assets/images/amnt.png" alt="" width="30px"> Amenity</h3>

      <div class="row">
        <div class="col-md-5">

          <!-- <div class="input-group border-15">
            <span class="input-group-text  border-15"><img src="<?php echo base_url(); ?>assets/images/serIcon.png" alt="" width="25px"></span>
            <input type="text" name="" id="" class="form-control form-Search  border-15  py-2" placeholder="search">
          </div> -->

        </div>
        <div class="col-md-7 d-flex justify-content-end gap-2">

          <a href="<?php echo base_url().'site/addammenity'; ?>" class="btn addBtn d-flex gap-2 align-items-center"><img
              src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">Create Amenity </a>
          <button class="btn expButn  "><img src="<?php echo base_url(); ?>assets/images/megaIcons/xport.png" alt=""> Export
            List</button>


          <!-- <div class="btn bg-white d-flex gap-5 align-items-center px-3 border-15">
            Filter <img src="<?php echo base_url(); ?>assets/images/e.png " alt="" width="20px">
          </div> -->

        </div>
        <!-- <div class="row my-3">
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-danger"> Pending</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-success"> Approved</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-danger"> Pending</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-success"> Approved</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-danger"> Pending</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-xxl-3">
            <div class="card border-15">
              <div class="card-body">
                <div class="d-flex gap-2">
                  <img class="amnIage" src="<?php echo base_url(); ?>assets/images/amnimage.png" alt="">
                  <div>
                    <p class="fmon mb-1">Casa Club #1</p>
                    <p class="fmon mb-0 ft7">Status: <span class="text-success"> Approved</span></p>
                    <p class="fmon mb-0 ft7">Date:
                      21 May, 2024
                    </p>
                    <p class="fmon mb-0 ft7">Time Frame: 09-11 AM</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="table-responsive  my-3">
          <table class="table  table-striped align-middle">
            <thead class="table-dark">
              <tr>
                <th>Name</th>
                <th>Approval Required</th>
                <th>Status</th>
                <th>Price</th>
                <th>Currency</th>
                <th>Display Order</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach($amenities as $key=>$amenity){ 
                // echo "<pre>";
                // print_r($amenity);
                // echo "</pre>";
                
                ?>

              <tr>
                <td>
                  <img src="<?php echo $amenity['imageUrl']; ?>" width="50px" alt="logo" class="rounded-circle me-2">
                  <?php echo $amenity['name']; ?>
                </td>
                <td>
                  <span class="badge bg-warning text-dark"><?php echo $amenity['approvalRequired']==1?"Yes":"No"; ?></span>
                </td>
                <td>
                  <span class="badge bg-success"><?php echo $amenity['status']=="active"?"Active":"Inactive"; ?></span>
                </td>
                <td>$<?php echo $amenity['price']; ?></td>
                <td><?php echo $amenity['currency']; ?></td>
                <td><?php echo $amenity['display_orders']; ?></td>
                <td>
                  <div class="d-flex gap-2 align-items-end">
                    <a href="<?php echo base_url().'site/editammenity/'.$key; ?>" class="">
                      <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                    </a>

                    <a href="#" class="" data-bs-toggle="modal" data-bs-target="#deleteModal">
                      <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                    </a>

                  </div>
                </td>
              </tr>
              <?php } ?>
            </tbody>
          </table>
          <!-- delete modal -->
          <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="deleteModalLabel">Confirm
                    Deletion</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  Are you sure you want to delete this item? This action
                  cannot be undone.
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
              </div>
            </div>
          </div>
          <script>
            function toggleEdit(button) {
              let row = button.closest('tr');
              let statusCell = row.querySelector('td:nth-child(3) span');
              let newStatus = statusCell.innerText === "Active" ? "Inactive" : "Active";

              statusCell.innerText = newStatus;
              statusCell.className = newStatus === "Active" ? "badge bg-success" : "badge bg-danger";

              let enableDisableBtn = document.createElement('button');
              enableDisableBtn.className = 'btn btn-sm btn-secondary ms-2';
              enableDisableBtn.innerText = newStatus === "Active" ? "Disable" : "Enable";
              enableDisableBtn.onclick = () => toggleEdit(button);

              button.after(enableDisableBtn);
              button.remove();
            }
          </script>

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

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

