@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Dashboard</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">Dashboard</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">
                        <div class="row">
                            
                            <!-- Start - Total Deposit -->
                            <div class="col-xl-3 col-sm-6">
                                <div class="card overflow-hidden">
                                    <div class="card-body p-0">
                                        <div class="d-flex justify-content-between pb-0 px-3 pt-3">
                                            <div class="clearfix">
                                                <h6 class="mb-0">Total Deposit</h6>
                                                <h3>$1200.00</h3>
                                            </div>
                                            <div class="avatar avatar-sm avatar-primary border-0">
                                                <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="var(--bs-primary)"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <div id="NewCustomers"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - Total Deposit -->
                            
                            <!-- Start - All Projects -->
                            <div class="col-xl-3 col-sm-6">
                                <div class="card">
                                    <div class="card-body d-flex align-items-center py-2 px-3 ps-0">
                                        <div id="AllProject"></div>
                                        <div class="clearfix">
                                            <h6>All Projects</h6>
                                            <div class="fs-13"><i class="fa-solid fa-square text-success me-1 fs-12"></i> Compete </div>
                                            <div class="fs-13"><i class="fa-solid fa-square text-primary me-1 fs-12"></i> Pending </div>
                                            <div class="fs-13"><i class="fa-solid fa-square text-secondary me-1 fs-12"></i> Not Start </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - All Projects -->
                            
                            <!-- Start - Total Expenses -->
                            <div class="col-xl-3 col-sm-6">
                                <div class="card">
                                    <div class="card-body p-0">
                                        <div class="d-flex justify-content-between pb-0 px-3 pt-3">
                                            <div class="clearfix">
                                                <h6 class="mb-0">Total Expenses</h6>
                                                <h3>$1200.00</h3>
                                            </div>
                                            <div class="avatar avatar-sm avatar-danger border-0">
                                                <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M11.4642 13.7074C11.4759 12.1252 10.8504 10.8738 9.60279 9.99009C8.6392 9.30968 7.46984 8.95476 6.33882 8.6137C3.98274 7.89943 3.29927 7.52321 3.29927 6.3965C3.29927 5.14147 4.93028 4.69493 6.32655 4.69493C7.34341 4.69493 8.51331 5.01109 9.23985 5.47964L10.6802 3.24887C9.73069 2.6333 8.43112 2.21342 7.14783 2.0831V0H4.49076V2.22918C2.12884 2.74876 0.640949 4.29246 0.640949 6.3965C0.640949 7.87005 1.25327 9.03865 2.45745 9.86289C3.37331 10.4921 4.49028 10.83 5.56927 11.1572C7.88027 11.8557 8.81873 12.2813 8.80805 13.691L8.80799 13.7014C8.80799 14.8845 7.24005 15.3051 5.89676 15.3051C4.62786 15.3051 3.248 14.749 2.46582 13.9222L0.535522 15.7481C1.52607 16.7957 2.96523 17.5364 4.4907 17.8267V20.0001H7.14783V17.8735C9.7724 17.4978 11.4616 15.9177 11.4642 13.7074Z" fill="var(--bs-danger)"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <div id="NewExperience"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - Total Expenses -->
                            
                            <!-- Start - Total Deposit -->
                            <div class="col-xl-3 col-sm-6">
                                <div class="card">
                                    <div class="card-body px-3 pt-3">
                                        <div class="d-flex justify-content-between">
                                            <div class="clearfix">
                                                <h6 class="mb-0">Total Deposit</h6>
                                                <h3>20</h3>
                                            </div>
                                            <div class="avatar avatar-sm avatar-primary border-0">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M16.3787 1.875H15.625V1.25C15.625 1.08424 15.5592 0.925268 15.4419 0.808058C15.3247 0.690848 15.1658 0.625 15 0.625C14.8342 0.625 14.6753 0.690848 14.5581 0.808058C14.4408 0.925268 14.375 1.08424 14.375 1.25V1.875H10.625V1.25C10.625 1.08424 10.5592 0.925268 10.4419 0.808058C10.3247 0.690848 10.1658 0.625 10 0.625C9.83424 0.625 9.67527 0.690848 9.55806 0.808058C9.44085 0.925268 9.375 1.08424 9.375 1.25V1.875H5.625V1.25C5.625 1.08424 5.55915 0.925268 5.44194 0.808058C5.32473 0.690848 5.16576 0.625 5 0.625C4.83424 0.625 4.67527 0.690848 4.55806 0.808058C4.44085 0.925268 4.375 1.08424 4.375 1.25V1.875H3.62125C2.99266 1.87599 2.3901 2.12614 1.94562 2.57062C1.50114 3.0151 1.25099 3.61766 1.25 4.24625V17.0037C1.25099 17.6323 1.50114 18.2349 1.94562 18.6794C2.3901 19.1239 2.99266 19.374 3.62125 19.375H16.3787C17.0073 19.374 17.6099 19.1239 18.0544 18.6794C18.4989 18.2349 18.749 17.6323 18.75 17.0037V4.24625C18.749 3.61766 18.4989 3.0151 18.0544 2.57062C17.6099 2.12614 17.0073 1.87599 16.3787 1.875ZM17.5 17.0037C17.499 17.3008 17.3806 17.5854 17.1705 17.7955C16.9604 18.0056 16.6758 18.124 16.3787 18.125H3.62125C3.32418 18.124 3.03956 18.0056 2.8295 17.7955C2.61944 17.5854 2.50099 17.3008 2.5 17.0037V4.24625C2.50099 3.94918 2.61944 3.66456 2.8295 3.4545C3.03956 3.24444 3.32418 3.12599 3.62125 3.125H4.375V3.75C4.375 3.91576 4.44085 4.07473 4.55806 4.19194C4.67527 4.30915 4.83424 4.375 5 4.375C5.16576 4.375 5.32473 4.30915 5.44194 4.19194C5.55915 4.07473 5.625 3.91576 5.625 3.75V3.125H9.375V3.75C9.375 3.91576 9.44085 4.07473 9.55806 4.19194C9.67527 4.30915 9.83424 4.375 10 4.375C10.1658 4.375 10.3247 4.30915 10.4419 4.19194C10.5592 4.07473 10.625 3.91576 10.625 3.75V3.125H14.375V3.75C14.375 3.91576 14.4408 4.07473 14.5581 4.19194C14.6753 4.30915 14.8342 4.375 15 4.375C15.1658 4.375 15.3247 4.30915 15.4419 4.19194C15.5592 4.07473 15.625 3.91576 15.625 3.75V3.125H16.3787C16.6758 3.12599 16.9604 3.24444 17.1705 3.4545C17.3806 3.66456 17.499 3.94918 17.5 4.24625V17.0037Z" fill="var(--bs-primary)"/>
                                                    <path d="M7.68311 7.05812L6.24999 8.49125L5.44186 7.68312C5.38421 7.62343 5.31524 7.57581 5.23899 7.54306C5.16274 7.5103 5.08073 7.49306 4.99774 7.49234C4.91475 7.49162 4.83245 7.50743 4.75564 7.53886C4.67883 7.57028 4.60905 7.61669 4.55037 7.67537C4.49168 7.73406 4.44528 7.80384 4.41385 7.88065C4.38243 7.95746 4.36661 8.03976 4.36733 8.12275C4.36805 8.20573 4.3853 8.28775 4.41805 8.364C4.45081 8.44025 4.49842 8.50922 4.55811 8.56687L5.80811 9.81687C5.92532 9.93404 6.08426 9.99986 6.24999 9.99986C6.41572 9.99986 6.57466 9.93404 6.69186 9.81687L8.56686 7.94187C8.68071 7.82399 8.74371 7.66612 8.74229 7.50224C8.74086 7.33837 8.67513 7.18161 8.55925 7.06573C8.44337 6.94985 8.28661 6.88412 8.12274 6.8827C7.95887 6.88127 7.80099 6.94427 7.68311 7.05812Z" fill="var(--bs-primary)"/>
                                                    <path d="M15 8.125H10.625C10.4592 8.125 10.3003 8.19085 10.1831 8.30806C10.0658 8.42527 10 8.58424 10 8.75C10 8.91576 10.0658 9.07473 10.1831 9.19194C10.3003 9.30915 10.4592 9.375 10.625 9.375H15C15.1658 9.375 15.3247 9.30915 15.4419 9.19194C15.5592 9.07473 15.625 8.91576 15.625 8.75C15.625 8.58424 15.5592 8.42527 15.4419 8.30806C15.3247 8.19085 15.1658 8.125 15 8.125Z" fill="var(--bs-primary)"/>
                                                    <path d="M7.68311 12.6831L6.24999 14.1162L5.44186 13.3081C5.38421 13.2484 5.31524 13.2008 5.23899 13.1681C5.16274 13.1353 5.08073 13.1181 4.99774 13.1173C4.91475 13.1166 4.83245 13.1324 4.75564 13.1639C4.67883 13.1953 4.60905 13.2417 4.55037 13.3004C4.49168 13.3591 4.44528 13.4288 4.41385 13.5056C4.38243 13.5825 4.36661 13.6648 4.36733 13.7477C4.36805 13.8307 4.3853 13.9127 4.41805 13.989C4.45081 14.0653 4.49842 14.1342 4.55811 14.1919L5.80811 15.4419C5.92532 15.559 6.08426 15.6249 6.24999 15.6249C6.41572 15.6249 6.57466 15.559 6.69186 15.4419L8.56686 13.5669C8.68071 13.449 8.74371 13.2911 8.74229 13.1272C8.74086 12.9634 8.67513 12.8066 8.55925 12.6907C8.44337 12.5749 8.28661 12.5091 8.12274 12.5077C7.95887 12.5063 7.80099 12.5693 7.68311 12.6831Z" fill="var(--bs-primary)"/>
                                                    <path d="M15 13.75H10.625C10.4592 13.75 10.3003 13.8158 10.1831 13.9331C10.0658 14.0503 10 14.2092 10 14.375C10 14.5408 10.0658 14.6997 10.1831 14.8169C10.3003 14.9342 10.4592 15 10.625 15H15C15.1658 15 15.3247 14.9342 15.4419 14.8169C15.5592 14.6997 15.625 14.5408 15.625 14.375C15.625 14.2092 15.5592 14.0503 15.4419 13.9331C15.3247 13.8158 15.1658 13.75 15 13.75Z" fill="var(--bs-primary)"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="mt-0">
                                            <div class="d-flex justify-content-between mb-2">
                                                <p class="mb-0">Tasks Not Finished</p>
                                                <p class="mb-0">20/28</p>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-primary" style="width: 50%;" role="progressbar"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - Total Deposit -->
                            
                            <!-- Start - Projects Overview -->
                            <div class="col-xl-8">
                                <div class="card overflow-hidden">
                                    <div class="card-header border-0 pb-0 flex-wrap">
                                        <h4 class="card-title">Projects Overview</h4>
                                        <ul class="nav nav-pills nav-pills-sm nav-pills-bg gap-2 mix-chart-tab" id="pills-tab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" data-series="week" id="pills-week-tab" data-bs-toggle="pill" data-bs-target="#pills-week" type="button" role="tab"  aria-selected="true">Week</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" data-series="month" id="pills-month-tab" data-bs-toggle="pill" data-bs-target="#pills-month" type="button" role="tab"  aria-selected="false">Month</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" data-series="year" id="pills-year-tab" data-bs-toggle="pill" data-bs-target="#pills-year" type="button" role="tab"  aria-selected="false">Year</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" data-series="all" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab" aria-selected="false">All</button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-body p-0">
                                        <div id="overiewChart"></div>
                                    </div>
                                    <div class="card-footer p-0 border-0">
                                        <div class="row text-center g-0">
                                            <div class="col-sm-3 col-6 border-end border-top p-3">
                                                <h5 class="mb-0">12,721</h5>
                                                <span>Number of Projects</span>
                                            </div>
                                            <div class="col-sm-3 col-6 border-end border-top p-3">
                                                <h5 class="mb-0 text-primary">721</h5>
                                                <span>Active Projects</span>
                                            </div>
                                            <div class="col-sm-3 col-6 border-end border-top p-3">
                                                <h5 class="mb-0">$2,50,523</h5>
                                                <span>Revenue</span>
                                            </div>
                                            <div class="col-sm-3 col-6 border-top p-3">
                                                <h5 class="mb-0 text-success">12,275h</h5>
                                                <span>Working Hours</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - Projects Overview -->
                            
                            <!-- Start - My To Do Items -->
                            <div class="col-xl-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">My To Do Items</h4>
                                        <div class="clearfix">
                                            <a href="javascript:void(0);" class="text-primary me-2">View All</a>
                                            <a href="javascript:void(0);" class="text-black">+ Add To Do</a>
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="list-group list-group-flush dz-draggable dropzoneContainer dz-scroll height380">
                                            <div class="list-group-item draggable p-3">
                                                <span class="text-warning d-block mb-2">
                                                    <svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.61051 15.3276H14.3978C15.5843 15.3276 16.329 14.0451 15.7395 13.0146L10.35 3.59085C9.75676 2.5536 8.26126 2.55285 7.66726 3.5901L2.26876 13.0139C1.67926 14.0444 2.42326 15.3276 3.61051 15.3276Z" stroke="var(--bs-warning)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M9.00189 10.0611V7.7361" stroke="var(--bs-warning)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M8.99625 12.375H9.00375" stroke="var(--bs-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                    Latest to do's
                                                </span>
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck1">
                                                                <label class="form-check-label" for="toDoCheck1">Compete this projects Monday</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-group-item draggable p-3">
                                                <span class="text-success d-block mb-2">
                                                    <svg class="me-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M15 4.5L6.75 12.75L3 9" stroke="var(--bs-success)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                    Latest finished to do's
                                                </span>
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck2">
                                                                <label class="form-check-label" for="toDoCheck2">Apply for more jobs</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-group-item draggable p-3">
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck3">
                                                                <label class="form-check-label text-black" for="toDoCheck3">multilanguage support</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-group-item draggable p-3">
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck4">
                                                                <label class="form-check-label text-black" for="toDoCheck4">Check Figma design</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-group-item draggable p-3">
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck5">
                                                                <label class="form-check-label text-black" for="toDoCheck5">Compete this projects Monday</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-group-item draggable p-3">
                                                <div class="d-flex justify-content-between gap-2">
                                                    <div class="d-flex gap-3">
                                                        <div class="draggable-handle">
                                                            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="4" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="3" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="6" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="9" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="12" width="1" height="1" fill="var(--bs-body-color)"/>
                                                                <rect x="8" y="15" width="1" height="1" fill="var(--bs-body-color)"/>
                                                            </svg>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="toDoCheck6">
                                                                <label class="form-check-label text-black" for="toDoCheck6">Compete this projects Monday</label>
                                                            </div>
                                                            <span>2023-12-26 07:15:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <div class="btn btn-square btn-danger light btn-sm">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </div>
                                                        <div class="btn btn-square btn-primary light btn-sm">
                                                            <i class="fa fa-pen "></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End - My To Do Items -->
                            
                        </div>
                    </div>
                    
                    <!-- Start - Total Earning -->
                    <div class="col-xxl-3 col-xl-4 col-lg-6 order-1 order-xxl-0">
                        <div class="card">
                            <div class="card-header border-0 pb-0">
                                <h4 class="card-title">Total Earning</h4>
                            </div>
                            <div class="card-body px-0 overflow-hidden d-flex flex-column justify-content-between pt-4 pb-2">
                                <div class="clearfix">
                                    <h2 class="text-center fw-semibold display-6 mb-0">$6,743.00</h2>
                                    <ul class="nav nav-underline nav-text-body mb-3 earning-chart justify-content-center" id="pills-tab1" role="tablist">
                                        <li class="nav-item px-2" role="presentation">
                                            <button class="nav-link py-2 px-0 border-3 m-0 active" data-series="day" id="pills-day-tab1" data-bs-toggle="pill" data-bs-target="#pills-day1" type="button" role="tab" aria-selected="true">Day</button>
                                        </li>
                                        <li class="nav-item px-2" role="presentation">
                                            <button class="nav-link py-2 px-0 border-3 m-0" id="pills-week-tab1" data-series="week" data-bs-toggle="pill" data-bs-target="#pills-week1" type="button" role="tab" aria-selected="false">Week</button>
                                        </li>
                                        <li class="nav-item px-2" role="presentation">
                                            <button class="nav-link py-2 px-0 border-3 m-0" id="pills-month-tab1" data-series="month" data-bs-toggle="pill" data-bs-target="#pills-month1" type="button" role="tab" aria-selected="false">Month</button>
                                        </li>
                                        <li class="nav-item px-2" role="presentation">
                                            <button class="nav-link py-2 px-0 border-3 m-0" id="pills-year-tab1" data-series="year" data-bs-toggle="pill" data-bs-target="#pills-year1" type="button" role="tab" aria-selected="false">Year</button>
                                        </li>
                                    </ul>
                                </div>
                                <div id="earningChart"></div>
                            </div>
                        </div>
                    </div>
                    <!-- End - Total Earning -->
                    
                    <!-- Start - Active Projects -->
                    <div class="col-xxl-6 col-xl-12">
                        <div class="card">
                            <div class="card-header border-0 align-items-center">
                                <h4 class="card-title">Active Projects</h4>
                                <div id="tableProjectsExcelBTN"></div>
                            </div>
                            <div class="card-body table-card-body px-0 pt-0 pb-2">
                                <div class="table-responsive check-wrapper">
                                    <table id="projectsTable" class="table table-sm table-sm-responsive text-nowrap">
                                        <thead class="table-light">
                                            <tr class="text-nowrap">
                                                <th class="sorting-disabled">
                                                    <div class="form-check custom-checkbox ms-0">
                                                        <input type="checkbox" class="form-check-input check-all" aria-label="Projects checkbox" required>
                                                    </div>
                                                </th>
                                                <th>Project Name</th>
                                                <th>Project Lead</th>
                                                <th>Progress</th>
                                                <th>Assignee</th>
                                                <th>Status</th>
                                                <th>Due Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Batman</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Olivia Grace</p>   
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">53%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td><span class="badge badge-sm badge-primary light">Inprogress</span></td>
                                                <td><span class="text-nowrap">08 Sep 2023</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Mivy App</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Alexander Finn</p> 
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">52%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td><span class="badge badge-sm badge-danger light">Inprogress</span></td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Crypto App</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Sophia Jane</p>    
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">58%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-danger light">Pending</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Bender Project</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Jackson Miles</p>  
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:30%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-danger">30%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-danger light">Pending</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Canary</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Emily Kate</p> 
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-success" style="width:40%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-success">40%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-success light">Completed</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Casanova</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Lucas Bennett</p>  
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">53%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-primary light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Bender Project</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Scarlett Elise</p> 
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:30%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-danger">30%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-danger light">Pending</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Canary</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Henry Mason</p>    
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-success" style="width:40%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-success">40%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-success light">Completed</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Casanova</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar9.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Amelia Rose</p>    
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">53%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-primary light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Bigfish</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar10.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Ethan Cole</p> 
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:30%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-danger">30%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-danger light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Matadors</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar1.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Charlotte Mae</p>  
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">53%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-primary light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Mercury</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Elijah James</p>   
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:30%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-danger">30%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-danger light">Pending</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Whistler</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar3.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Abigail Faith</p>  
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-success" style="width:40%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-success">40%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-success light">Completed</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Time Projects</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar4.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Oliver Noah</p>    
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-danger" style="width:33%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">33%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-primary light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Projects checkbox" required>
                                                    </div>
                                                </td>
                                                <td>Fast Ball</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('images/avatar/small/avatar5.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <p class="mb-0 ms-2">Isabella Claire</p>    
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="progress flex-grow-1 me-2">
                                                            <div class="progress-bar bg-primary" style="width:53%;" role="progressbar" aria-label="Projects progress"></div>
                                                        </div>
                                                        <span class="text-primary">53%</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="avatar-list avatar-list-stacked">
                                                        <img src="{{ asset('images/avatar/small/avatar6.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar7.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                        <img src="{{ asset('images/avatar/small/avatar8.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm badge-primary light">Inprogress</span>
                                                </td>
                                                <td>
                                                    <span class="text-nowrap">06 Sep 2021</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End - Active Projects -->
                    
                    <!-- Start - Active users -->
                    <div class="col-xxl-6 col-md-12">
                        <div class="card overflow-hidden">
                            <div class="row g-0">
                                <div class="col-md-8 border-end">
                                    <div class="card-header border-0 pb-0">
                                        <h4 class="card-title">Active users</h4>
                                    </div>
                                    <div class="card-body pe-0 pb-0">
                                        <div id="world-map" class="active-map"></div>
                                    </div>
                                </div>
                                <div class="col-md-4 height370 dz-scroll">
                                    <ul class="list-group list-group-flush py-2 px-3">
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/india.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">India</span>
                                                    <span>50%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:60%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/canada.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">Canada</span>
                                                    <span>30%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:30%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/russia.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">Russia</span>
                                                    <span>20%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:20%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/uk.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">United Kingdom</span>
                                                    <span>40%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:40%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/aus.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">Australia</span>
                                                    <span>60%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:60%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/usa.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">United States</span>
                                                    <span>20%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:20%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/pak.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">Pakistan</span>
                                                    <span>20%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:20%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/germany.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">Germany</span>
                                                    <span>80%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:80%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/uae.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">UAE</span>
                                                    <span>30%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:30%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex align-items-center border-0 px-0 py-2">
                                            <div class="clearfix me-2">
                                                <img src="{{ asset('images/country/china.png') }}" alt="">
                                            </div>
                                            <div class="clearfix w-100">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span class="text-secondary">China</span>
                                                    <span>40%</span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" style="width:40%;" role="progressbar"></div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End - Active users -->
                    
                    <!-- Start - Chat -->
                    <div class="col-xxl-4 col-xl-4 col-lg-6 order-2 order-xxl-0">
                        <div class="card">
                            <div class="card-header border-0 mb-0">
                                <h4 class="card-title">Chat</h4>
                                <div class="d-flex align-items-center">
                                    <select class="selectpicker form-select form-select-sm">
                                        <option>Setting</option>
                                        <option>Group</option>
                                        <option>Chat</option>
                                    </select>
                                </div>  
                            </div>
                            <div class="card-body pt-0 pb-3 chatbox-wrapper">
                                <div class="chatbox-content height450 dz-scroll">
                                    <span class="chat-date">27 Feb 2024</span>
                                    <div class="chat-content-left">
                                        <div class="message-item">
                                            <div class="bubble">Good morning!</div>    
                                            <div class="bubble"> I'm looking for a new laptop</div>     
                                            <div class="message-time">10:30 am</div>    
                                        </div>
                                    </div>
                                    <div class="chat-content-right">
                                        <div class="message-item">
                                            <div class="bubble">Good morning!</div>    
                                            <div class="bubble">Of course, we have a great selection of laptops.</div>     
                                            <div class="message-time">10:30 am</div>    
                                        </div>
                                    </div>
                                    <div class="chat-content-left">
                                        <div class="message-item">
                                            <div class="bubble">I'm looking to spend around $800 to $1,000.</div>    
                                            <div class="message-time">10:30 am</div>    
                                        </div>
                                    </div>
                                    <span class="chat-date">Today</span>
                                    <div class="chat-content-right">
                                        <div class="message-item">
                                            <div class="bubble"> Got it!</div>    
                                            <div class="bubble">We have several options that would suit your needs. Let me show you a few models that match your criteria.</div>
                                            <div class="message-time">10:30 am</div>    
                                        </div>
                                    </div>
                                </div>
                                <div class="chatbox-footer">
                                    <div class="input-wrapper">
                                        <input type="text" class="form-control form-control-lg bg-light border-0" placeholder="Hello honey risher...">
                                        <a href="javascript:void(0);" class="btn btn-primary send-btn position-absolute end-0 top-50 translate-middle-y me-1">
                                            Send <i class="fa-solid fa-paper-plane"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End - Chat -->
                    
                    <!-- Start - Best Selling Products -->
                    <div class="col-xxl-5">
                        <div class="card">
                            <div class="card-header border-0 align-items-center ">
                                <h4 class="card-title">Best Selling Products</h4>
                                <div class="d-flex align-items-center gap-2">
                                    <div>
                                        <span>SORT BY:</span>
                                    </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>
                            <div class="card-body table-card-body px-0 pt-0 pb-2">
                                <div class="table-responsive check-wrapper">
                                    <table id="productsTable" class="table table-sm table-sm-responsive text-nowrap">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="sorting-disabled">
                                                    <div class="form-check custom-checkbox ms-0">
                                                        <input type="checkbox" class="form-check-input check-all" aria-label="Products checkbox" required>
                                                    </div>
                                                </th>
                                                <th>Product Name</th>
                                                <th>Price</th>
                                                <th>Orders</th>
                                                <th>Stock</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d1.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">lether Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-danger light">Out of Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d2.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Men Jacket</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-danger light">Out of Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d3.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Midi Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d4.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Boy Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d5.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Teen Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d6.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">White Top Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-danger light">Out of Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>   
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d14.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Air Conditioner</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>   
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d13.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Blade Table Fan</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>   
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d9.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Earphone</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>   
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d10.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Bag Pack</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$86.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-danger light">Out of Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>   
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d11.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">lether jacket</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Products checkbox" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <img src="{{ asset('images/contacts/d12.jpg') }}" class="avatar avatar-sm me-2" alt="">
                                                        <div class="clearfix">
                                                            <h6 class="mb-0">Black Dress</h6>
                                                            <small>24 Apr 2021</small>  
                                                        </div>  
                                                    </div>
                                                </td>
                                                <td><span class="text-primary">$85.20</span></td>
                                                <td><span>750</span></td>
                                                <td><span class="badge badge-sm badge-success light">In Stock</span></td>
                                                <td><span>$1200.75</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>  
                            </div>
                        </div>
                    </div>
                    <!-- End - Best Selling Products -->
                    
                    <!-- Start - Upcoming Schedules -->
                    <div class="col-xxl-3 col-xl-4 col-lg-6 order-3 order-xxl-0">
                        <div class="card">
                            <div class="card-header border-0 pb-2">
                                <h4 class="card-title">Upcoming Schedules</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 Schedules -->
                    
                    <!-- Start - Projects Status -->
                    <div class="col-xxl-3 col-xl-4 col-lg-6 order-4 order-xl-0 order-xxl-0">
                        <div class="card">
                            <div class="card-header pb-0 border-0 align-items-center">
                                <div>
                                    <h4 class="card-title">Projects Status</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 - Projects Status -->
                    
                    <!-- Start - Employees -->
                    <div class="col-xxl-9 col-xl-8">
                        <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 ms-0">
                                                        <input type="checkbox" class="form-check-input check-all" aria-label="Empoloyees checkbox" required>
                                                    </div>
                                                </th>
                                                <th>Employee ID</th>
                                                <th>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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Olivia Grace</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>Male</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Amelia Rose</h6>
                                                            <small>Software 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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Liam Risher</h6>
                                                            <small>Software 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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Isabella Claire</h6>
                                                            <small>Software 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>Female</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Henry Mason</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>Female</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Evelyn Hope</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Samuel Owen</h6>
                                                            <small>Software Developer</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>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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Abigail Faith</h6>
                                                            <small>Software Developer</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Alexander Finn</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>Female</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Harper Joy</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-danger light">Pending</span></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">William Jasper</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <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>+255 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>
                                            <tr>
                                                <td>
                                                    <div class="form-check custom-checkbox">
                                                        <input type="checkbox" class="form-check-input check-input" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Lucas Bennett</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" aria-label="Empoloyees checkbox" 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 text-nowrap">
                                                            <h6 class="mb-0">Harper Joy</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>
            </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 - 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: "/employee/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