<!DOCTYPE html>
<html lang="en" class="isPWA">

<head>
    <title>ZAP Management Portal</title>
    <?php require_once("header.php") ?>
    <?php $Page_title = 'My Notifications' ?>
    <style>
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            float: none;
            text-align: center;
            margin-bottom: 10px;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 2px solid #1f1f1f;
            border-radius: 3px;
            padding: 5px;
            background-color: #f8f9fa;
            margin-left: 3px;
            width: 100%;
        }

        .t-student thead th {
            padding: 0px 0px !important;
        }

        .t-student tbody td {
            padding: 0px 0px !important;
        }

        .color-t {
            color: #585858 !important;
        }
    </style>
    <div class="header header-auto-sho header-fixed header-logo-center">
        <a href="#" class="header-title"><?php echo $Page_title; ?></a>
        <a href="#" data-back-button="" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
        <!-- <a href="companies" class="header-icon header-icon-2"><i class="fa fa-building"></i></a> -->
        <!-- <a href="tags" class="header-icon header-icon-3"><i class="fa fa-tag"></i></a>
        <a href="logout" class="header-icon header-icon-4"><i class="fas fa-sign-out-alt"></i></a> -->
    </div>
    <div class="page-title-clear"></div>
    <div class="card cards card-style card-filter">
        <div class="content" style="margin-top:5px;">
            <div class=" mb-0">
                <div class="col-lg-12">
                    <div class="text-center mb-1"><span class="badge bg-brown-dark font-9 color-white z-depth-1"> KELECHI</span><span class="ms-1 badge bg-brown-dark font-9 color-white z-depth-1"> UGOCHUKWU</span></div>
                    <div class="col-lg-12 mb-0 space_evenly">
                        <div class=" item_space">
                            <a data-menu="filterSchools" href="#" class="btn btn-full bg-green-dark btn-sm z-depth-1">FILTER ALERT </a>
                        </div>
                    </div>
                    <!-- <a data-menu="filterSchools" href="#" class="btn btn-full bg-magenta-dark btn-m mt-0 filter_schools"> CLICK HERE TO CHANGE CLASS </a> -->
                </div>
            </div>
        </div>
    </div>

    <div class="page-content">#
        <div class="all-content" style="margin-top: 40px;">
            <div class="" style="background: #e9ecef;">
                <div class="card card-style m-2" style="background: #f8f9fa;">
                    <div class="p-2 z-depth-1">
                        <a class="d-flex collapsed" data-bs-toggle="collapse" href="#collapse-9" aria-expanded="false">
                            <div class="align-self-center">
                                <img src="icon/alert.png" width="35" class=" me-2">
                            </div>
                            <div class="align-self-center ps-1">
                                <h5 class="font-600 font-15 line-height-s pe-2 mb-0">  Ugochukwu <span class="ms-1 font-400 opacity-50 font-12 mb-0"> Feb. 16th | Class Activity </span></h5>
                                <h5 class="font-400 font-14 mb-0 pe-2">This is the title or commendation of the unification of the episode of the environment in the mentor... </h5>
                            </div>
                            <div class="ms-auto align-self-center">
                                <i class="fa fa-arrow-right opacity-30 color-theme"></i>
                            </div>
                        </a>
                    </div>
                    <div class="m-0">
                        <div class="collapse" id="collapse-9" style="">
                            <div class="px-3 mt-2">Envato's best Mobile Products. Appkit, Sticky, Duo, Azures? Which is your favorite?.....Read More</div>
                            <span class="ps-3 pt-1 font-12 d-block mb-n2 opacity-40">Click on link to download file</span>
                            <div class="px-3 pt-1"><a href="" style="text-decoration: underline !important;">Envato's best Mobile Products.pdf</a></div>
                            <div class="px-3 pt-1"><a href="" style="text-decoration: underline !important;">Envato's best Mobile Products.png</a></div>
                        </div>
                    </div>


                </div>
                <div class="card card-style m-2">
                    <div class="p-2 z-depth-1">
                        <a class="d-flex collapsed" data-bs-toggle="collapse" href="#collapse-1" aria-expanded="false">
                            <div class="align-self-center">
                                <img src="icon/alert.png" width="35" class=" me-2">
                            </div>
                            <div class="align-self-center ps-1">
                                <h5 class="font-600 font-15 line-height-s pe-2 mb-0"> Kelechi  <span class="ms-1 font-400 opacity-50 font-12 mb-0"> Feb. 16th | Class Activity </span></h5>
                                <h5 class="font-400 font-14 mb-0 pe-2">This is the title or commendation of the unification of the episode of the environment in the mentor... </h5>
                            </div>
                            <div class="ms-auto align-self-center">
                                <i class="fa fa-arrow-right opacity-30 color-theme"></i>
                            </div>
                        </a>
                    </div>
                    <div class="m-0">
                        <div class="collapse" id="collapse-1" style="">
                            <div class="px-3 mt-2">Envato's best Mobile Products. Appkit, Sticky, Duo, Azures? Which is your favorite?.....Read More</div>
                            <span class="ps-3 pt-1 font-12 d-block mb-n2 opacity-40">Click on link to download file</span>
                            <div class="px-3 pt-1"><a href="" style="text-decoration: underline !important;">Envato's best Mobile Products.pdf</a></div>
                            <div class="px-3 pt-1"><a href="" style="text-decoration: underline !important;">Envato's best Mobile Products.png</a></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <style>
        #footer-bar a {
            font-size: 16px;
        }


        #footer-bar .btn-m {
            font-size: 14px !important;
        }

        #footer-bar a {
            color: #000;
        }

        .footer-bar-6 .circle-nav span {
            font-size: 13px !important;
        }

        .footer-bar-6 span {
            font-size: 13px !important;
        }
    </style>
    <?php require_once("footer.php") ?>
    <?php require_once("script.php") ?>
    <script>
        // Initialize DataTable
        $(document).ready(function() {
            $('#student').DataTable({
                searching: true, // Enable search functionality
                lengthChange: false, // Remove "Show [entries]" dropdown
                info: false, // Remove DataTable info block
                paging: false // Remove pagination
            });
        });
    </script>