@extends('ui-common.layouts.master')
@section('title')
@lang('Task List')
@endsection
@section('css')   
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/task/task.list.css') }}" rel="stylesheet" />
@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Task List
@endslot
@slot('title')
Task
@endslot
@endcomponent
<div class="row">
   <div class="col-12">
      <div class="card py-3 px-2">
         <div class="row">
            <div class="col-sm-12 col-md-auto col-lg-4 col-xxl-3">
               <div class="form-group ">
                  <div class="input-field">
                     <span class="icon-search">
                        <svg width="17" height="17" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3059 2.93994C6.5142 2.93994 3.44043 6.01372 3.44043 9.80541C3.44043 13.5971 6.5142 16.6709 10.3059 16.6709C14.0976 16.6709 17.1714 13.5971 17.1714 9.80541C17.1714 6.01372 14.0976 2.93994 10.3059 2.93994ZM2.19043 9.80541C2.19043 5.32336 5.82385 1.68994 10.3059 1.68994C14.7879 1.68994 18.4214 5.32336 18.4214 9.80541C18.4214 14.2875 14.7879 17.9209 10.3059 17.9209C5.82385 17.9209 2.19043 14.2875 2.19043 9.80541Z" fill="#181d27  "></path>
                           <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0731 14.9628C15.3169 14.7184 15.7126 14.7179 15.957 14.9617L18.8937 17.8907C19.1381 18.1345 19.1386 18.5302 18.8949 18.7746C18.6511 19.019 18.2554 19.0195 18.011 18.7758L15.0743 15.8467C14.8299 15.6029 14.8294 15.2072 15.0731 14.9628Z" fill="#181d27  "></path>
                        </svg>
                     </span>
                     <input type="search" class="form-control search" placeholder="Search">
                  </div>
               </div>
            </div>
            <div class="col-auto d-flex gap-2 ms-md-auto pt-2 pt-md-0">
               <button class="btn_delete_icon delete_icons" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
               <button class="btn btn-success"  data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i class="fa-solid fa-filter pe-1"></i>Filter</button>
               <button class="btn btn_primary"><i class="fa-solid fa-file-lines"></i>
               Add Task 
               </button>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-xxl-4  col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-success-subtle text-success">completed</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-medium rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Medium">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <rect width="14" height="14" rx="7" fill="#F4BE37"></rect>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0835 4.66667C11.0835 4.98883 10.9268 5.25 10.7335 5.25L3.26683 5.25C3.07353 5.25 2.91683 4.98883 2.91683 4.66667C2.91683 4.3445 3.07353 4.08333 3.26683 4.08333L10.7335 4.08333C10.9268 4.08333 11.0835 4.3445 11.0835 4.66667Z" fill="#FDF2D7"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0835 7.00065C11.0835 7.32282 10.9268 7.58398 10.7335 7.58398L3.26683 7.58398C3.07353 7.58398 2.91683 7.32282 2.91683 7.00065C2.91683 6.67848 3.07353 6.41732 3.26683 6.41732L10.7335 6.41732C10.9268 6.41732 11.0835 6.67848 11.0835 7.00065Z" fill="#FDF2D7"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0835 9.33268C11.0835 9.65485 10.9268 9.91602 10.7335 9.91602L3.26683 9.91602C3.07353 9.91602 2.91683 9.65485 2.91683 9.33268C2.91683 9.01052 3.07353 8.74935 3.26683 8.74935L10.7335 8.74935C10.9268 8.74935 11.0835 9.01052 11.0835 9.33268Z" fill="#FDF2D7"></path>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xxl-4  col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-info-subtle text-info">Progress</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-high rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="High">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip0_2218_22856)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM7 5.425C7.13924 5.425 7.27277 5.48031 7.37123 5.57877L9.47123 7.67877C9.67626 7.88379 9.67626 8.21621 9.47123 8.42123C9.26621 8.62626 8.93379 8.62626 8.72877 8.42123L7 6.69246L5.27123 8.42123C5.06621 8.62626 4.73379 8.62626 4.52877 8.42123C4.32374 8.21621 4.32374 7.88379 4.52877 7.67877L6.62877 5.57877C6.72723 5.48031 6.86076 5.425 7 5.425Z" fill="#DC6803"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_2218_22856">
                           <rect width="14" height="14" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xxl-4 col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-warning-subtle text-warning">On Hold</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-low rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Low">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM9.47123 5.57877C9.67626 5.78379 9.67626 6.11621 9.47123 6.32123L7.37123 8.42123C7.27277 8.51969 7.13924 8.575 7 8.575C6.86076 8.575 6.72723 8.51969 6.62877 8.42123L4.52877 6.32123C4.32374 6.11621 4.32374 5.78379 4.52877 5.57877C4.73379 5.37374 5.06621 5.37374 5.27123 5.57877L7 7.30754L8.72877 5.57877C8.93379 5.37374 9.26621 5.37374 9.47123 5.57877Z" fill="#00AE1D"></path>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xxl-4 col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-danger-subtle text-danger">Overdue</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-lowest rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Lowest">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip0_2211_22840)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.52877 7.72123C4.32374 7.51621 4.32374 7.18379 4.52877 6.97877C4.73379 6.77374 5.06621 6.77374 5.27123 6.97877L7 8.70754L8.72877 6.97877C8.93379 6.77374 9.2662 6.77374 9.47123 6.97877C9.67626 7.18379 9.67626 7.51621 9.47123 7.72123L7.37123 9.82123C7.16621 10.0263 6.83379 10.0263 6.62877 9.82123L4.52877 7.72123ZM4.52877 4.17877C4.32374 4.38379 4.32374 4.71621 4.52877 4.92123L6.62877 7.02123C6.83379 7.22626 7.16621 7.22626 7.37123 7.02123L9.47123 4.92123C9.67626 4.71621 9.67626 4.38379 9.47123 4.17877C9.2662 3.97374 8.93379 3.97374 8.72877 4.17877L7 5.90754L5.27123 4.17877C5.06621 3.97374 4.73379 3.97374 4.52877 4.17877Z" fill="#007BFF"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_2211_22840">
                           <rect width="14" height="14" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xxl-4 col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-danger-subtle text-danger">Cancel</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-highest rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Highest">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip0_2211_22836)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.52877 9.07877C4.32374 9.28379 4.32374 9.61621 4.52877 9.82123C4.73379 10.0263 5.06621 10.0263 5.27123 9.82123L7 8.09246L8.72877 9.82123C8.93379 10.0263 9.2662 10.0263 9.47123 9.82123C9.67626 9.61621 9.67626 9.28379 9.47123 9.07877L7.37123 6.97877C7.16621 6.77374 6.83379 6.77374 6.62877 6.97877L4.52877 9.07877ZM4.52877 7.02123C4.32374 6.81621 4.32374 6.48379 4.52877 6.27877L6.62877 4.17877C6.83379 3.97374 7.16621 3.97374 7.37123 4.17877L9.47123 6.27877C9.67626 6.48379 9.67626 6.81621 9.47123 7.02123C9.2662 7.22626 8.93379 7.22626 8.72877 7.02123L7 5.29246L5.27123 7.02123C5.06621 7.22626 4.73379 7.22626 4.52877 7.02123Z" fill="#F74850"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_2211_22836">
                           <rect width="14" height="14" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-xxl-4 col-lg-6 col-md-12 col-sm-12 ">
      <div class="card">
         <div class="com-grid px-3 py-3">
            <div class="column-span-2 d-flex align-items-center gap-1">
               <input type="checkbox" class="form-check-input">
               <span class="task_name"data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Add the Task Summary Name  Task view">Add the Task Summary Name  Task view</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <button class="btn_edit_view" data-toggle="tooltip" data-bs-placement="top" aria-label="View" data-bs-original-title="View">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00005 5.17168C5.2824 5.17168 4.70297 5.75112 4.70297 6.46877C4.70297 7.18642 5.2824 7.76585 6.00005 7.76585C6.7177 7.76585 7.29713 7.18642 7.29713 6.46877C7.29713 5.75112 6.7177 5.17168 6.00005 5.17168ZM4.01547 6.46877C4.01547 5.37142 4.9027 4.48418 6.00005 4.48418C7.0974 4.48418 7.98463 5.37142 7.98463 6.46877C7.98463 7.56612 7.0974 8.45335 6.00005 8.45335C4.9027 8.45335 4.01547 7.56612 4.01547 6.46877Z" fill="#17b26a"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.53474 5.09238C2.63057 3.36979 4.23639 2.33002 6.00005 2.33002C7.76378 2.33002 9.36967 3.36988 10.4655 5.0926C10.7153 5.48417 10.8286 5.98576 10.8286 6.46648C10.8286 6.9472 10.7153 7.44878 10.4655 7.84035C9.36967 9.56307 7.76378 10.6029 6.00005 10.6029C4.23632 10.6029 2.63043 9.56307 1.53459 7.84035C1.28481 7.44878 1.17151 6.9472 1.17151 6.46648C1.17151 5.98566 1.28485 5.48398 1.53474 5.09238ZM6.00005 3.01752C4.52795 3.01752 3.118 3.88432 2.11468 5.4616L2.11439 5.46205C1.95187 5.71666 1.85901 6.08113 1.85901 6.46648C1.85901 6.85182 1.95187 7.21629 2.11439 7.4709L2.11468 7.47135C3.118 9.04863 4.52795 9.91543 6.00005 9.91543C7.47215 9.91543 8.8821 9.04863 9.88543 7.47135L9.88571 7.4709C10.0482 7.21629 10.1411 6.85182 10.1411 6.46648C10.1411 6.08113 10.0482 5.71666 9.88571 5.46205L9.88543 5.4616C8.8821 3.88432 7.47215 3.01752 6.00005 3.01752Z" fill="#17b26a"></path>
                  </svg>
               </button>
               <button class="btn_edit_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit" data-bs-original-title="Edit">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.74815 0.492402C9.23242 -0.0211792 8.39657 -0.0208645 7.88123 0.493105L3.8954 4.46904C3.57661 4.78698 3.38918 5.2126 3.37022 5.66166L3.31348 7.005C3.28764 7.61668 3.77824 8.12665 4.39257 8.12667L5.71422 8.12673C6.19945 8.12675 6.66415 7.93155 7.00296 7.58538L10.9567 3.53329C11.4614 3.0176 11.4561 2.19326 10.9448 1.68406L9.74815 0.492402ZM8.39058 1.00033C8.62483 0.766712 9.00476 0.766569 9.23918 1.00002L10.4358 2.19167C10.6683 2.42313 10.6707 2.79782 10.4412 3.03223L9.64718 3.84355L7.59192 1.79687L8.39058 1.00033ZM7.08295 2.30448L4.40475 4.97627C4.21348 5.16704 4.10102 5.4224 4.08964 5.69185L4.0329 7.03518C4.02429 7.23908 4.18782 7.40906 4.3926 7.40907L5.71425 7.40913C6.00539 7.40914 6.28421 7.29202 6.48749 7.08432L9.14437 4.35729L7.08295 2.30448Z" fill="#1E66E9"></path>
                     <path d="M10.256 5.98834V8.12683C10.256 9.60314 9.05919 10.7999 7.58288 10.7999H3.30591C1.8296 10.7999 0.632812 9.60314 0.632812 8.12683V3.84986C0.632812 2.37355 1.8296 1.17676 3.30592 1.17676H5.4444" stroke="#1E66E9" stroke-width="0.801931" stroke-linecap="round"></path>
                  </svg>
               </button>
               <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete" data-bs-original-title="Delete">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11" fill="none">
                     <g clip-path="url(#clip0_281_10181)">
                        <path d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z" fill="#f04438"></path>
                        <path d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z" fill="#f04438"></path>
                        <path d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z" fill="#f04438"></path>
                        <path d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z" fill="#f04438"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_281_10181">
                           <rect width="11" height="11" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </button>
            </div>
            <div>
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Start Date</label>
               <div class="ctl_date">
                  <span>01/02/2025</span>
               </div>
            </div>
            <div >
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>End Date</label>
               <div class="ctl_date">
                  <span>22/02/2025</span>
               </div>
            </div>
            <div class="d-flex align-items-center justify-content-end">
               <span class="ctl_status bg-dark-subtle text-dark">To Do</span>
            </div>
            <div class="progress column-span-2 mt-md-3" style="height:5px;">
               <div id="myProgressBar" class="progress-bar bg-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top">
               </div>
            </div>
            <div style="text-align:right;">
               <label for="" class="ctl_label_date mb-0"><i class="fa-solid fa-calendar-days me-1"></i>Due Date</label>
               <div class="ctl_date" >
                  <span>20/02/2025</span>
               </div>
            </div>
            <div class="d-flex ">
               <img src="{{ URL('img/user_avatar.jpg') }}" alt="img" class=" avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <img src="{{ URL('img/user_avatar1.jpg') }}" alt="img" class="ctl_image_avatar avatar-xs rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="name">
               <span class="ctl_image_avatar avatar-xs profile_img ctl-profile-text rounded-circle">+1</span>
            </div>
            <div class="d-flex align-items-center">
               <span class="ctl-timer"><i class="fa-regular fa-clock me-1"></i>00:00:00</span>
            </div>
            <div class="d-flex gap-1 justify-content-end">
               <div class="ctl_attach_link" data-toggle="tooltip" data-bs-placement="top"  data-bs-original-title="Attachment">
                  <span class="ctl-attach_icon"> <i class="fa-solid fa-link"></i>   </span>               
               </div>
               <div class="ctl-status-wid ctn-status-highest rounded-circle" data-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Highest">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip0_2211_22836)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.52877 9.07877C4.32374 9.28379 4.32374 9.61621 4.52877 9.82123C4.73379 10.0263 5.06621 10.0263 5.27123 9.82123L7 8.09246L8.72877 9.82123C8.93379 10.0263 9.2662 10.0263 9.47123 9.82123C9.67626 9.61621 9.67626 9.28379 9.47123 9.07877L7.37123 6.97877C7.16621 6.77374 6.83379 6.77374 6.62877 6.97877L4.52877 9.07877ZM4.52877 7.02123C4.32374 6.81621 4.32374 6.48379 4.52877 6.27877L6.62877 4.17877C6.83379 3.97374 7.16621 3.97374 7.37123 4.17877L9.47123 6.27877C9.67626 6.48379 9.67626 6.81621 9.47123 7.02123C9.2662 7.22626 8.93379 7.22626 8.72877 7.02123L7 5.29246L5.27123 7.02123C5.06621 7.22626 4.73379 7.22626 4.52877 7.02123Z" fill="#F74850"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_2211_22836">
                           <rect width="14" height="14" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- row -->
</div>
<!-- filter canva rightside -->
<div class="offcanvas offcanvas-end"  tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header ">
      <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close">
         <svg xmlns="http://www.w3.org/2000/svg" fili="#181d27" id="Layer_1" data-name="Layer 1"
            viewBox="0 0 24 24" width="24" height="24">
            <path
               d="M19,11H9l3.293-3.293L10.879,6.293,6.586,10.586a2,2,0,0,0,0,2.828l4.293,4.293,1.414-1.414L9,13H19Z" />
         </svg>
         Back
      </button>
   </div>
   <div class="offcanvas-body" data-bs-focus="false" >
      <div class="col-12">
         <div class="form-group ">
            <label for="" class="form-label">
            Task </label>
            <div class="input-field">
               <span class="icon z-index">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                     fill="none">
                     <path
                        d="M2.5 1.875V18.125H9.375V15.625H10.625V18.125H17.5V1.875H2.5ZM3.75 3.125H16.25V16.875H11.875V14.375H8.125V16.875H3.75V3.125ZM5 4.375V5.625H7.5V4.375H5ZM8.75 4.375V5.625H11.25V4.375H8.75ZM12.5 4.375V5.625H15V4.375H12.5ZM5 6.875V8.125H7.5V6.875H5ZM8.75 6.875V8.125H11.25V6.875H8.75ZM12.5 6.875V8.125H15V6.875H12.5ZM5 9.375V10.625H7.5V9.375H5ZM8.75 9.375V10.625H11.25V9.375H8.75ZM12.5 9.375V10.625H15V9.375H12.5ZM5 11.875V13.125H7.5V11.875H5ZM8.75 11.875V13.125H11.25V11.875H8.75ZM12.5 11.875V13.125H15V11.875H12.5ZM5 14.375V15.625H7.5V14.375H5ZM12.5 14.375V15.625H15V14.375H12.5Z"
                        fill="#96A5B8" />
                  </svg>
               </span>
               <select 
                  class="form-select js-example-basic-single select2 select-2"
                  aria-label="Default select example" name="department" >
                  <option selected value="">Please select </option>
                  <option value="1">one</option>
                  <option value="2">two</option>
                  <option value="1">three</option>
               </select>
            </div>
         </div>
      </div>
      <div class="d-flex justify-content-end gap-3 pt-4">
         <button type="button" class="btn btn_primary">Update</button>
         <button type="button" class="btn btn_clear">Clear</button>
      </div>
   </div>
</div>
</div>
</div>
<!-- filter canva rightside -->
@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/select2.init.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/task/task.list.js') }}"></script>
@endsection