@extends('ui-common.layouts.master')
@section('title')
@lang('Task Add')
@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.add.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="{{ url('js/libs/filepond/filepond.min.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css') }}">
@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Task Add
@endslot
@slot('title')
Task
@endslot
@endcomponent
<div class="card">
   <div class="card-header d-flex align-items-center justify-content-between pos-sticky">
      <h4 class="card-title">Task Details</h4>
      <div>
         <button class="btn btn_primary">Save</button>
      </div>
   </div>
   <div class="row py-3 px-4 gy-4">
      <div class="col-12 d-flex justify-content-end gap-2 btn_View_Task">
         <div>
            <button class="btn btn_primary">Add Sub Task</button>
         </div>
         <div>
            <button class="btn btn-success"  data-bs-toggle="offcanvas"
               data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">View Sub Task<i class="fa-solid fa-file-lines ms-2"></i></button>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group ">
            <label  class="form-label">
            Project Name<sup class="required-start-icon ">*</sup>     </label>
            <div class="input-field">
               <span class="icon z-index">
                  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g clip-path="url(#clip0_1336_18362)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.28125 9.06253C3.28125 8.80365 3.49112 8.59378 3.75 8.59378H8.75C9.00888 8.59378 9.21875 8.80365 9.21875 9.06253C9.21875 9.32141 9.00888 9.53128 8.75 9.53128H3.75C3.49112 9.53128 3.28125 9.32141 3.28125 9.06253Z" fill="#868C98"></path>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.28125 11.25C3.28125 10.9911 3.49112 10.7813 3.75 10.7813H7.1875C7.44638 10.7813 7.65625 10.9911 7.65625 11.25C7.65625 11.5089 7.44638 11.7188 7.1875 11.7188H3.75C3.49112 11.7188 3.28125 11.5089 3.28125 11.25Z" fill="#868C98"></path>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.65625 1.77139C7.3685 1.72249 6.97623 1.71878 6.26862 1.71878C5.07069 1.71878 4.21922 1.71977 3.57366 1.80617C2.94123 1.89081 2.57783 2.04958 2.31369 2.31372C2.04918 2.57823 1.89064 2.94051 1.8061 3.56931C1.71975 4.2116 1.71875 5.05827 1.71875 6.25003V8.75003C1.71875 9.94179 1.71975 10.7885 1.8061 11.4308C1.89064 12.0596 2.04918 12.4218 2.31369 12.6863C2.5782 12.9508 2.94047 13.1094 3.56928 13.1939C4.21157 13.2803 5.05824 13.2813 6.25 13.2813H8.75C9.94176 13.2813 10.7884 13.2803 11.4307 13.1939C12.0595 13.1094 12.4218 12.9508 12.6863 12.6863C12.9508 12.4218 13.1094 12.0596 13.1939 11.4308C13.2803 10.7885 13.2812 9.94179 13.2812 8.75003V8.47684C13.2812 7.51684 13.2745 7.06174 13.1726 6.71878H11.2164C10.5084 6.7188 9.92984 6.71881 9.47305 6.6574C8.99558 6.5932 8.58162 6.45428 8.25119 6.12384C7.92076 5.79341 7.78183 5.37945 7.71764 4.90198C7.65622 4.44519 7.65623 3.86661 7.65625 3.15859V1.77139ZM8.59375 2.25594V3.12503C8.59375 3.87485 8.59475 4.39006 8.64678 4.77706C8.69699 5.15057 8.78689 5.33372 8.9141 5.46093C9.04131 5.58814 9.22446 5.67804 9.59797 5.72826C9.98497 5.78029 10.5002 5.78128 11.25 5.78128H12.5122C12.3269 5.60157 12.0895 5.38623 11.7812 5.10879L9.30701 2.88198C9.00365 2.60895 8.77787 2.40742 8.59375 2.25594ZM6.35966 0.781266C7.22503 0.781034 7.78412 0.780885 8.2987 0.978346C8.81327 1.17581 9.22698 1.54834 9.86705 2.12472C9.88915 2.14462 9.91152 2.16476 9.93417 2.18514L12.4084 4.41195C12.4347 4.43566 12.4608 4.45906 12.4865 4.48218C13.2263 5.14759 13.7046 5.57786 13.962 6.15564C14.2193 6.73341 14.2191 7.37682 14.2188 8.37183C14.2188 8.4064 14.2187 8.4414 14.2187 8.47684V8.78529C14.2188 9.93389 14.2188 10.8437 14.123 11.5557C14.0245 12.2884 13.8169 12.8815 13.3492 13.3493C12.8815 13.817 12.2884 14.0246 11.5556 14.1231C10.8436 14.2188 9.93386 14.2188 8.78526 14.2188H6.21474C5.06614 14.2188 4.15637 14.2188 3.44436 14.1231C2.7116 14.0246 2.1185 13.817 1.65078 13.3493C1.18305 12.8815 0.975477 12.2884 0.876959 11.5557C0.781232 10.8437 0.78124 9.93389 0.78125 8.78529V6.21477C0.78124 5.06617 0.781232 4.1564 0.876959 3.44439C0.975477 2.71163 1.18305 2.11854 1.65078 1.65081C2.11887 1.18272 2.71395 0.975369 3.44929 0.876953C4.16427 0.781264 5.07856 0.781272 6.23345 0.781281L6.26862 0.781282C6.29934 0.781282 6.32968 0.781274 6.35966 0.781266Z" fill="#868C98"></path>
                     </g>
                     <defs>
                        <clipPath id="clip0_1336_18362">
                           <rect width="15" height="15" fill="white"></rect>
                        </clipPath>
                     </defs>
                  </svg>
               </span>
               <select  class="form-select  js-example-basic-single select2" aria-label="Default select example" name="department">
                  <option selected value="">Select Project Name</option>
                  <option value="1">First Project</option>
               </select>
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group ">
            <label  class="form-label">
            Task Name<sup class="required-start-icon ">*</sup>     </label>
            <div class="input-field">
               <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9436 1.25H13.0564C14.8942 1.24998 16.3498 1.24997 17.489 1.40314C18.6614 1.56076 19.6104 1.89288 20.3588 2.64124C21.1071 3.38961 21.4392 4.33856 21.5969 5.51098C21.75 6.65019 21.75 8.10583 21.75 9.94359V14.0564C21.75 15.8942 21.75 17.3498 21.5969 18.489C21.4392 19.6614 21.1071 20.6104 20.3588 21.3588C19.6104 22.1071 18.6614 22.4392 17.489 22.5969C16.3498 22.75 14.8942 22.75 13.0564 22.75H10.9436C9.10583 22.75 7.65019 22.75 6.51098 22.5969C5.33856 22.4392 4.38961 22.1071 3.64124 21.3588C2.89288 20.6104 2.56076 19.6614 2.40314 18.489C2.24997 17.3498 2.24998 15.8942 2.25 14.0564V9.94358C2.24998 8.10582 2.24997 6.65019 2.40314 5.51098C2.56076 4.33856 2.89288 3.38961 3.64124 2.64124C4.38961 1.89288 5.33856 1.56076 6.51098 1.40314C7.65019 1.24997 9.10582 1.24998 10.9436 1.25ZM6.71085 2.88976C5.70476 3.02502 5.12511 3.27869 4.7019 3.7019C4.27869 4.12511 4.02502 4.70476 3.88976 5.71085C3.75159 6.73851 3.75 8.09318 3.75 10V14C3.75 15.9068 3.75159 17.2615 3.88976 18.2892C4.02502 19.2952 4.27869 19.8749 4.7019 20.2981C5.12511 20.7213 5.70476 20.975 6.71085 21.1102C7.73851 21.2484 9.09318 21.25 11 21.25H13C14.9068 21.25 16.2615 21.2484 17.2892 21.1102C18.2952 20.975 18.8749 20.7213 19.2981 20.2981C19.7213 19.8749 19.975 19.2952 20.1102 18.2892C20.2484 17.2615 20.25 15.9068 20.25 14V10C20.25 8.09318 20.2484 6.73851 20.1102 5.71085C19.975 4.70476 19.7213 4.12511 19.2981 3.7019C18.8749 3.27869 18.2952 3.02502 17.2892 2.88976C16.2615 2.75159 14.9068 2.75 13 2.75H11C9.09318 2.75 7.73851 2.75159 6.71085 2.88976ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H16C16.4142 7.25 16.75 7.58579 16.75 8C16.75 8.41421 16.4142 8.75 16 8.75H8C7.58579 8.75 7.25 8.41421 7.25 8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H16C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM7.25 16C7.25 15.5858 7.58579 15.25 8 15.25H13C13.4142 15.25 13.75 15.5858 13.75 16C13.75 16.4142 13.4142 16.75 13 16.75H8C7.58579 16.75 7.25 16.4142 7.25 16Z" fill="#868C98"></path>
                  </svg>
               </span>
               <input type="text" class="form-control" placeholder="Enter Task Name">
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="multi-select2">
            <label for="members" class="form-label">Department<sup class="required-start-icon ">*</sup>
            </label>
            <select class="form-control select-multi" 
               multiple>
               <option value="">first</option>
               <option value="">second</option>
            </select>
         </div>
      </div>
     
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <label for="" class="form-label">Employee<sup class="required-start-icon ">*</sup></label>
         <div class="form-group select-checkbox  multiSelCheckBoxSubGroup mb-0">
            <div class="input-field  multiple-select-custom">
               <select data-placeholder="Select Member" class="form-select  multiple-newaddtask" multiple aria-label="Default select example" id="">
                  <!-- header -->
                  <optgroup label="Project Manager">
                     <!-- sub header -->
                     <option disabled>USA</option>
                     <!-- list of members -->
                     <option value="Fumio">Fumio</option>
                     <option value="Alice">Alice</option>
                     <option disabled>Dubai</option>
                     <option value="Marcello">Marcello</option>
                     <option value="Brayden">Brayden</option>
                  </optgroup>
                  <optgroup label="Human Resource">
                     <!-- header -->
                     <option disabled>Manager</option>
                     <!-- sub header -->
                     <option value="Anders">Anders</option>
                     <option value="Hugo">Hugo</option>
                     <option disabled>Admin</option>
                     <option value="Aaron">Aaron</option>
                     <option value="Luca">Luca</option>
                  </optgroup>
               </select>
               <span class="icon-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                     <path d="M7.57501 7.98828C7.53126 7.98203 7.47501 7.98203 7.42501 7.98828C6.32501 7.95078 5.45001 7.05078 5.45001 5.94453C5.45001 4.81328 6.36251 3.89453 7.50001 3.89453C8.63126 3.89453 9.55001 4.81328 9.55001 5.94453C9.54376 7.05078 8.67501 7.95078 7.57501 7.98828Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                     <path d="M11.7125 12.1121C10.6 13.1309 9.12501 13.7496 7.50001 13.7496C5.87501 13.7496 4.40001 13.1309 3.28751 12.1121C3.35001 11.5246 3.72501 10.9496 4.39376 10.4996C6.10626 9.36211 8.90625 9.36211 10.6063 10.4996C11.275 10.9496 11.65 11.5246 11.7125 12.1121Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                     <path d="M7.5 13.75C10.9518 13.75 13.75 10.9518 13.75 7.5C13.75 4.04822 10.9518 1.25 7.5 1.25C4.04822 1.25 1.25 4.04822 1.25 7.5C1.25 10.9518 4.04822 13.75 7.5 13.75Z" stroke="#868C98" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
               </span>
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group">
            <div class="input-field">
               <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
                     viewBox="0 0 15 15" fill="none">
                     <path
                        d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z"
                        fill="#868C98"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z"
                        fill="#868C98"></path>
                  </svg>
               </span>
               <label for="end_date" class="form-label">Project Start Date<sup class="required-start-icon ">*</sup></label>
               <input type="text" data-provider="flatpickr" data-date-format="m/d/Y"
                  class="form-control flatpickr-input" name=""
                  placeholder="Enter Start Date"
                  value="">
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group">
            <div class="input-field">
               <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
                     viewBox="0 0 15 15" fill="none">
                     <path
                        d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z"
                        fill="#868C98"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z"
                        fill="#868C98"></path>
                  </svg>
               </span>
               <label for="end_date" class="form-label">Project End Date<sup class="required-start-icon ">*</sup></label>
               <input type="text" data-provider="flatpickr" data-date-format="m/d/Y"
                  class="form-control flatpickr-input" name=""
                  placeholder="Enter End Date"
                  value="">
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group">
            <div class="input-field">
               <span class="icon z-index">
                  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z" fill="#525866"></path>
                  </svg>
                  </svg>
               </span>
               <label for="priority" class="form-label">Status</label>
               <select class="form-control js-example-basic-single" name=""
                  >
                  <option value="">Select</option>
                  <option value="1">To Do </option>
                  <option value="2">Progress </option>
                  <option value="3">On Hold </option>
                  <option value="4">Completed</option>
                  <option value="5">Overdue</option>
                  <option value="6">Cancel</option>                  
                  
               </select>
            </div>
         </div>
      </div>      
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <label for="priority" class="form-label">Priority</label>
         <div class="input-field selectClickBlock cmp-sel-drp-ico">
            <div class="select2-wrapper">
               <select class="input icons_select2 form-select fs-12 fc-secondary font-weight-500 select2" aria-label="Default select example" name="project_priority">
                  <option selected value="" data-url="{{asset('img/icon_priority.png')}}">Select Priority</option>
                  <option value="1" data-url="{{asset('img/icon_lowest.png')}}">Lowest</option>
                  <option value="2" data-url="{{asset('img/icon_low.png')}}">Low</option>
                  <option value="3" data-url="{{asset('img/icon_medium.png')}}">Medium</option>
                  <option value="4" data-url="{{asset('img/icon_high.png')}}">High</option>
                  <option value="5" data-url="{{asset('img/icon_highest.png')}}">Highest</option>
               </select>
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group">
            <div class="input-field">
               <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
                     viewBox="0 0 15 15" fill="none">
                     <path
                        d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z"
                        fill="#868C98"></path>
                     <path
                        d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z"
                        fill="#868C98"></path>
                     <path
                        d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z"
                        fill="#868C98"></path>
                     <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z"
                        fill="#868C98"></path>
                  </svg>
               </span>
               <label for="end_date" class="form-label">Due Date</label>
               <input type="text" data-provider="flatpickr" data-date-format="m/d/Y"
                  class="form-control flatpickr-input" name=""
                  placeholder="Due Date"
                  value="">
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group ">
            <label  class="form-label">
            Task Billable      </label>
            <div class="select2-wrapper">
               <select  class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" >
                  <option selected value="">Select Billable</option>
                  <option value="1">Billable</option>
                  <option value="1">Non-Billable</option>
               </select>
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group ">
            <label  class="form-label">
            Task Type      </label>
            <div class="input-field">
               <span class="icon z-index">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3939 2.02121L16.4604 2.03904C17.5598 2.33361 18.431 2.56704 19.1162 2.81458C19.8172 3.06779 20.3888 3.35744 20.8597 3.79847C21.5453 4.44068 22.0252 5.27179 22.2385 6.18671C22.385 6.81503 22.3501 7.45486 22.2189 8.18849C22.0906 8.90573 21.8572 9.77697 21.5626 10.8764L21.0271 12.8747C20.7326 13.974 20.4991 14.8452 20.2516 15.5305C19.9984 16.2314 19.7087 16.803 19.2677 17.2739C18.6459 17.9377 17.8471 18.4087 16.9665 18.6316C16.7093 19.2213 16.3336 19.7554 15.8597 20.1993C15.3888 20.6403 14.8172 20.9299 14.1162 21.1832C13.431 21.4307 12.5598 21.6641 11.4605 21.9587L11.394 21.9765C10.2946 22.2711 9.42337 22.5045 8.70613 22.6328C7.9725 22.764 7.33266 22.7989 6.70435 22.6524C5.78943 22.4391 4.95832 21.9592 4.31611 21.2736C3.87508 20.8027 3.58542 20.2311 3.33222 19.5302C3.08468 18.8449 2.85124 17.9737 2.55667 16.8743L2.02122 14.876C1.72664 13.7766 1.4932 12.9054 1.36495 12.1882C1.23376 11.4546 1.19881 10.8147 1.34531 10.1864C1.55864 9.27149 2.03849 8.44038 2.72417 7.79817C3.19505 7.35714 3.76664 7.06749 4.46758 6.81428C5.15283 6.56674 6.02404 6.3333 7.12341 6.03873L7.15665 6.02983C7.42112 5.95896 7.67134 5.89203 7.90825 5.82944C8.29986 4.43031 8.64448 3.44126 9.31611 2.72417C9.95831 2.03849 10.7894 1.55864 11.7043 1.34531C12.3327 1.19881 12.9725 1.23376 13.7061 1.36495C14.4233 1.49319 15.2945 1.72664 16.3939 2.02121ZM7.45502 7.5028C6.36214 7.79571 5.57905 8.00764 4.9772 8.22505C4.36778 8.4452 4.00995 8.64907 3.74955 8.89296C3.2804 9.33237 2.95209 9.90103 2.80613 10.527C2.72511 10.8745 2.72747 11.2863 2.84152 11.9242C2.95723 12.5712 3.17355 13.381 3.47902 14.521L3.99666 16.4529C4.30212 17.5929 4.51967 18.4023 4.74299 19.0205C4.96314 19.63 5.16701 19.9878 5.4109 20.2482C5.85031 20.7173 6.41897 21.0456 7.04496 21.1916C7.39242 21.2726 7.80425 21.2703 8.4421 21.1562C9.08915 21.0405 9.89893 20.8242 11.0389 20.5187C12.1789 20.2132 12.9884 19.9957 13.6066 19.7724C14.216 19.5522 14.5739 19.3484 14.8343 19.1045C14.9719 18.9756 15.0973 18.8357 15.2096 18.6865C15.0306 18.6612 14.8463 18.629 14.6557 18.5911C13.9839 18.4575 13.1769 18.2413 12.1808 17.9744L12.1234 17.959C11.024 17.6644 10.1528 17.431 9.46758 17.1835C8.76664 16.9302 8.19505 16.6406 7.72416 16.1996C7.03849 15.5574 6.55864 14.7262 6.34531 13.8113C6.19881 13.183 6.23376 12.5432 6.36494 11.8095C6.4932 11.0923 6.72664 10.2211 7.02122 9.12174L7.45502 7.5028ZM13.4421 2.84152C12.8042 2.72747 12.3924 2.72511 12.045 2.80613C11.419 2.95209 10.8503 3.2804 10.4109 3.74955C9.97479 4.21518 9.70642 4.93452 9.2397 6.64323C9.16384 6.92093 9.08365 7.22023 8.99665 7.54488L8.47902 9.47673C8.17355 10.6167 7.95723 11.4265 7.84152 12.0736C7.72747 12.7114 7.72511 13.1232 7.80613 13.4707C7.95209 14.0967 8.2804 14.6654 8.74955 15.1048C9.00995 15.3487 9.36778 15.5525 9.9772 15.7727C10.5954 15.996 11.4049 16.2136 12.5449 16.519C13.5703 16.7938 14.3303 16.997 14.9482 17.1199C15.5635 17.2422 15.981 17.2723 16.3232 17.23C16.3976 17.2209 16.4691 17.2082 16.5389 17.1919C17.1649 17.0459 17.7335 16.7176 18.1729 16.2485C18.4168 15.9881 18.6207 15.6303 18.8408 15.0208C19.0642 14.4026 19.2817 13.5932 19.5872 12.4532L20.1048 10.5213C20.4103 9.38129 20.6266 8.57151 20.7423 7.92446C20.8564 7.28661 20.8587 6.87479 20.7777 6.52733C20.6317 5.90133 20.3034 5.33267 19.8343 4.89327C19.5739 4.64937 19.216 4.4455 18.6066 4.22535C17.9884 4.00203 17.1789 3.78448 16.0389 3.47902C14.8989 3.17355 14.0892 2.95723 13.4421 2.84152ZM11.0524 9.80588C11.1596 9.40578 11.5709 9.16834 11.971 9.27555L16.8006 10.5696C17.2007 10.6768 17.4381 11.0881 17.3309 11.4882C17.2237 11.8883 16.8125 12.1257 16.4124 12.0185L11.5827 10.7244C11.1826 10.6172 10.9452 10.206 11.0524 9.80588ZM10.2755 12.7036C10.3828 12.3035 10.794 12.066 11.1941 12.1733L14.0919 12.9497C14.492 13.0569 14.7294 13.4682 14.6222 13.8683C14.515 14.2684 14.1038 14.5058 13.7037 14.3986L10.8059 13.6221C10.4058 13.5149 10.1683 13.1037 10.2755 12.7036Z" fill="#868C98"></path>
                  </svg>
               </span>
               <select  class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example">
                  <option selected value="">Select Task Type</option>
                  <option value="1">Bug</option>
                  <option value="2">New-Changes</option>
                  <option value="2">R&D</option>
               </select>
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group ">
            <label  class="form-label">
            Task URL     </label>
            <div class="input-field">
               <span class="icon">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M9.20646 3.18191C8.95433 3.26179 8.70533 3.35257 8.46018 3.45411C7.33792 3.91897 6.3182 4.60032 5.45926 5.45926C4.60032 6.3182 3.91897 7.33792 3.45411 8.46018C3.0852 9.35081 2.85837 10.2922 2.78045 11.25H7.26094C7.29294 10.1541 7.39498 9.0741 7.56457 8.05057C7.7725 6.79558 8.07972 5.63914 8.47522 4.65039C8.69114 4.11057 8.9351 3.61641 9.20646 3.18191ZM12 1.25C10.5883 1.25 9.1904 1.52806 7.88615 2.06829C6.5819 2.60853 5.39683 3.40037 4.3986 4.3986C3.40037 5.39683 2.60853 6.5819 2.0683 7.88615C1.52806 9.1904 1.25 10.5883 1.25 12C1.25 13.4117 1.52806 14.8096 2.06829 16.1138C2.60853 17.4181 3.40037 18.6032 4.3986 19.6014C5.39683 20.5996 6.5819 21.3915 7.88615 21.9317C9.1904 22.4719 10.5883 22.75 12 22.75C13.4117 22.75 14.8096 22.4719 16.1138 21.9317C17.4181 21.3915 18.6032 20.5996 19.6014 19.6014C20.5996 18.6032 21.3915 17.4181 21.9317 16.1138C22.4719 14.8096 22.75 13.4117 22.75 12C22.75 10.5883 22.4719 9.1904 21.9317 7.88615C21.3915 6.5819 20.5996 5.39683 19.6014 4.3986C18.6032 3.40037 17.4181 2.60853 16.1138 2.0683C14.8096 1.52806 13.4117 1.25 12 1.25ZM12 2.75C11.7387 2.75 11.4012 2.87579 11.0088 3.2822C10.6134 3.69161 10.2176 4.33326 9.86793 5.20747C9.52056 6.07589 9.2385 7.12424 9.04439 8.29576C8.88866 9.23569 8.79316 10.2331 8.76162 11.25L15.2384 11.25C15.2068 10.2331 15.1113 9.23569 14.9556 8.29576C14.7615 7.12424 14.4794 6.0759 14.1321 5.20748C13.7824 4.33326 13.3866 3.69161 12.9912 3.2822C12.5988 2.87579 12.2613 2.75 12 2.75ZM16.7391 11.25C16.7071 10.1541 16.605 9.07411 16.4354 8.05057C16.2275 6.79558 15.9203 5.63914 15.5248 4.65039C15.3089 4.11057 15.0649 3.61641 14.7935 3.18191C15.0457 3.26179 15.2947 3.35257 15.5398 3.45411C16.6621 3.91897 17.6818 4.60032 18.5407 5.45926C19.3997 6.31821 20.081 7.33792 20.5459 8.46018C20.9148 9.35082 21.1416 10.2922 21.2195 11.25H16.7391ZM15.2384 12.75L8.76162 12.75C8.79316 13.7669 8.88866 14.7643 9.04439 15.7042C9.2385 16.8758 9.52056 17.9241 9.86793 18.7925C10.2176 19.6667 10.6134 20.3084 11.0088 20.7178C11.4012 21.1242 11.7387 21.25 12 21.25C12.2613 21.25 12.5988 21.1242 12.9912 20.7178C13.3866 20.3084 13.7824 19.6667 14.1321 18.7925C14.4794 17.9241 14.7615 16.8758 14.9556 15.7042C15.1113 14.7643 15.2068 13.7669 15.2384 12.75ZM14.7935 20.8181C15.0649 20.3836 15.3089 19.8894 15.5248 19.3496C15.9203 18.3609 16.2275 17.2044 16.4354 15.9494C16.605 14.9259 16.7071 13.8459 16.7391 12.75H21.2195C21.1416 13.7078 20.9148 14.6492 20.5459 15.5398C20.081 16.6621 19.3997 17.6818 18.5407 18.5407C17.6818 19.3997 16.6621 20.081 15.5398 20.5459C15.2947 20.6474 15.0457 20.7382 14.7935 20.8181ZM9.20646 20.8181C8.9351 20.3836 8.69114 19.8894 8.47521 19.3496C8.07971 18.3609 7.7725 17.2044 7.56457 15.9494C7.39498 14.9259 7.29294 13.8459 7.26094 12.75H2.78045C2.85837 13.7078 3.0852 14.6492 3.45411 15.5398C3.91897 16.6621 4.60032 17.6818 5.45926 18.5407C6.3182 19.3997 7.33792 20.081 8.46018 20.5459C8.70533 20.6474 8.95433 20.7382 9.20646 20.8181Z" fill="#868C98"></path>
                  </svg>
               </span>
               <input type="url" class="form-control" placeholder="Enter Task URL">
            </div>
         </div>
      </div>
      <div class="col-xxl-4 col-md-6 col-lg-6">
         <div class="form-group">
            <div class="input-field">
               <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                     <path d="M7.50029 15.75H13.5007C13.6434 15.75 13.7624 15.7023 13.8577 15.607C13.9531 15.5117 14.0007 15.3927 14.0007 15.25C14.0007 15.1073 13.9531 14.9883 13.8577 14.893C13.7624 14.7977 13.6434 14.75 13.5007 14.75H7.50029C7.35828 14.75 7.23927 14.7977 7.14326 14.893C7.04725 14.9883 6.99958 15.1073 7.00025 15.25C7.00092 15.3927 7.04859 15.5117 7.14326 15.607C7.23793 15.7023 7.35694 15.75 7.50029 15.75ZM7.50029 11.75H13.5007C13.6434 11.75 13.7624 11.7023 13.8577 11.607C13.9531 11.5117 14.0007 11.3927 14.0007 11.25C14.0007 11.1073 13.9531 10.9883 13.8577 10.893C13.7624 10.7977 13.6434 10.75 13.5007 10.75H7.50029C7.35828 10.75 7.23927 10.7977 7.14326 10.893C7.04725 10.9883 6.99958 11.1073 7.00025 11.25C7.00092 11.3927 7.04859 11.5117 7.14326 11.607C7.23793 11.7023 7.35694 11.75 7.50029 11.75ZM5.11612 19.25C4.65542 19.25 4.27105 19.096 3.96303 18.788C3.65501 18.48 3.50067 18.0957 3.5 17.635V2.865C3.5 2.405 3.65434 2.021 3.96303 1.713C4.27172 1.405 4.65608 1.25067 5.11612 1.25H12.3296C12.545 1.25 12.7543 1.29333 12.9577 1.38C13.161 1.46667 13.335 1.583 13.4797 1.729L17.021 5.27C17.1656 5.41533 17.2817 5.58933 17.369 5.792C17.4563 5.99467 17.5 6.204 17.5 6.42V17.634C17.5 18.094 17.3457 18.4783 17.037 18.787C16.7283 19.0957 16.3446 19.25 15.8859 19.25H5.11612ZM12.5006 5.442V2.25H5.11612C4.9621 2.25 4.82076 2.314 4.69209 2.442C4.56341 2.57 4.4994 2.711 4.50007 2.865V17.635C4.50007 17.7883 4.56408 17.9293 4.69209 18.058C4.82009 18.1867 4.9611 18.2507 5.11512 18.25H15.8859C16.0392 18.25 16.1802 18.186 16.3089 18.058C16.4376 17.93 16.5016 17.7887 16.5009 17.634V6.25H13.3087C13.076 6.25 12.8833 6.17333 12.7307 6.02C12.578 5.86667 12.5013 5.674 12.5006 5.442Z" fill="#96A5B8"></path>
                  </svg>
               </span>
               <label for="" class="form-label"> Description</label>
               <textarea class="form-control modal_description" placeholder="Enter Description"></textarea>
            </div>
         </div>
      </div>
      <div class="col-xxl-8 col-md-12 col-lg-6">
         <div class="">
            <label for="" class="form-label">Add Attachments</label>
            <div class="pt-md-2">
               <p class="text-muted"></p>
               <input type="file" class="filepond filepond-input-multiple" multiple name="" accept="image/png, image/jpeg, image/gif"
                  data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5">
               <div class="label-container d-flex flex-wrap gap-3 w-100 pt-2">
                  <div class="label-item drag-drop-label-item d-flex align-items-center gap-3">
                     <a target="_blank" href="">
                     <span class="label text_wrap d-block"></span>
                     </a>
                     <!-- <button class="btn_delete_icon delete-files" data-toggle="tooltip" title="Delete" data-bs-placement="top" data-id=""
                        data-url="" type="button">
                        <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="#808080" />
                                <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="#808080" />
                                <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="#808080" />
                                <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="#808080" />
                            </g>
                            <defs>
                                <clipPath id="clip0_281_10181">
                                    <rect width="11" height="11" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        </button> -->
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- <div class="col-12 d-flex justify-content-end">
         <button class="btn btn_primary">Save</button>
      </div> -->
   </div>
</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 one</option>
                  <option value="1">One</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="https://cdn.rawgit.com/jzaefferer/jquery-validation/1.19.3/dist/jquery.validate.min.js"></script>
<script src="{{ url('js/libs/filepond/filepond.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ url('js/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
<script src="{{ url('js/task/task.add.js') }}"></script>
@endsection