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

            <h3 class="fmon fw-bold">Service Providers </h3>

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

                    <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-5 d-flex justify-content-end ">

                    <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">


                            <!-- House Number Filter (Searchable) -->
                            <div class="mb-3">
                                <label for="houseNumber" class="form-label">Unit</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>

                            <!-- Service Filter (Searchable) -->
                            <div class="mb-3">
                                <label for="service" class="form-label">Service</label>
                                <input type="text" class="form-control" id="service" placeholder="Search Service"
                                    oninput="filterServices()">
                                <ul id="serviceList" class="list-group mt-2"></ul>
                            </div>


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

                <div class="row">
                    <?php foreach($serviceproviders as $serviceprovider){
                        // echo "<pre>";
                        // print_r($serviceprovider);
                        // echo "</pre>";
                        
                        ?>
                    <div class="col-md-4 col-lg-4  col-xxl-3 my-2">
                        <div class="card custCard ">
                            <div class="d-flex justify-content-between align-items-center bgsm">
                                <div class="d-flex align-items-center gap-2  p-3">
                                    <div class="num d-flex justify-content-center align-items-center">
                                        <p class="mb-0">01</p>
                                    </div>
                                    <div class="my-1 ">
                                        <div>
                                            <p class="mb-1 fos2">House No: <span><?php echo getunitname($serviceprovider['unitId']); ?></span></p>
                                            <p class="mb-1 fos2">Created By: <span><?php echo getusername($serviceprovider['userId']); ?>
                                                </span></p>


                                        </div>
                                    </div>
                                </div>
                                <a href="#" class="text-danger border border-danger trash " data-bs-toggle="modal"
                                    data-bs-target="#deleteServiceModal"><i class="fa fa-trash"></i></a>
                            </div>
                            <div class="p-3">
                                <div class=" my-1">
                                    <p class="mb-1 fos2">Description of the Service</p>
                                    <p class="mb-1 fos2"> <span><?php echo $serviceprovider['serviceArea']; ?></span></p>
                                        </span></p>


                                </div>

                            </div>
                        </div>
                    </div>
                    <?php } ?>

                </div>
            </div>
        </div>
        </div>
        <!-- Delete Service Modal -->
        <div class="modal fade" id="deleteServiceModal" tabindex="-1" aria-labelledby="deleteServiceModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteServiceModalLabel">Delete Service Provider</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Please provide a reason for deleting this service:</p>
                        <textarea class="form-control" id="deleteReason" placeholder="Enter reason..." rows="4"
                            required></textarea>
                        <small id="charCount" class="text-muted">0 / 500 characters</small>
                    </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="submitDeleteReason()">Submit</button>
                    </div>
                </div>
            </div>
        </div>


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