<!DOCTYPE html>
<html lang="zxx">
    <?php require __DIR__ . '/includes/head.php'; ?>

    <body class="bg-body-bg"><?php require __DIR__ . '/includes/loading.php'; ?><?php require __DIR__ . '/includes/sidebar.php'; ?>


        <!-- Start Main Content Area -->
        <div class="container-fluid">
            <div class="main-content d-flex flex-column">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4 mt-1">
                        <h3 class="mb-0">Course Details</h3>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb align-items-center mb-0 lh-1">
                                <li class="breadcrumb-item">
                                    <a href="index.html" class="d-flex align-items-center text-decoration-none">
                                        <i class="ri-home-8-line fs-15 text-primary me-1"></i>
                                        <span class="text-body fs-14 hover">Dashboard</span>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span>LMS</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span>Courses</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Course Details</span>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="card gradient-bg rounded-10 border-0 mb-4 pb-20">
                        <h3 class="text-white p-20">Course Details</h3>
                        <div class="default-table-area mx-minus-1 table-courses">
                            <div class="table-responsive">
                                <table class="table align-middle">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">ID</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Course Name</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Category</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Instructor</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Enrolled Students</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Start Date</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">End Date</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Price</th>
                                            <th scope="col" class="fw-medium text-white" style="background-color: #9f96fa; padding: 17.5px 20px;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-white">#258</td>
                                            <td class="text-white fw-medium">Introduction to python</td>  
                                            <td class="text-white">Technology</td> 
                                            <td class="text-white">Ann Cohen</td>
                                            <td class="text-white">120</td> 
                                            <td class="text-white">01 Aug, 2025</td> 
                                            <td class="text-white">30 Dec, 2025</td> 
                                            <td class="text-white">$30.99</td> 
                                            <td>
                                                <div class="d-flex justify-content-end" style="gap: 12px;">
                                                    <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                        <i class="material-symbols-outlined fs-16 fw-normal text-white">visibility</i>
                                                    </button>
                                                    <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                        <i class="material-symbols-outlined fs-16 fw-normal text-white">edit</i>
                                                    </button>
                                                    <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                        <i class="material-symbols-outlined fs-16 fw-normal text-white">delete</i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="card bg-white rounded-10 border border-white mb-4 p-20">
                                <h3 class="mb-20">Course Instructor</h3>
                                <div class="d-flex align-items-center mb-20">
                                    <div class="flex-shrink-0">
                                        <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 100px; height: 100px;" alt="user1">
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h3 style="margin-bottom: 2px;">Ann Cohen</h3>
                                        <span class="fs-16">anncohen@example.com</span>
                                    </div>
                                </div>

                                <h3 class="mb-10 fs-16">Course Description</h3>
                                <p class="lh-1-8 fs-16 mb-20">This course is designed for beginners who want to learn the fundamentals of the Python programming language. The course covers basic syntax, data types, control structures, and an introduction to object-oriented programming. Participants will have hands-on coding exercises to reinforce their learning.</p>
                                <h3 class="mb-10 fs-16">Course Schedule</h3>
                                <ul class="p-0 mb-3 list-unstyled last-child-none">
                                    <li class="fs-16 mb-2">Start Date: August 01, 2025</li>
                                    <li class="fs-16 mb-2">End Date: December 30, 2025</li>
                                </ul>
                                <h3 class="mb-10 fs-16">Status</h3>
                                <p  class="lh-1-8 fs-16">The course is currently in progress. Students are actively engaged in the learning materials, and the instructor is providing guidance and support.</p>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="card bg-white rounded-10 border-0 mb-4 pb-20">
                                <h3 class="p-20">Enrolled Students</h3>
                                <div class="default-table-area mx-minus-1 table-enrolled-students">
                                    <div class="table-responsive" style="max-height: 445px;" data-simplebar>
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium">User ID</th>
                                                    <th scope="col" class="fw-medium">Student</th>
                                                    <th scope="col" class="fw-medium text-start">Email</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-body">#ARP-158</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user15">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Kimberly Anderson</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">walter@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-132</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user7.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user7">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Kimberly Anderson</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">kimberly@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-142</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user5.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user5">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Roscoe Guerrero</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">roscoe@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-125</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user12.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user12">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Robert Stewart</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">robert@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-176</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user1">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Walter Frazier</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">walter@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-158</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user15">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Kimberly Anderson</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">walter@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-132</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user7.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user7">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Kimberly Anderson</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">kimberly@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-142</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user5.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user5">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Roscoe Guerrero</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">roscoe@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-125</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user12.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user12">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Robert Stewart</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">robert@example.com</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">#ARP-176</td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user1">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Walter Frazier</h3>
                                                            </div>
                                                        </div>
                                                    </td>  
                                                    <td class="text-body text-start">walter@example.com</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxxl-12 col-xxl-6">
                            <div class="card bg-white rounded-10 border-0 mb-4">
                                <h3 class="p-20">Course Content</h3>

                                <div class="accordion course-accordion" id="accordionExample">
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <span>Introduction to Cybersecurity</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">5 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">16min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                                <span>Python Setup</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">4 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">35min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                                <span>Python comparison</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">8 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">22min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                                                <span>Python statements</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">5 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">20min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
                                                <span>Python decorators</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">2 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">55min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
                                                <span>Python generators</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">6 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">35min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
                                                <span>Advanced python modules</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">3 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">50min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
                                                <span>Emails with python</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">4 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">30min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="true" aria-controls="collapseNine">
                                                <span>Final capstone python</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">3 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">45min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseNine" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item border-0 rounded-0 mb-12">
                                        <h2 class="accordion-header rounded-3">
                                            <button class="accordion-button d-flex flex-wrap gap-1 justify-content-between fs-16 fw-medium text-secondary bg-light rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="true" aria-controls="collapseTen">
                                                <span>Python data structures</span>
                                                <div class="d-flex" style="gap: 15px;">
                                                    <span class="fs-16 fw-medium text-body">2 lecture</span>
                                                    <span class="fs-16 fw-medium text-body">20min</span>
                                                </div>
                                            </button>
                                        </h2>
                                        <div id="collapseTen" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body bg-white pt-0">
                                                <ul class="p-20 pb-0 px-0 mb-0 list-unstyled last-child-none">
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Auto welcome message</span>
                                                        </div>
                                                        <span class="fs-15">00:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Introduction</span>
                                                        </div>
                                                        <span class="fs-15">05:30</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course Curriculum</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Why Python</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                    <li class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                        <div class="d-flex align-items-center">
                                                            <i class="material-symbols-outlined fs-16 text-dark">smart_display</i>
                                                            <span class="ms-2 fs-15">Course FAQs</span>
                                                        </div>
                                                        <span class="fs-15">04:55</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxxl-12 col-xxl-6">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="card bg-white rounded-10 border border-white mb-4">
                                        <div class="p-20">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                                <h3>Course Sales</h3>
        
                                                <div class="dropdown select-dropdown without-border">
                                                    <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                        This Month
                                                    </button>
                                                
                                                    <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                        <li>
                                                            <button class="dropdown-item text-secondary">This Day</button>
                                                        </li>
                                                        <li>
                                                            <button class="dropdown-item text-secondary">This Week</button>
                                                        </li>
                                                        <li>
                                                            <button class="dropdown-item text-secondary">This Month</button>
                                                        </li>
                                                        <li>
                                                            <button class="dropdown-item text-secondary">This Year</button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <h2 class="fs-26 fw-medium" style="margin-bottom: 13px;">84,127</h2>
                                            <span class="d-inline-flex align-content-center gap-1 bg-success bg-opacity-10 border border-success" style="padding: 3px 5px;">
                                                <i class="material-symbols-outlined fs-14 text-success">trending_up</i>
                                                <span class="lh-1 fs-14 text-success">3.21%</span>
                                            </span>
                                        </div>
                                        <div style="margin: -95px -13px -31px -23px;">
                                            <div id="total_courses_sales_chart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                        <h3 class="fw-medium mb-10">Video Courses</h3>
                                        <h2 class="lh-1 fs-26 mb-0 fw-medium">100+</h2>
                                        <div class="text-center bg-info rounded-circle mx-auto" style="width: 100px; height: 100px; line-height: 100px; margin-top: 38px; margin-bottom: 38px;">
                                            <img src="assets/images/video-content.svg" alt="video-content">
                                        </div>
                                        <div class="d-flex align-items-center justify-content-between">
                                            <span>This Month</span>
                                            <span class="d-flex align-content-center gap-1 bg-success bg-opacity-10 border border-success" style="padding: 3px 5px;">
                                                <i class="material-symbols-outlined fs-14 text-success">trending_up</i>
                                                <span class="lh-1 fs-14 text-success">3.21%</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card bg-white p-20 rounded-10 rounded-top-0 border border-white mb-4">
                                <h3 class="mb-20">Course Ratings</h3>
                                <div class="row align-items-center mb-20">
                                    <div class="col-xxl-4 col-md-4 col-lg-3">
                                        <h2 class="fw-medium fs-26" style="margin-bottom: 3px;">4.9</h2>
                                        <span class="fs-16 d-block mb-1">Overall Rating</span>
                                        <ul class="p-0 mb-0 list-unstyled d-flex align-items-center" style="gap: 3px;">
                                            <li>
                                                <i class="ri-star-fill text-warning fs-16"></i>
                                            </li>
                                            <li>
                                                <i class="ri-star-fill text-warning fs-16"></i>
                                            </li>
                                            <li>
                                                <i class="ri-star-fill text-warning fs-16"></i>
                                            </li>
                                            <li>
                                                <i class="ri-star-fill text-warning fs-16"></i>
                                            </li>
                                            <li>
                                                <i class="ri-star-fill text-warning fs-16"></i>
                                            </li>
                                            <li>
                                                <span class="position-relative top-2">(158 Reviews)</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-xxl-8 col-md-8 col-lg-9 mt-4 mt-md-0">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <ul class="p-0 mb-0 list-unstyled last-child-none">
                                                    <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <span class="position-relative top-2">(5.00)</span>
                                                    </li>
                                                    <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <span class="position-relative top-2">(4.00)</span>
                                                    </li>
                                                    <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <span class="position-relative top-2">(3.00)</span>
                                                    </li>
                                                    <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <span class="position-relative top-2">(2.00)</span>
                                                    </li>
                                                    <li class="d-flex align-items-center mb-2" style="gap: 3px;">
                                                        <i class="ri-star-fill text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <i class="ri-star-line text-warning fs-16"></i>
                                                        <span class="position-relative top-2">(1.00)</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="flex-grow-1 ms-3 last-child-none">
                                                <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                    <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                        <div class="progress-bar bg-primary rounded-0" style="width: 80%; height: 4px;"></div>
                                                    </div>
                                                    <span>(120)</span>
                                                </div>
                                                <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                    <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                        <div class="progress-bar bg-primary rounded-0" style="width: 40%; height: 4px;"></div>
                                                    </div>
                                                    <span>(25)</span>
                                                </div>
                                                <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                    <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                        <div class="progress-bar bg-primary rounded-0" style="width: 20%; height: 4px;"></div>
                                                    </div>
                                                    <span>(9)</span>
                                                </div>
                                                <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                    <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                        <div class="progress-bar bg-primary rounded-0" style="width: 8%; height: 4px;"></div>
                                                    </div>
                                                    <span>(3)</span>
                                                </div>
                                                <div class="d-flex align-items-center gap-3 child" style="margin-bottom: 12px;">
                                                    <div class="progress rounded-0 bg-light w-100" role="progressbar" aria-label="primary example" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="height: 4px;">
                                                        <div class="progress-bar bg-primary rounded-0" style="width: 2%; height: 4px;"></div>
                                                    </div>
                                                    <span>(1)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card border-0 bg-white rounded-10 bg-for-dark mb-20">
                                    <div class="d-flex align-items-center mb-3">
                                        <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user1">
                                        <span class="fs-18 text-secondary ms-3">Mark Stjohn</span>
                                    </div>
                                    <div class="d-flex align-items-center mb-10" style="gap: 3px;">
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <span class="position-relative top-1">(5)</span>
                                    </div>
                                    <p class="fs-16 lh-1-8">“Risus nulla amet facilisis eu metus nulla. Nisi interdum nec in lectus amet dis. Pulvinar ut vulputate odio venenatis id urna. Nullam elementum id egestas aliquet leo potenti pellentesque vel tortor. Varius integer facilisi vestibulum ante scelerisque adipiscing at turpis ultricies.”</p>
                                </div>

                                <div class="card border-0 bg-white rounded-10 bg-for-dark mb-20">
                                    <div class="d-flex align-items-center mb-3">
                                        <img src="assets/images/user2.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user2">
                                        <span class="fs-18 text-secondary ms-3">Joan Stanley</span>
                                    </div>
                                    <div class="d-flex align-items-center mb-10" style="gap: 3px;">
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-fill text-warning fs-16"></i>
                                        <i class="ri-star-half-fill text-warning fs-16"></i>
                                        <span class="position-relative top-1">(4.5)</span>
                                    </div>
                                    <p class="fs-16 lh-1-8">“Risus nulla amet facilisis eu metus nulla. Nisi interdum nec in lectus amet dis. Pulvinar ut vulputate odio venenatis id urna. Nullam elementum id egestas aliquet leo potenti pellentesque vel tortor.”</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex-grow-1"></div>

                <?php require __DIR__ . '/includes/footer.php'; ?>

            </div>
        </div>
        <!-- Start Main Content Area -->

        <!-- Start Theme Setting Area -->
        <button class="btn btn-primary theme-settings-btn p-0 position-fixed z-2 text-center rounded-circle" style="bottom: 24px; right: 24px; width: 56px; height: 56px; line-height: 54px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
            <i class="text-white ri-settings-3-fill fs-28" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Click On Theme Settings"></i>
        </button>

        <!-- Start Theme Setting Area -->
        <div class="offcanvas offcanvas-end bg-white border-0" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel" style="box-shadow: 0 4px 20px #2f8fe812 !important; max-width: 300px;">
            <div class="offcanvas-header bg-light p-20">
                <h5 class="offcanvas-title fs-18 fw-medium" id="offcanvasScrollingLabel">Configuration Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body p-0 overflow-hidden">
                <div class="last-child-none" style="max-height: 858px;" data-simplebar>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">RTL Mode</h4>
                        <div class="rtl-btn">
                            <label id="switch">
                                <input type="checkbox" onchange="toggleTheme()" class="toggle-switch rtl-switch" id="slider">
                            </label>
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Sidebar Dark</h4>
                        <div class="sidebar-light-dark" id="sidebar-light-dark">
                            <input type="checkbox" class="toggle-switch sidebar-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Header Dark</h4>
                        <div class="header-light-dark" id="header-light-dark">
                            <input type="checkbox" class="toggle-switch header-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Right Sidebar</h4>
                        <div class="right-sidebar" id="right-sidebar">
                            <input type="checkbox" class="toggle-switch right-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Hide Sidebar</h4>
                        <div class="icon-sidebar" id="icon-sidebar">
                            <input type="checkbox" class="toggle-switch icon-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Bordered Card</h4>
                        <div class="card-border" id="card-border">
                            <input type="checkbox" class="toggle-switch border-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Card Border Radius</h4>
                        <div class="card-radius-square" id="card-radius-square">
                            <input type="checkbox" class="toggle-switch border-radius-switch">
                        </div>
                    </div>
                    
                    <div class="p-20 border-bottom child">
                        <a href="#" class="btn btn-primary text-white">
                            Buy Fila
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Theme Setting Area -->
     
        <!-- Link Of JS File -->
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/sidebar-menu.js"></script>
        <script src="assets/js/quill.min.js"></script>
        <script src="assets/js/data-table.js"></script>
        <script src="assets/js/prism.js"></script>
        <script src="assets/js/clipboard.min.js"></script>
        <script src="assets/js/simplebar.min.js"></script>
        <script src="assets/js/apexcharts.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/fullcalendar.main.js"></script>
        <script src="assets/js/jsvectormap.min.js"></script>
        <script src="assets/js/world-merc.js"></script>
        <script src="assets/js/custom/apexcharts.js"></script>
        <script src="assets/js/custom/echarts.js"></script>
        <script src="assets/js/custom/maps.js"></script>
        <script src="assets/js/custom/custom.js"></script>
    </body>
</html>