@extends('ui-common.layouts.master')
@section('title')
@lang('Employee List')
@endsection
@section('css')   
<!-- DataTable 1.11.5 -->
<link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
<!-- 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" />
@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Equipment List
@endslot
@slot('title')
Equipment
@endslot
@endcomponent
<style>
   .equip_list{
      font-size:20px !important;
      font-weight:600 !important;
      color:#404040 !important;
   }
   .modal_popup_header{
   font-size:16px !important;
   color:#1B67E3 !important;
   border-bottom: 3px solid #1B67E3 !important;
   font-weight:600 !important;
   line-height: 24px !important;
   }
   .datatable_search {
   top: -60px !important;
   }    
   .select2-container .select2-selection--single .select2-selection__rendered{
   padding-left:12px !important
   }
   .select-1 .select2-container .select2-selection--single .select2-selection__rendered{
   padding-left:42px !important
   }
   .table_search_custom input[type=search] {
   width: 172px !important;
   }
   .datatable_margin_top{
      margin-top:45px !important;
   }
   .datatable_margin_entires{
      position:absolute !important;
      top:60px !important
   }
   .form-select:focus {
    outline: 0;  
    box-shadow: none;  
}

   
   @media only screen and (max-width: 1199px) {
   .table_search_custom input[type=search] {
      width: 270px !important;
   }
   .datatable_margin_top {
      margin-top: 100px !important;
   }

   }
   @media screen and (min-width: 992px) and (max-width: 1199px) {
   .datatable_search {
   top: -3px !important;
   left: 3px;
   }
   }
   @media only screen and (max-width: 991px) {
   .datatable_search {
   top: -12px !important;
   }
   }
</style>
<div class="row">
   <div class="card pb-3">
      <div class="col-12">
         <div class="row pt-3 px-md-3">
            <div class="col-12">
               <p class="equip_list">Equipment List</p>
            </div>
         </div>
         <div class="row  pt-3 px-md-3 justify-content-xl-end">
            <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12">
               <div class="common_select2">
                  <select class="js-example-basic-single form-control" name="state">
                     <option selected value="">Status</option>
                     <option value="1">Action</option>
                     <option value="2">Data</option>
                  </select>
               </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12 px-xl-0 py-2 py-md-0">
               <div class="common_select2">
                  <select class="js-example-basic-single form-control" name="state">
                     <option selected value="">Type</option>
                     <option value="1">Action</option>
                     <option value="2">Data</option>
                  </select>
               </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12 py-md-2 py-lg-0">
               <div class="common_select2">
                  <select class="js-example-basic-single form-control" name="state">
                     <option selected value="">Category</option>
                     <option value="1">Action</option>
                     <option value="2">Data</option>
                  </select>
               </div>
            </div>
            <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12 pt-lg-2 pt-xl-0 px-xl-0 py-md-2 py-lg-0 py-2 py-md-0">
               <div class="common_select2">
                  <select class="js-example-basic-single form-control" name="state">
                     <option selected value="">Action</option>
                     <option value="1">Action</option>
                     <option value="2">Data</option>
                  </select>
               </div>
            </div>
            <div class="col-auto pt-lg-2 pt-xl-0">
               <button class="btn btn_primary " data-bs-toggle="modal" data-bs-target="#equipment_popup">
                  Add  Equipment
                  <span class="ms-1 ">
                     <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none">
                        <path d="M6.00001 6.50001H1.00001C0.858007 6.50001 0.73934 6.45201 0.644007 6.35601C0.548674 6.26001 0.500674 6.14101 0.500007 5.99901C0.49934 5.85701 0.54734 5.73834 0.644007 5.64301C0.740674 5.54767 0.85934 5.50001 1.00001 5.50001H6.00001V0.500007C6.00001 0.358007 6.04801 0.23934 6.14401 0.144007C6.24001 0.0486736 6.35901 0.000673516 6.50101 6.84931e-06C6.64301 -0.000659817 6.76167 0.0473402 6.85701 0.144007C6.95234 0.240674 7.00001 0.35934 7.00001 0.500007V5.50001H12C12.142 5.50001 12.2607 5.54801 12.356 5.64401C12.4513 5.74001 12.4993 5.85901 12.5 6.00101C12.5007 6.14301 12.4527 6.26167 12.356 6.35701C12.2593 6.45234 12.1407 6.50001 12 6.50001H7.00001V11.5C7.00001 11.642 6.95201 11.7607 6.85601 11.856C6.76001 11.9513 6.64101 11.9993 6.49901 12C6.35701 12.0007 6.23834 11.9527 6.14301 11.856C6.04767 11.7593 6.00001 11.6407 6.00001 11.5V6.50001Z" fill="white"/>
                     </svg>
                  </span>
               </button>
            </div>
         </div>
         <div class="row px-md-3">
            .
            <div class="col-12 common_datatable_theme table_search_custom">
               <table id="equipment_list_table" class=" table theme_table dt-responsive nowrap align-middle  "  style="width:100%">
                  <thead>
                     <tr>
                        <th scope="col" style="width: 10px;"class="no-sortorder">
                           <div class="form-check  ms-3 ms-xl-0">
                              <input class="form-check-input fs-14  check_All" type="checkbox" id="checkAll" value="option">
                           </div>
                        </th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Category</th>
                        <th>Hourly Rate</th>
                        <th>Effective Data</th>
                        <th>status</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td scope="row">
                           <div class="form-check">
                              <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox" name="checkAll" value="option1">
                           </div>
                        </td>
                        <td>Mini Excavators</td>
                        <td>Light Vehicles</td>
                        <td>Asphalt and Paving</td>
                        <td>$15</td>
                        <td>12.02.2025</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee view" checked="">
                           </div>
                        </td>
                        <td>
                           <div class="d-flex gap-1 pt-1">
                              <button class="btn_edit_view" data-toggle="tooltip" title="view" data-bs-placement="top">
                                 <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="#808080"/>
                                    <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="#808080"/>
                                 </svg>
                              </button>
                              <button class="btn_edit_icon" data-toggle="tooltip" title="Edit" data-bs-placement="top">
                                 <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="#808080"/>
                                    <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="#808080" stroke-width="0.801931" stroke-linecap="round"/>
                                 </svg>
                              </button>
                              <button class="btn_delete_icon" data-toggle="tooltip" title="Delete" data-bs-placement="top">
                                 <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>
                        </td>
                     </tr>
                     <tr>
                        <td scope="row">
                           <div class="form-check">
                              <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox" name="checkAll" value="option1">
                           </div>
                        </td>
                        <td>elvator</td>
                        <td>Light</td>
                        <td>Asphalt </td>
                        <td>$15</td>
                        <td>09.02.2025</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee view" checked="">
                           </div>
                        </td>
                        <td>
                           <div class="d-flex gap-1 pt-1">
                              <button class="btn_edit_view" data-toggle="tooltip" title="view" data-bs-placement="top">
                                 <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="#808080"/>
                                    <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="#808080"/>
                                 </svg>
                              </button>
                              <button class="btn_edit_icon" data-toggle="tooltip" title="Edit" data-bs-placement="top">
                                 <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="#808080"/>
                                    <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="#808080" stroke-width="0.801931" stroke-linecap="round"/>
                                 </svg>
                              </button>
                              <button class="btn_delete_icon" data-toggle="tooltip" title="Delete" data-bs-placement="top">
                                 <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>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Add equipment Modal Popup -->  
<div class="modal fade" id="equipment_popup" aria-hidden="true" aria-labelledby="..." tabindex="-1"  data-bs-focus="false">
   <div class="modal-dialog modal-md modal-dialog-centered">
      <div class="modal-content popup-radius py-2">
         <div class="modal-header close-btn-svg ctl-pad-mod-hdr pt-2">
            <h6 class="modal-title d-flex align-items-center" id="exampleModalgridLabel">                       
               <span class="modal_popup_header pb-1">
               Create Equipment
               </span>
            </h6>
            <button type="button " class="btn mt-1 px-0" data-bs-dismiss="modal" aria-label="Close">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">
                  <g clip-path="url(#clip0_299_7281)">
                     <path d="M11.9998 2.3998C14.4133 2.3998 16.7279 3.35855 18.4345 5.06513C20.1411 6.77171 21.0998 9.08634 21.0998 11.4998C21.0998 13.9133 20.1411 16.2279 18.4345 17.9345C16.7279 19.6411 14.4133 20.5998 11.9998 20.5998C9.58634 20.5998 7.27171 19.6411 5.56513 17.9345C3.85855 16.2279 2.8998 13.9133 2.8998 11.4998C2.8998 9.08634 3.85855 6.77171 5.56513 5.06513C7.27171 3.35855 9.58634 2.3998 11.9998 2.3998ZM11.9998 22.6998C14.9702 22.6998 17.819 21.5198 19.9194 19.4194C22.0198 17.319 23.1998 14.4702 23.1998 11.4998C23.1998 8.52938 22.0198 5.68062 19.9194 3.58021C17.819 1.4798 14.9702 0.299805 11.9998 0.299805C9.02938 0.299805 6.18062 1.4798 4.08021 3.58021C1.9798 5.68062 0.799805 8.52938 0.799805 11.4998C0.799805 14.4702 1.9798 17.319 4.08021 19.4194C6.18062 21.5198 9.02938 22.6998 11.9998 22.6998ZM8.45606 7.95606C8.04481 8.3673 8.04481 9.0323 8.45606 9.43918L10.5123 11.4954L8.45606 13.5517C8.04481 13.9629 8.04481 14.6279 8.45606 15.0348C8.8673 15.4417 9.5323 15.4461 9.93918 15.0348L11.9954 12.9786L14.0517 15.0348C14.4629 15.4461 15.1279 15.4461 15.5348 15.0348C15.9417 14.6236 15.9461 13.9586 15.5348 13.5517L13.4786 11.4954L15.5348 9.43918C15.9461 9.02793 15.9461 8.36293 15.5348 7.95606C15.1236 7.54918 14.4586 7.54481 14.0517 7.95606L11.9954 10.0123L9.93918 7.95606C9.52793 7.54481 8.86293 7.54481 8.45606 7.95606Z" fill="#96A5B8"/>
                  </g>
                  <defs>
                     <clipPath id="clip0_299_7281">
                        <rect width="22.4" height="22.4" fill="white" transform="translate(0.799805 0.299805)"/>
                     </clipPath>
                  </defs>
               </svg>
            </button>
         </div>
         <form role="form" action="javascript:void(0);" novalidate="novalidate" autocomplete="off">
            <div class="modal-body  ctl-pad-mod-bod pt-1">
               <div class="row">
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group">
                        <div class="input-field">
                           <label for="" class="form-label">  Name <sup class="required-start-icon">*</sup></label>
                           <span class="icon">
                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                 <path d="M10.0001 8.33366C11.841 8.33366 13.3334 6.84127 13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10.0001 1.66699C8.15913 1.66699 6.66675 3.15938 6.66675 5.00033C6.66675 6.84127 8.15913 8.33366 10.0001 8.33366Z" stroke="#96A5B8" stroke-width="1.5"/>
                                 <path d="M16.6668 14.584C16.6668 16.6548 16.6668 18.334 10.0002 18.334C3.3335 18.334 3.3335 16.6548 3.3335 14.584C3.3335 12.5132 6.3185 10.834 10.0002 10.834C13.6818 10.834 16.6668 12.5132 16.6668 14.584Z" stroke="#96A5B8" stroke-width="1.5"/>
                              </svg>
                           </span>
                           <input type="text" class="form-control " placeholder="Enter Equipment Name">
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group ">
                        <label for="department_id" class="form-label">
                        Type  </label>
                        <div class="input-field">
                           <select id="" class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" name=""
                           >
                              <option selected value="">Select Type</option>
                              <option value="1">HR</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group ">
                        <label for="department_id" class="form-label">
                        Category  </label>
                        <div class="input-field">
                           <span class="icon z-index">
                           </span>
                           <select id="" class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" name="">
                              <option selected value="">Select Category</option>
                              <option value="1">HR</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group ">
                        <label for="department_id" class="form-label">
                        Make  </label>
                        <div class="input-field">
                           <span class="icon z-index">
                           </span>
                           <select id="" class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" name="">
                              <option selected value="">Select Make</option>
                              <option value="1">HR</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group ">
                        <label for="department_id" class="form-label">
                        Model  </label>
                        <div class="input-field">
                           <span class="icon z-index">
                           </span>
                           <select id="" class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" name="">
                              <option selected value="">Select Model</option>
                              <option value="1">HR</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group select-1">
                        <label for="department_id" class="form-label">
                        Year  </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="M1.6665 9.99967C1.6665 6.85698 1.6665 5.28563 2.64281 4.30932C3.61913 3.33301 5.19047 3.33301 8.33317 3.33301H11.6665C14.8092 3.33301 16.3805 3.33301 17.3569 4.30932C18.3332 5.28563 18.3332 6.85698 18.3332 9.99967V11.6663C18.3332 14.809 18.3332 16.3804 17.3569 17.3567C16.3805 18.333 14.8092 18.333 11.6665 18.333H8.33317C5.19047 18.333 3.61913 18.333 2.64281 17.3567C1.6665 16.3804 1.6665 14.809 1.6665 11.6663V9.99967Z" stroke="#96A5B8" stroke-width="1.5"/>
                                 <path d="M5.8335 3.33301V2.08301" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"/>
                                 <path d="M14.1665 3.33301V2.08301" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"/>
                                 <path d="M2.08325 7.5H17.9166" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"/>
                                 <path d="M14.9999 14.1667C14.9999 14.6269 14.6268 15 14.1666 15C13.7063 15 13.3333 14.6269 13.3333 14.1667C13.3333 13.7064 13.7063 13.3333 14.1666 13.3333C14.6268 13.3333 14.9999 13.7064 14.9999 14.1667Z" fill="#96A5B8"/>
                                 <path d="M14.9999 10.8333C14.9999 11.2936 14.6268 11.6667 14.1666 11.6667C13.7063 11.6667 13.3333 11.2936 13.3333 10.8333C13.3333 10.3731 13.7063 10 14.1666 10C14.6268 10 14.9999 10.3731 14.9999 10.8333Z" fill="#96A5B8"/>
                                 <path d="M10.8334 14.1667C10.8334 14.6269 10.4603 15 10.0001 15C9.53984 15 9.16675 14.6269 9.16675 14.1667C9.16675 13.7064 9.53984 13.3333 10.0001 13.3333C10.4603 13.3333 10.8334 13.7064 10.8334 14.1667Z" fill="#96A5B8"/>
                                 <path d="M10.8334 10.8333C10.8334 11.2936 10.4603 11.6667 10.0001 11.6667C9.53984 11.6667 9.16675 11.2936 9.16675 10.8333C9.16675 10.3731 9.53984 10 10.0001 10C10.4603 10 10.8334 10.3731 10.8334 10.8333Z" fill="#96A5B8"/>
                                 <path d="M6.66667 14.1667C6.66667 14.6269 6.29357 15 5.83333 15C5.3731 15 5 14.6269 5 14.1667C5 13.7064 5.3731 13.3333 5.83333 13.3333C6.29357 13.3333 6.66667 13.7064 6.66667 14.1667Z" fill="#96A5B8"/>
                                 <path d="M6.66667 10.8333C6.66667 11.2936 6.29357 11.6667 5.83333 11.6667C5.3731 11.6667 5 11.2936 5 10.8333C5 10.3731 5.3731 10 5.83333 10C6.29357 10 6.66667 10.3731 6.66667 10.8333Z" fill="#96A5B8"/>
                              </svg>
                           </span>
                           <select id="" class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2" aria-label="Default select example" name="">
                              <option selected value="">Select Year</option>
                              <option value="1">2005</option>
                              <option value="2">1990</option>
                              <option value="3">2001</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group">
                        <div class="input-field">
                           <label for="" class="form-label">  Hourly Rate</label>
                           <span class="icon">
                              <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
                                 <path d="M13.3792 6.7331C13.3792 6.7331 12.8927 4.4279 9.49993 4.1772M9.49993 4.1772V1.92004M9.49993 4.1772C9.29526 4.163 9.09015 4.15513 8.88498 4.15537C7.41049 4.15537 5.49487 5.38265 5.49487 7.09648C5.49487 8.81119 6.88289 9.48292 9.32785 9.90046C11.7728 10.318 13.505 11.2378 13.505 13.129C13.505 15.0201 11.4784 15.8456 9.77858 15.8456C9.68565 15.8454 9.59273 15.8437 9.49993 15.8386M5.67744 13.3666C5.67744 13.3666 6.66101 15.6936 9.49993 15.8386M9.49993 15.8386V18.08" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"/>
                              </svg>
                           </span>
                           <input type="text" class="form-control " placeholder="0.00">
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <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="M2.16699 9.99967C2.16699 6.85698 2.16699 5.28563 3.1433 4.30932C4.11961 3.33301 5.69096 3.33301 8.83366 3.33301H12.167C15.3097 3.33301 16.881 3.33301 17.8573 4.30932C18.8337 5.28563 18.8337 6.85698 18.8337 9.99967V11.6663C18.8337 14.809 18.8337 16.3804 17.8573 17.3567C16.881 18.333 15.3097 18.333 12.167 18.333H8.83366C5.69096 18.333 4.11961 18.333 3.1433 17.3567C2.16699 16.3804 2.16699 14.809 2.16699 11.6663V9.99967Z" stroke="#96A5B8" stroke-width="1.5"></path>
                                 <path d="M6.33301 3.33301V2.08301" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"></path>
                                 <path d="M14.667 3.33301V2.08301" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"></path>
                                 <path d="M2.58301 7.5H18.4163" stroke="#96A5B8" stroke-width="1.5" stroke-linecap="round"></path>
                                 <path d="M15.4997 14.1667C15.4997 14.6269 15.1266 15 14.6663 15C14.2061 15 13.833 14.6269 13.833 14.1667C13.833 13.7064 14.2061 13.3333 14.6663 13.3333C15.1266 13.3333 15.4997 13.7064 15.4997 14.1667Z" fill="#96A5B8"></path>
                                 <path d="M15.4997 10.8333C15.4997 11.2936 15.1266 11.6667 14.6663 11.6667C14.2061 11.6667 13.833 11.2936 13.833 10.8333C13.833 10.3731 14.2061 10 14.6663 10C15.1266 10 15.4997 10.3731 15.4997 10.8333Z" fill="#96A5B8"></path>
                                 <path d="M11.3337 14.1667C11.3337 14.6269 10.9606 15 10.5003 15C10.0401 15 9.66699 14.6269 9.66699 14.1667C9.66699 13.7064 10.0401 13.3333 10.5003 13.3333C10.9606 13.3333 11.3337 13.7064 11.3337 14.1667Z" fill="#96A5B8"></path>
                                 <path d="M11.3337 10.8333C11.3337 11.2936 10.9606 11.6667 10.5003 11.6667C10.0401 11.6667 9.66699 11.2936 9.66699 10.8333C9.66699 10.3731 10.0401 10 10.5003 10C10.9606 10 11.3337 10.3731 11.3337 10.8333Z" fill="#96A5B8"></path>
                                 <path d="M7.16667 14.1667C7.16667 14.6269 6.79357 15 6.33333 15C5.8731 15 5.5 14.6269 5.5 14.1667C5.5 13.7064 5.8731 13.3333 6.33333 13.3333C6.79357 13.3333 7.16667 13.7064 7.16667 14.1667Z" fill="#96A5B8"></path>
                                 <path d="M7.16667 10.8333C7.16667 11.2936 6.79357 11.6667 6.33333 11.6667C5.8731 11.6667 5.5 11.2936 5.5 10.8333C5.5 10.3731 5.8731 10 6.33333 10C6.79357 10 7.16667 10.3731 7.16667 10.8333Z" fill="#96A5B8"></path>
                              </svg>
                           </span>
                           <label for="date_of_birth" class="form-label ">Effective Date </label>
                           <input type="text" class="form-control  flatpickr-input"
                              data-provider="flatpickr" data-altFormat="m/d/Y"
                              value=""
                              placeholder="dd/mm/yyyy" name="" id="">
                        </div>
                     </div>
                  </div>
                  <div class="col-12 pt-2">
                     <label for="" class="form-label">Upload Equipment Image</label>
                     <div class="file-upload-wrapper"
                        onclick="document.getElementById('fileInput').click();">
                        <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="21" height="20"
                           viewBox="0 0 21 20" fill="none">
                           <path
                              d="M12.9006 11.2008C12.9006 12.5263 11.8261 13.6008 10.5006 13.6008C9.1751 13.6008 8.10059 12.5263 8.10059 11.2008C8.10059 9.8753 9.1751 8.80078 10.5006 8.80078C11.8261 8.80078 12.9006 9.8753 12.9006 11.2008Z"
                              stroke="#404040" stroke-width="1.5" />
                           <circle cx="10.5002" cy="6.0002" r="0.8" fill="#404040" />
                           <path
                              d="M17.7008 12.8002V9.6002C17.7008 7.39106 15.9099 5.6002 13.7008 5.6002H13.6C13.2447 4.22001 11.9919 3.2002 10.5008 3.2002C9.00971 3.2002 7.75683 4.22001 7.4016 5.6002H7.30078C5.09164 5.6002 3.30078 7.39106 3.30078 9.6002V12.8002C3.30078 15.0093 5.09164 16.8002 7.30078 16.8002H13.7008C15.9099 16.8002 17.7008 15.0093 17.7008 12.8002Z"
                              stroke="#404040" stroke-width="1.5" stroke-linejoin="round" />
                        </svg>
                        <input type="file" class="form-control" id="fileInput" accept=".jpg, .png, .gif"
                           name="profile">
                        @if (isset($edit_list->profiles->id))
                        <img src="{{ url('uploads/' . tenant()->id . '/users/profiles/' . $edit_list->profiles->file_name) }}"
                           alt="Image preview"
                           style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px;">
                        @endif
                     </div>
                     <div class="pt-1 d-flex align-items-center gap-2">
                        <p class="only_image_jpg">Supported: .png, .jpg, .jpeg</p>
                        <button class="btn_delete_icon delete-files " data-toggle="tooltip" data-bs-placement="top" data-id="38" type="button" aria-label="Delete" 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="#808080"></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="#808080"></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="#808080"></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="#808080"></path>
                              </g>
                              <defs>
                                 <clipPath id="clip0_281_10181">
                                    <rect width="11" height="11" fill="white"></rect>
                                 </clipPath>
                              </defs>
                           </svg>
                        </button>
                     </div>
                     <p id="error-message" style="color: #f06548; display: none;">Only JPG, PNG, and GIF images are allowed.</p>
                     <!-- Error message -->
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                     <div class="gap-2 d-flex justify-content-end my-0 pt-3">
                        <button type="button"  class="btn btn_discard  rounded sweetDeptSubmit" data-bs-dismiss="modal">
                        <span class="fs-16">
                        Discard
                        </span>
                        </button>
                        <button type="submit" name="submit" class="btn btn_primary" >
                        <span class="fs-16">
                        Submit
                        </span>
                        </button>
                     </div>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- Add Department Modal Popup -->    
<!--end row-->
@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="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
<script src="{{ url('js/app.js') }}"></script>
<script>   
   $(document).ready(function() {
     // Initialize select2
     $("#department_id").select2({
         width: '100%',
         dropdownParent: $("#sub_dept_popup")
     });
   
     $("#edit_department_id").select2({
         width: '100%',
         dropdownParent: $("#update_sub_dept_popup")
     });
   
     $('.js-example-basic-single').select2();
   
     // Initialize DataTable
     $('#equipment_list_table').DataTable({
         searching: true,
         info: true,
         lengthChange: true,
         pagingType: "simple_numbers",
         language: {
             "paginate": {
                 "previous": '<span class="fa fa-chevron-left"></span>',
                 "next": '<span class="fa fa-chevron-right"></span>',
             },
             "search": ""  // Remove the search label
         },
         columnDefs: [
             {'targets': [0, 1, 6, 7], 'orderable': false}
         ],
         initComplete: function () {
             $('#equipment_list_table_filter input').attr('placeholder', 'Search');
             $('#equipment_list_table_filter').parent().removeClass('col-md-6 ');
             $('#equipment_list_table_filter').parent().addClass('col-md-12 ps-lg-1');
             $('#equipment_list_table_filter').parent().parent().addClass('datatable_search');
             $('#equipment_list_table').parent().addClass('col-sm-12 datatable_margin_top');
             
             var svgIcon = '<svg width="21" height="20" 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="#111827"/><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="#111827"/></svg>';
              $('#equipment_list_table_filter input').before(svgIcon);
              $("#equipment_list_table_length").parent().addClass('datatable_margin_entires')

         },
     });
   
     // Checkbox toggle
     $(".check_All").click(function() {
         $(".individual").prop("checked", $(this).prop("checked"));
     });
     $(".check_Allone").click(function() {
         $(".individualone").prop("checked", $(this).prop("checked"));
     });
        
     // Tooltip initialization
     $('[data-toggle="tooltip"]').tooltip();
   });
   
    
</script>
@endsection