<!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="card gradient-bg-2 p-4 pb-0 rounded-10 border-0 mb-4">
                        <div class="row">
                            <div class="col-xxl-6 col-xxxl-12">
                                <div class="pe-xxl-4">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10">Total Employee</h3>
                                                        <h2 class="fs-26 mb-0 lh-1 fw-medium">1,705</h2>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-3">
                                                        <div class="bg-info text-white text-center rounded-circle d-flex justify-content-center align-items-center" style="width: 65px; height: 65px;">
                                                            <i class="material-symbols-outlined fs-30">diversity_3</i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center" style="margin-top: 16px;">
                                                    <p class="mb-0 fs-14">4.75% Increase in last month</p>
                                                    <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">4.75%</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10">New Employee</h3>
                                                        <h2 class="fs-26 mb-0 lh-1 fw-medium">35</h2>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-3">
                                                        <div class="bg-primary-50 text-white text-center rounded-circle d-flex justify-content-center align-items-center" style="width: 65px; height: 65px;">
                                                            <i class="material-symbols-outlined fs-30">groups</i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center" style="margin-top: 16px;">
                                                    <p class="mb-0 fs-14">15.5% Increase in last month</p>
                                                    <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">15.5%</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10">Departures Employee</h3>
                                                        <h2 class="fs-26 mb-0 lh-1 fw-medium">5</h2>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-3">
                                                        <div class="bg-warning text-white text-center rounded-circle d-flex justify-content-center align-items-center" style="width: 65px; height: 65px;">
                                                            <i class="material-symbols-outlined fs-30">supervisor_account</i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center" style="margin-top: 16px;">
                                                    <p class="mb-0 fs-14">5.25% departure in  last month</p>
                                                    <span class="d-flex align-content-center gap-1 bg-danger bg-opacity-10 border border-danger" style="padding: 3px 5px;">
                                                        <i class="material-symbols-outlined fs-14 text-danger">trending_down</i>
                                                        <span class="lh-1 fs-14 text-danger">5.25%</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="card bg-white p-20 rounded-10 border border-white mb-4">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10">Employee Salary</h3>
                                                        <h2 class="fs-26 mb-0 lh-1 fw-medium">$3.5M</h2>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-3">
                                                        <div class="bg-info-40 text-white text-center rounded-circle d-flex justify-content-center align-items-center" style="width: 65px; height: 65px;">
                                                            <i class="material-symbols-outlined fs-30">account_balance</i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center" style="margin-top: 16px;">
                                                    <p class="mb-0 fs-14">10.15% Increase in last month</p>
                                                    <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">10.15%</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-6 col-xxxl-12">
                                <div class="mb-4">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                        <h3 class="text-white">Employee Performance</h3>
    
                                        <div class="dropdown select-dropdown without-border border-style">
                                            <button class="dropdown-toggle bg-transparent text-white fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                Monthly
                                            </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">Yearly</button>
                                                </li>
                                                <li>
                                                    <button class="dropdown-item text-secondary">Weekly</button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div style="margin: 0 -10px -14px -17px;">
                                        <div id="employee_performance_chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-6 col-xxxl-12">
                            <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 mb-20">
                                    <h3>Salary Statistics</h3>

                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-28">more_horiz</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div style="margin: -23px -42px -28px -15px;">
                                    <div id="salary_statistics_chart"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <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 mb-20">
                                            <h3>Top Performers</h3>
        
                                            <div class="dropdown action-opt text-center">
                                                <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="material-symbols-outlined fs-28">more_horiz</i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Day
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Week
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Month
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Year
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <ul class="p-0 m-0 list-unstyled last-child-none">
                                            <li class="d-flex align-content-center justify-content-between mb-12">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user6.jpg" class="rounded-circle" style="width: 30px; height: 30px;" alt="user6">
                                                    </div>
                                                    <div class="flex-grow-1 ms-10">
                                                        <h3 class="fs-16">Robert Brown <span class="fw-normal text-body">(Sales)</span></h3>
                                                    </div>
                                                </div>
                                                <span class="fs-16 text-primary-50">98%</span>
                                            </li>
                                            <li class="d-flex align-content-center justify-content-between mb-12">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user18.jpg" class="rounded-circle" style="width: 30px; height: 30px;" alt="user18">
                                                    </div>
                                                    <div class="flex-grow-1 ms-10">
                                                        <h3 class="fs-16">Mickie Martinez <span class="fw-normal text-body">(Marketing)</span></h3>
                                                    </div>
                                                </div>
                                                <span class="fs-16 text-primary-50">95%</span>
                                            </li>
                                            <li class="d-flex align-content-center justify-content-between mb-12">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user19.jpg" class="rounded-circle" style="width: 30px; height: 30px;" alt="user19">
                                                    </div>
                                                    <div class="flex-grow-1 ms-10">
                                                        <h3 class="fs-16">Phillip Mainesl <span class="fw-normal text-body">(IT)</span></h3>
                                                    </div>
                                                </div>
                                                <span class="fs-16 text-primary-50">93%</span>
                                            </li>
                                            <li class="d-flex align-content-center justify-content-between mb-12">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user20.jpg" class="rounded-circle" style="width: 30px; height: 30px;" alt="user20">
                                                    </div>
                                                    <div class="flex-grow-1 ms-10">
                                                        <h3 class="fs-16">Elaine Acevedo <span class="fw-normal text-body">(Finance)</span></h3>
                                                    </div>
                                                </div>
                                                <span class="fs-16 text-primary-50">90%</span>
                                            </li>
                                            <li class="d-flex align-content-center justify-content-between mb-12">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 30px; height: 30px;" alt="user15">
                                                    </div>
                                                    <div class="flex-grow-1 ms-10">
                                                        <h3 class="fs-16">Richard Knight <span class="fw-normal text-body">(Developer)</span></h3>
                                                    </div>
                                                </div>
                                                <span class="fs-16 text-primary-50">88%</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <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 mb-20">
                                            <h3>Employee Structure</h3>
        
                                            <div class="dropdown action-opt text-center">
                                                <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="material-symbols-outlined fs-28">more_horiz</i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Day
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Week
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Month
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Year
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div style="margin: -8px 0px -6px 0;">
                                            <div id="employee_structure_chart"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <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-2">
                                            <h3>Total Applications</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 align-items-end gap-2">
                                            <h2 class="lh-1 fs-26 mb-0 fw-medium">150</h2>
                                            <span class="fs-14 fw-normal text-body">20% Increase in last month</span>
                                        </div>
                                        <div style="margin: 0px -11px -29px -16px;">
                                            <div id="total_applications_chart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <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-2">
                                            <h3>Applications Received</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 align-items-end gap-2">
                                            <h2 class="lh-1 fs-26 mb-0 fw-medium">115</h2>
                                            <span class="fs-14 fw-normal text-body">15% Increase from last month</span>
                                        </div>
                                        <div id="applications_received_chart" style="height: 150px;"></div>
                                    </div>
                                </div>
                            </div>

                            <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>Upcoming Interview</h3>

                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-28">more_horiz</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="default-table-area mx-minus-1 style-two table-upcoming-interview">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium">Name</th>
                                                    <th scope="col" class="fw-medium">Position</th>
                                                    <th scope="col" class="fw-medium">Date</th>
                                                    <th scope="col" class="fw-medium">Time</th>
                                                    <th scope="col" class="fw-medium text-start">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user1">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fw-medium mb-0 fs-16">Carlos Daley</h3>
                                                                <span class="text-primary fs-14">daley@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body ps-0">Software Developer</td> 
                                                    <td class="text-body">2025-10-08</td> 
                                                    <td class="text-body">10:00 AM</td> 
                                                    <td class="text-start">
                                                        <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Scheduled</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user2.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user2">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fw-medium mb-0 fs-16">Dorothy Young</h3>
                                                                <span class="text-primary fs-14">young@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body ps-0">Marketing Manager</td> 
                                                    <td class="text-body">2025-10-09</td> 
                                                    <td class="text-body">2:00 PM</td> 
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user3.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user3">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fw-medium mb-0 fs-16">Greg Woody</h3>
                                                                <span class="text-primary fs-14">greg@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body ps-0">Sales Executive</td> 
                                                    <td class="text-body">2025-10-10</td> 
                                                    <td class="text-body">11:00 AM</td> 
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user4.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user4">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fw-medium mb-0 fs-16">Deborah Rosol</h3>
                                                                <span class="text-primary fs-14">rosol@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body ps-0">IT Specialist</td> 
                                                    <td class="text-body">2025-10-11</td> 
                                                    <td class="text-body">9:30 AM</td> 
                                                    <td class="text-start">
                                                        <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Scheduled</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user5.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user5">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fw-medium mb-0 fs-16">Kendall Allen</h3>
                                                                <span class="text-primary fs-14">allen@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body ps-0">Financial Analyst</td> 
                                                    <td class="text-body">2025-10-12</td> 
                                                    <td class="text-body">3:00 PM</td> 
                                                    <td class="text-start">
                                                        <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Scheduled</span>
                                                    </td> 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
        
                                    <div class="d-flex justify-content-center justify-content-sm-between align-items-center text-center flex-wrap gap-2 showing-wrap pt-15 p-20">
                                        <span class="fs-15">Showing 1 to 5 of 24 entries</span>
        
                                        <nav class="custom-pagination" aria-label="Page navigation example">
                                            <ul class="pagination mb-0 justify-content-center">
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Previous">
                                                        <i class="material-symbols-outlined">west</i>
                                                    </button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link active">1</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">2</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">3</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Next">
                                                        <i class="material-symbols-outlined">east</i>
                                                    </button>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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>Employees</h3>

                            <div class="d-flex align-items-center">
                                <form class="table-src-form position-relative m-0">
                                    <input type="text" class="form-control w-344" placeholder="Search">
                                    <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 class="dropdown select-dropdown without-border ms-1">
                                    <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                        All Employee
                                    </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">Full Time</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-secondary">Internship</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-secondary">Part Time</button>
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-secondary">Remote</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div class="default-table-area mx-minus-1 style-two table-employees">
                            <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">Employee ID</th>
                                            <th scope="col" class="fw-medium">Employee Name</th>
                                            <th scope="col" class="fw-medium ps-0">Email</th>
                                            <th scope="col" class="fw-medium">Contact</th>
                                            <th scope="col" class="fw-medium">Department</th>
                                            <th scope="col" class="fw-medium">Position</th>
                                            <th scope="col" class="fw-medium">Hire Date</th>
                                            <th scope="col" class="fw-medium">Status</th>
                                            <th scope="col" class="fw-medium text-start">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">#ARP-001</td> 
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user21.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user21">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h3 class="fw-medium mb-0 fs-16">Marcia Baker</h3>
                                                    </div>
                                                </div>
                                            </td> 
                                            <td class="text-primary-30 ps-0">marcia@example.com</td> 
                                            <td class="text-body">(929) 558-6655</td> 
                                            <td class="text-body">Sales</td> 
                                            <td class="text-body">Sales Executive</td> 
                                            <td class="text-body">2020-05-15</td> 
                                            <td>
                                                <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Full Time</span>
                                            </td> 
                                            <td>
                                                <div class="d-flex justify-content-start" 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">drive_file_rename_outline</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="flexCheckDefault8">
                                                </div>
                                            </td>
                                            <td class="text-body ps-0">#ARP-002</td> 
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user22.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user22">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h3 class="fw-medium mb-0 fs-16">Carolyn Barnes</h3>
                                                    </div>
                                                </div>
                                            </td> 
                                            <td class="text-primary-30 ps-0">barnes@example.com</td> 
                                            <td class="text-body">(555) 332-5598</td> 
                                            <td class="text-body">Marketing</td> 
                                            <td class="text-body">Marketing Manager</td> 
                                            <td class="text-body">2019-11-01</td> 
                                            <td>
                                                <span class="text-primary bg-primary bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-primary">Internship</span>
                                            </td> 
                                            <td>
                                                <div class="d-flex justify-content-start" 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">drive_file_rename_outline</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="flexCheckDefault8">
                                                </div>
                                            </td>
                                            <td class="text-body ps-0">#ARP-003</td> 
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user23.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user23">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h3 class="fw-medium mb-0 fs-16">Donna Miller</h3>
                                                    </div>
                                                </div>
                                            </td> 
                                            <td class="text-primary-30 ps-0">donna@example.com</td> 
                                            <td class="text-body">(222) 989-7728</td> 
                                            <td class="text-body">IT</td> 
                                            <td class="text-body">IT Specialist</td> 
                                            <td class="text-body">2021-03-10</td> 
                                            <td>
                                                <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Part Time</span>
                                            </td> 
                                            <td>
                                                <div class="d-flex justify-content-start" 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">drive_file_rename_outline</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="flexCheckDefault8">
                                                </div>
                                            </td>
                                            <td class="text-body ps-0">#ARP-004</td> 
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user24.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user24">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h3 class="fw-medium mb-0 fs-16">Barbara Cross</h3>
                                                    </div>
                                                </div>
                                            </td> 
                                            <td class="text-primary-30 ps-0">cross@example.com</td> 
                                            <td class="text-body">(455) 775-4499</td> 
                                            <td class="text-body">Finance</td> 
                                            <td class="text-body">Financial Analyst</td> 
                                            <td class="text-body">2022-01-20</td> 
                                            <td>
                                                <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Full Time</span>
                                            </td> 
                                            <td>
                                                <div class="d-flex justify-content-start" 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">drive_file_rename_outline</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="flexCheckDefault8">
                                                </div>
                                            </td>
                                            <td class="text-body ps-0">#ARP-005</td> 
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user25.jpg" class="rounded-circle" style="width: 35px; height: 35px;" alt="user25">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h3 class="fw-medium mb-0 fs-16">Rebecca Block</h3>
                                                    </div>
                                                </div>
                                            </td> 
                                            <td class="text-primary-30 ps-0">block@example.com</td> 
                                            <td class="text-body">(332) 6684-9807</td> 
                                            <td class="text-body">HR</td> 
                                            <td class="text-body">HR Manager</td> 
                                            <td class="text-body">2017-09-12</td> 
                                            <td>
                                                <span class="text-danger bg-danger bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-danger">Remote</span>
                                            </td> 
                                            <td>
                                                <div class="d-flex justify-content-start" 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">drive_file_rename_outline</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="d-flex justify-content-center justify-content-sm-between align-items-center text-center flex-wrap gap-2 showing-wrap pt-15 p-20">
                                <span class="fs-15">Showing 1 to 5 of 24 entries</span>

                                <nav class="custom-pagination" aria-label="Page navigation example">
                                    <ul class="pagination mb-0 justify-content-center">
                                        <li class="page-item">
                                            <button class="page-link icon" aria-label="Previous">
                                                <i class="material-symbols-outlined">west</i>
                                            </button>
                                        </li>
                                        <li class="page-item">
                                            <button class="page-link active">1</button>
                                        </li>
                                        <li class="page-item">
                                            <button class="page-link">2</button>
                                        </li>
                                        <li class="page-item">
                                            <button class="page-link">3</button>
                                        </li>
                                        <li class="page-item">
                                            <button class="page-link icon" aria-label="Next">
                                                <i class="material-symbols-outlined">east</i>
                                            </button>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-8 col-xxxl-12">
                            <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>Recent Payroll</h3>

                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-28">more_horiz</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="default-table-area mx-minus-1 style-two table-recent-payroll">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium">Name</th>
                                                    <th scope="col" class="fw-medium">Position</th>
                                                    <th scope="col" class="fw-medium">Pay Date</th>
                                                    <th scope="col" class="fw-medium">Gross Pay</th>
                                                    <th scope="col" class="fw-medium">Deductions</th>
                                                    <th scope="col" class="fw-medium">Net Pay</th>
                                                    <th scope="col" class="fw-medium text-start">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user26.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user26">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-medium mb-0 fs-16">Ronald Avila</h3>
                                                                <span class="text-primary fs-14">avila@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body">Software Developer</td> 
                                                    <td class="text-body">2025-10-08</td> 
                                                    <td class="text-body">$5,000</td>  
                                                    <td class="text-body">$500</td>  
                                                    <td class="text-body">$4,500</td>  
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Paid</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user27.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user27">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-medium mb-0 fs-16">Lupe Stewart</h3>
                                                                <span class="text-primary fs-14">lupe@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body">Marketing Manager</td> 
                                                    <td class="text-body">2025-10-09</td> 
                                                    <td class="text-body">$4,200</td>  
                                                    <td class="text-body">$400</td>  
                                                    <td class="text-body">$3,800</td>  
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Paid</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user28.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user28">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-medium mb-0 fs-16">Keith Bennett</h3>
                                                                <span class="text-primary fs-14">keith@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body">Sales Executive</td> 
                                                    <td class="text-body">2025-10-10</td> 
                                                    <td class="text-body">$3,800</td>  
                                                    <td class="text-body">$380</td>  
                                                    <td class="text-body">$3,420</td>  
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Paid</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user29.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user29">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-medium mb-0 fs-16">Isaac Lazaro</h3>
                                                                <span class="text-primary fs-14">isaac@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body">IT Specialist</td> 
                                                    <td class="text-body">2025-10-11</td> 
                                                    <td class="text-body">$4,500</td>  
                                                    <td class="text-body">$450</td>  
                                                    <td class="text-body">$4,050</td>  
                                                    <td class="text-start">
                                                        <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Pending</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user30.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user30">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-medium mb-0 fs-16">Michael Green</h3>
                                                                <span class="text-primary fs-14">green@example.com</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body">Financial Analyst</td> 
                                                    <td class="text-body">2025-10-12</td> 
                                                    <td class="text-body">$6,000</td>  
                                                    <td class="text-body">$600</td>  
                                                    <td class="text-body">$5,400</td>  
                                                    <td class="text-start">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Paid</span>
                                                    </td> 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
        
                                    <div class="d-flex justify-content-center justify-content-sm-between align-items-center text-center flex-wrap gap-2 showing-wrap pt-15 p-20">
                                        <span class="fs-15">Showing 1 to 5 of 24 entries</span>
        
                                        <nav class="custom-pagination" aria-label="Page navigation example">
                                            <ul class="pagination mb-0 justify-content-center">
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Previous">
                                                        <i class="material-symbols-outlined">west</i>
                                                    </button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link active">1</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">2</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">3</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Next">
                                                        <i class="material-symbols-outlined">east</i>
                                                    </button>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-4 col-xxxl-12">
                            <div class="row">
                                <div class="col-xxxl-6 col-xxl-12">
                                    <div class="card bg-light-60 rounded-10 border border-light-60 p-20 mb-4">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Attendance Rate</h3>
        
                                            <div class="dropdown select-dropdown without-border">
                                                <button class="dropdown-toggle bg-transparent text-body fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Last 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">Last Day</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Last Week</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Last Month</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">Last Year</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div style="margin: -25px -22px -16px -16px;">
                                            <div id="attendance_rate_chart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xxxl-6 col-xxl-12">
                                    <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 pb-0">
                                            <h3>Leave Requests</h3>
        
                                            <div class="dropdown action-opt text-center">
                                                <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="material-symbols-outlined fs-28">more_horiz</i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Day
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Week
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Month
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="javascript:;">
                                                            Last Year
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="p-20">
                                            <div class="default-table-area mx-minus-1 without-header table-leave-requests" style="max-height: 194.5px;" data-simplebar>
                                                <div class="table-responsive">
                                                    <table class="table align-middle table-borderless">
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Carol Boyer <span class="fw-normal text-body">(Sales)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Vacation</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Pending</span>
                                                                </td> 
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0" style="padding: 5px;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Liz May <span class="fw-normal text-body">(IT)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Maternity Leave</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Approved</span>
                                                                </td> 
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0" style="padding: 5px;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Emma Dorsey <span class="fw-normal text-body">(Finance)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Personal Leave</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-danger bg-danger bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-danger">Denied</span>
                                                                </td> 
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0" style="padding: 5px;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Carol Boyer <span class="fw-normal text-body">(Sales)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Vacation</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-warning-40 bg-warning-40 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-warning-40">Pending</span>
                                                                </td> 
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0" style="padding: 5px;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Liz May <span class="fw-normal text-body">(IT)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Maternity Leave</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Approved</span>
                                                                </td> 
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0" style="padding: 5px;"></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="text-secondary fw-medium border-0 bg-light" style="padding: 15.5px 10px; border-radius:10px 0 0 10px;">Emma Dorsey <span class="fw-normal text-body">(Finance)</span></td> 
                                                                <td class="text-body border-0 bg-light" style="padding: 15.5px 10px;">Personal Leave</td>
                                                                <td class="border-0 bg-light" style="padding: 15.5px 10px; border-radius: 0 10px 10px 0;">
                                                                    <span class="text-danger bg-danger bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-danger">Denied</span>
                                                                </td> 
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </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>