 <div class="row" id="editContainer" style="display:none;">
     <div class="col">
         <form class="form-horizontal form-bordered" method="post" id="editForm">
             @csrf
             <div class="card">
                 <div class="card-header">
                     <h4 class="card-title">Edit Approval Request Hierarchies</h4>
                 </div>
                 <div class="card-body py-2">
                     <div class="mb-3 row">
                         <input type="hidden" id="edit_model_id" name="edit_model_id" value="">
                         <div class="col-md-6 ">
                             <label class="col-form-label" for="request_department_id"> Department <span style="color:red">*</span></label>
                             <select name="requester_department_id" class="form-control" readonly disabled>
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('requester_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  requester_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('requester_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-md-6">
                             <label class="col-form-label" for="service_id"> Service <span style="color:red">*</span> </label>
                             <select name="service_id" class="form-control" readonly disabled>
                                 <option value="">--Select--</option>
                                 {{-- @foreach ($services as $service)
                                     <option value="{{ $service->service_id }}" {{ old('service_id') == $service->service_id ? 'selected' : '' }}>
                                         {{ $service->service_id }}-{{ $service->service_name }}
                                     </option>
                                 @endforeach --}}
                             </select>
                             <span class="text-danger  service_id_err"></span>
                             <span class="text-danger ">
                                 @error('service_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="first_department_id">First Approver Department </label>
                             <select name="first_department_id" class="form-control approver-department" data-approver="first">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('first_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  first_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('first_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="first_approver_designation_id">
                                 First Approver Designation
                             </label>
                             <select name="first_approver_designation_id" id="first_approver_designation_id" class="form-control approver-designation" data-approver="first">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('first_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  first_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('first_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="second_department_id">Second Approver Department </label>
                             <select name="second_department_id" class="form-control approver-department" data-approver="second">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('second_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  second_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('second_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-md-3">
                             <label class="col-form-label" for="second_approver_designation_id">
                                 Second Approver Designation
                             </label>
                             <select name="second_approver_designation_id" id="second_approver_designation_id" class="form-control approver-designation" data-approver="second">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('second_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  second_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('second_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="third_department_id">Third Approver Department </label>
                             <select name="third_department_id" class="form-control approver-department" data-approver="third">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('third_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  third_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('third_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="third_approver_designation_id">
                                 Third Approver Designation
                             </label>
                             <select name="third_approver_designation_id" id="third_approver_designation_id" class="form-control approver-designation" data-approver="third">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('third_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  third_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('third_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="fourth_department_id">Fourth Approver Department </label>
                             <select name="fourth_department_id" class="form-control approver-department" data-approver="fourth">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('fourth_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  fourth_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('fourth_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-md-3">
                             <label class="col-form-label" for="fourth_approver_designation_id">
                                 Fourth Approver Designation
                             </label>
                             <select name="fourth_approver_designation_id" id="fourth_approver_designation_id" class="form-control approver-designation" data-approver="fourth">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('fourth_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  fourth_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('fourth_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="five_department_id">Five Approver Department </label>
                             <select name="five_department_id" class="form-control approver-department" data-approver="five">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('five_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  five_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('five_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-md-3">
                             <label class="col-form-label" for="five_approver_designation_id">
                                 Five Approver Designation
                             </label>
                             <select name="five_approver_designation_id" id="five_approver_designation_id" class="form-control approver-designation" data-approver="five">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('five_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  five_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('five_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="six_department_id">Six Approver Department </label>
                             <select name="six_department_id" class="form-control approver-department" data-approver="six">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('six_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  six_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('six_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="six_approver_designation_id">
                                 Six Approver Designation
                             </label>
                             <select name="six_approver_designation_id" id="six_approver_designation_id" class="form-control approver-designation" data-approver="six">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('six_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  six_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('six_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="seven_department_id">Seven Approver Department </label>
                             <select name="seven_department_id" class="form-control approver-department" data-approver="seven">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('seven_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  seven_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('seven_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>


                         <div class="col-md-3">
                             <label class="col-form-label" for="seven_approver_designation_id">
                                 Seven Approver Designation
                             </label>
                             <select name="seven_approver_designation_id" id="seven_approver_designation_id" class="form-control approver-designation" data-approver="seven">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('seven_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  seven_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('seven_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>



                         <div class="col-md-3">
                             <label class="col-form-label" for="eight_department_id">Eight Approver Department </label>
                             <select name="eight_department_id" class="form-control approver-department" data-approver="eight">
                                 <option value="">--Select--</option>
                                 @foreach ($departments as $department)
                                     <option value="{{ $department->id }}" {{ old('eight_department_id') == $department->id ? 'selected' : '' }}>
                                         {{ $department->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  eight_department_id_err"></span>
                             <span class="text-danger ">
                                 @error('eight_department_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-md-3">
                             <label class="col-form-label" for="eight_approver_designation_id">
                                 Eight Approver Designation
                             </label>
                             <select name="eight_approver_designation_id" id="eight_approver_designation_id" class="form-control  approver-designation" data-approver="eight">
                                 <option value="">-- Select --</option>
                                 @foreach ($designations as $designation)
                                     <option value="{{ $designation->id }}" {{ old('eight_approver_designation_id') == $designation->id ? 'selected' : '' }}>
                                         {{ $designation->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <span class="text-danger  eight_approver_designation_id_err"></span>
                             <span class="text-danger">
                                 @error('eight_approver_designation_id')
                                     {{ $message }}
                                 @enderror
                             </span>
                         </div>

                         <div class="col-12 approver_required_err text-danger">

                         </div>
                     </div>

                 </div>
                 <div class="card-footer">
                     <button class="btn btn-primary" id="editSubmit">Submit</button>
                     <button type="reset" class="btn btn-warning">Reset</button>
                 </div>
             </div>
         </form>
     </div>
 </div>

 @push('scripts')
     <!-- Edit -->
     <script>
         $("#buttons-datatables").on("click", ".edit-element", function(e) {
             resetErrors();
             $('.approver_required_err').text('');
             e.preventDefault();
             var model_id = $(this).attr("data-id");
             var url = "{{ route('approval-request-hierarchies.edit', ':model_id') }}";

             $.ajax({
                 url: url.replace(':model_id', model_id),
                 type: 'GET',
                 data: {
                     '_token': "{{ csrf_token() }}"
                 },
                 success: function(data, textStatus, jqXHR) {
                     editFormBehaviour();
                     if (!data.error) {
                         $("#editForm input[name='edit_model_id']").val(data.approvalRequestHierarchy.id);
                         $("#editForm select[name='requester_department_id']").val(data.approvalRequestHierarchy.requester_department_id).trigger('change');
                         $("#editForm select[name='first_department_id']").val(data.approvalRequestHierarchy.first_department_id).trigger('change');
                         $("#editForm select[name='second_department_id']").val(data.approvalRequestHierarchy.second_department_id).trigger('change');
                         $("#editForm select[name='third_department_id']").val(data.approvalRequestHierarchy.third_department_id).trigger('change');
                         $("#editForm select[name='fourth_department_id']").val(data.approvalRequestHierarchy.fourth_department_id).trigger('change');
                         $("#editForm select[name='five_department_id']").val(data.approvalRequestHierarchy.five_department_id).trigger('change');
                         $("#editForm select[name='six_department_id']").val(data.approvalRequestHierarchy.six_department_id).trigger('change');
                         $("#editForm select[name='seven_department_id']").val(data.approvalRequestHierarchy.seven_department_id).trigger('change');
                         $("#editForm select[name='eight_department_id']").val(data.approvalRequestHierarchy.eight_department_id).trigger('change');
                         $("#editForm select[name='service_id']").val(data.approvalRequestHierarchy.eight_department_id).trigger('change');

                         let $serviceSelect = $("#editForm select[name='service_id']");
                         $serviceSelect.empty().append('<option value="">--Select Service--</option>');

                         // Populate all services
                         data.services.forEach(service => {
                             $serviceSelect.append(
                                 `<option value="${service.service_id}" ${service.service_id == data.approvalRequestHierarchy.service_id ? 'selected' : ''}>${service.service_name}</option>`
                             );
                         });
                          $("#editForm select[name='service_id']").val(data.approvalRequestHierarchy.service_id).trigger('change');
                         // List of approver fields
                         let approvers = ['first', 'second', 'third', 'fourth', 'five', 'six', 'seven', 'eight'];

                         // Loop through each approver
                         approvers.forEach(field => {
                             // Get department ID for this approver
                             let deptId = data.approvalRequestHierarchy[`${field}_department_id`];

                             // Get the select element for the approver designation
                             let $select = $(`#editForm select[name='${field}_approver_designation_id']`);

                             // Clear existing options
                             $select.empty().append('<option value="">--Select--</option>');

                             // Populate options from departmentRoles
                             if (data.departmentRoles[deptId]) {
                                 data.departmentRoles[deptId].forEach(role => {
                                     let selected = role.id == data.approvalRequestHierarchy[`${field}_approver_designation_id`] ? 'selected' : '';
                                     $select.append(`<option value="${role.id}" ${selected}>${role.name}</option>`);
                                 });
                             }
                         });

                     } else {
                         alert(data.error);
                     }
                 },
                 error: function(error, jqXHR, textStatus, errorThrown) {
                     alert("Some thing went wrong");
                 },
             });
         });
     </script>


     <!-- Update -->
     <script>
         $(document).ready(function() {

            //  $('.select2').select2();
             $("#editForm").submit(function(e) {
                 resetErrors();
                $('.approver_required_err').text('');
                 e.preventDefault();
                 $("#editSubmit").prop('disabled', true);
                 var formdata = new FormData(this);
                 formdata.append('_method', 'PUT');
                 var model_id = $('#edit_model_id').val();
                 var url = "{{ route('approval-request-hierarchies.update', ':model_id') }}";
                 //
                 $.ajax({
                     url: url.replace(':model_id', model_id),
                     type: 'POST',
                     data: formdata,
                     contentType: false,
                     processData: false,
                     success: function(data) {
                         $("#editSubmit").prop('disabled', false);
                         if (!data.error2)
                             swal("Successful!", data.success, "success")
                             .then((action) => {
                                 window.location.href = '{{ route('approval-request-hierarchies.index') }}';
                             });
                         else
                             swal("Error!", data.error2, "error");
                     },
                     statusCode: {
                         422: function(responseObject, textStatus, jqXHR) {
                             $("#editSubmit").prop('disabled', false);
                             resetErrors();
                             printErrMsg(responseObject.responseJSON.errors);
                         },
                         500: function(responseObject, textStatus, errorThrown) {
                             $("#editSubmit").prop('disabled', false);
                             swal("Error occured!", "Something went wrong please try again", "error");
                         }
                     }
                 });

             });
         });


     </script>
 @endpush
