@extends('layouts.default')
@section('content')
				<div class="page-title">
					<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li><h1>Task Summary</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">Task Summary</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="d-flex justify-content-between align-items-center mb-4">
					<h5 class="mb-0">Tasks Summary</h5>
				</div>
				<div class="overflow-x-scroll">
					<div class="row kanban-bx g-3">
						<div class="col">
							<div class="dz-task-summary dropzoneContainer">
								<div class="card card-body border-primary p-3">
									<div class="d-flex justify-content-between align-items-center">
										<div class="clearfix">
											<h5 class="mb-0">Not Started</h5>
											<span>Tasks assigned to me: 18</span>
										</div>
										<div class="clearfix">
											<span class="badge-lg badge-primary light ms-1 rounded-pill totalCount">3</span>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">CSS template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">Javascript Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm mt-1">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-footer d-flex justify-content-between border-0">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
													Low
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col">
							<div class="dz-task-summary dropzoneContainer">
								<div class="card card-body border-info p-3">
									<div class="d-flex justify-content-between align-items-center">
										<div class="clearfix">
											<h5 class="mb-0">Not Started</h5>
											<span>Tasks assigned to me: 18</span>
										</div>
										<div class="clearfix">
											<span class="badge-lg badge-info light ms-1 rounded-pill totalCount">3</span>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">HTML template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">Python template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										</div>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-footer d-flex justify-content-between border-0">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
													Low
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col">
							<div class="dz-task-summary dropzoneContainer">
								<div class="card card-body border-warning p-3">
									<div class="d-flex justify-content-between align-items-center">
										<div class="clearfix">
											<h5 class="mb-0">Not Started</h5>
											<span>Tasks assigned to me: 18</span>
										</div>
										<div class="clearfix">
											<span class="badge-lg badge-warning light ms-1 rounded-pill totalCount">03</span>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">HTML template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">CSS template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-footer d-flex justify-content-between border-0">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
													Low
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col">
							<div class="dz-task-summary dropzoneContainer">
								<div class="card card-body border-danger p-3">
									<div class="d-flex justify-content-between align-items-center">
										<div class="clearfix">
											<h5 class="mb-0">Not Started</h5>
											<span>Tasks assigned to me: 18</span>
										</div>
										<div class="clearfix">
											<span class="badge-lg badge-danger light ms-1 rounded-pill totalCount">3</span>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">Javascript Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.webp') }}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
										</div>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm mt-1">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">CSS template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-footer d-flex justify-content-between border-0">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
													Low
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col">
							<div class="dz-task-summary dropzoneContainer">
								<div class="card card-body border-success p-3">
									<div class="d-flex justify-content-between align-items-center">
										<div class="clearfix">
											<h5 class="mb-0">Not Started</h5>
											<span>Tasks assigned to me: 18</span>
										</div>
										<div class="clearfix">
											<span class="badge-lg badge-success light ms-1 rounded-pill totalCount">3</span>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">HTML template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-body">
										<div class="mb-2">
											<h6 class="mb-0">HTML template Issue Complete</h6>
											<span class="small d-block">INV-100023456</span>
										</div>
										<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/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/avatar2.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>
										<div class="my-2">
											<span class="badge-sm badge-primary light me-2">Issue</span>
											<span class="badge-sm badge-primary light">HTML</span>
										</div>
										<div class="d-flex align-items-center">
											<span class="mb-0 fw-medium text-secondary me-2">Status</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-warning" data-bs-toggle="dropdown" aria-expanded="false">
													Testing
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-warning" href="javascript:void(0);">Testing</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">Complete</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Pending</a></li>
													<li><a class="dropdown-item" data-badge="btn-info" href="javascript:void(0);">In Progress</a></li>
												</ul>
											</div>
										</div>
									</div>	
									<div class="card-footer d-flex justify-content-between">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-success" data-bs-toggle="dropdown" aria-expanded="false">
													High
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="card draggable-handle draggable">
									<div class="card-footer d-flex justify-content-between border-0">
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Start Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">End Date</span>
											<span class="fs-13">06 Feb 2023</span>
										</div>
										<div class="clearfix">
											<span class="fs-12 text-primary d-block fw-medium">Priority</span>
											<div class="dropdown dropdown-badge dropdown-sm">
												<button type="button" class="btn btn-xs light dropdown-toggle btn-danger" data-bs-toggle="dropdown" aria-expanded="false">
													Low
												</button>
												<ul class="dropdown-menu dropdown-badge-menu">
													<li><a class="dropdown-item" data-badge="btn-primary" href="javascript:void(0);">Medium</a></li>
													<li><a class="dropdown-item" data-badge="btn-success" href="javascript:void(0);">High</a></li>
													<li><a class="dropdown-item" data-badge="btn-danger" href="javascript:void(0);">Low</a></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>	
					</div>
				</div>
			</div>
      @endsection
		@push('modals')
<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="addTaskmodal">
	<div class="offcanvas-header pb-0">
		<h2 class="modal-title fs-5" id="#gridSystemModal1">Add New Task</h2>
		<button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
			<i class="fa-solid fa-xmark"></i>
		</button>
	</div>
	<div class="offcanvas-body">
		<form class="row">
			<div class="col-xl-6 mb-3">
				<label for="exampleFormControlInputfirst" class="form-label">Title<span class="text-danger">*</span></label>
				<input type="text" class="form-control" id="exampleFormControlInputfirst" placeholder="Title">
			</div>	
			<div class="col-xl-6 mb-3">
				<label class="form-label">Project<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Project</option>
					<option value="html">HTML</option>
					<option value="css">CSS</option>
					<option value="javascript">JavaScript</option>
				</select>
			</div>	
			<div class="col-xl-6 mb-3">
				<label for="exampleFormControlInputthree" class="form-label">Start Date<span class="text-danger">*</span></label>
				<input type="text" class="form-control bs-datepicker" id="exampleFormControlInputthree">
			</div>
			<div class="col-xl-6 mb-3">
				<label for="exampleFormControlInputfour" class="form-label">End Date<span class="text-danger">*</span></label>
				<input type="text" class="form-control bs-datepicker" id="exampleFormControlInputfour">
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Estimated Hour<span class="text-danger">*</span></label>
				<input type="text" class="form-control bs-datepicker" value="09:30">
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Status<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Status</option>
					<option value="In Progess">In Progess</option>
					<option value="Pending">Pending</option>
					<option value="Completed">Completed</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Priority<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Priority</option>
					<option value="Hight">Hight</option>
					<option value="Medium">Medium</option>
					<option value="Low">Low</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Category<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Category</option>
					<option value="Designing">Designing</option>
					<option value="Development">Development</option>
					<option value="react developer">React Developer</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Permission<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Permission</option>
					<option value="Public">Public</option>
					<option value="Private">Private</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Deadline add<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Deadline</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Assigned to<span class="text-danger">*</span></label>
				<select class="selectpicker form-select">
					<option data-display="Select">Assigned</option>
					<option value="Bernard">Bernard</option>
					<option value="Sergey Brin">Sergey Brin</option>
					<option value="Larry Ellison">Larry Ellison</option>
				</select>
			</div>
			<div class="col-xl-6 mb-3">
				<label class="form-label">Responsible Person<span class="text-danger">*</span></label>
				<input name='tagify' class="form-control basic-tagify" value='James, Harry'>
			</div>
			<div class="col-xl-12 mb-3">
				<label class="form-label">Description<span class="text-danger">*</span></label>
				<textarea rows="3" class="form-control"></textarea>
			</div>
			<div class="col-xl-12 mb-3">
				<label class="form-label">Summary<span class="text-danger">*</span></label>
				<textarea rows="3" class="form-control"></textarea>
			</div>
			<div class="col-xl-12">					
				<button class="btn btn-danger light">Cancel</button>
				<button class="btn btn-primary ms-2">Help Desk</button>
			</div>
		</form>
	</div>
</div>
        @endpush

