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

            <div class="d-flex align-items-center gap-2 mb-3">
                <img src="<?php echo base_url(); ?>assets/images/ban.png   " alt="" height="30px">
                <h3 class="fmon fw-bolder m-0">Security officers</h3>
            </div>

            <div class="row mb-2">
                <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/addsecurityofficer'; ?>" class="btn addBtn d-flex gap-2 align-items-center"><img
                            src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">Add Security officers</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" 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="userRole" class="form-label">User Role</label>
                                <select class="form-select" id="userRole" name="userRole">
                                    <option value="" selected>Select User Role</option>
                                    <option value="admin">Admin</option>
                                    <option value="cohost">Co Host</option>
                                    <option value="owner">Owner</option>
                                </select>
                            </div>



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

                </div>
                <div>
                    <div class="table-responsive mt-3 ">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Agent Name</th>
                                    <th scope="col">Email address</th>

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

                                    <th scope="col">Company</th>
                                    <th scope="col">User Role</th>
                                    <th>Actions</th>

                                </tr>
                            </thead>
                            <div class="">
                                <tbody class="">
                                    <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">Enzo Fernández</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">EnzoFernández@info.com</p>
                                        </td>
                                        <td>
                                            <div class="h40">
                                                8985DER9845
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">+24 012319 2155
                                            </p>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">VSA Seguridad</p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="h40">
                                                <div class="b-badge-success text-center border-15 px-3">owner</div>
                                            </div>
                                        </td>




                                        <td>
                                            <div class="d-flex gap-2 align-items-center h40">
                                                <a href="<?php echo base_url().'site/editsecurityofficer'; ?>" class="">
                                                    <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                </a>
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#denyModal">
                                                    <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                                                </a>
                                            </div>

                                        </td>
                                    </tr>
                                    <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">Enzo Fernández</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">EnzoFernández@info.com</p>
                                        </td>
                                        <td>
                                            <div class="h40">
                                                8985DER9845
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">+24 012319 2155
                                            </p>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">VSA Seguridad</p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="h40">
                                                <div class="b-badge-success text-center border-15 px-3">owner</div>
                                            </div>
                                        </td>




                                        <td>
                                            <div class="d-flex gap-2 align-items-center h40">
                                                <a href="<?php echo base_url().'site/editsecurityofficer'; ?>" class="">
                                                    <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                </a>
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#denyModal">
                                                    <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                                                </a>
                                            </div>

                                        </td>
                                    </tr>
                                    <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">Enzo Fernández</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">EnzoFernández@info.com</p>
                                        </td>
                                        <td>
                                            <div class="h40">
                                                8985DER9845
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">+24 012319 2155
                                            </p>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">VSA Seguridad</p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="h40">
                                                <div class="b-badge-success text-center border-15 px-3">owner</div>
                                            </div>
                                        </td>




                                        <td>
                                            <div class="d-flex gap-2 align-items-center h40">
                                                <a href="<?php echo base_url().'site/editsecurityofficer'; ?>" class="">
                                                    <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                </a>
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#denyModal">
                                                    <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                                                </a>
                                            </div>

                                        </td>
                                    </tr>
                                    <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">Enzo Fernández</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">EnzoFernández@info.com</p>
                                        </td>
                                        <td>
                                            <div class="h40">
                                                8985DER9845
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">+24 012319 2155
                                            </p>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">VSA Seguridad</p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="h40">
                                                <div class="b-badge-success text-center border-15 px-3">owner</div>
                                            </div>
                                        </td>




                                        <td>
                                            <div class="d-flex gap-2 align-items-center h40">
                                                <a href="<?php echo base_url().'site/editsecurityofficer'; ?>" class="">
                                                    <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                </a>
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#denyModal">
                                                    <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                                                </a>
                                            </div>

                                        </td>
                                    </tr>
                                    <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">Enzo Fernández</p>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">EnzoFernández@info.com</p>
                                        </td>
                                        <td>
                                            <div class="h40">
                                                8985DER9845
                                            </div>
                                        </td>
                                        <td>
                                            <p class="ft7 fmon m-0">+24 012319 2155
                                            </p>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">VSA Seguridad</p>
                                            </div>

                                        </td>

                                        <td>
                                            <div class="h40">
                                                <div class="b-badge-success text-center border-15 px-3">owner</div>
                                            </div>
                                        </td>




                                        <td>
                                            <div class="d-flex gap-2 align-items-center h40">
                                                <a href="<?php echo base_url().'site/editsecurityofficer'; ?>" class="">
                                                    <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                </a>
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#denyModal">
                                                    <img src="<?php echo base_url(); ?>assets/images/delr.svg" alt="">
                                                </a>
                                            </div>

                                        </td>
                                    </tr>

                                    <!-- Add more rows as needed -->
                                </tbody>
                            </div>
                        </table>
                        <!-- Modal for Deny Reason -->
                        <div class="modal fade" id="denyModal" tabindex="-1" aria-labelledby="denyModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="denyModalLabel">Delete</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Are you sure you want to delete this?</p>
                                    </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"
                                            onclick="submitDenyReason()">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                      
                    </div>

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

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

