@extends('tenants.layouts.master')
@section('title')
@lang('equipment 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" />
   <!-- SweetAlert2 CSS -->
   <link href="{{ url('css/sweetalert-2@11.0.20/sweetalert2.min.css') }}" rel="stylesheet">
   <link href="{{ url('css/equipment/equipment.index.css') }}" rel="stylesheet" />

@endsection
@section('content')
@component('tenants.components.breadcrumb')
   @slot('li_1')
   Equipment List
   @endslot
   @slot('title')
   Equipment
   @endslot
@endcomponent

<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="common_select2">
               <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12 py-md-2 py-lg-0">
               <input type="text" id="search_equipment" class="form-control" placeholder="Search Equipment">
               </div>
            </div> --}}
            <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="0">Active</option>
                     <option value="1">Inactive</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="equp_type_id" id="equp_type_id">
                     <option selected value="">All Type</option>
                     @foreach($equp_types as $type)
                           <option value="{{ $type->id }}" {{ old('equp_type_id') == $type->id ? 'selected' : '' }}>
                              {{ $type->name }}
                           </option>
                     @endforeach
                  </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="equp_category_id" id="equp_category_id">
                     <option selected value="">All Category</option>
                     @foreach($equp_categories as $category)
                        <option value="{{ $category->id }}" {{ old('equp_category_id') == $category->id ? 'selected' : '' }}>
                              {{ $category->name }}
                        </option>
                     @endforeach
                  </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" id="equipment-bulk-action" name="equipment_action">
                     <option selected value="">Action</option>
                     <option value="delete">Delete</option>
                  </select>
               </div>
               
               </div>
            <div class="col-auto pt-lg-2 pt-xl-0">
               @can('equipment create')
                  <button class="btn btn_primary equip" id="addEquipBtn" 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>
               @endcan
               </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="head-bottom-left-radius">
                            <div class="form-check ctl-tab-hdr-che">
                                <input class="form-check-input fs-14 cursor-pointer check_All" type="checkbox" id="checkAll" value="option">
                            </div>
                        </th>   
                        <th data-ordering="false">Created Date</th>       
                        <th data-ordering="false">Name</th>
                        <th data-ordering="false">Type</th>
                        <th data-ordering="false">Category</th>
                        <th data-ordering="false">Hourly Rate</th>
                        <th data-ordering="false">status</th>
                        <th class="head-bottom-right-radius">Action</th>
                    </tr>
                  </thead>
                  <tbody></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" id="modalHeading">
               Create Equipment
               </span>
            </h6>
            <button type="button " class="btn mt-1 px-0 close" 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" id="equipmentForm" action="javascript:void(0);" novalidate="novalidate" autocomplete="off">
            @csrf
            <input type="hidden" id="equipment_id" name="equipment_id" value="">
            <input type="hidden" name="file_remove_status" id="file_remove_status" value="0">
            {{-- <input type="hidden" id="equipment_category_id" name="equipment_category_id" value=""> --}}
            {{-- <input type="hidden" id="equipment_type_id" name="equipment_type_id" value=""> --}}
            <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 class="form-label name ">Name <span class="required-start-icon">*</span></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" name="name" id="name" class="form-control"placeholder="Enter Equipment Name" required>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group common_select2">
                        <label class="form-label equipment_type_id">Type <span class="required-start-icon">*</span></label>
                        <div class="input-field">
                           <select class="js-example-basic-single form-control" name="equipment_type_id" id="equipment_type_id">
                              <option selected value="">All Type</option>
                              @foreach($equp_types as $type)
                                    <option value="{{ $type->id }}" {{ old('equipment_type_id') == $type->id ? 'selected' : '' }}>
                                       {{ $type->name }}
                                    </option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group common_select2">
                        <label class="form-label equipment_category_id">Category<span class="required-start-icon">*</span></label>
                        <div class="input-field">
                           <span class="icon z-index">
                           </span>
                           <select class="js-example-basic-single form-control" name="equipment_category_id" id="equipment_category_id">
                              <option selected value="">All Category</option>
                              @foreach($equp_categories as $category)
                                 <option value="{{ $category->id }}" {{ old('equp_category_id') == $category->id ? 'selected' : '' }}>
                                       {{ $category->name }}
                                 </option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group">
                        <div class="input-field">
                           <label class="form-label hourly_rate ">Hourly Rate <span class="required-start-icon">*</span></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"name="hourly_rate" id="hourly_rate" class="form-control" placeholder="Enter the Hourly Rate">
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6 col-sm-12 pt-2">
                     <div class="form-group">
                        <div class="input-field">
                           <label class="form-label serial_number">Serial Number</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"  name="serial_number" id="serial_number" 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">
                           <label class="form-label location">Location</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" name="location" id="location"class="form-control " placeholder="Enter Location">
                        </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 ">Purchase Date </label>
                           <input type="text" id="purchase_date" name="purchase_date" class="form-control  flatpickr-input"
                              data-provider="flatpickr" data-altFormat="m/d/Y"
                              value=""
                              placeholder="mm/dd/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 Icon (Shown by Default) -->
                        <div id="defaultIcon">
                           <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>
                        </div>
                        <!-- File Input -->
                        <input type="file" class="form-control" id="fileInput" accept=".jpg, .png, .gif" name="profile" style="display: none;">
                     
                        <!-- Image Preview (Hidden Initially) -->
                        <img id="imagePreview" src="" alt="Image preview"
                              style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; display: none;">
                     </div>
                     
                     <div class="pt-1 d-flex align-items-center gap-2 img-msg-cls">
                        <p class="only_image_jpg">Supported: .png, .jpg, .jpeg</p>
                        <button class="btn_delete_icon delete-files" id="deleteImageBtn" 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="#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>
                     <p id="error-message" class="img-msg" 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 sweetEquipSubmit discard hide-on-view" data-bs-dismiss="modal">
                        <span class="fs-16">
                        Discard
                        </span>
                        </button>
                        <button type="submit" name="submit" class="btn btn_primary submit1 hide-on-view">
                        <span class="fs-16">
                        Submit
                        </span>
                        </button>
                     </div>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>  
<!--end row-->
@endsection
@section('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/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>

<script>   
   $(document).ready(function() {
     // Initialize select2
      //   $("#equipment_id").select2({
      //       width: '100%',
      //       dropdownParent: $("#sub_dept_popup")
      //   });
      $("#edit_equipment_id").select2({
         width: '100%',
         dropdownParent: $("#update_sub_dept_popup")
      });
    
      $('.close, .discard').on('click', function () {
         $('#equipmentForm')[0].reset();
         $('#equipment_id').val('');
         $('#name').val('');
         $('#equipment_type_id').val('');
         $('#equipment_category_id').val('');
         $('#hourly_rate').val('');
         $('#serial_number').val('');
         $('#equipment_popup').modal('hide');
         $('#equipmentForm').validate().resetForm();
         $('.is-invalid').removeClass('is-invalid');
      });
      $(".js-example-basic-single").select2();

      let equipmentTable = $('#equipment_list_table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: "{{ route('equipment.list') }}",
            type: "GET",
            data: function (d) {
                d.equipment_type_id = $('#equp_type_id').val(); 
                d.equipment_category_id = $('#equp_category_id').val(); 
                d.status = $('.js-example-basic-single').val(); 
            }
        },
        columns: [
            { data: 'checkbox', orderable: false, searchable: false },
            { 
                data: 'created_at', 
                render: function (data) {
                    return data ? new Date(data).toLocaleDateString() : 'N/A';
                } 
            },
            
            { data: 'name' },
            { data: 'equipment_type_name' },
            { data: 'equipment_category_name' },
            { data: 'hourly_rate' },
            { data: 'status', orderable: false, searchable: false },
            { data: 'actions', orderable: false, searchable: false }
        ],
        columnDefs: [
            {
                targets: 0,
                render: function (data, type, row) {
                    return `<div class="form-check ctl-tab-hdr-che">
                                <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox" value="${row.id}"> 
                            </div>`;
                }
            },
            {
                targets: 6,
                render: function (data, type, row) {
                    let checked = row.status == 0 ? 'checked' : '';
                    return `<div class="form-check form-switch">
                                <input type="checkbox" class="form-check1 form-check-input equip-status-toggle" data-id="${row.id}" ${checked}>
                            </div>`;
                }
            }
        ],
        drawCallback: function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
      });

      $('#equp_type_id, #equp_category_id, .js-example-basic-single').on('change', function () {
         equipmentTable.ajax.reload();
      });
      $("#fileInput").on("change", function (event) {
        let file = event.target.files[0];

         if (file) {
               let reader = new FileReader();
               reader.onload = function (e) {
                  $("#imagePreview").attr("src", e.target.result).show(); 
                  $("#defaultIcon").hide(); 
               };
               reader.readAsDataURL(file);
         }
      });
      $("#deleteImageBtn").on("click", function () {
         $("#file_remove_status").val(1);
         $("#fileInput").val(""); 
         $("#imagePreview").attr('src','').hide();
         $("#defaultIcon").html(`
            <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>
         `).show();
      });
      $("#addEquipBtn").click(function(){
        $('#equipment_popup').modal('show');
        $('#equipmentForm')[0].reset();
        $('#equipmentForm').validate().resetForm();
        $('.is-invalid').removeClass('is-invalid');
      });

      $("#equipmentForm").validate({
         errorElement: "span",
         errorClass: "text-danger",
         rules: {
            name: {
                required: true,
                minlength: 3
            },
            equipment_type_id: {
                required: true
            },
            equipment_category_id: {
                required: true
            },
            hourly_rate: {
                required: true,
                number: true,
                min: 0
            },
           
         },
         messages: {
            name: {
                required: "Please enter the equipment name",
                minlength: "Equipment name must be at least 3 characters"
            },
            equipment_type_id: {
                required: "Please select an equipment type"
            },
            equipment_category_id: {
                required: "Please select an equipment category"
            },
            hourly_rate: {
                required: "Please enter the hourly rate",
                number: "Please enter a valid number",
                min: "Hourly rate cannot be negative"
            },
         },
           errorPlacement: function (error, element) {
            error.addClass("invalid-feedback");
            if (element.hasClass("js-example-basic-single")) {
               error.insertAfter(element.next(".select2-container"));
            } else {
               error.insertAfter(element);
            }
         },
         highlight: function (element) {
               $(element).addClass("is-invalid");
         },
         unhighlight: function (element) {
               $(element).removeClass("is-invalid");
         },
         submitHandler: function (form) {
            let EquipmentId = $("#equipment_id").val().trim(); 
            let formData = new FormData(form);
            if ($("#fileInput")[0].files.length > 0) {
               formData.append("file_remove_status", 0);
            }

            let url, method;
            if (EquipmentId === "") {
                url = "{{ route('equipment.store') }}"; // Create Equipment
                method = "POST";
            } else {
                url = "{{ route('equipment.update', ':id') }}".replace(":id", EquipmentId); // Update Equipment
                method = "POST";
                 // Laravel PUT method for updates
            }
            $.ajax({
               url: url,
               method: method,
               data: formData,
               processData: false,
               contentType: false,
               headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
               success: function (response) {
                  if (response.success) {
                     Swal.fire({
                           title: "Success!",
                           text: response.success,
                           icon: "success",
                           confirmButtonText: "OK"
                     }).then(() => {
                           $("#equipmentForm")[0].reset();
                           $("#equipment_id").val(""); 
                           $("#equipmentModal").modal("hide");
                           location.reload();
                     });
                  } else {
                     Swal.fire({
                           title: "Error!",
                           text: "Something went wrong. Please try again.",
                           icon: "error",
                           confirmButtonText: "OK"
                     });
                  }
               },
               error: function (xhr) {
                  let errors = xhr.responseJSON?.errors;
                  let errorMessage = "An error occurred. Please try again.";
                  if (errors) {
                     errorMessage = Object.values(errors).map(error => error[0]).join("\n");
                  }
                  Swal.fire({
                     title: "Error!",
                     text: errorMessage,
                     icon: "warning",
                     confirmButtonText: "OK"
                  });
               }
            });
            return false; 
         }
      });

      // Reset form when Add button is clicked
      $("#addEquipBtn").click(function () {
         $("#equipmentForm")[0].reset();
         $("#equipment_id").val("");
         $("#equipmentForm").validate().resetForm(); 
         $(".text-danger").html(""); 
         $("#equipment_popup").modal("show");
         $("#fileInput").val(""); // Clear file input
         $("#imagePreview").attr('src','').hide(); // Hide image preview
         
         // Restore default SVG icon
         $("#defaultIcon").html(`
            <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>
         `).show();
      });
      $("#equipmentModal").on("hidden.bs.modal", function () {
         $("#equipmentForm")[0].reset();
         $("#equipment_id").val(""); 
      });
      $("#addEquipBtn").on("click", function (e) {
         $('#modalHeading').html('Create Equipment');
         $("#equipmentForm")[0].reset();
         $('#equipment_category_id').val('').trigger('change');
         $('#equipment_type_id').val('').trigger('change');
      });
      $("#addEquipBtn").click(function(){
         $('#equipment_popup').modal('show');
         $('#equipmentForm')[0].reset();
         $('#equipmentForm').validate().resetForm();
         $('.is-invalid').removeClass('is-invalid');
      });
      // Handle edit button click
      $(document).on("click",'.equip-edit-btn',function(e){
         e.preventDefault();
         $(".hide-on-view").removeClass("d-none");
         $(".img-msg-cls").removeClass("d-none");
         let EquipmentId = $(this).data("id");
         $('#modalHeading').html('Edit Equipment');
         $('#equipmentForm')[0].reset();
         $('#equipmentForm').validate().resetForm();
         $('.is-invalid').removeClass('is-invalid');
        
         $.ajax({
            url: "{{ route('equipment.edit', '') }}/" + EquipmentId,
            method: "GET",
            success: function (response) {
               if (response) {
                  $("#name").val(response.equipment.name);
                  $("#equipment_type_id").val(response.equipment.equipment_type_id).trigger("change");
                  $("#equipment_category_id").val(response.equipment.equipment_category_id).trigger("change");
                  $("#equipment_type_id").val(response.equipment.equipment_type_id.toString()).trigger("change");
                  $("#equipment_category_id").val(response.equipment.equipment_category_id.toString()).trigger("change");
                  $("#hourly_rate").val(response.equipment.hourly_rate);
                  $("#serial_number").val(response.equipment.serial_number);
                  $("#location").val(response.equipment.location);
                  $(".flatpickr-input").val(response.equipment.purchase_date);
                  $("#equipment_id").val(EquipmentId);
                  $("#equipmentForm").attr("method", "POST");
                  $("#equipment_popup").modal("show");
                  if (response.equipment_image_url) {
                    $("#imagePreview").attr("src", response.equipment_image_url).show();
                    $(".svg").hide();
                  } else {
                    $("#imagePreview").hide();
                    $(".svg").show();
                  }
               }
            },
            error: function () {
               Swal.fire({
                  title: "Error!",
                  text: "Something went wrong. Please try again.",
                  icon: "error",
                  confirmButtonText: "OK"
               });
            }
         });
      });
    
      $(document).on('click', '.equip-del-btn', function (e) {
         e.preventDefault();
         let selectedIds = [];
         let EquipmentId = $(this).data('id'); 
         $('.individual:checked').each(function () {
               selectedIds.push($(this).val()); 
         });
         if (selectedIds.length === 0 && !EquipmentId) {
            Swal.fire({
                title: "Warning",
                text: "Please select at least one equipment to delete.",
                icon: "warning",
                confirmButtonText: "OK"
            });
            return;
         }
         if (EquipmentId && selectedIds.length === 0) {
               selectedIds.push(EquipmentId);
         }
        let message = selectedIds.length > 1
            ? "Are you sure you want to delete the selected equipments?"
            : "Are you sure you want to delete this equipments?";
            Swal.fire({
               title: "Confirm Deletion",
               text: message,
               icon: "warning",
               showCancelButton: true,
               confirmButtonText: "Yes, delete",
               cancelButtonText: "Cancel"
            }).then((result) => {
                  if (result.isConfirmed) {
                     let token = document.getElementsByName("_token")[0].value;
                     $.ajax({
                        url: '{{ route('equipment.multiDelete') }}',
                        headers: { "X-CSRF-TOKEN": token },
                        type: 'POST',
                        data: {
                           equipment_ids: selectedIds, 
                              is_deleted: 1 
                        },
                        beforeSend: function () {
                              $(".depdel-btn").prop("disabled", true); 
                        },
                        success: function (response) {
                              if (response.success) {
                                 Swal.fire({
                                    title: "Success!",
                                    text: "equipment(s) deleted successfully!",
                                    icon: "success",
                                    confirmButtonText: "OK"
                                 }).then(() => {
                                    location.reload(); 
                                 });
                              } else {
                                 Swal.fire({
                                    title: "Error!",
                                    text: "Error deleting equipments.",
                                    icon: "error",
                                    confirmButtonText: "OK"
                                 });
                              }
                        },
                        error: function (xhr) {
                              console.log(xhr.responseText);
                              Swal.fire({
                                 title: "Error!",
                                 text: "Something went wrong! Please try again.",
                                 icon: "error",
                                 confirmButtonText: "OK"
                              });
                        },
                        complete: function () {
                              $(".depdel-btn").prop("disabled", false); 
                        }
                     });
                  }
            });
      });

      $(document).on('change', '#equipment-bulk-action', function () {
         let action = $(this).val(); 
         if (action === "delete") {
               let selectedIds = [];
               $("#checkAll").prop("checked", true);
        $(".individual").prop("checked", true);

        // Collect selected checkboxes
        $('.individual:checked').each(function () {
            selectedIds.push($(this).val());
        });
               // $('.individual:checked').each(function () {
               //    selectedIds.push($(this).val());
               // });
               if (selectedIds.length === 0) {
                  Swal.fire({
                     title: "Warning",
                     text: "Please select at least one equipments to delete.",
                     icon: "warning",
                     confirmButtonText: "OK"
                  });
                  $(this).val(""); // Reset dropdown selection
                  return;
               }

               // Confirmation message based on the number of selected departments
               let message = selectedIds.length > 1
                  ? "Are you sure you want to delete the selected equipments?"
                  : "Are you sure you want to delete this department?";

               Swal.fire({
                  title: "Confirm Deletion",
                  text: message,
                  icon: "warning",
                  showCancelButton: true,
                  confirmButtonText: "Yes, delete",
                  cancelButtonText: "Cancel"
               }).then((result) => {
                  if (result.isConfirmed) {
                     let token = document.getElementsByName("_token")[0].value;
                     // AJAX request to delete multiple departments
                     $.ajax({
                           url: '{{ route('equipment.multiDelete') }}',
                           headers: { "X-CSRF-TOKEN": token },
                           type: 'POST',
                           data: {
                              equipment_ids: selectedIds, 
                              is_deleted: 1 
                           },
                           beforeSend: function () {
                              $("#equipment-bulk-action").prop("disabled", true);
                           },
                           success: function (response) {
                              if (response.success) {
                                 Swal.fire({
                                       title: "Success!",
                                       text: "equipment(s) deleted successfully!",
                                       icon: "success",
                                       confirmButtonText: "OK"
                                 }).then(() => {
                                       location.reload();
                                 });
                              } else {
                                 Swal.fire({
                                       title: "Error!",
                                       text: "Error deleting equipments.",
                                       icon: "error",
                                       confirmButtonText: "OK"
                                 });
                              }
                           },
                           error: function (xhr) {
                              console.log(xhr.responseText);
                              Swal.fire({
                                 title: "Error!",
                                 text: "Something went wrong! Please try again.",
                                 icon: "error",
                                 confirmButtonText: "OK"
                              });
                           },
                           complete: function () {
                              $("#equipment-bulk-action").prop("disabled", false);
                              $("#equipment-bulk-action").val(""); 
                           }
                     });
                  } else {
                     $("#equipment-bulk-action").val("");
                  }
               });
         }
      });

      $(document).on('change', '.equip-status-toggle', function() {
            var checkbox = $(this);
            var equipmentId = checkbox.data('id');
            var newStatus = checkbox.prop('checked') ? 0 : 1;
            var statusText = newStatus === 0 ? "activate" : "Inactivate";

            Swal.fire({
               title: "Are you sure?",
               text: `Do you want to ${statusText} this equipment?`,
               icon: "warning",
               showCancelButton: true,
               confirmButtonColor: "#3085d6",
               cancelButtonColor: "#d33",
               confirmButtonText: `Yes, ${statusText} it!`,
               cancelButtonText: "Cancel"
            }).then((result) => {
               if (result.isConfirmed) {
                     $.ajax({
                        url: "{{ route('equipment.updateStatus') }}",
                        type: "POST",
                        data: {
                           _token: "{{ csrf_token() }}",
                           id: equipmentId,
                           status: newStatus
                        },
                  success: function(response) {
                     Swal.fire({
                           title: "Success!",
                           text: response.message,
                           icon: "success",
                           timer: 1500,
                           showConfirmButton: false
                     });
                  },
                  error: function(xhr) {
                     Swal.fire({
                           title: "Error!",
                           text: "Something went wrong!",
                           icon: "error"
                     });
                     checkbox.prop("checked", !checkbox.prop("checked")); // Revert checkbox on error
                  }
               });
         } else {
               checkbox.prop("checked", !checkbox.prop("checked")); // Revert checkbox if cancelled
         }
         });
      });

      $(document).on("click", ".btn_edit_view", function (e) {
         e.preventDefault();
         viewEquipment($(this));
      });

      function viewEquipment(button) {
         let equipmentId = button.data("id");
         $("#modalHeading").html("View Equipment");
         $("#equipment_popup").modal("show");
         $.ajax({
            url: "{{ route('equipment.edit', '') }}/" + equipmentId,
            method: "GET",
            success: function (response) {
                  if (response) {
                     $("#name").val(response.equipment.name).prop("disabled", true);
                     $("#equipment_type_id")
                        .val(response.equipment.equipment_type_id)
                        .trigger("change")
                        .prop("disabled", true);
                     $("#equipment_category_id")
                        .val(response.equipment.equipment_category_id)
                        .trigger("change")
                        .prop("disabled", true);
                     $("#hourly_rate").val(response.equipment.hourly_rate).prop("disabled", true);
                     $("#serial_number").val(response.equipment.serial_number).prop("disabled", true);
                     $("#location").val(response.equipment.location).prop("disabled", true);
                     $(".flatpickr-input").val(response.equipment.purchase_date);
                     $("#equipment_id").val(equipmentId);
                     $(".hide-on-view").addClass("d-none");
                     $(".img-msg-cls").addClass("d-none");
                     // if (response.equipment.equipment_image) {
                     //    $("#imagePreview").attr("src", response.equipment_image_url).show();
                     //    $(".svg").hide(); 
                     // } else {
                     //    $("#imagePreview").hide();
                     //    $(".svg").show();
                     // }
                     if (response.equipment_image_url) {
                     $("#imagePreview").attr("src", response.equipment_image_url).show();
                     $(".svg").hide();
                     } else {
                     $("#imagePreview").hide();
                     $(".svg").show();
                  }
                  }
            },
            error: function () {
                  Swal.fire({
                     title: "Error!",
                     text: "Something went wrong. Please try again.",
                     icon: "error",
                     confirmButtonText: "OK",
                  });
            },
         });
      }
      // Reset the modal on close so it can be used again in edit mode
      $("#equipment_popup").on("hidden.bs.modal", function() {
         // Re-enable inputs
         $("#equipmentForm input, #equipmentForm select").prop("disabled", false);
         // Show the submit and discard buttons again
         $(this).find(".btn_discard, .submit1").show();
      });
      $(document).on("change", ".individual", function () {
         if ($(".individual:checked").length === $(".individual").length) {
            $("#checkAll").prop("checked", true); 
         } else {
            $("#checkAll").prop("checked", false); 
         }
      });
      $(document).on("click", "#checkAll", function () {
         $(".individual").prop("checked", $(this).prop("checked"));
      });
      // Adjust DataTable layout
      $('.dataTables_wrapper .bottom').addClass('row');
      $('.dataTables_wrapper .bottom .dataTables_length').addClass('col-md-5 mt-1');
      $('.dataTables_wrapper .bottom .dataTables_paginate').addClass('col-md-6 mt-1');
      
      // Adjust column size
      $('.dataTables_wrapper .row:nth-child(3) div:nth-child(2)').removeClass('col-md-7');
      $('.dataTables_wrapper .row:nth-child(3) div:nth-child(2)').addClass('col-md-12 mt-3');
      
      // Tooltip initialization
      $('[data-toggle="tooltip"]').tooltip();
   });
</script>
@endsection