 <div class="row" id="addContainer" style="display:none;">
     <div class="col-sm-12">
         <div class="card">
             <form class="theme-form" name="addForm" id="addForm" enctype="multipart/form-data">
                 @csrf

                 <div class="card-header">
                     <h4 class="card-title">Add Approval Request Hierarchies</h4>
                 </div>
                 <div class="card-body">
                     <div class="mb-3 row">
                         <div class="col-md-6">
                             <label class="col-form-label" for="requester_department_id">Department  <span style="color:red">*</span></label>
                             <select name="requester_department_id" class="form-control">
                                 <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">
                                 <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" 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" 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" 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">Four 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" 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" 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" 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" 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" 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  mt-2">

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

 @push('scripts')
     {{-- Add --}}
     <script>
         $("#addForm").submit(function(e) {
             e.preventDefault();
             $("#addSubmit").prop('disabled', true);

             var formdata = new FormData(this);
             $.ajax({
                 url: '{{ route('approval-request-hierarchies.store') }}',
                 type: 'POST',
                 data: formdata,
                 contentType: false,
                 processData: false,
                 success: function(data) {
                     $("#addSubmit").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) {
                         $("#addSubmit").prop('disabled', false);
                         resetErrors();
                         printErrMsg(responseObject.responseJSON.errors);
                     },
                     500: function(responseObject, textStatus, errorThrown) {
                         $("#addSubmit").prop('disabled', false);
                         swal("Error occured!", "Something went wrong please try again", "error");
                     }
                 }
             });

         });
     </script>
 @endpush

 @push('scripts')
     <script>
         $(document).ready(function() {

             $('.approver-department').on('change', function() {
                 var departmentId = $(this).val();
                 var approver = $(this).data('approver');
                 var designationSelect = $('.approver-designation[data-approver="' + approver + '"]');
                 console
                 // Clear previous options
                 designationSelect.html('<option value="">--Select--</option>').trigger('change');

                 if (departmentId) {
                     $.ajax({
                         url: "{{ route('departments.designations', ['department' => 'DEPT_ID']) }}".replace('DEPT_ID', departmentId),
                         type: 'GET',
                         success: function(data) {
                             $.each(data, function(index, role) {
                                 var newOption = new Option(role.name, role.id, false, false);
                                 designationSelect.append(newOption);
                             });
                             designationSelect.trigger('change');

                             // Restore old value if exists
                             var oldVal = "{{ old('" + approver + "_approver_designation_id') }}";
                             if (oldVal) designationSelect.val(oldVal).trigger('change');
                         }
                     });
                 }
             });
             
             $('#addForm select,#editform select').select2();
         });

     </script>
 @endpush
