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

<head>
    <title>ZAP Management Portal</title>
    <?php require_once("header.php") ?>
    <?php $Page_title = 'My Staff' ?>
    <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;
        }
    </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-red-dark font-10 color-white z-depth-1"> JSS 2 CROWN</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-m filter_schools">Employ Staff </a>
                        </div>
                        <div class=" item_space">
                            <a data-menu="filterSchools" href="#" class="btn btn-full bg-blue-dark btn-m filter_schools">Assign Teacher </a>
                        </div>
                        <!-- <div class=" item_space">
                            <a data-menu="filterSchools" href="#" class="btn btn-full bg-black btn-m filter_schools">Other Actions </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="ms-3 me-3 z-depth-1 alert alert-small -s shadow-xl bg-blue-dark" role="alert"><a>
                <span><i class="fa fa-question color-white"></i></span>
                <strong class="color-white font-12">Tap here for an easy ways to get around this page.</strong></a>
            </div> -->
            <div class=" z-depth-1 card card-style" style="background: rgba(255, 255, 255, 0.9);">
                <table border="0" class="t-student text-center mb-2" style="width:100%;">
                    <thead>
                        <tr>
                            <th class="opacity-40 font-8">TOTAL</th>
                            <th class="opacity-40 font-8">MALE</th>
                            <th class="opacity-40 font-8">FEMALE</th>
                            <th class="opacity-40 font-8">ACTIVE</th>
                            <th class="opacity-40 font-8">INACTIVE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="font-10">70</span></td>
                            <td><span class="color-green-dark font-10">10</span></td>
                            <td class="font-10">60</td>
                            <td><span class="color-green-dark font-10">60</span></td>
                            <td><span class="color-red-dark font-10">10</span></td>
                        </tr>
                        <!-- Add more rows as needed -->
                    </tbody>
                </table>
            </div>

            <div class="" style="background: #e9ecef;">
                <div class=" m-2">
                    <div class="">
                        <table id="student" class="display z-depth-1">
                            <thead>
                                <tr>
                                    <th>My Staff</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <div class="w-35 border-right border-highlight">
                                                <img src="images/avatars/2s.png" width="100" class="bg-highlight rounded-circle z-depth-1">
                                                <h6 class="font-12 font-600 mt-2 text-center">Academic</h6>
                                                <p class="color-blue-dark mt-n3 font-10 font-400 text-center mb-0 pt-1">Male</p>
                                            </div>
                                            <div class="w-100 ps-3 pt-2">
                                                <h5>Kelechi Chukwuka Chimaroke</h5>
                                                <!-- <p class="color-highlight mt-n3 font-10 pt-1 mb-0">Parent: Yes | Type: OLD STUDENT | Access: Full Access</p> -->
                                                <div class=" z-depth-">
                                                    <table border="0" class="t-student text-center mb-2" style="width:100%;">
                                                        <thead>
                                                            <tr>
                                                                <th class="opacity-40 font-8">LAST LOGIN</th>
                                                                <th class="opacity-40 font-8">STATUS</th>
                                                                <!-- <th class="opacity-40 font-8">ASSIGN</th>
                                                                <th class="opacity-40 font-8">TYPE</th> -->
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td><span class="color-red-dark font-10">14th Jan, 2020</span></td>
                                                                <td><span class="color-green-dark font-10">ACTIVE</span></td>
                                                                <!-- <td><span class="color-red-dark font-10"></span></td> -->
                                                            </tr>
                                                            <!-- Add more rows as needed -->
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="col-lg-12 mb-0 mb-2 space_evenly">
                                                    <div class=" item_space">
                                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-green-dark btn-m filter_schools">Edit </a>
                                                    </div>
                                                    <div class=" item_space">
                                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-blue-dark btn-m filter_schools">Action </a>
                                                    </div>
                                                    <div class=" item_space">
                                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-black btn-m filter_schools">Share </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Add more rows as needed -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div id="toast-1" class="toast toast-tiny toast-top bg-green-dark" data-bs-delay="100000" data-bs-autohide="true"><i class="fa fa-sync fa-spin me-3" style="z-index: 1000"></i>Processing...</div>
    <div id="billForm" class="menu menu-box-bottom menu-box-bottom-full rounded-0" data-menu-width="cover" data-menu-height="cover" style="display: block; width: 100%; height: 100%;">
        <div class="content invoiceForm">
            <div class="row mb-0">
            </div>
            <a href="#" class="mt-3 close-menu btn btn-l rounded-sm btn-full btn-margins gradient-red">Close</a>
        </div>
    </div>
    <div id="createInvoice" class="menu menu-box-modal rounded-s bg-theme" style="min-width: 95%; max-height: 98% !important; display: block;">
        <form id="createInvoiceForm" class="repeater">
            <input type="hidden" name="_token" value="olQQeqqN8A74TPU9YIk5ilV01sKKjYYBIi6wj9tO">
            <div class="menu-title">
                <p class="color-highlight">Create</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">INVOICE</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>
                <div class="invoiceFormContent">
                </div>
                <div class="spinnerContent col-12 mb-2 mt-2">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border color-green-dark" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
                <button type="submit" style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-green font-13 btn-m mt-3 rounded-s">CREATE INVOICE</button>
            </div>
        </form>
    </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>