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

<head>
    <title>ZAP Management Portal</title>
    <?php require_once("header.php") ?>
    <?php $Page_title = 'My Topic' ?>
    <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-red-dark font-9 color-white z-depth-1"> JSS 2 CROWN</span><span class="ms-1 badge bg-red-dark font-9 color-white z-depth-1"> ENGLISH LANGUAGE</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">Filter </a>
                        </div>
                        <div class=" item_space">
                            <a data-menu="filterSchools" href="#" class="btn btn-full bg-blue-dark btn-m filter_schools">Add Topic </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=" m-2">
                    <div class="">
                        <table id="student" class="display z-depth-1">
                            <thead>
                                <tr>
                                    <th>My Topics</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="card card-style" style="margin: 0px 0px 0px !important;">
                                            <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>
                                            <div class="m-2">
                                                <div class=" z-depth- line-height-m p-2 text-center" style="border: 1px solid #dee2e6;">
                                                    <h6 class="font-12 opacity-40">Topic Title</h6>
                                                    <h5 class="mb-2">Improper Fraction</h5>
                                                    <!-- <a data-bs-toggle="collapse" href="#collapse-8" class="btn btn-m btn-full -sm bg-highlight font-600 shadow-xl font-13">Tap to Show more Content</a> -->

                                                    <div class="col-lg-12 mb-0 space_evenly">
                                                        <div class=" item_space">
                                                            <a data-bs-toggle="collapse" href="#collapse-8" class="btn btn-m btn-full z-depth-1 -sm bg-highlight font-600 shadow-xl font-13">Show Content</a>
                                                        </div>
                                                        <div class=" item_space">
                                                            <a data-menu="filterSchools" href="#" class="btn btn-full z-depth-1 bg-blue-dark btn-m filter_schools">Add Content </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="collapse" id="collapse-8">
                                                    <div class="">
                                                        <div class="accordion" id="accordion-1">
                                                            <div class="mb-2 mt-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-10 me-2">ASSIGNMENT <span class="me-3 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 class="mb-2 z-depth-1">
                                                                <button class="btn accordion-btn no-effect color-theme collapsed" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false">
                                                                    <!-- <img src="icon/email.png" width="25" class=" me-2"> -->
                                                                    <span class="font-10">STUDY MATERIAL</span> <span class="me-2 badge bg-blue-dark font-8 color-white">2</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="collapse2" class="collapse" data-bs-parent="#accordion-1" style="">
                                                                    <div class="pt-2 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>
                                                            </div>
                                                            <div class="mb-2 z-depth-1">
                                                                <button class="btn accordion-btn no-effect color-theme" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false">
                                                                    <!-- <img src="icon/timeline.png" width="25" class=" me-2"> -->
                                                                    <span class="font-10 me-2">TOPIC NOTES</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="collapse3" class="collapse" data-bs-parent="#accordion-1" style="">
                                                                    <div class="pt-1 pb-2 ps-3 pe-3">
                                                                        <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="content mb-3 mt-1">

                                                <div class="d-flex ps-1 ms-1">
                                                    <div class="align-self-center">
                                                        <span class="font-10 ms-n2">❤️</span>
                                                        <span class="font-10 ms-1">11.3k</span>
                                                    </div>
                                                    <div class="align-self-center ms-auto">
                                                        <a href="#" class="opacity-60 color-t font-10">11 Discuss</a>
                                                        <i class="fa fa-circle opacity-60 color-t font-8" aria-hidden="true"></i>
                                                        <a href="#" class="opacity-60 color-t font-10">1/2 Ass Done</a>
                                                        <i class="fa fa-circle opacity-60 color-t font-8" aria-hidden="true"></i>
                                                        <a href="#" class="opacity-60 color-t font-10">1 Material(s)</a>
                                                    </div>
                                                    <div class="align-self-center ps-2">

                                                    </div>
                                                    <div class="align-self-center ps-2">

                                                    </div>
                                                </div>
                                                <div class="divider mb-1 mt-2"></div>

                                                <div class="d-flex pt-1 mx-n3 mb-n2">

                                                    <a href="#" data-bs-toggle="dropdown" class="align-self-center m-auto">
                                                        <i class="color-theme opacity-50 fa fa-thumbs-up font-15 pe-1"></i>
                                                        <span class="color-theme font-14">Like</span>
                                                    </a>
                                                    <div class="dropdown-menu border-0 bg-transparent">
                                                        <div class="bg-theme rounded-l shadow-xl px-2 py-2 mt-n5">
                                                            <div class="d-flex">
                                                                <a href="#" class="m-auto px-2 font-24">😊</a>
                                                                <a href="#" class="m-auto px-2 font-24">😂</a>
                                                                <a href="#" class="m-auto px-2 font-24">😍</a>
                                                                <a href="#" class="m-auto px-2 font-24">😭</a>
                                                                <a href="#" class="m-auto px-2 font-24">😡</a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <a href="#" class="align-self-center m-auto no-effect collapsed" data-bs-toggle="collapse" data-bs-target="#comment-1" aria-expanded="false">
                                                        <i class="color-theme opacity-50 far fa-comment font-15 pe-1"></i>
                                                        <span class="color-theme font-14">Discussions</span>
                                                    </a>
                                                    <a href="#" class="align-self-center m-auto" data-menu="menu-share">
                                                        <i class="color-theme opacity-50 fa fa-share font-15 pe-1"></i>
                                                        <span class="color-theme font-14">Share</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <!-- <tr><td>

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