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



            <div class="row">
                <h3 class="fmon fw-bold "><i class="fa-solid fa-people-group"></i> Board Of Directors</h3>
                <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/adddirector'; ?>" class="btn addBtn d-flex align-items-center gap-2"><img
                            src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">
                        Add Person</a>
                    <!-- <button class="btn expButn d-flex align-items-center gap-2 "><img
                            src="<?php echo base_url(); ?>assets/images/megaIcons/xport.png" alt=""> Export
                        List</button> -->






                </div>
                <div>

                    <div class="table-responsive mt-3">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Role</th>
                                    <th scope="col">Unit</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Phone</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($boardofdirector as $k => $director){ ?>
                                    <td><?php echo $director['name']; ?></td>
                                    <td><?php echo $director['role']; ?></td>
                                    <td><?php echo getUnitName($director['unitId']); ?></td>
                                    <td><?php echo $director['email']; ?></td>
                                    <td><?php echo $director['phone']; ?></td>
                                    <td>

                                        <div class="d-flex gap-2 align-items-end">
                                            <a href="#" class="" 
                                            data-bs-toggle="modal"
                                             data-bs-target="#editModal<?php echo $k; ?>">
                                                <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                            </a>

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

                                        </div>
                                    </td>
                                </tr>
                                <div class="modal fade" id="deleteModal<?php echo $k; ?>" 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>
                                    <a href="<?php echo base_url().'site/deleteboardofdirector/'.$k; ?>" 
                                    class="btn btn-danger" 
                                    >Delete</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Edit Modal -->
                    <div class="modal fade" id="editModal<?php echo $k; ?>" tabindex="-1" aria-labelledby="editModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editModalLabel">Edit User</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="editForm" action="<?php echo base_url().'site/editboardofdirector/'.$k; ?>" method="post">
                                        <div class="mb-3">
                                            <label for="editName" class="form-label">Name</label>
                                            <input type="text" class="form-control" required id="editName" name="name" value="<?php echo $director['name']; ?>">
                                        </div>
                                        <div class="mb-3">
                                            <label for="editRole" class="form-label">Role</label>   
                                            <select class="form-select FormInput" name="role" required id="role">
                                                <option value="">Role</option>
                                                <option <?php echo $director['role'] == "Manager" ? "selected" : ""; ?> value="Manager">Manager</option>
                                                <option <?php echo $director['role'] == "Receptionist" ? "selected" : ""; ?> value="Receptionist">Receptionist</option>
                                                <option <?php echo $director['role'] == "Housekeeping" ? "selected" : ""; ?> value="Housekeeping">Housekeeping</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editUnit" class="form-label">Unit</label>
                                            <select class="form-select FormInput" name="unitId" required id="units">
                            <option value="">Units</option>
                            <?php foreach($units as $k=> $unit){ ?>
                                <option <?php echo $director['unitId'] == $k ? "selected" : ""; ?> value="<?php echo $k; ?>"><?php echo $unit['unit']; ?></option>
                            <?php } ?>
                        </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editEmail" class="form-label">Email</label>
                                            <input type="email" class="form-control" required id="editEmail" name="email" value="<?php echo $director['email']; ?>">
                                        </div>
                                        <div class="mb-3">
                                            <label for="editPhone" class="form-label">Phone</label>
                                            <input type="text" class="form-control" required id="editPhone" name="phone" value="<?php echo $director['phone']; ?>">
                                        </div>
                                        <button type="submit" class="btn btn-success">Save Changes</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                                <?php } ?>

                            </tbody>
                        </table>
                    </div>
                    <!-- delete modal -->


                    <script>
                        document.querySelectorAll('.edit-btn').forEach(button => {
                            button.addEventListener('click', function () {
                                const row = this.closest('tr');
                                document.getElementById('editName').value = row.cells[0].innerText;
                                document.getElementById('editRole').value = row.cells[1].innerText;
                                document.getElementById('editUnit').value = row.cells[2].innerText;
                                document.getElementById('editEmail').value = row.cells[3].innerText;
                                document.getElementById('editPhone').value = row.cells[4].innerText;
                            });
                        });
                    </script>

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

        <!-- Modal -->
        <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel">Confirm Action</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 solve this warning?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="confirmSolve">Solve</button>
                    </div>
                </div>
            </div>
        </div>

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