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



            <div class="row">
                <h3 class="fmon fw-bold "><i class="fa-solid fa-triangle-exclamation"></i> Warnings</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/addwarning'; ?>" class="btn addBtn d-flex align-items-center gap-2"><img
                            src="<?php echo base_url(); ?>assets/images/megaIcons/aplu.png" alt="">
                        Add Warning</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 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="Filter Icon" 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">


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

                            <!-- Category Filter (Searchable Dropdown) -->
                            <div class="mb-3">
                                <label for="category" class="form-label">Category</label>
                                <input type="text" class="form-control" id="categoryInput"
                                    placeholder="Type to search categories" oninput="filterCategories()">
                                <ul id="categoryList" class="list-group mt-2"></ul>
                            </div>


                            <button class="btn addBtn w-100 mt-3" 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">Warning</th>
                                    <th scope="col">Warning to</th>

                                    <th scope="col">Date</th>
                                    <th scope="col">Detail</th>


                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <div class="">
                                <tbody class="">
                                    <tr>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft6 fmon m-0">Normas de Convivencia</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Enzo Fernández</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">12 Nov, 2024, 09:00 PM</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Lorem ipsum is simply dummy text of the printing
                                                    type...</p>
                                            </div>

                                        </td>




                                        <td>
                                            <div class="h40">
                                                <div class="dropdown">
                                                    <button class="btn btnAct2 " type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <img src="<?php echo base_url(); ?>assets/images/dropicon.png" alt="">
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="#">Disable User</a></li>
                                                        <li><a class="dropdown-item" href="#">Update User</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft6 fmon m-0">Normas de Convivencia</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Enzo Fernández</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">12 Nov, 2024, 09:00 PM</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Lorem ipsum is simply dummy text of the printing
                                                    type...</p>
                                            </div>

                                        </td>




                                        <td>
                                            <div class="h40">
                                                <div class="dropdown">
                                                    <button class="btn btnAct2 " type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <img src="<?php echo base_url(); ?>assets/images/dropicon.png" alt="">
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="#">Disable User</a></li>
                                                        <li><a class="dropdown-item" href="#">Update User</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft6 fmon m-0">Normas de Convivencia</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Enzo Fernández</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">12 Nov, 2024, 09:00 PM</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Lorem ipsum is simply dummy text of the printing
                                                    type...</p>
                                            </div>

                                        </td>




                                        <td>
                                            <div class="h40">
                                                <div class="dropdown">
                                                    <button class="btn btnAct2 " type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <img src="<?php echo base_url(); ?>assets/images/dropicon.png" alt="">
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="#">Disable User</a></li>
                                                        <li><a class="dropdown-item" href="#">Update User</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft6 fmon m-0">Normas de Convivencia</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Enzo Fernández</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">12 Nov, 2024, 09:00 PM</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Lorem ipsum is simply dummy text of the printing
                                                    type...</p>
                                            </div>

                                        </td>




                                        <td>
                                            <div class="h40">
                                                <div class="dropdown">
                                                    <button class="btn btnAct2 " type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <img src="<?php echo base_url(); ?>assets/images/dropicon.png" alt="">
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="#">Disable User</a></li>
                                                        <li><a class="dropdown-item" href="#">Update User</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft6 fmon m-0">Normas de Convivencia</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Enzo Fernández</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">12 Nov, 2024, 09:00 PM</p>
                                            </div>

                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center h-100">
                                                <p class="ft7 fmon m-0">Lorem ipsum is simply dummy text of the printing
                                                    type...</p>
                                            </div>

                                        </td>




                                        <td>
                                            <div class="h40">
                                                <div class="dropdown">
                                                    <button class="btn btnAct2 " type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <img src="<?php echo base_url(); ?>assets/images/dropicon.png" alt="">
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="#">Disable User</a></li>
                                                        <li><a class="dropdown-item" href="#">Update User</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>




                                 
                                </tbody>
                            </div>
                        </table>
                      
                    </div> -->
                    <div class="table-responsive mt-3">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Unit</th>
                                    <th scope="col">Category</th>
                                    <th scope="col">Occurrences</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">First Occurrence</th>
                                    <th scope="col">Last Occurrence</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($warnings as $k=>$warning){ 
                                    // echo "<pre>";
                                    // print_r($warning);
                                    // echo "</pre>";
                                    
                                    ?>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <p class="ft6 fmon m-0"><?php echo getUnitName($warning['unitId']); ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <p class="ft7 fmon m-0"><?php echo $warning['warningType']; ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <p class="ft7 fmon m-0"><?php echo $warning['occurrences']; ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <div class="pactive"><?php echo $warning['status']; ?></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <p class="ft7 fmon m-0"><?php echo date('d M, Y', $warning['dateMs']/1000); ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center h-100">
                                            <p class="ft7 fmon m-0"><?php echo date('d M, Y', $warning['lastOccurrence']/1000); ?></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="h40">
                                            <div class="dropdown">

                                                <div class="d-flex gap-2 align-items-end">
                                                    <a href="<?php echo base_url().'site/viewwarning/'.$k; ?>" class="">
                                                        <img src="<?php echo base_url(); ?>assets/images/viedit.png" alt="">
                                                    </a>

                                                    <a href="#" class="solve-warning" data-warning-id="<?php echo $k; ?>" data-bs-toggle="modal"
                                                        data-bs-target="#confirmModal">
                                                        <img src="<?php echo base_url(); ?>assets/images/solve.png" alt="">
                                                    </a>





                                                </div>

                                            </div>
                                    </td>
                                </tr>
                                <?php } ?>
                                 <!-- Add more rows as needed -->
                            </tbody>
                        </table>
                       
                    </div>
                </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-->

