@extends('tenants.layouts.master')
@section('title')
@lang('Work Orders')
@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" />
<!-- timepickr themes -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/classic.min.css')}}"/> <!-- 'classic' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/monolith.min.css')}}"/> <!-- 'monolith' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/nano.min.css')}}"/> <!-- 'nano' theme -->
@endsection
@section('content')

<form id="addWorkOrder">
    <input type="hidden" id="edit_id"  name="edit_id"  value="{{ isset($edit_list['id']) ? $edit_list['id'] : '' }}">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-header ctl-bor-lne-col">
                    <div class="row">
                        <div class="col-auto my-auto">
                            <div class="ctl-car-clo-hdr">
                                <h3>Work Order Create</h3>
                            </div>
                        </div>
                        <div class="col-auto ms-auto pe-lg-0 d-none">
                            <div class="cmp-emp-btn-blo">
                                <a href="{{url('ui/workorder-list')}}" class="d-flex align-items-center justify-content-center gap-1"><svg id="fi_2910768" fill="#ffffff" enable-background="new 0 0 24 24" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m11.894 24c-.131 0-.259-.052-.354-.146-.118-.118-.17-.288-.137-.451l.707-3.535c.02-.098.066-.187.137-.256l7.778-7.778c.584-.584 1.537-.584 2.121 0l1.414 1.414c.585.585.585 1.536 0 2.121l-7.778 7.778c-.069.07-.158.117-.256.137l-3.535.707c-.032.006-.065.009-.097.009zm1.168-3.789-.53 2.651 2.651-.53 7.671-7.671c.195-.195.195-.512 0-.707l-1.414-1.414c-.195-.195-.512-.195-.707 0zm2.367 2.582h.01z"></path><path d="m9.5 21h-7c-1.379 0-2.5-1.121-2.5-2.5v-13c0-1.379 1.121-2.5 2.5-2.5h2c.276 0 .5.224.5.5s-.224.5-.5.5h-2c-.827 0-1.5.673-1.5 1.5v13c0 .827.673 1.5 1.5 1.5h7c.276 0 .5.224.5.5s-.224.5-.5.5z"></path><path d="m16.5 12c-.276 0-.5-.224-.5-.5v-6c0-.827-.673-1.5-1.5-1.5h-2c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2c1.379 0 2.5 1.121 2.5 2.5v6c0 .276-.224.5-.5.5z"></path><path d="m11.5 6h-6c-.827 0-1.5-.673-1.5-1.5v-2c0-.276.224-.5.5-.5h1.55c.232-1.14 1.243-2 2.45-2s2.218.86 2.45 2h1.55c.276 0 .5.224.5.5v2c0 .827-.673 1.5-1.5 1.5zm-6.5-3v1.5c0 .275.225.5.5.5h6c.275 0 .5-.225.5-.5v-1.5h-1.5c-.276 0-.5-.224-.5-.5 0-.827-.673-1.5-1.5-1.5s-1.5.673-1.5 1.5c0 .276-.224.5-.5.5z"></path><path d="m13.5 9h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z"></path><path d="m13.5 12h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z"></path><path d="m13.5 15h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z"></path></svg>
                                        View Work Order List
                                </a>
                            </div>
                        </div>
                      
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo cmp-fla-pic-clk">
                                <label for="preferred_service_date" class="ctl-lab-txt-frm">Preferred Service Date<span class="text-danger">*</span></label>
                                <div class="ctl-pos-rel-ico">
                                    <input type="text" class="form-control" id="preferred_service_date" name="service_date" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select Service Date" value="{{ isset($edit_list['service_date'])  ? $edit_list['service_date'] : '' }}">
                                </div>
                            </div> 
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-sel-cus-blo">
                                <label for="s_equipment_name" class="ctl-lab-txt-frm">Equipment Selection<span class="text-danger">*</span></label>
                                <select id="s_equipment_name" name="equipment_id" class="ctl-com-sel-blo ctl-select2">
                                    <option selected>-Select-</option>
                                    @foreach($equipments as $equipment)
                                    <option value="{{$equipment->id}}" {{ (isset($edit_list['equipment_id']) && $edit_list['equipment_id'] == $equipment->id)  ? 'selected' : '' }}>{{$equipment->name}}</option>
                                    @endforeach 
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo">
                                <label for="hour_meter_reading" class="ctl-lab-txt-frm">Hour Meter Reading<span class="text-danger">*</span></label>
                                <input class="form-control" type="text" id="hour_meter_reading" name="hour_meter_reading" placeholder="Enter Hour Meter Reading" value="{{ isset($edit_list['hour_meter_reading'])  ? $edit_list['hour_meter_reading'] : '' }}">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-sel-cus-blo">  
                                <label for="s_task_number" class="ctl-lab-txt-frm">Task Number<span class="text-danger">*</span></label>
                                <select id="s_task_number" name="task_id" class="ctl-com-sel-blo ctl-select2">
                                    <option selected disabled>Select Task Number</option>
                                    @foreach($tasks as $task)
                                    <option value="{{$task->id}}"  {{ (isset($edit_list['task_id']) && $edit_list['task_id'] == $task->id)  ? 'selected' : '' }}>{{$task->task_name}}</option>
                                    @endforeach 
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-sel-cus-blo">
                                <label for="s_location" class="ctl-lab-txt-frm">Work Location<span class="text-danger">*</span></label> 
                                <select id="s_location" name="work_location_id" class="ctl-com-sel-blo ctl-select2">
                                    <option selected disabled>Select Location</option>
                                    @foreach($work_locations as $location)
                                <option value="{{ $location->id }}" 
                                    {{ (isset($edit_list['work_location_id']) && $edit_list['work_location_id'] == $location->id)  ? 'selected' : '' }}>
                                    {{ $location->location_name }} ({{ $location->location_code }})
                                </option>
                            @endforeach 
                                </select>
                            </div>
                        </div>

                        
                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                            <div class="cmp-com-inp-cus-blo">
                                <label for="s_mileage" class="ctl-lab-txt-frm">Mileage<span class="text-danger">*</span></label>
                                <input class="form-control" type="text" id="s_mileage" name="mileage" placeholder="Enter Mileage" value="{{ isset($edit_list['mileage'])  ? $edit_list['mileage'] : '' }}">
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 mb-3">
                        <div class="form-group ">
                                    <label class="form-label">
                                    Status</label>
                                    <div class="input-field">
                                        <span class="icon z-index">
                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M5.0302 1.55517C5.20684 1.74442 5.19661 2.04104 5.00735 2.21768L2.32878 4.71768C2.23371 4.80642 2.10604 4.85167 1.97631 4.84261C1.84658 4.83356 1.72644 4.77102 1.64461 4.66994L0.885682 3.73244C0.722793 3.53122 0.753863 3.23606 0.955079 3.07317C1.15629 2.91028 1.45146 2.94135 1.61435 3.14257L2.05681 3.68913L4.36768 1.53232C4.55694 1.35568 4.85356 1.36591 5.0302 1.55517ZM7.03127 3.125C7.03127 2.86612 7.24113 2.65625 7.50002 2.65625H13.75C14.0089 2.65625 14.2188 2.86612 14.2188 3.125C14.2188 3.38389 14.0089 3.59375 13.75 3.59375H7.50002C7.24113 3.59375 7.03127 3.38389 7.03127 3.125ZM5.0302 5.93017C5.20684 6.11942 5.19661 6.41604 5.00735 6.59268L2.32878 9.09268C2.23371 9.18142 2.10604 9.22667 1.97631 9.21761C1.84658 9.20856 1.72644 9.14602 1.64461 9.04494L0.885682 8.10744C0.722793 7.90622 0.753863 7.61106 0.955079 7.44817C1.15629 7.28528 1.45146 7.31635 1.61435 7.51756L2.05681 8.06413L4.36768 5.90732C4.55694 5.73068 4.85356 5.74091 5.0302 5.93017ZM7.03127 7.5C7.03127 7.24112 7.24113 7.03125 7.50002 7.03125H13.75C14.0089 7.03125 14.2188 7.24112 14.2188 7.5C14.2188 7.75889 14.0089 7.96875 13.75 7.96875H7.50002C7.24113 7.96875 7.03127 7.75889 7.03127 7.5ZM5.0302 10.3052C5.20684 10.4944 5.19661 10.791 5.00735 10.9677L2.32878 13.4677C2.23371 13.5564 2.10604 13.6017 1.97631 13.5926C1.84658 13.5836 1.72644 13.521 1.64461 13.4199L0.885682 12.4824C0.722793 12.2812 0.753863 11.9861 0.955079 11.8232C1.15629 11.6603 1.45146 11.6913 1.61435 11.8926L2.05681 12.4391L4.36768 10.2823C4.55694 10.1057 4.85356 10.1159 5.0302 10.3052ZM7.03127 11.875C7.03127 11.6161 7.24113 11.4063 7.50002 11.4063H13.75C14.0089 11.4063 14.2188 11.6161 14.2188 11.875C14.2188 12.1339 14.0089 12.3438 13.75 12.3438H7.50002C7.24113 12.3438 7.03127 12.1339 7.03127 11.875Z"
                                                fill="#525866"></path>
                                        </svg>
                                        </span>
                                    
                                        <select class="form-control ctl-select2 select2" id="work_order_status" name="status">
                                            
                                        <option value="0" {{ isset($edit_list['status']) && $edit_list['status'] == 0 ? 'selected' : '' }}>Active </option>
                                        <option value="1" {{ isset($edit_list['status']) && $edit_list['status'] == 1 ? 'selected' : '' }}>Inactive </option>
                                        </select>
                                    </div>
                                </div>
                        </div>


                    </div>            
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-header ctl-bor-lne-non pb-0">
                    <div class="row">
                        <div class="col-auto my-auto mb-2">
                            <div class="ctl-car-clo-hdr">
                                <h3>Inspection Details</h3>  
                            </div>
                        </div>
                        <div class="col-auto ms-auto mb-2 ctl-cus-ser-wid d-none">
                            <div class="cmp-ser-inp-blo ctl-ser-com-txt">
                                <div class="ctl-input-field">
                                <div class="cmp-emp-btn-blo">
                                <a href="javascript:void(0)" class="d-flex align-items-center justify-content-center gap-1" data-bs-toggle="modal" data-bs-target="#addInspectionPopup">
                                    <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"></path>
                                    </svg>
                                    Add Inspection 
                                </a>
                            </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box ctl-mar-tab-bot">
                    <table id="inspectionDetailTable" class="table ctl-pad-rit-fir_col theme_table dt-responsive nowrap align-middle" style="width:100%">
                        <thead>
                            <tr> 
                                <th>Inspection Items</th>
                                <th>Required Action</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        @foreach($inspections as $inspection)
                            <tr>
                                <td>{{ $inspection->inspection_item }}</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li data-action="ok" 
                                                class="{{ isset($exist_inpection[$inspection->id]) && $exist_inpection[$inspection->id]['action'] == 'ok' ? 'active' : '' }}" 
                                                onclick="setInspectionAction('{{ $inspection->id }}', 'ok')">
                                                <span>Ok</span>
                                            </li>
                                            <li data-action="service"
                                                class="{{ isset($exist_inpection[$inspection->id]) && $exist_inpection[$inspection->id]['action'] == 'service' ? 'active' : '' }}" 
                                                onclick="setInspectionAction('{{ $inspection->id }}', 'service')">
                                                <span>Service</span>
                                            </li>
                                            <li data-action="repair"
                                                class="{{ isset($exist_inpection[$inspection->id]) && $exist_inpection[$inspection->id]['action'] == 'repair' ? 'active' : '' }}" 
                                                onclick="setInspectionAction('{{ $inspection->id }}', 'repair')">
                                                <span>Repair</span>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td>
                                    <div class="cmp-com-inp-cus-blo cmp-tab-det-txt-wid">
                                        <input class="form-control" type="text" placeholder="Enter Details" name="details[]"
                                            value="{{ isset($exist_inpection[$inspection->id]) ? $exist_inpection[$inspection->id]['details'] :  ''}}">
                                        <input type="hidden" name="inspection_id[]" value="{{ $inspection->id }}">
                                        <input type="hidden" name="inspection_action[]" id="inspection-action-{{ $inspection->id }}"
                                            value="{{ isset($exist_inpection[$inspection->id]) ? $exist_inpection[$inspection->id]['action'] : '' }}">
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
            <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
                <div class="card-header ctl-bor-lne-non pb-0">
                    <div class="row">
                        <div class="col-auto my-auto mb-2">
                            <div class="ctl-car-clo-hdr">
                                <h3>Notes</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                            <div class="cmp-tex-are-cus">
                                <textarea class="form-control ctl-min-tex-hei ctl-tex-are-scr" id="s_notes" rows="6" placeholder="Enter Notes"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0">
            <div class="d-flex align-items-center gap-2 justify-content-end">
                <button type="button" class="cmp-can-com-btn">
                    Reset
                </button>
                <button type="submit" class="cmp-sub-com-btn d-flex align-items-center justify-content-center gap-1"> Save
                </button>
            </div>
        </div>
    </div>
</form>

<!-- Add Inspection Popup -->
<div class="modal fade" id="addInspectionPopup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-md modal-dialog-centered">
      <div class="modal-content cmp-mod-cus-blo">
         <div class="modal-header">
               <h5> Add Inpection</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
            <form id="inspectionAdd">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                        <div class="cmp-com-inp-cus-blo">
                            <label for="inspection_items" class="ctl-lab-txt-frm">Inspection Items<span class="text-danger"></span></label>
                            <input class="form-control" type="text" name="inspection_items" id="inspection_items" name="Enter Inspection Item Name" placeholder="" value="">
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-3">
                        <div>
                            <label class="ctl-lab-txt-frm">Required Action<span class="text-danger"></span></label>
                            <div class="ctl-tog-inp-blo">
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check1 form-check-input" checked>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                        <div class="cmp-pop-btn-blo justify-content-end">
                            <button type="button" class="btn ctl-btn-light" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn ctl-btn-blue" data-bs-dismiss="modal">Add</button>
                        </div>
                    </div>
                </div>
            </form>
         </div>
      </div>
   </div>
</div>

@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ url('js/jquery-validation/jquery.validate.min.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/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>
<script>
    $(document).ready(function(){
        $('.ctl-com-sel-blo').on('change', function() {
            $(this).valid();
        });
        $("#addWorkOrder").validate({
            rules: {             
               service_date: {
                    required: true
                },
                equipment: {
                    required: true
                },
                hour_meter_reading: {
                    required: true,
                    number: true // allow numbers only
                },
                task: {
                    required: true
                },
                work_location: {
                    required: true
                },
                mileage: {
                    required: true,
                    number: true // allow numbers only
                },
            },
            messages: {
                service_date: "Please select service date",
                equipment: "Please select equipment",
                hour_meter_reading: "Please enter hour meter reading",
                task: "Please select task",
                work_location: "Please select location",
                mileage: "Please enter mileage",
            },
            errorPlacement: function (error, element) {
                error.addClass("invalid-feedback");
                if (element.hasClass("ctl-com-sel-blo")) {
                    error.insertAfter(element.next(".select2-container"));
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                let formData = new FormData(form); 
                let id = $("#edit_id").val();
                let url = id ? "{{ route('work-orders.update', '') }}/" + id : "{{ route('work-orders.store') }}";
                $.ajax({
                    url:url, // make sure your form has `action` attribute
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        // Optional: show loader or disable button
                    },
                    headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                    success: function(response) {
                        Swal.fire({
                                icon: "success",
                                title: "Success",
                                text:  id ? "Work order updated successfully!"  : "Work order added successfully!",
                                timer: 2000,
                                showConfirmButton: false
                            });
                            setTimeout(() => {
                                window.location.href = "{{ route('work-orders.index') }}";
                            }, 2000);
                        $('.select2').val(null).trigger('change'); // reset select2s
                    },
                    error: function(xhr) {
                        // Handle errors
                        Swal.fire("Error", "Something went wrong!", "error");
                        console.log(xhr.responseText);
                    }
                });
            }  
        });

        $(document).on('click' , '.cmp-fla-pic-clk input' , function(){
            $('.flatpickr-calendar').addClass('ctl-fla-pic-pop-zin')
        });

        flatpickr("#preferred_service_date", {
            
            dateFormat: "m/d/Y",
            allowInput: true
        });
        $(document).on('click' , '.cmp-com-sel-cus-blo .select2' , function(){
            $('.select2-container').addClass('ctl-sel-cus-drp');
        });
        $('.ctl-select2').select2({
            minimumResultsForSearch: true,
        });

        var table = $('#inspectionDetailTable').DataTable({
            pageLength: 10, // Default page length
            searching: false,
            pagingType: "simple_numbers",
            scrollCollapse: true,
            info: true,
            responsive: false,
            scrollX: true,
            ordering: false,
            columnDefs: [
                { targets: 1, orderable: false }, // Disable sorting for the first column (index 0)
                { targets: 2, orderable: false }, // Disable sorting for the first column (index 2)
            ],
            dom: '<"top"f>rt<"footer-content bottom d-flex justify-content-between align-items-center flex-wrap mt-3 gap-2"<"infoDiv"i><"paginateDiv"p><"lengthDiv"l>><"clear">',
            language: {
                paginate: {
                    previous: '<span class="fa fa-chevron-left"></span>',
                    next: '<span class="fa fa-chevron-right"></span>'
                }
            },
            "order": [],
        });

        $(document).on('click', '.cmp-clk-req-act li', function() {
            $(this).siblings().removeClass('active');  // Remove active class from other items
            $(this).addClass('active');  // Add active class to the clicked item
        });
    });
    $(function () {
        const observer = new MutationObserver(m => 
            m.forEach(e => e.attributeName === "title" && e.target.removeAttribute("title"))
        );
        $('.select2-selection__rendered').each(function () {
            observer.observe(this, { attributes: true });
            this.removeAttribute("title");
        });
    });
    function toggleCustomFocus(e, add = true) {
    const selection = e.target?.nextElementSibling?.querySelector('.select2-selection--single');
        if (selection) {
            selection.classList.toggle('custom-focus', add);
        }}
        $(document).on('select2:open', function (e) {
            toggleCustomFocus(e, true);
            requestAnimationFrame(() => {
                document.querySelector('.select2-container--open .select2-search__field')?.focus();
        });});
        $(document).on('select2:close', function (e) {
        toggleCustomFocus(e, false);
});

document.querySelectorAll('.cmp-req-act-blo li').forEach(function(item) {
    item.addEventListener('click', function() {
        var action = this.getAttribute('data-action');
        var inspectionId = this.closest('tr').querySelector('input[name="inspection_id[]"]').value;
        
        // Set the value of the corresponding hidden input for the action
        document.getElementById('inspection-action-' + inspectionId).value = action;

        // Optionally, you can add some styling to indicate which action was selected
        this.closest('ul').querySelectorAll('li').forEach(function(li) {
            li.classList.remove('selected'); // Remove selected class from all li elements
        });
        this.classList.add('selected'); // Add selected class to the clicked li element
    });
});

</script>
@endsection