{{-- resources/views/admin/crm/batches/edit.blade.php --}}
@extends('layouts.app')

@section('title', 'Edit Batch')

@push('styles')
<style>
   .viewPageTabs .tab-content-box { height: calc(100vh - 100px); overflow: hidden!important; }
   .mail-view.personal-div01 { overflow: hidden!important; overflow-y: auto!important; border-bottom: 0!important; }
   .message-body { height: 34rem!important; }
   .home_1 { border-bottom: 0!important; }
   .is-invalid { border-color: #dc3545 !important; }
   .help-block { color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; }
</style>
@endpush

@section('content')
<div class="loadPages01">
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="card bd-0 navtab-card01 viewPageTabs">
            <form method="POST" action="{{ route('crm.batches.update', crypt_encrypt($batch->id)) }}" id="batchForm">
               @csrf
               <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab overflow-auto">
                  <div id="azTab1" class="az-tab-pane active">
                     <div class="mail-view personal-div01 mx-2 bg-white">
                        <div class="message-body py-3 px-2">
                           <div class="item-details-page">
                              <div class="row">
                                 <!-- Left Side - Batch Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Edit Batch
                                        <a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Update</a>
                                    </h5>
                                    <div class="group">
                                       <!-- Batch Code (Read Only) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Batch ID<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm bg-light" value="{{ $batch->batch_id }}" readonly disabled>
                                             <small class="form-text text-muted">Batch ID is auto-generated</small>
                                          </label>
                                       </div>

                                       <!-- Awarding Body -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Awarding Body<span class="asterisk"> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2-ajax" name="awarding_body_id" id="awarding_body_id" required>
                                                <option value="">Select Awarding Body</option>
                                             </select>
                                             @if ($errors->has('awarding_body_id')) 
                                             <span class="help-block">{{ $errors->first('awarding_body_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Sector (depends on Awarding Body) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Sector<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="sector_id" id="sector_id" required>
                                                <option value="">Select Sector</option>
                                             </select>
                                             @if ($errors->has('sector_id')) 
                                             <span class="help-block">{{ $errors->first('sector_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Job Role (depends on Sector) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Job Role<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="job_role_id" id="job_role_id" required>
                                                <option value="">Select Job Role</option>
                                             </select>
                                             @if ($errors->has('job_role_id')) 
                                             <span class="help-block">{{ $errors->first('job_role_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Training Partner -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Training Partner<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2-ajax" name="training_partner_id" id="training_partner_id" required>
                                                <option value="">Select Training Partner</option>
                                                

                                             </select>
                                             @if ($errors->has('training_partner_id')) 
                                             <span class="help-block">{{ $errors->first('training_partner_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Training Center (depends on Training Partner) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Training Center<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="training_center_id" id="training_center_id" required>
                                                <option value="">Select Training Center</option>
                                             </select>
                                             @if ($errors->has('training_center_id')) 
                                             <span class="help-block">{{ $errors->first('training_center_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Assessor (depends on Job Role) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Assessor<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="assessor_id" id="assessor_id">
                                                <option value="">Select Assessor</option>
                                             </select>
                                             @if ($errors->has('assessor_id')) 
                                             <span class="help-block">{{ $errors->first('assessor_id') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>

                                    <h5 class="mb-2 mt-4 groupTitle">Assessment Dates</h5>
                                    <div class="group">
                                       <!-- Requested Date -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Requested Date<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="datetime-local" class="form-control form-control-sm" value="{{ old('requested_date_of_assessment', $batch->requested_date_of_assessment ? $batch->requested_date_of_assessment->format('Y-m-d\TH:i') : '') }}" required name="requested_date_of_assessment" id="requested_date">
                                             @if ($errors->has('requested_date_of_assessment')) 
                                             <span class="help-block">{{ $errors->first('requested_date_of_assessment') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Estimated Date -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Estimated Date<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="datetime-local" class="form-control form-control-sm" value="{{ old('estimated_date_of_assessment', $batch->estimated_date_of_assessment ? $batch->estimated_date_of_assessment->format('Y-m-d\TH:i') : '') }}" required name="estimated_date_of_assessment" id="estimated_date">
                                             @if ($errors->has('estimated_date_of_assessment')) 
                                             <span class="help-block">{{ $errors->first('estimated_date_of_assessment') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Actual Date -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Actual Date<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="datetime-local" class="form-control form-control-sm" value="{{ old('actual_date_of_assessment', $batch->actual_date_of_assessment ? $batch->actual_date_of_assessment->format('Y-m-d\TH:i') : '') }}" name="actual_date_of_assessment" id="actual_date">
                                             @if ($errors->has('actual_date_of_assessment')) 
                                             <span class="help-block">{{ $errors->first('actual_date_of_assessment') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- Right Side - Additional Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Batch Information</h5>
                                    <div class="group">
                                       <!-- Number of Candidates -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">No. of Candidates<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="number" class="form-control form-control-sm" value="{{ old('no_of_candidates', $batch->no_of_candidates) }}" required name="no_of_candidates" id="no_of_candidates" placeholder="Enter number of candidates" min="1">
                                             @if ($errors->has('no_of_candidates')) 
                                             <span class="help-block">{{ $errors->first('no_of_candidates') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- State -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">State<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm" name="state" required>
                                                <option value="1" {{ old('state', $batch->state) == 1 ? 'selected' : '' }}>Open</option>
                                                <option value="0" {{ old('state', $batch->state) == 0 ? 'selected' : '' }}>Close</option>
                                             </select>
                                             @if ($errors->has('state')) 
                                             <span class="help-block">{{ $errors->first('state') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Stage -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Stage<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm" name="stage" required>
                                                <option value="1" {{ old('stage', $batch->stage) == 1 ? 'selected' : '' }}>Pre-Assessment</option>
                                                <option value="2" {{ old('stage', $batch->stage) == 2 ? 'selected' : '' }}>Assessment</option>
                                                <option value="3" {{ old('stage', $batch->stage) == 3 ? 'selected' : '' }}>Post-Assessment</option>
                                             </select>
                                             @if ($errors->has('stage')) 
                                             <span class="help-block">{{ $errors->first('stage') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Status -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Status<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm" name="status">
                                                <option value="">Select Status</option>
                                                <option value="1" {{ old('status', $batch->status) == 1 ? 'selected' : '' }}>Pending</option>
                                                <option value="2" {{ old('status', $batch->status) == 2 ? 'selected' : '' }}>In Progress</option>
                                                <option value="3" {{ old('status', $batch->status) == 3 ? 'selected' : '' }}>Completed</option>
                                                <option value="4" {{ old('status', $batch->status) == 4 ? 'selected' : '' }}>Cancelled</option>
                                             </select>
                                             @if ($errors->has('status')) 
                                             <span class="help-block">{{ $errors->first('status') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Remarks -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Remarks<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="3" name="remarks" placeholder="Enter any remarks">{{ old('remarks', $batch->remarks) }}</textarea>
                                             @if ($errors->has('remarks')) 
                                             <span class="help-block">{{ $errors->first('remarks') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Created Info -->
                                       <div class="row mt-3">
                                          <div class="col-lg-12">
                                             <div class="alert alert-light border">
                                                <div class="row">
                                                   <div class="col-6">
                                                      <small class="text-muted">Created At:</small><br>
                                                      <strong>{{ $batch->created_at ? date('d M Y, h:i A', strtotime($batch->created_at)) : '--' }}</strong>
                                                   </div>
                                                   <div class="col-6">
                                                      <small class="text-muted">Last Updated:</small><br>
                                                      <strong>{{ $batch->updated_at ? date('d M Y, h:i A', strtotime($batch->updated_at)) : '--' }}</strong>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>

                                    <!-- Form Actions -->
                                    <div class="row mt-4">
                                       <div class="col-lg-12 text-right">
                                          <a href="{{ route('crm.batches.show', crypt_encrypt($batch->id)) }}" class="btn btn-sm btn-secondary mr-2">
                                             <i class="las la-times"></i> Cancel
                                          </a>
                                          <button type="submit" class="btn btn-sm btn-primary submit01">
                                             <i class="las la-save"></i> Update Batch
                                          </button>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection

@push('scripts')
<script>
   $.ajaxSetup({
      headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
   });
   
   $(document).ready(function() {
      // Initialize Select2
      $('.select2, .select2-ajax').select2({ 
         width: '100%', 
         placeholder: "Select an option", 
         allowClear: true 
      });

      // ==============================================
      // 1. AWARDING BODY - Independent AJAX Select2
      // ==============================================
      $('#awarding_body_id').select2({
         placeholder: 'Search and Select Awarding Body',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.awarding-bodies') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      }).on('change', function() {
         var awardingBodyId = $(this).val();
         var sectorSelect = $('#sector_id');
         var jobRoleSelect = $('#job_role_id');
         var assessorSelect = $('#assessor_id');
         
         if (awardingBodyId) {
            sectorSelect.prop('disabled', false);
            sectorSelect.empty().append('<option value="">Loading...</option>');
            
            $.ajax({
               url: "{{ route('crm.batches.ajax.sectors') }}",
               type: "GET",
               data: { awarding_body_id: awardingBodyId },
               success: function(response) {
                  sectorSelect.empty().append('<option value="">Select Sector</option>');
                  $.each(response.results, function(key, value) {
                     var selected = (value.id == '{{ $batch->sector_id }}') ? 'selected' : '';
                     sectorSelect.append('<option value="' + value.id + '" ' + selected + '>' + value.text + '</option>');
                  });
                  
                  // Trigger sector change to load job roles
                  if ('{{ $batch->sector_id }}') {
                     sectorSelect.trigger('change');
                  }
               },
               error: function() {
                  sectorSelect.empty().append('<option value="">Error loading sectors</option>');
               }
            });
         } else {
            sectorSelect.prop('disabled', true).empty().append('<option value="">Select Awarding Body First</option>');
            jobRoleSelect.prop('disabled', true).empty().append('<option value="">Select Sector First</option>');
            assessorSelect.prop('disabled', true).empty().append('<option value="">Select Job Role First</option>');
         }
      });

      // ==============================================
      // 2. SECTOR - Independent AJAX Select2
      // ==============================================
      $('#sector_id').select2({
         placeholder: 'Search and Select Sector',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.sectors') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  awarding_body_id: $('#awarding_body_id').val(),
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      }).on('change', function() {
         var sectorId = $(this).val();
         var jobRoleSelect = $('#job_role_id');
         var assessorSelect = $('#assessor_id');
         
         if (sectorId) {
            jobRoleSelect.prop('disabled', false);
            jobRoleSelect.empty().append('<option value="">Loading...</option>');
            
            $.ajax({
               url: "{{ route('crm.batches.ajax.job-roles') }}",
               type: "GET",
               data: { sector_id: sectorId },
               success: function(response) {
                  jobRoleSelect.empty().append('<option value="">Select Job Role</option>');
                  $.each(response.results, function(key, value) {
                     var selected = (value.id == '{{ $batch->job_role_id }}') ? 'selected' : '';
                     jobRoleSelect.append('<option value="' + value.id + '" ' + selected + ' data-duration="' + (value.duration_hours || '') + '" data-fee="' + (value.fee || '') + '">' + value.text + '</option>');
                  });
                  
                  // Trigger job role change to load assessors
                  if ('{{ $batch->job_role_id }}') {
                     jobRoleSelect.trigger('change');
                  }
               },
               error: function() {
                  jobRoleSelect.empty().append('<option value="">Error loading job roles</option>');
               }
            });
         } else {
            jobRoleSelect.prop('disabled', true).empty().append('<option value="">Select Sector First</option>');
            assessorSelect.prop('disabled', true).empty().append('<option value="">Select Job Role First</option>');
         }
      });

      // ==============================================
      // 3. JOB ROLE - Independent AJAX Select2
      // ==============================================
      $('#job_role_id').select2({
         placeholder: 'Search and Select Job Role',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.job-roles') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  sector_id: $('#sector_id').val(),
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      }).on('change', function() {
         var jobRoleId = $(this).val();
         var assessorSelect = $('#assessor_id');
         
         if (jobRoleId) {
            assessorSelect.prop('disabled', false);
            assessorSelect.empty().append('<option value="">Loading...</option>');
            
            $.ajax({
               url: "{{ route('crm.batches.ajax.assessors') }}",
               type: "GET",
               data: { job_role_id: jobRoleId },
               success: function(response) {
                  assessorSelect.empty().append('<option value="">Select Assessor</option>');
                  $.each(response.results, function(key, value) {
                     var selected = (value.id == '{{ $batch->assessor_id }}') ? 'selected' : '';
                     assessorSelect.append('<option value="' + value.id + '" ' + selected + ' data-rate="' + (value.rate || '') + '">' + value.text + '</option>');
                  });
               },
               error: function() {
                  assessorSelect.empty().append('<option value="">Error loading assessors</option>');
               }
            });
         } else {
            assessorSelect.prop('disabled', true).empty().append('<option value="">Select Job Role First</option>');
         }
      });

      // ==============================================
      // 4. TRAINING PARTNER - Independent AJAX Select2
      // ==============================================
      $('#training_partner_id').select2({
         placeholder: 'Search and Select Training Partner',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.training-partners') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      }).on('change', function() {
         var partnerId = $(this).val();
         var centerSelect = $('#training_center_id');
         
         if (partnerId) {
            centerSelect.prop('disabled', false);
            centerSelect.empty().append('<option value="">Loading...</option>');
            
            $.ajax({
               url: "{{ route('crm.batches.ajax.training-centers') }}",
               type: "GET",
               data: { training_partner_id: partnerId },
               success: function(response) {
                  centerSelect.empty().append('<option value="">Select Training Center</option>');
                  $.each(response.results, function(key, value) {
                     var selected = (value.id == '{{ $batch->training_center_id }}') ? 'selected' : '';
                     centerSelect.append('<option value="' + value.id + '" ' + selected + '>' + value.text + '</option>');
                  });
               },
               error: function() {
                  centerSelect.empty().append('<option value="">Error loading centers</option>');
               }
            });
         } else {
            centerSelect.prop('disabled', true).empty().append('<option value="">Select Training Partner First</option>');
         }
      });

      // ==============================================
      // 5. TRAINING CENTER - Independent AJAX Select2
      // ==============================================
      $('#training_center_id').select2({
         placeholder: 'Search and Select Training Center',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.training-centers') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  training_partner_id: $('#training_partner_id').val(),
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      });

      // ==============================================
      // 6. ASSESSOR - Independent AJAX Select2
      // ==============================================
      $('#assessor_id').select2({
         placeholder: 'Search and Select Assessor',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.batches.ajax.assessors') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
               return {
                  search: params.term,
                  job_role_id: $('#job_role_id').val(),
                  page: params.page || 1,
                  pagination: true
               };
            },
            processResults: function(response, params) {
               params.page = params.page || 1;
               return {
                  results: response.results,
                  pagination: {
                     more: (params.page * 10) < response.count_filtered
                  }
               };
            },
            cache: true
         }
      });

      // Set initial values
      @if($batch->awarding_body_id)
         setTimeout(function() {
            var awardingBodyOption = new Option("{{ $batch->awardingBody->name ?? '' }} ({{ $batch->awardingBody->code ?? '' }})", "{{ $batch->awarding_body_id }}", true, true);
            $('#awarding_body_id').append(awardingBodyOption).trigger('change');
         }, 100);
      @endif

     @if($batch->training_partner_id)
        setTimeout(function() {
            var partnerOption = new Option("{{ $batch->trainingPartner->name ?? '' }} ({{ $batch->trainingPartner->tp_id ?? '' }})", "{{ $batch->training_partner_id }}", true, true);
            $('#training_partner_id').append(partnerOption).trigger('change');
        }, 100);
    @endif
    @if($batch->training_center_id && $batch->training_partner_id)
        setTimeout(function() {
           var centerOption = new Option("{{ $batch->trainingCenter->center_name ?? '' }} ({{ $batch->trainingCenter->center_code ?? '' }})", "{{ $batch->training_center_id }}", true, true);
            $('#training_center_id').append(centerOption).trigger('change');
        }, 200);
    @endif
    @if($batch->assessor_id)
        setTimeout(function() {
           var centerOption = new Option("{{ $batch->assessor->name ?? '' }} ({{ $batch->assessor->assessor_code ?? '' }})", "{{ $batch->assessor_id }}", true, true);
            $('#assessor_id').append(centerOption).trigger('change');
        }, 300);
    @endif
      // Date validation
      $('#requested_date, #estimated_date, #actual_date').on('change', function() {
         var requested = $('#requested_date').val();
         var estimated = $('#estimated_date').val();
         var actual = $('#actual_date').val();
         
         if (requested && estimated && new Date(estimated) < new Date(requested)) {
            toastr.warning('Estimated date should be after requested date');
            $('#estimated_date').val('');
         }
         
         if (estimated && actual && new Date(actual) < new Date(estimated)) {
            toastr.warning('Actual date should be after estimated date');
            $('#actual_date').val('');
         }
      });

      // Form Submit
      $('#batchForm').on('submit', function(e) {
         e.preventDefault();
         let submitBtn = $('.submit01');
         let originalText = submitBtn.html();

         submitBtn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Updating...');

         $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
               if (response.status) {
                  toastr.success(response.message, 'Success');
                  setTimeout(() => window.location.href = response.redirect, 1000);
               } else {
                  toastr.warning(response.message);
               }
            },
            error: function(xhr) {
               submitBtn.prop('disabled', false).html(originalText);
               
               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  
                  $('#batchForm .form-control, #batchForm .select2-hidden-accessible').removeClass('is-invalid');
                  $('#batchForm .help-block').remove();
                  
                  $.each(errors, (field, messages) => {
                     let input = $('[name="' + field + '"]');
                     input.addClass('is-invalid');
                     
                     let errorHtml = '<span class="help-block">' + messages[0] + '</span>';
                     input.closest('label').append(errorHtml);
                  });
                  
                  let firstError = $('.is-invalid').first();
                  if (firstError.length) {
                     $('.viewPaneTab').animate({
                        scrollTop: firstError.closest('.row').offset().top - 100
                     }, 500);
                  }
                  
                  toastr.error('Please fix the validation errors', 'Error');
               } else if (xhr.status === 403) {
                  toastr.error(xhr.responseJSON?.message || 'Access denied: No permission', 'Error');
               } else if (xhr.status === 401) {
                  toastr.error('Please login to continue.', 'Error');
                  window.location.href = "{{ route('admin.login') }}";
               } else {
                  toastr.error(xhr.responseJSON?.message || 'Something went wrong!', 'Error');
               }
            }
         });
      });

      // Reset button
      $('.cancel01').on('click', function(e) {
         e.preventDefault();
         $('#batchForm')[0].reset();
         $('#batchForm .form-control, #batchForm .select2-hidden-accessible').removeClass('is-invalid');
         $('#batchForm .help-block').remove();
         $('.select2, .select2-ajax').val(null).trigger('change');
         $('#sector_id, #job_role_id, #training_center_id, #assessor_id').prop('disabled', true);
      });

      // Save button click
      $('.saveBtn').on('click', function(e) {
         e.preventDefault();
         $('#batchForm').submit();
      });

      // Prevent form submission on enter key in inputs
      $('#batchForm input').on('keypress', function(e) {
         if (e.which === 13) {
            e.preventDefault();
            return false;
         }
      });
   });
</script>
@endpush