@extends('layouts.default')
@section('content')
<div class="page-title">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li><h1>Core HR</h1></li>
<li class="breadcrumb-item">
<a href="{{ url('index') }}">
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Home
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Core HR</li>
</ol>
</nav>
<a class="text-primary fs-13" data-bs-toggle="offcanvas" href="#addTaskmodal" role="button" aria-controls="addTaskmodal">+ Add Task</a>
</div>
<div class="container-fluid">
<div class="row">

<div class="col-xxl-9 col-xl-8">
<div class="row">

<!-- Start - Employees -->
<div class="col-xl-12">
    <div class="card">
        <div class="card-header border-0 d-sm-flex d-block align-items-center">
            <h4 class="card-title">Employees</h4>
            <div class="clearfix">
                <div class="d-inline-block m-1" id="tableEmpoloyeesExcelBTN"></div>
                <a class="btn btn-primary btn-sm m-1" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">+ Add Employee</a>
                <button type="button" class="btn btn-secondary btn-sm m-1" data-bs-toggle="modal" data-bs-target="#exampleModal1">+ Invite Employee</button>
            </div>
        </div>
        <div class="card-body table-card-body px-0 pt-0 pb-2">
            <div class="table-responsive check-wrapper">
                <table id="empoloyees-tbl" class="table table-sm table-sm-responsive">
                    <thead class="table-light text-nowrap">
                        <tr>
                            <th class="sorting-disabled">
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-all" required="">
                                </div>
                            </th>
                            <th>Employee ID</th>
                            <th class="mw-180">Employee Name</th>
                            <th>Email Address</th>
                            <th>Contact Number</th>
                            <th>Gender</th>
                            <th>Location</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Amelia Rose</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ra@gmail.com</a></td>
                            <td><span>+12 123 456 7890</span></td>
                            <td><span>female</span></td>    
                            <td><span>AZ</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Elijah James</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123    456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>Delhi</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Charlotte Mae</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">rm@gmail.com</a></td>
                            <td><span>+55 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>PA</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Liam Risher</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123 456 7890</span></td>
                            <td><span>Female</span></td>    
                            <td><span>Delhi</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Isabella Claire</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">hr@gmail.com</a></td>
                            <td><span>+22 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>WA</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Ethan Cole</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ma@gmail.com</a></td>
                            <td><span>+62 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>WA</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Sophia Jane</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ar@gmail.com</a></td>
                            <td><span>+62 123 456 7890</span></td>
                            <td><span>Female</span></td>    
                            <td><span>AL</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Henry Mason</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ar@gmail.com</a></td>
                            <td><span>+85 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>AL</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Evelyn Hope</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ej@gmail.com</a></td>
                            <td><span>+69 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>AL</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1018</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Lucas Bennett</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">ta@gmail.com</a></td>
                            <td><span>+78 123 456 7890</span></td>
                            <td><span>Male</span></td>
                            <td><span>NYC</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Amelia Rose</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123 456 7890</span></td>
                            <td><span>Female</span></td>    
                            <td><span>Delhi</span></td>
                            <td><span class="badge badge-sm badge-danger light">Pending</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Elijah James</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>Delhi</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Charlotte Mae</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+255 123 456 7890</span></td>
                            <td><span>Female</span></td>
                            <td><span>USA</span></td>
                            <td><span class="badge badge-sm badge-danger light">Pending</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Liam Risher</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123 456 7890</span></td>
                            <td><span>Male</span></td>
                            <td><span>Delhi</span></td>
                            <td><span class="badge badge-sm badge-success light">Active</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check custom-checkbox">
                                    <input type="checkbox" class="form-check-input check-input" required="">
                                </div>
                            </td>
                            <td><span>1001</span></td>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Isabella Claire</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><a href="javascript:void(0)" class="text-primary">abc@gmail.com</a></td>
                            <td><span>+91 123 456 7890</span></td>
                            <td><span>Male</span></td>  
                            <td><span>USA</span></td>
                            <td><span class="badge badge-sm badge-danger light">Pending</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- End - Employees -->

<div class="col-xl-12">
    <div class="card">
        <div class="card-header border-0 d-flex align-items-center">
            <h4 class="card-title">Attendance</h4>
            <div class="clearfix">
                <div class="d-inline-block m-1" id="tableAttendanceExcelBTN"></div>
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    + Mark Attendance
                </button>
            </div>
        </div>
        <div class="card-body table-card-body px-0 pt-0 pb-0">
            <div class="table-responsive">
                <table class="table table-sm table-days mb-0 table-bottom-borderless">
                    <thead class="table-light">
                        <tr>
                            <th class="mw-180">Employee Name</th>
                            <th class="sorting-disabled">
                                <span class="date">1</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">2</span>
                                <span class="day">Tu</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">3</span>
                                <span class="day">We</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">4</span>
                                <span class="day">Th</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">5</span>
                                <span class="day">Fr</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">6</span>
                                <span class="day">Sa</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">7</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">8</span>
                                <span class="day">Tu</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">9</span>
                                <span class="day">We</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">10</span>
                                <span class="day">Th</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">11</span>
                                <span class="day">Fr</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">12</span>
                                <span class="day">Sa</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">13</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">14</span>
                                <span class="day">Tu</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">15</span>
                                <span class="day">We</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">16</span>
                                <span class="day">Th</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">17</span>
                                <span class="day">Fr</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">18</span>
                                <span class="day">Sa</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">19</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">20</span>
                                <span class="day">Tu</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">21</span>
                                <span class="day">We</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">22</span>
                                <span class="day">Th</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">23</span>
                                <span class="day">Fr</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">24</span>
                                <span class="day">Sa</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">25</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">26</span>
                                <span class="day">Tu</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">27</span>
                                <span class="day">We</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">28</span>
                                <span class="day">Th</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">29</span>
                                <span class="day">Fr</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">30</span>
                                <span class="day">Sa</span>
                            </th>
                            <th class="sorting-disabled">
                                <span class="date">31</span>
                                <span class="day">MO</span>
                            </th>
                            <th class="text-center sorting-disabled">
                                <span class="date">Total</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Lucas Bennett</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Evelyn Hope</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Henry Mason</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Sophia Jane</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Ethan Cole</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Isabella Claire</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Liam Risher</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Charlotte Mae</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Elijah James</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Amelia Rose</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex">
                                    <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-sm me-2" alt="">
                                    <div class="clearfix">
                                        <h6 class="mb-0">Sophia Jane</h6>
                                        <small>Web Designer</small> 
                                    </div>  
                                </div>
                            </td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>    
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td><span class="text-danger"><i class="fa-solid fa-xmark"></i></span></td>
                            <td><span class="text-success"><i class="fa-solid fa-check"></i></span></td>
                            <td class="text-center"><span>28/31</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</div>
</div>

<div class="col-xxl-3 col-xl-4">
<div class="row">

<!-- Start - Attendance -->
<div class="col-xl-12 col-md-6">
    <div class="card">
        <div class="card-header pb-0 border-0">
            <div>
                <h4 class="card-title">Attendance</h4>
            </div>
            <div>
                <select class="selectpicker form-select form-select-sm">
                    <option value="Today">Today</option>
                    <option value="Week">Week</option>
                    <option value="Month">Month</option>
                </select>
            </div>
        </div>
        <div class="card-body">
            <div id="projectChart" class="d-flex justify-content-center"></div>
            <div class="clearfix mt-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="text-black">
                        <i class="fa-solid fa-square text-primary me-1"></i>Completed Projects
                    </div>
                    <span>30</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <div class="text-black">
                        <i class="fa-solid fa-square text-success me-1"></i>Progress Projects
                    </div>
                    <span>40</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <div class="text-black">
                        <i class="fa-solid fa-square text-danger me-1"></i>Cancelled Projects
                    </div>
                    <span>10</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <div class="text-black">
                        <i class="fa-solid fa-square text-warning me-1"></i>Yet to Start
                    </div>
                    <span>20</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End - Attendance -->

<!-- Start - Upcoming Holidays -->
<div class="col-xl-12 col-md-6">
    <div class="card">
        <div class="card-header border-0 pb-2">
            <h4 class="card-title">Upcoming Holidays</h4>
        </div>
        <div class="card-body widget-events p-0">
            <input type="text" class="form-control d-none" id="datetimepicker">
            <div class="clearfix border-top p-3 mt-1 pb-2">
                <h6 class="text-primary mb-1 fw-semibold">EVENTS</h6>
                <div class="dz-scroll height150">
                    <div class="border-bottom d-flex align-items-center py-2">
                        <div class="d-flex align-items-center">
                            <div class="meta-date">
                                <h5 class="mb-0 date">20</h5>
                                <span class="small fw-semibold text-dark">Mon</span>
                            </div>
                            <div class="ms-2">
                                <h6 class="mb-0"><a href="javascript:void(0)">Development Planning</a></h6>
                                <span>w3it Technologies</span>
                            </div>
                        </div>
                        <span class="small ms-auto">12:05 PM</span>
                    </div>
                    <div class="border-bottom d-flex align-items-center py-2">
                        <div class="d-flex align-items-center">
                            <div class="meta-date">
                                <h5 class="mb-0 date">21</h5>
                                <span class="small fw-semibold text-dark">Tues</span>
                            </div>
                            <div class="ms-2">
                                <h6 class="mb-0"><a href="javascript:void(0)">Business Planning</a></h6>
                                <span>w3it Technologies</span>
                            </div>
                        </div>
                        <span class="small ms-auto">12:05 PM</span>
                    </div>
                    <div class="d-flex align-items-center py-2">
                        <div class="d-flex align-items-center">
                            <div class="meta-date">
                                <h5 class="mb-0 date">22</h5>
                                <span class="small fw-semibold text-dark">Mon</span>
                            </div>
                            <div class="ms-2">
                                <h6 class="mb-0"><a href="javascript:void(0)">Software Planning</a></h6>
                                <span>w3it Technologies</span>
                            </div>
                        </div>
                        <span class="small ms-auto">12:05 PM</span>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</div>
<!-- End - Upcoming Holidays -->

</div>
</div>

</div>
</div>

@endsection
@push('modals')
<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="addTaskmodal">
    <div class="offcanvas-header pb-0">
        <h2 class="modal-title fs-5" id="#gridSystemModal1">Add New Task</h2>
        <button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
    <div class="offcanvas-body">
        <form class="row">
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputfirst" class="form-label">Title<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="exampleFormControlInputfirst" placeholder="Title">
            </div>  
            <div class="col-xl-6 mb-3">
                <label class="form-label">Project<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Project</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">JavaScript</option>
                </select>
            </div>  
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputthree" class="form-label">Start Date<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" id="exampleFormControlInputthree">
            </div>
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputfour" class="form-label">End Date<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" id="exampleFormControlInputfour">
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Estimated Hour<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" value="09:30">
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Status<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Status</option>
                    <option value="In Progess">In Progess</option>
                    <option value="Pending">Pending</option>
                    <option value="Completed">Completed</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Priority<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Priority</option>
                    <option value="Hight">Hight</option>
                    <option value="Medium">Medium</option>
                    <option value="Low">Low</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Category<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Category</option>
                    <option value="Designing">Designing</option>
                    <option value="Development">Development</option>
                    <option value="react developer">React Developer</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Permission<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Permission</option>
                    <option value="Public">Public</option>
                    <option value="Private">Private</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Deadline add<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Deadline</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Assigned to<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Assigned</option>
                    <option value="Bernard">Bernard</option>
                    <option value="Sergey Brin">Sergey Brin</option>
                    <option value="Larry Ellison">Larry Ellison</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Responsible Person<span class="text-danger">*</span></label>
                <input name='tagify' class="form-control basic-tagify" value='James, Harry'>
            </div>
            <div class="col-xl-12 mb-3">
                <label class="form-label">Description<span class="text-danger">*</span></label>
                <textarea rows="3" class="form-control"></textarea>
            </div>
            <div class="col-xl-12 mb-3">
                <label class="form-label">Summary<span class="text-danger">*</span></label>
                <textarea rows="3" class="form-control"></textarea>
            </div>
            <div class="col-xl-12">                 
                <button class="btn btn-danger light">Cancel</button>
                <button class="btn btn-primary ms-2">Help Desk</button>
            </div>
        </form>
    </div>
</div>
<!-- End - Modal Add New Task -->
        
        <!-- Start - Add Contacts Modal -->
        <div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="offcanvasExample">
            <div class="offcanvas-header pb-0">
                <h2 class="modal-title fs-5" id="#gridSystemModal">Add Employee</h2>
                <button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="offcanvas-body">
                <div class="mb-3">
                    <label class="form-label">Profile Picture</label>
                    <form action="/employee" id="my-dropzone" class="dropzone" enctype="multipart/form-data">
                         @csrf
                        <div class="dropzone-content">
                            <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M20.5 20V35" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M34.4833 30.6501C36.1088 29.7638 37.393 28.3615 38.1331 26.6644C38.8731 24.9673 39.027 23.0721 38.5703 21.2779C38.1136 19.4836 37.0724 17.8926 35.6111 16.7558C34.1497 15.619 32.3514 15.0013 30.4999 15.0001H28.3999C27.8955 13.0488 26.9552 11.2373 25.6498 9.70171C24.3445 8.16614 22.708 6.94647 20.8634 6.1344C19.0189 5.32233 17.0142 4.93899 15.0001 5.01319C12.9861 5.0874 11.015 5.61722 9.23523 6.56283C7.45541 7.50844 5.91312 8.84523 4.7243 10.4727C3.53549 12.1002 2.73108 13.9759 2.37157 15.959C2.01205 17.9421 2.10678 19.9809 2.64862 21.9222C3.19047 23.8634 4.16534 25.6565 5.49994 27.1667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <div class="fallback">                                                              
                                <input name="file" type="file" multiple>
                            </div>
                        </div>
                    </form> 
                </div>
                <form>
                    <div class="row">
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput1" class="form-label">Employee ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="">
                        </div>  
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput2" class="form-label">Employee Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="exampleFormControlInput2" placeholder="">
                        </div>  
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput3" class="form-label">Employee Email<span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="exampleFormControlInput3" placeholder="">
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput4" class="form-label">Password<span class="text-danger">*</span></label>
                            <input type="password" autocomplete="current-password" class="form-control" id="exampleFormControlInput4" placeholder="">
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">Designation<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="Software Engineer">Software Engineer</option>
                                <option value="Civil Engineer">Civil Engineer</option>
                                <option value="Web Doveloper">Web Doveloper</option>
                            </select>
                        </div>  
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">Department<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="Software">Software</option>
                                <option value="Doit">Doit</option>
                                <option value="Designing">Designing</option>
                            </select>
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">Country<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="Ind">Ind</option>
                                <option value="USA">USA</option>
                                <option value="UK">UK</option>
                            </select>
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput88" class="form-label">Mobile<span class="text-danger">*</span></label>
                            <input type="number" class="form-control type-number" id="exampleFormControlInput88" placeholder="">
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">Gender<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput99" class="form-label">Joining Date<span class="text-danger">*</span></label>
                            <input type="text" class="form-control bs-datepicker" id="exampleFormControlInput99">
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput8" class="form-label">Date of Birth<span class="text-danger">*</span></label>
                            <input type="text" class="form-control bs-datepicker" id="exampleFormControlInput8">
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label for="exampleFormControlInput10" class="form-label">Reporting To<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="exampleFormControlInput10" placeholder="">
                        </div>      
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">Language Select<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="English">English</option>
                                <option value="Hindi">Hindi</option>
                                <option value="Canada">Canada</option>
                            </select>
                        </div>
                        <div class="col-xl-6 mb-3">
                            <label class="form-label">User Role<span class="text-danger">*</span></label>
                            <select class="selectpicker form-select">
                                <option data-display="Select">Please select</option>
                                <option value="html">Parmanent</option>
                                <option value="css">Parttime</option>
                                <option value="javascript">Per Hours</option>
                            </select>
                        </div>
                        <div class="col-xl-12 mb-3">
                            <label class="form-label">Address<span class="text-danger">*</span></label>
                            <textarea rows="2" class="form-control"></textarea>
                        </div>
                        <div class="col-xl-12 mb-3">
                            <label class="form-label">About<span class="text-danger">*</span></label>
                            <textarea rows="2" class="form-control"></textarea>
                        </div>  
                    </div>
                    <div class="clearfix">
                        <button class="btn btn-danger light">Cancel</button>
                        <button class="btn btn-primary me-2">Submit</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- End - Add Contacts Modal -->   
        
        <!-- Start - Add Attendance Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="exampleModalLabel">Add Attendance</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xl-12 mb-3">
                                <label class="form-label">Employee<span class="text-danger">*</span></label>
                                <select class="selectpicker form-select">
                                    <option data-display="Select">Please select</option>
                                    <option value="Julia Koch">Julia Koch</option>
                                    <option value="Gina Reinhart">Gina Reinhart</option>
                                    <option value="Yang Huiyan">Yang Huiyan</option>
                                </select>
                            </div>
                            <div class="col-xl-12 mb-3">
                                <label class="form-label">Attendance Date<span class="text-danger">*</span></label>
                                <input class="form-control bs-datepicker" type="text">
                            </div>
                            <div class="col-xl-6 mb-3">
                                <label class="form-label">In Time <span class="text-danger">*</span></label>
                                <div class="input-group clockpicker">
                                    <input type="text" class="form-control" value="09:30">
                                    <span class="input-group-text">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xl-6 mb-3">
                                <label class="form-label">Out Time <span class="text-danger">*</span></label>
                                <div class="input-group clockpicker">
                                    <input type="text" class="form-control" value="10:30">
                                    <span class="input-group-text">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End - Add Attendance Modal -->
        
        <!-- Start - Invite Customer Modal -->
        <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="exampleModalLabel1">Invite Employee</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xl-12 mb-3">
                                <label class="form-label">Email ID<span class="text-danger">*</span></label>
                                <input type="email" class="form-control" placeholder="hello@gmail.com">
                            </div>
                            <div class="col-xl-12 mb-3">
                                <label class="form-label">Employment date<span class="text-danger">*</span></label>
                                <input class="form-control bs-datepicker" type="text">
                            </div>
                            <div class="col-xl-6 mb-3">
                                <label class="form-label">First Name<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-xl-6 mb-3">
                                <label class="form-label">Last Name<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-xl-12 mb-3">
                                <label class="form-label">Send invitation email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control text-center" placeholder=" + invite ">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
@endpush
@push('scripts')
<script type="text/javascript">
    Dropzone.autoDiscover = false;

const myDropzone = new Dropzone("#my-dropzone", {
    url: "/core-hr/upload", 
    method: "post",
    paramName: "file",
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    init: function () {
        this.on("success", function (file, response) {
            // console.log("Upload success:", response);
        });

        this.on("error", function (file, errorMessage) {
            console.error("Upload error:", errorMessage);
        });
    }
});
</script>
@endpush