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

<head>
    <title>ZAP Management Portal</title>
    <?php require_once("header.php") ?>
    <?php $Page_title = 'My Bill' ?>
    <style>

    </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>
    <?php require_once("footer.php") ?>
    <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"><span class="badge bg-blue-dark font-13 color-white z-depth-1 mt-3"> EMMANUEL NWOKEUKWU</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-content">
        <div class="all-content" style="margin-top: 40px;">
            <div class="page-content">
                <div id="tab-group-1">
                    <div class="card card-style bg-theme pb-0">
                        <div class="content mb-0 mx-0 my-0">
                            <div class="tab-controls tabs-small" data-highlight="bg-highlight">
                                <a href="#" data-active data-bs-toggle="collapse" data-bs-target="#tab-1">Pending</a>
                                <a href="#" data-bs-toggle="collapse" data-bs-target="#tab-2">Paid</a>
                            </div>
                        </div>
                    </div>
                    <div data-bs-parent="#tab-group-1" class="collapse show" id="tab-1">
                        <div class="content">
                            <div class="card p-2 mb-2" style="border: 2px solid #bd4c4c !important;">
                                <a href="#" data-menu="menu-invoice" class="d-flex">
                                    <div class="align-self-center">
                                        <h5 class="ps-3 mb-n1 font-15">School Fees </h5>
                                        <span class="ps-3 font-11 color-theme opacity-70">2023/2024 2nd Term</span>
                                    </div>
                                     <div class=" ms-auto text-end align-self-center">
                                            <h5 class="color-theme font-15 font-700 d-block mb-n1">N190,000.00</h5>
                                            <span class="color-blue-dark font-11">Tap to expand</span>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                    <div data-bs-parent="#tab-group-1" class="collapse" id="tab-2">
                        <div class="content">
                            <div class="card p-2 mb-2" style="border: 2px solid #4cbd8e !important;">
                                <a href="#" data-menu="menu-invoice" class="d-flex">
                                    <div class="align-self-center">
                                        <h5 class="ps-3 mb-n1 font-15">School Fees</h5>
                                        <span class="ps-3 font-11 color-theme opacity-70">2023/2024 2nd Term</span>
                                    </div>
                                     <div class=" ms-auto text-end align-self-center">
                                            <h5 class="color-theme font-15 font-700 d-block mb-n1">N190,000.00</h5>
                                            <span class="color-blue-dark font-11">Tap to expand</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </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>

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