<!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">Projects Overview</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>Project Management</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Projects Overview</span>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="row">
                        <div class="col-xxl-6">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4" >
                                <h3 class="mb-20">Product Development</h3>
                                <div class="card gradient-bg rounded-10 border border-white p-20 mb-12">
                                    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-20">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <i class="material-symbols-outlined text-white text-center rounded-circle fs-26" style="width: 50px; height: 50px; line-height: 50px; background-color: #857af8;">person</i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h3 class="text-white" style="margin-bottom: 4px;">Client</h3>
                                                <span class="fs-16 text-white">Bernard Garrison</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <i class="material-symbols-outlined text-white text-center rounded-circle fs-26" style="width: 50px; height: 50px; line-height: 50px; background-color: #857af8;">attach_money</i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h3 class="text-white" style="margin-bottom: 4px;">Budget</h3>
                                                <span class="fs-16 text-white">$10,500</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <i class="material-symbols-outlined text-white text-center rounded-circle fs-26" style="width: 50px; height: 50px; line-height: 50px; background-color: #857af8;">schedule</i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <h3 class="text-white" style="margin-bottom: 4px;">Duration</h3>
                                                <span class="fs-16 text-white">150.5 Hrs</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="progress rounded-0 mb-2" role="progressbar" aria-label="Basic example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 10px; background-color: #594dc3">
                                        <div class="progress-bar bg-info rounded-0" style="width: 60%; height: 10px;"></div>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fs-16 text-white">Progress</span>
                                        <span class="fs-16 text-white">60%</span>
                                    </div>
                                </div>
                                <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center">
                                    <span class="fs-16">Project Started: Nov 01, 2025</span>
                                    <span class="fs-16">Project Deadline: Dec 30, 2025</span>
                                </div>
                                <h3 class="fw-normal" style="margin-top: 18px; margin-bottom: 12px;">Project Details:</h3>
                                <p class="lh-1-8 fs-16">Commodo eu arcu vel tincidunt habitant risus nec. Integer sollicitudin aliquam risus massa eleifend vitae. Ornare maecenas purus at dictumst. Praesent ornare blandit urna mi porta dui id orci. Molestie nunc lorem velit pulvinar. Vulputate at ligula nisl adipiscing aenean sit.</p>
                                
                                <p class="lh-1-8 fs-16">Feugiat et eu in euismod suspendisse elementum. Ipsum pellentesque morbi ultricies mattis. Ut at amet faucibus bibendum. Velit posuere ornare orci ultrices porta. Sed vestibulum venenatis sed purus sagittis. Neque adipiscing quis faucibus eget amet.</p>

                                <ul class="p-0 mb-0 list-unstyled last-child-none">
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Sapien magna dolor urna ultrices ultrices ultricies enim in.</span>
                                    </li>
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Dui massa ipsum viverra porttitor mi sed vestibulum.</span>
                                    </li>
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Vel duis ligula gravida aenean massa mi ullamcorper.</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="card bg-white rounded-10 border border-white mb-4">
                                <div class="p-20 pb-0">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-1 mb-12">
                                        <h3>Project Discussion</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">
                                                Russell Colon
                                            </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">Marks Stjohn</button>
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-secondary">Juana Thatcher</button>
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-secondary">Raymond Nguyen</button>
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-secondary">Frank Mele</button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <span class="fs-14 text-body d-block mb-3">2025-11-10 09:15 AM</span>
                                </div>

                                <div class="chat-body scroll-bar" style="max-height: 402px; padding: 0 !important;">
                                    <div class="p-20 pb-0">
                                        <ul class="p-0 mb-0 list-unstyled chat-reverse">
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex">
                                                    <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-10">
                                                        <div>
                                                            <p class="lh-1-8 bg-light fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 0 10px 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra ligula non varius curabitur etiam malesuada. Congue eget luctus aliquet consectetur.</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:31 AM</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex text-end">
                                                    <div class="flex-grow-1">
                                                        <div>
                                                            <p class="lh-1-8 bg-primary text-white fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 10px 0 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:30 AM</span>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-10">
                                                        <img src="assets/images/user13.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user13">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex">
                                                    <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-10">
                                                        <div>
                                                            <p class="lh-1-8 bg-light fs-15 d-inline-block bg-for-dark bg-for-dark" style="padding: 10px 15px; border-radius: 0 10px 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra ligula non varius.</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:25 AM</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex text-end">
                                                    <div class="flex-grow-1">
                                                        <div>
                                                            <p class="lh-1-8 bg-primary text-white fs-15 d-inline-block" style="padding: 10px 15px; border-radius: 10px 0 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit.</p>
                                                            <p class="lh-1-8 bg-primary text-white fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 10px 0 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:22 AM</span>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-10">
                                                        <img src="assets/images/user13.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user13">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex">
                                                    <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-10">
                                                        <div>
                                                            <p class="lh-1-8 bg-light fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 0 10px 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra ligula non varius curabitur etiam malesuada.</p>
                                                        </div>
                                                        <div>
                                                            <p class="lh-1-8 bg-light fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 0 10px 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet. 🔥</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:21 AM</span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="mb-20 ps-0">
                                                <div class="d-flex text-end">
                                                    <div class="flex-grow-1">
                                                        <div>
                                                            <p class="lh-1-8 bg-primary text-white fs-15 d-inline-block bg-for-dark" style="padding: 10px 15px; border-radius: 10px 0 10px 10px; margin-bottom: 6px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                        </div>
                                                        <span class="fs-13 d-block">09:20 AM</span>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-10">
                                                        <img src="assets/images/user13.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user13">
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="p-20 pt-0">
                                    <form class="position-relative z-1">
                                        <div class="form-floating">
                                            <input type="text" class="form-control bg-light border-light" style="height: 42px; min-height: 42px; padding: 10px 15px;" id="floatingInput2" placeholder="Type your message....">
                                            <label for="floatingInput2" style="height: 42px; min-height: 42px; padding: 7px 15px;">Type your message....</label>
                                        </div>
                                        <button class="border-0 btn btn-primary p-0 position-absolute top-0 end-0" style="width: 42px; height: 42px;">
                                            <i class="material-symbols-outlined text-white" style="line-height: 42px;">send</i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6">
                            <div class="row">
                                <div class="col-xxl-12 col-lg-5">
                                    <div class="card bg-white rounded-10 border border-white mb-4">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 p-20">
                                            <h3>Team Members</h3>
            
                                            <a href="team-members.html" class="text-decoration-none fs-15 hover-text">View All</a>
                                        </div>
                                        <div class="default-table-area mx-minus-1 table-team-members style-two">
                                            <div class="table-responsive">
                                                <table class="table align-middle">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" class="fw-medium">Member</th>
                                                            <th scope="col" class="fw-medium">Hours</th>
                                                            <th scope="col" class="fw-medium text-start">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="border-0">
                                                                <div class="d-flex align-items-center text-decoration-none">
                                                                    <div class="flex-shrink-0">
                                                                        <img src="assets/images/user12.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user12">
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-12">
                                                                        <h3 class="fw-medium fs-16">Mark Stjohn</h3>
                                                                        <span class="fs-14 text-body fw-normal">Product Manager</span>
                                                                    </div>
                                                                </div>
                                                            </td> 
                                                            <td class="text-body border-0">120 hrs</td> 
                                                            <td class="border-0">
                                                                <span class="fs-14 text-body text-start d-block" style="margin-bottom: 4px;">75%</span>
                                                                <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 5px;">
                                                                    <div class="progress-bar bg-info rounded-0" style="width: 75%; height: 5px;"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="border-0">
                                                                <div class="d-flex align-items-center text-decoration-none">
                                                                    <div class="flex-shrink-0">
                                                                        <img src="assets/images/user13.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user13">
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-12">
                                                                        <h3 class="fw-medium fs-16">Russell Colon</h3>
                                                                        <span class="fs-14 text-body fw-normal">Web Designer</span>
                                                                    </div>
                                                                </div>
                                                            </td> 
                                                            <td class="text-body border-0">89 hrs</td> 
                                                            <td class="border-0">
                                                                <span class="fs-14 text-body text-start d-block" style="margin-bottom: 4px;">55%</span>
                                                                <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="height: 5px;">
                                                                    <div class="progress-bar bg-primary rounded-0" style="width: 55%; height: 5px;"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="border-0">
                                                                <div class="d-flex align-items-center text-decoration-none">
                                                                    <div class="flex-shrink-0">
                                                                        <img src="assets/images/user14.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user14">
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-12">
                                                                        <h3 class="fw-medium fs-16">Juana Thatcher</h3>
                                                                        <span class="fs-14 text-body fw-normal">UI/UX Designer</span>
                                                                    </div>
                                                                </div>
                                                            </td> 
                                                            <td class="text-body border-0">57 hrs</td> 
                                                            <td class="border-0">
                                                                <span class="fs-14 text-body text-start d-block" style="margin-bottom: 4px;">65%</span>
                                                                <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="height: 5px;">
                                                                    <div class="progress-bar bg-warning rounded-0" style="width: 65%; height: 5px;"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="border-0">
                                                                <div class="d-flex align-items-center text-decoration-none">
                                                                    <div class="flex-shrink-0">
                                                                        <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user15">
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-12">
                                                                        <h3 class="fw-medium fs-16">Raymond Nguyen</h3>
                                                                        <span class="fs-14 text-body fw-normal">Lead Developer</span>
                                                                    </div>
                                                                </div>
                                                            </td> 
                                                            <td class="text-body border-0">76 hrs</td> 
                                                            <td class="border-0">
                                                                <span class="fs-14 text-body text-start d-block" style="margin-bottom: 4px;">85%</span>
                                                                <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 5px;">
                                                                    <div class="progress-bar bg-primary-50 rounded-0" style="width: 85%; height: 5px;"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="border-0">
                                                                <div class="d-flex align-items-center text-decoration-none">
                                                                    <div class="flex-shrink-0">
                                                                        <img src="assets/images/user16.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user16">
                                                                    </div>
                                                                    <div class="flex-grow-1 ms-12">
                                                                        <h3 class="fw-medium fs-16">Frank Mele</h3>
                                                                        <span class="fs-14 text-body fw-normal">Angular Developer</span>
                                                                    </div>
                                                                </div>
                                                            </td> 
                                                            <td class="text-body border-0">95 hrs</td> 
                                                            <td class="border-0">
                                                                <span class="fs-14 text-body text-start d-block" style="margin-bottom: 4px;">60%</span>
                                                                <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 5px;">
                                                                    <div class="progress-bar bg-success rounded-0" style="width: 60%; height: 5px;"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xxl-12 col-lg-7">
                                    <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-0">
                                            <h3>Projects Roadmap</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">
                                                    Week
                                                </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">Day</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Week</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Month</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Year</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
        
                                        <div id="projects_roadmap_chart" style="margin-bottom: -13px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Running Projects</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>

                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <div class="flex-shrink-0">
                                        <h3 class="fs-16 mb-2">Hotel Management System</h3>
                                        <span>Deadline: Dec 15, 2025</span>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="text-end ms-auto" style="max-width: 360px;">
                                            <div class="progress rounded-0 mb-2 bg-light" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="height: 10px;">
                                                <div class="progress-bar bg-info rounded-0" style="width: 70%; height: 10px;"></div>
                                            </div>
                                            <p class="fs-16"><span class="text-primary">70% </span>of the total project is complete</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <div class="flex-shrink-0">
                                        <h3 class="fs-16 mb-2">Engineering Lite Touch</h3>
                                        <span>Deadline: Dec 20, 2025</span>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="text-end ms-auto" style="max-width: 360px;">
                                            <div class="progress rounded-0 mb-2 bg-light" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 10px;">
                                                <div class="progress-bar bg-primary rounded-0" style="width: 50%; height: 10px;"></div>
                                            </div>
                                            <p class="fs-16"><span class="text-primary">50% </span>of the total project is complete</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                    <div class="flex-shrink-0">
                                        <h3 class="fs-16 mb-2">Project Monitoring</h3>
                                        <span>Deadline: Dec 30, 2025</span>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="text-end ms-auto" style="max-width: 360px;">
                                            <div class="progress rounded-0 mb-2 bg-light" role="progressbar" aria-label="Basic example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 10px;">
                                                <div class="progress-bar bg-primary-50 rounded-0" style="width: 40%; height: 10px;"></div>
                                            </div>
                                            <p class="fs-16"><span class="text-primary">40% </span>of the total project is complete</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card bg-white rounded-10 border border-white mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 p-20">
                                    <h3>To Do List</h3>

                                    <form class="table-src-form position-relative ms-0">
                                        <input type="text" class="form-control" placeholder="Search here...">
                                        <div class="src-btn position-absolute top-50 start-0 translate-middle-y bg-transparent p-0 border-0">
                                            <span class="material-symbols-outlined">search</span>
                                        </div>
                                    </form>
                                </div>
                                
                                <div class="default-table-area mx-minus-1 table-to-do-list pm-to-do-list">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium pe-0">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault7">
                                                        </div>
                                                    </th>
                                                    <th scope="col" class="fw-medium ps-0">Task ID</th>
                                                    <th scope="col" class="fw-medium">Task Name</th>
                                                    <th scope="col" class="fw-medium">Assigned To</th>
                                                    <th scope="col" class="fw-medium">Due Date</th>
                                                    <th scope="col" class="fw-medium">Priority</th>
                                                    <th scope="col" class="fw-medium">Status</th>
                                                    <th scope="col" class="fw-medium">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault8">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">#951</td> 
                                                    <td class="text-body">Hotel management system</td> 
                                                    <td class="text-secondary">Shawn Kennedy</td> 
                                                    <td class="text-body">15 Nov, 2025</td> 
                                                    <td class="text-body">High</td> 
                                                    <td>
                                                        <span class="text-warning bg-warning bg-opacity-10 fs-15 fw-normal d-inline-block default-badge">In Progress</span>
                                                    </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-primary">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-body">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-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault9">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">#587</td> 
                                                    <td class="text-body">Send proposal to APR Ltd</td> 
                                                    <td class="text-secondary">Roberto Cruz</td> 
                                                    <td class="text-body">14 Nov, 2025</td> 
                                                    <td class="text-body">Medium</td> 
                                                    <td>
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge">Pending</span>
                                                    </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-primary">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-body">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-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault10">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">#618</td> 
                                                    <td class="text-body">Python upgrade</td> 
                                                    <td class="text-secondary">Juli Johnson</td> 
                                                    <td class="text-body">13 Nov, 2025</td> 
                                                    <td class="text-body">High</td> 
                                                    <td>
                                                        <span class="text-primary bg-primary bg-opacity-10 fs-15 fw-normal d-inline-block default-badge">Completed</span>
                                                    </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-primary">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-body">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-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault11">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">#367</td> 
                                                    <td class="text-body">Schedule meeting with Fila</td> 
                                                    <td class="text-secondary">Catalina Engles</td> 
                                                    <td class="text-body">12 Nov, 2025</td> 
                                                    <td class="text-body">Low</td> 
                                                    <td>
                                                        <span class="text-danger bg-danger bg-opacity-10 fs-15 fw-normal d-inline-block default-badge">Not Started</span>
                                                    </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-primary">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-body">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-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault12">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">#761</td> 
                                                    <td class="text-body">Engineering lite touch</td> 
                                                    <td class="text-secondary">Louis Nagle</td> 
                                                    <td class="text-body">11 Nov, 2025</td> 
                                                    <td class="text-body">Medium</td> 
                                                    <td>
                                                        <span class="text-warning bg-warning bg-opacity-10 fs-15 fw-normal d-inline-block default-badge">In Progress</span>	
                                                    </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-primary">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-body">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-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
        
                                    <div class="text-end p-20">
                                        <button class="bg-transparent text-primary fs-16 border-0 p-0" data-bs-toggle="modal" data-bs-target="#exampleModal">+ Add New Task</button>
                                    </div>
                                </div>

                                <!-- Modal Add New Task -->
                                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered rounded-10" style="max-width: 550px;">
                                        <form class="modal-content bg-white">
                                            <div class="modal-header border-border-color-40 p-20">
                                                <h1 class="modal-title fs-18 fw-medium mb-0" id="exampleModalLabel">Add New Task</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body p-20 pb-0">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-20">
                                                            <label class="label">Task Name</label>
                                                            <div class="form-floating">
                                                                <input type="email" class="form-control" id="floatingInput3" placeholder="Task Name">
                                                                <label for="floatingInput3">Task Name</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-20">
                                                            <label class="label">Assigned To</label>
                                                            <div class="form-floating">
                                                                <select class="form-select form-control" id="floatingSelect2" aria-label="Floating label select example">
                                                                    <option selected>Select</option>
                                                                    <option value="1">Juli Johnson</option>
                                                                    <option value="2">Catalina Engles</option>
                                                                    <option value="3">Louis Nagle</option>
                                                                    <option value="4">Michael Marquez</option>
                                                                    <option value="4">Roberto Cruz</option>
                                                                </select>
                                                                <label for="floatingSelect2">Select</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-20">
                                                            <label class="label">Due Date</label>
                                                            <input type="date" class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-20">
                                                            <label class="label">Priority</label>
                                                            <div class="form-floating">
                                                                <select class="form-select form-control" id="floatingSelect3" aria-label="Floating label select example">
                                                                    <option selected>Select</option>
                                                                    <option value="1">Medium</option>
                                                                    <option value="2">Low</option>
                                                                    <option value="3">High</option>
                                                                </select>
                                                                <label for="floatingSelect3">Select</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-20">
                                                            <label class="label">Status</label>
                                                            <div class="form-floating">
                                                                <select class="form-select form-control" id="floatingSelect4" aria-label="Floating label select example">
                                                                    <option selected>Select</option>
                                                                    <option value="1">Pending</option>
                                                                    <option value="2">Completed</option>
                                                                    <option value="3">Not Started</option>
                                                                    <option value="4">In Progress</option>
                                                                </select>
                                                                <label for="floatingSelect4">Select</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0 p-20 pt-0">
                                                <button type="button" class="btn btn-danger fw-normal text-white" data-bs-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary fw-normal text-white">Create</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3" style="margin-bottom: 36.5px;">
                                    <h3>Projects Progress</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 Week
                                        </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>

                                <div class="text-center">
                                    <div id="projects_progress_chart_two" style="margin-bottom: 18px;"></div>
                                </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>