@extends('ui-common.layouts.master')
@section('title')
@lang('Work Order Add')
@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">
    <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">
                            <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 class="col-auto">
                            <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 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="preferred_service_date" data-provider="flatpickr" data-date-format="d M, Y" readonly="readonly" placeholder="Select 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="s_equipment_name" class="ctl-com-sel-blo ctl-select2">
                                    <option selected disabled>Select Equipment Name</option>
                                    <option value="righteous indignation">Righteous indignation</option>
                                    <option value="perspiciatis unde">Perspiciatis unde</option>
                                </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="">
                            </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="s_task_number" class="ctl-com-sel-blo ctl-select2">
                                    <option selected disabled>Select Task Number</option>
                                    <option value="576">576</option>
                                    <option value="577">577</option>
                                    <option value="578">578</option>
                                </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">Location<span class="text-danger">*</span></label>
                                <select id="s_location" name="s_location" class="ctl-com-sel-blo ctl-select2">
                                    <option selected disabled>Select Location</option>
                                    <option value="#12 Magni dolores eos">#12 Magni dolores eos</option>
                                    <option value="#14 Ut enim ad minima">#14 Ut enim ad minima</option>
                                </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="s_mileage" placeholder="Enter Mileage" value="">
                            </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">
                            <div class="cmp-ser-inp-blo ctl-ser-com-txt">
                                <div class="ctl-input-field">
                                    <span class="icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                            <g clip-path="url(#clip0_224_12492)">
                                                <path d="M6.60568 0C2.96341 0 0 2.96341 0 6.60568C0 10.2482 2.96341 13.2114 6.60568 13.2114C10.2482 13.2114 13.2114 10.2482 13.2114 6.60568C13.2114 2.96341 10.2482 0 6.60568 0ZM6.60568 11.9919C3.63577 11.9919 1.21951 9.57562 1.21951 6.60571C1.21951 3.6358 3.63577 1.21951 6.60568 1.21951C9.57559 1.21951 11.9919 3.63577 11.9919 6.60568C11.9919 9.57559 9.57559 11.9919 6.60568 11.9919Z" fill="#868C98"></path>
                                                <path d="M14.8215 13.9588L11.3255 10.4628C11.0873 10.2246 10.7015 10.2246 10.4633 10.4628C10.2251 10.7008 10.2251 11.087 10.4633 11.325L13.9593 14.821C14.0158 14.8777 14.083 14.9227 14.157 14.9533C14.231 14.984 14.3103 14.9997 14.3904 14.9996C14.4705 14.9997 14.5498 14.984 14.6237 14.9533C14.6977 14.9227 14.7649 14.8777 14.8215 14.821C15.0597 14.583 15.0597 14.1968 14.8215 13.9588Z" fill="#868C98"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_224_12492">
                                                    <rect width="15" height="15" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </span>
                                    <input autocomplete="off" id="search" type="text" name="search" class="form-control" placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                                </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>
                            <tr>
                                <td>Engine Oil Level</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li class="active">
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Transmission Operation and Fluid Level</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Brake Adjustment and Fluid Level</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Coolant Level, Radiator, and Hoses</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Clutch Adjustment and Fluid Level</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Tracks, Tires, Hubs, Oil Level, Wheels, and Rims</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Horn Air or Electric, Emergency Flashers</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Head Lights, Brake Lights, and Running Lights</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Windshield, Mirrors, Windshield Wipers</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Trailer Hitch and Plug Wiring</td>
                                <td>
                                    <div class="cmp-req-act-tab">
                                        <ul class="cmp-req-act-blo cmp-clk-req-act">
                                            <li>
                                                <span>Ok</span>
                                            </li>
                                            <li>
                                                <span>Service</span>
                                            </li>
                                            <li>
                                                <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" value="">
                                    </div>
                                </td>
                            </tr>
                        </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: {             
                preferred_service_date: {
                    required: true
                },
                s_equipment_name: {
                    required: true
                },
                hour_meter_reading: {
                    required: true
                },
                s_task_number: {
                    required: true
                },
                s_location: {
                    required: true
                },
                s_mileage: {
                    required: true
                },
            },
            messages: {
                preferred_service_date: "Please select service date",
                s_equipment_name: "Please select equipment name",
                hour_meter_reading: "Please enter hour meter reading",
                s_task_number: "Please select task number",
                s_location: "Please select location",
                s_location: "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) {
                form.submit();
            }  
        });

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

        flatpickr("#preferred_service_date", {
            mode: "range",
            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)
            ],
            
            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 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);
});
</script>
@endsection