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

<head>
    <title>ZAP Management Portal</title>
    <?php require_once("header.php") ?>
    <?php $Page_title = 'Topic' ?>
    <?php require_once("nav.php") ?>
    <div class="card cards card-style card-filter">
        <div class="content" style="margin-top:5px;">
            <div class="row mb-0">
                <div class="">
                    <a data-menu="filterSchools" href="#" class="btn btn-full bg-black font-12 btn-m font-600 mt-3 rounded-sm filter_schools">FILTER SCHOOLS DASHBOARD </a>
                </div>
            </div>
        </div>
    </div>
    <div class="page-content">
        <div class="all-content" style="margin-top: 60px;">

            <div class="card card-style pb-3" style="margin: 0px 0px 15px !important;border-radius:0;">
                <div class="content mb-1">
                    <div class="d-flex">
                        <div class="align-self-center">
                            <img src="icon/text.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">Primary 1 Pearl<i class="fa fa-minus-circle color-red-dark font-13 ps-2"></i> <span class="color-red-dark font-11">Inactive</span></h5>
                            <h5 class="font-400 font-12 mb-0"> ENGLISH LANGUAGE<i class="fa fa-globe font-10 opacity-50 ps-1"></i> Feb. 16th </h5>
                        </div>
                        <div class="align-self-center ms-auto">
                            <a href="#" data-bs-toggle="dropdown" class="icon color-theme" aria-expanded="false"><i class="fa fa-ellipsis-h"></i></a>

                            <div class="dropdown-menu border-0 bg-theme rounded-m shadow-xl px-2 mt-n4" style="margin: 0px;">
                                <div class="list-group list-custom-small mt-n2 mb-n2">
                                    <a href="#">
                                        <i class="fa font-14 fa-bullhorn"></i>
                                        <span>Publish Post</span>
                                        <i class="fa"></i>
                                    </a>
                                    <!-- <a href="#">
                                            <i class="fa font-14 fa-bookmark"></i>
                                            <span>Save Post</span>
                                            <i class="fa"></i>
                                        </a> -->
                                    <a href="#">
                                        <i class="fa font-14 fa-pencil-alt"></i>
                                        <span>Edit Post</span>
                                        <i class="fa"></i>
                                    </a>
                                    <a href="#" class="border-0">
                                        <i class="fa font-14 fa-trash"></i>
                                        <span>Delete Post</span>
                                        <i class="fa"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                <h5 class="font-15 line-height-m p-2 text-center">
                    Improper Fraction
                </h5>
                <div class="">
                    <div class="accordion" id="accordion-1">
                        <div class="border_collapse mb-2 z-depth-1">
                            <button class="btn accordion-btn no-effect color-theme collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false">
                                <img src="icon/assessment.png" width="20" class=" me-2">
                                <span class="font-12 me-2">ASSIGNMENT - 1 <span class="me-2 badge bg-red-dark font-7 color-white">Not Submitted</span></span>
                                <i class="fa fa-chevron-down font-10 accordion-icon"></i>
                                <span class="me-2 badge bg-green-dark font-8 color-white accordion-icon">TAP TO EXPAND</span>
                            </button>
                            <div id="collapse1" class="collapse" data-bs-parent="#accordion-1" style="">
                                <div class=" mb-2 ps-2 pe-2 space_evenly">
                                    <div class=" item_space">
                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-green-dark btn-m mt-3 filter_schools" style="font-size: 10px !important;">Submit </a>
                                    </div>
                                    <div class=" item_space">
                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-blue-dark btn-m mt-3 filter_schools" style="font-size: 10px !important;">Script </a>
                                    </div>
                                    <div class=" item_space">
                                        <a data-menu="filterSchools" href="#" class="btn btn-full bg-black btn-m mt-3 filter_schools" style="font-size: 10px !important;">Comment (23) </a>
                                    </div>
                                </div>
                                <div class="p-2 mt-2">
                                    <table border="0" class="text-center" style="width:100%;border: 1px solid #f0f0f0;">
                                        <thead>
                                            <tr>
                                                <th class="opacity-40">Score</th>
                                                <th class="opacity-40">Due Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>10/20</td>
                                                <td>14 Jan</td>
                                            </tr>
                                            <!-- Add more rows as needed -->
                                        </tbody>
                                    </table>
                                </div>

                                <hr>

                                <div class="pt-1 pb-2">
                                    <!-- files of the post -->
                                    <span class="ps-3 font-12 d-block mb-n2 opacity-40">Click on the 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 class="p-3">
                                    <!-- files of the post -->
                                    <span class="pb-2 font-12 d-block mb-n2 opacity-40">Assignment Information</span>
                                    <p>
                                        We're very social and always love to keep in touch with our customers. Along our 11 year journey we've made
                                        tones of awesome friends.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="menu-main" data-menu-width="280" data-menu-active="nav-pages" style="display: block; width: 280px;">
            <div class="card rounded-0 bg-6" data-card-height="150" style="height: 150px;">
                <div class="card-top">
                    <a href="#" class="close-menu float-end me-2 text-center mt-3 icon-40 notch-clear"><i class="fa fa-times color-white"></i></a>
                </div>
                <div class="card-bottom">
                    <h1 class="color-white ps-3 mb-n1 font-28">Agro Pro</h1>
                    <p class="mb-2 ps-3 font-12 color-white opacity-50">The Future of Agriculture</p>
                </div>
                <div class="card-overlay bg-gradients"></div>
            </div>
            <div class="mt-4"></div>
            <h6 class="menu-divider">Site Map</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="shed" class="">
                    <i class="fa fa-home gradient-blue color-white"></i>
                    <span>Animal House</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="store" class="">
                    <i class="fa fa-warehouse gradient-blue color-white"></i>
                    <span>Storage House</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="field" class="">
                    <i class="fa fa-map-marked-alt gradient-blue color-white"></i>
                    <span>Planting Area</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Animal</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="livestock-list" class="">
                    <i class="fa fa-horse-head gradient-orange color-white"></i>
                    <span>Livestock List</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="livestock-inventory-list" class="">
                    <i class="fa fa-boxes gradient-orange color-white"></i>
                    <span>Livestock Inventory</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Plant</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="crop-list" class="">
                    <i class="fa fa-seedling gradient-grass color-white"></i>
                    <span>Crop List</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="crop-inventory-list" class="">
                    <i class="fa fa-boxes gradient-grass color-white"></i>
                    <span>Crop Inventory</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Tools</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="equipment-list" class="">
                    <i class="fa fa-tools gradient-red color-white"></i>
                    <span>Equipment List</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="equipment-inventory-list" class="">
                    <i class="fa fa-toolbox gradient-red color-white"></i>
                    <span>Equipment Inventory</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Contacts</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="staff" class="">
                    <i class="fa fa-users gradient-teal color-white"></i>
                    <span>Team</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id="nav-pages" href="contact" class="active-nav">
                    <i class="fa fa-user-friends gradient-magenta color-white"></i>
                    <span>Contact</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Settings</h6>
            <div class="list-group list-custom-small list-menu">
                <a onclick="loadPage()" id=" nav-welcome " href="settings-units" class="">
                    <i class="fa fa-balance-scale gradient-highlight color-white"></i>
                    <span>Standard Units</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="settings-jobs" class="">
                    <i class="fa fa-briefcase gradient-highlight color-white"></i>
                    <span>Jobs</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="settings-tags" class="">
                    <i class="fa fa-tags gradient-mint color-white"></i>
                    <span>Tags</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="settings-plants" class="">
                    <i class="fa fa-seedling gradient-grass color-white"></i>
                    <span>Plants</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" id=" nav-welcome " href="settings-animals" class="">
                    <i class="fa fa-horse-head gradient-grass color-white"></i>
                    <span>Animals</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a onclick="loadPage()" href="#" data-menu="menu-colors">
                    <i class="fa fa-brush gradient-highlight color-white"></i>
                    <span>Highlights</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#" data-toggle-theme="" data-trigger-switch="switch-dark-mode">
                    <i class="fa fa-moon gradient-dark color-white"></i>
                    <span>Dark Mode</span>
                    <div class="custom-control small-switch ios-switch">
                        <input data-toggle-theme="" type="checkbox" class="ios-input" id="toggle-dark-menu">
                        <label class="custom-control-label" for="toggle-dark-menu"></label>
                    </div>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Accounts</h6>
            <div class="list-group list-custom-small list-menu">
                <a id="nav-welcome" href="index-2.html">
                    <i class="fa fa-heart gradient-red color-white"></i>
                    <span>Income</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-homepages" href="index-homepages.html">
                    <i class="fa fa-home gradient-green color-white"></i>
                    <span>Expense</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-components" href="index-components.html">
                    <i class="fa fa-cog gradient-blue color-white"></i>
                    <span>Billing</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider mt-4">Reports</h6>
            <div class="list-group list-custom-small list-menu">
                <a id="nav-welcome" href="index-2.html">
                    <i class="fa fa-heart gradient-red color-white"></i>
                    <span>Audit</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-welcome" href="index-2.html">
                    <i class="fa fa-heart gradient-red color-white"></i>
                    <span>Accounts</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-homepages" href="index-homepages.html">
                    <i class="fa fa-home gradient-green color-white"></i>
                    <span>Site Map</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-components" href="index-components.html">
                    <i class="fa fa-cog gradient-blue color-white"></i>
                    <span>Assets</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a id="nav-components" href="index-components.html">
                    <i class="fa fa-cog gradient-blue color-white"></i>
                    <span>Custom</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

            <h6 class="menu-divider font-10 mt-4">Made with <i class="fa fa-heart color-red-dark pl-1 pr-1"></i> by Zeon Global <span class="copyright-year">2021</span></h6>
        </div>
        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="menu-share" data-menu-height="370" style="display: block; height: 370px;">
            <div id="menu-share" class="menu menu-box-bottom rounded-m menu-active" data-menu-load="menu-share.html" data-menu-height="370" style="display: block; height: 370px;">
                <div class="menu-title">
                    <p class="color-highlight">Tap a link to</p>
                    <h1>Share</h1>
                    <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
                </div>
                <div class="divider divider-margins mt-3 mb-0"></div>
                <div class="content mt-0">
                    <div class="list-group list-custom-small list-icon-0">
                        <a href="https://www.facebook.com/sharer/sharer.php?u=schools_dashboard" class="external-link shareToFacebook">
                            <i class="fab fa-facebook-f font-12 bg-facebook color-white shadow-l rounded-s"></i>
                            <span>Facebook</span>
                            <i class="fa fa-angle-right pr-1"></i>
                        </a>
                        <a href="https://twitter.com/share?text=schools_dashboard" class="external-link shareToTwitter">
                            <i class="fab fa-twitter font-12 bg-twitter color-white shadow-l rounded-s"></i>
                            <span>Twitter</span>
                            <i class="fa fa-angle-right pr-1"></i>
                        </a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=schools_dashboard&amp;title=ZAP Management Portal&amp;summary=&amp;source=" class="external-link shareToLinkedIn">
                            <i class="fab fa-linkedin-in font-12 bg-linkedin color-white shadow-l rounded-s"></i>
                            <span>LinkedIn</span>
                            <i class="fa fa-angle-right pr-1"></i>
                        </a>
                        <a href="whatsapp://send?text=schools_dashboard" class="external-link shareToWhatsApp">
                            <i class="fab fa-whatsapp font-12 bg-whatsapp color-white shadow-l rounded-s"></i>
                            <span>WhatsApp</span>
                            <i class="fa fa-angle-right pr-1"></i>
                        </a>
                        <a href="mailto:?body=schools_dashboard" class="external-link shareToMail border-0">
                            <i class="fa fa-envelope font-12 bg-mail color-white shadow-l rounded-s"></i>
                            <span>Email</span>
                            <i class="fa fa-angle-right pr-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="menu-colors" data-menu-height="480" style="display: block; height: 480px;">
            <div id="menu-colors" class="menu menu-box-bottom rounded-m menu-active" data-menu-load="menu-colors.html" data-menu-height="480" style="display: block; height: 480px;">
                <div class="menu-title">
                    <p class="color-highlight font-600">Choose your Favorite</p>
                    <h1>Highlight</h1>
                    <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
                </div>
                <div class="divider divider-margins mt-3 mb-2"></div>
                <div class="content mt-0 ms-0 me-0">
                    <div class="row mb-0">
                        <div class="col-6">
                            <div class="list-group list-custom-small list-menu">
                                <a href="#" data-change-highlight="blue">
                                    <i class="gradient-blue color-white"></i>
                                    <span>Blue</span>
                                </a>
                                <a href="#" data-change-highlight="red">
                                    <i class="gradient-red color-white"></i>
                                    <span>Red</span>
                                </a>
                                <a href="#" data-change-highlight="orange">
                                    <i class="gradient-orange color-white"></i>
                                    <span>Orange</span>
                                </a>
                                <a href="#" data-change-highlight="green">
                                    <i class="gradient-green color-white"></i>
                                    <span>Green</span>
                                </a>
                                <a href="#" data-change-highlight="yellow">
                                    <i class="gradient-yellow color-white"></i>
                                    <span>Yellow</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="list-group list-custom-small list-menu">
                                <a href="#" data-change-highlight="dark">
                                    <i class="gradient-dark color-white"></i>
                                    <span>Dark</span>
                                </a>
                                <a href="#" data-change-highlight="gray">
                                    <i class="gradient-gray color-white"></i>
                                    <span>Gray</span>
                                </a>
                                <a href="#" data-change-highlight="teal">
                                    <i class="gradient-teal color-white"></i>
                                    <span>Teal</span>
                                </a>
                                <a href="#" data-change-highlight="magenta">
                                    <i class="gradient-magenta color-white"></i>
                                    <span>Plum</span>
                                </a>
                                <a href="#" data-change-highlight="brown">
                                    <i class="gradient-brown color-white"></i>
                                    <span>Brown</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider divider-margins mt-2"></div>
                <a href="#" class="close-menu btn btn-margins btn-m font-13 rounded-s shadow-xl btn-full gradient-highlight border-0 font-700 text-uppercase">Awesome</a>
            </div>
        </div>
    </div>
    <form id="filterSchoolsForm" method="GET" action="schools_dashboard">
        <input type="hidden" name="_token" value="olQQeqqN8A74TPU9YIk5ilV01sKKjYYBIi6wj9tO">
        <div id="filterSchools" class="menu menu-box-modal rounded-s bg-theme" style="min-width: 95%; max-height: 98% !important; display: block;">
            <div class="menu-title">
                <p class="color-highlight">Filter</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">SCHOOLS DASHBOARD</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="col-12 mt-2     ">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4 input-style-active">
                        <label for="userId" class="color-highlight">User</label>
                        <select class="userId" name="userId">
                            <option value="0">SELECT USER</option>
                            <option value="1">IBE EMMANUEL</option>
                            <option value="2">IZRIL</option>
                            <option value="3">BIG MARN</option>
                            <option value="4">ISAAC</option>
                            <option value="5">EMEKA</option>
                            <option value="6">UJUNNA</option>
                            <option value="7">NORAH</option>
                            <option value="8">DAVE</option>
                            <option value="9">DR. COMGENIUS</option>
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>
                <button type="submit" style="width:-webkit-fill-available !important;" class="button_click mb-3 btn btn-full gradient-green font-12 btn-m font-600 mt-4 rounded-s">FILTER SCHOOLS DASHBOARD</button>
            </div>
        </div>
    </form>
    <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 font-600 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 font-600 mt-3 rounded-s">CREATE INVOICE</button>
            </div>
        </form>
    </div>
    <?php require_once("footer.php") ?>
    <?php require_once("script.php") ?>