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

            <div class="row my-2">
                <div class="col-md-3 my-2">
                    <div class="card un-card">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/units'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Units</p>
                                <img src="<?php echo base_url(); ?>assets/images/unt.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card  u-active">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/users'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Users</p>
                                <img src="<?php echo base_url(); ?>assets/images/use2.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/vehicle'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Vehicles</p>
                                <img src="<?php echo base_url(); ?>assets/images/vehile.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/pets'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Pets</p>
                                <img src="<?php echo base_url(); ?>assets/images/pet2.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <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 by name, email, ID, or house">
                    </div>

                </div>
                <div class="col-md-7 d-flex justify-content-end gap-2">
                    <button class="btn expButn"><img src="<?php echo base_url(); ?>assets/images/megaIcons/xport.png" alt=""> Export
                        List</button>
                    <a href="<?php echo base_url().'site/adduser'; ?>" class="btn addBtn"><img src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">
                        Add User</a>
                    <div class="btn bg-white d-flex gap-5 align-items-center px-3 border-15" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                        Filter <img src="<?php echo base_url(); ?>assets/images/e.png " alt="" width="20px">
                    </div>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                        aria-labelledby="offcanvasRightLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasRightLabel">Filters</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <!-- User Type Filter -->
                            <div class="mb-3">
                                <label for="userType" class="form-label">User Type</label>
                                <select class="form-select" id="userType">
                                    <option value="">Select User Type</option>
                                    <option value="admin">Admin</option>
                                    <option value="editor">Editor</option>
                                    <option value="viewer">Viewer</option>
                                </select>
                            </div>

                            <!-- Status Filter -->
                            <div class="mb-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status">
                                    <option value="">Select Status</option>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>

                            <!-- House Number Filter (Searchable) -->
                            <div class="mb-3">
                                <label for="houseNumber" class="form-label">House Number</label>
                                <input type="text" class="form-control" id="houseNumber"
                                    placeholder="Search House Number" oninput="filterHouseNumbers()">
                                <ul id="houseNumberList" class="list-group mt-2"></ul>
                            </div>

                            <button class="btn addBtn w-100" onclick="applyFilters()">Apply Filters</button>
                        </div>
                    </div>

                </div>
                <div>
                    <div class="table-responsive mt-4 ">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">User Name</th>
                                    <th scope="col">Email Address</th>

                                    <th scope="col">Identification</th>
                                    <th scope="col">Phone</th>

                                    <th scope="col">House</th>
                                    <th scope="col">User Type</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <div class="">
                                <tbody class="">
                                    <?php foreach($users as $u=>$k){
                                        //echo "<prE>";
                                       // print_r($k);
                                       // echo "</pre>";
                                       $key="";
                                       if($k['userType']=="owner"){
                                        $key="owner";
                                        $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"==",$u);
                                       }
                                       if($k['userType']=="tenant"){
                                        $key="tenant";
                                        $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"==",$u);
                                       }
                                       if($k['userType']=="cohost"){
                                        $key="cohost";
                                        $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"array-contains",$u);
                                       }
                                       
                                       
                                    //    echo "<pre>";
                                    //    print_r($houseinfo);
                                    //    echo "</pre>";
$documentId = array_key_first($houseinfo); // "872410e8166e46f09ddc"
$documentData = $houseinfo[$documentId];   // The inner array

                                        
                                        ?>
                                    <tr>
                                        <td>
                                            <div class="d-flex gap-2 align-items-start">
                                                <img class="usrImage" src="<?php echo base_url(); ?>assets/images/avatars/avd.png" alt="">
                                                <p class="ft6 fmon m-0"><?php echo $k['fullName']; ?></p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0"><?php echo $k['email']; ?></p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0"><?php echo $k['officialId']; ?></p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0"><?php echo $k['phone']; ?></p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex gap-2 align-items-center">
                                                <div class="numBox">
                                                    <?php echo $documentData['unit']; ?>
                                                </div>
                                                <?php echo $documentData['zone']; ?>
                                            </div>
                                        </td>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0"><?php echo $k['userType']; ?></p>
                                            </div>

                                        </td>


                                        <td>
                                            <div class="hactive">
                                            <?php if($k['approved']==true){?>
                                                <a href="<?php echo  base_url().'Site/sespenduser/'.$u ?>">Active</a>
                                            
                                           <?php  }else{?>
 <a href="<?php echo  base_url().'Site/activeuser/'.$u ?>">Suspend User</a>
                                          <?php } ?>
                                            
                                            
                                            
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex gap-2 align-items-end">
                                                <a href="<?php echo base_url().'site/edituser/'.$u ; ?>" 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 } ?>
                                  


                                    <!-- Add more rows as needed -->
                                </tbody>
                            </div>
                        </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>
                      
                    </div>
                </div>
            </div>
        </div>
        </div>

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

