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

@section('title', 'Edit Training Center')

@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; }
   .pincode-loader {
      position: absolute;
      right: 10px;
      top: 8px;
      color: #007bff;
      display: none;
   }
   .pincode-wrapper {
      position: relative;
   }
</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.training-centers.update', crypt_encrypt($center->id)) }}" id="centerForm">
               @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 - Center Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Edit Training Center
                                        <a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Update</a>
                                    </h5>
                                    <div class="group">
                                       <!-- Center Code (Read Only) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Center Code<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm bg-light" value="{{ $center->center_code }}" readonly disabled>
                                             <small class="form-text text-muted">Center code is auto-generated</small>
                                          </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" 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>

                                       <!-- Center Name -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Center Name<span class="asterisk"> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('center_name', $center->center_name) }}" required name="center_name" placeholder="Enter Training Center Name" minlength="3">
                                             @if ($errors->has('center_name')) 
                                             <span class="help-block">{{ $errors->first('center_name') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Address -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Address<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="2" placeholder="Enter Full Address" name="address" required>{{ old('address', $center->address) }}</textarea>
                                             @if ($errors->has('address')) 
                                             <span class="help-block">{{ $errors->first('address') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Pincode with Loader -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Pincode<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <div class="pincode-wrapper">
                                                <input type="text" class="form-control form-control-sm" value="{{ old('pincode', $center->pincode) }}" required name="pincode" id="pincode" placeholder="Enter Pincode" maxlength="6" pattern="[0-9]{6}">
                                                <i class="las la-spinner la-spin pincode-loader" id="pincodeLoader"></i>
                                             </div>
                                             <small class="form-text text-muted">Enter 6 digit pincode</small>
                                             @if ($errors->has('pincode')) 
                                             <span class="help-block">{{ $errors->first('pincode') }}</span>
                                             @endif
                                          </label>
                                       </div>

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

                                       <!-- City -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">City<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('city', $center->city) }}" required name="city" id="city" placeholder="City" readonly>
                                             @if ($errors->has('city')) 
                                             <span class="help-block">{{ $errors->first('city') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- District (from API) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">District<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('district_name', $center->districtRelation->name ?? '') }}" required name="district" id="district" placeholder="District" readonly>
                                             <input type="hidden" name="district_id" id="district_id" value="{{ old('district_id', $center->district_id) }}">
                                             @if ($errors->has('district')) 
                                             <span class="help-block">{{ $errors->first('district') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- State (from API) -->
                                       <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">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('state_name', $center->stateRelation->name ?? '') }}" required name="state" id="state" placeholder="State" readonly>
                                             <input type="hidden" name="state_id" id="state_id" value="{{ old('state_id', $center->state_id) }}">
                                             @if ($errors->has('state')) 
                                             <span class="help-block">{{ $errors->first('state') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- Right Side - Contact & Location Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Contact & Location Information</h5>
                                    <div class="group">
                                       <!-- GPS Location -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">GPS Location<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <div class="input-group">
                                                <input type="text" class="form-control form-control-sm" value="{{ old('gps_loc', $center->gps_loc) }}" name="gps_loc" id="gps_loc" placeholder="Lat, Long">
                                                <div class="input-group-append">
                                                   <button class="btn btn-sm btn-outline-secondary" type="button" id="getLocation"><i class="las la-map-marker"></i></button>
                                                </div>
                                             </div>
                                             <small class="form-text text-muted">Click button to get current location</small>
                                             @if ($errors->has('gps_loc')) 
                                             <span class="help-block">{{ $errors->first('gps_loc') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Latitude (hidden) -->
                                       <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $center->latitude) }}">
                                       <!-- Longitude (hidden) -->
                                       <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $center->longitude) }}">

                                       <!-- Center Type -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Center Type<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('center_type', $center->center_type) }}" name="center_type" placeholder="e.g., Main, Branch">
                                             @if ($errors->has('center_type')) 
                                             <span class="help-block">{{ $errors->first('center_type') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Square Feet -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Square Feet<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('squarefeet', $center->squarefeet) }}" name="squarefeet" placeholder="Area in sq.ft">
                                             @if ($errors->has('squarefeet')) 
                                             <span class="help-block">{{ $errors->first('squarefeet') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Mobile -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Mobile<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('mobile', $center->mobile) }}" name="mobile" placeholder="10 digit mobile number" maxlength="10" pattern="[0-9]{10}">
                                             <small class="form-text text-muted">Optional</small>
                                             @if ($errors->has('mobile')) 
                                             <span class="help-block">{{ $errors->first('mobile') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Phone -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Phone (Landline)<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('phone', $center->phone) }}" name="phone" placeholder="Landline number">
                                             @if ($errors->has('phone')) 
                                             <span class="help-block">{{ $errors->first('phone') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <h5 class="mb-2 mt-4 groupTitle">Contact Person Details</h5>
                                       
                                       <!-- Contact Person Name -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Contact Person<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('contact_person_name', $center->contact_person_name) }}" required name="contact_person_name" placeholder="Enter Contact Person Name">
                                             @if ($errors->has('contact_person_name')) 
                                             <span class="help-block">{{ $errors->first('contact_person_name') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Designation -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Designation<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('contact_person_designation', $center->contact_person_designation) }}" required name="contact_person_designation" placeholder="e.g., Center Manager">
                                             @if ($errors->has('contact_person_designation')) 
                                             <span class="help-block">{{ $errors->first('contact_person_designation') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Primary Contact Number -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Contact Number<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('contact_number', $center->contact_number) }}" required name="contact_number" placeholder="10 digit mobile number" maxlength="10" pattern="[0-9]{10}">
                                             <small class="form-text text-muted">Enter 10 digit mobile number</small>
                                             @if ($errors->has('contact_number')) 
                                             <span class="help-block">{{ $errors->first('contact_number') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Alternate Contact Number -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Alternate Number<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('alt_contact_number', $center->alt_contact_number) }}" name="alt_contact_number" placeholder="Alternate number (optional)" maxlength="10" pattern="[0-9]{10}">
                                             <small class="form-text text-muted">Optional - 10 digit mobile number</small>
                                             @if ($errors->has('alt_contact_number')) 
                                             <span class="help-block">{{ $errors->first('alt_contact_number') }}</span>
                                             @endif
                                          </label>
                                       </div>

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

                                       <!-- Other Details -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Other Details<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="2" name="other_details" placeholder="Any other details">{{ old('other_details', $center->other_details) }}</textarea>
                                             @if ($errors->has('other_details')) 
                                             <span class="help-block">{{ $errors->first('other_details') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Created Info (Read Only) -->
                                       <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>{{ $center->created_at ? date('d M Y, h:i A', strtotime($center->created_at)) : '--' }}</strong>
                                                   </div>
                                                   <div class="col-6">
                                                      <small class="text-muted">Last Updated:</small><br>
                                                      <strong>{{ $center->updated_at ? date('d M Y, h:i A', strtotime($center->updated_at)) : '--' }}</strong>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       
                                       <!-- Form Actions -->
                                       <div class="row mt-4">
                                          <div class="col-lg-12 text-right">
                                             <a href="{{ route('crm.training-centers.show', crypt_encrypt($center->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 Center
                                             </button>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection

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

      // Load Training Partners with selected value
      $('#training_partner_id').select2({
         placeholder: 'Search and Select Training Partner',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.training-centers.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
         }
      });

      // Set selected training partner
      @if($center->training_partner_id)
         var trainingPartnerId = '{{ $center->training_partner_id }}';
         var trainingPartnerName = '{{ $center->trainingPartner->name ?? "" }} ({{ $center->trainingPartner->tp_id ?? "" }})';
         var newOption = new Option(trainingPartnerName, trainingPartnerId, true, true);
         $('#training_partner_id').append(newOption).trigger('change');
      @endif

      // Load Statuses with selected value
      $('#status_id').select2({
         placeholder: 'Search and Select Status',
         allowClear: true,
         ajax: {
            url: "{{ route('crm.training-centers.ajax.statuses') }}",
            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
         }
      });

      // Set selected status
      @if($center->status_id)
         var statusId = '{{ $center->status_id }}';
         var statusName = '{{ $center->status->name ?? "" }}';
         var newOption = new Option(statusName, statusId, true, true);
         $('#status_id').append(newOption).trigger('change');
      @endif

      // Load post offices for current pincode
      @if($center->pincode)
         setTimeout(function() {
            $('#pincode').trigger('blur');
         }, 500);
      @endif

      // Restrict contact numbers to only digits
      $('#contact_number, #alt_contact_number, #mobile, #pincode').on('input', function() {
         this.value = this.value.replace(/[^0-9]/g, '').substring(0, $(this).attr('maxlength') || 10);
      });

      // Pincode API call with loader
      $('#pincode').on('blur', function() {
         clearTimeout(pincodeTimer);
         var pincode = $(this).val();
         
         if (pincode.length === 6) {
            $('#pincodeLoader').show();
            
            $.ajax({
               url: "{{ route('crm.training-centers.ajax.post-offices') }}",
               type: "GET",
               data: { pincode: pincode },
               success: function(response) {
                 if (response.results && response.results.length > 0) {
                            var options = '<option value="">Select Post Office</option>';
                            var existingPostOffice = '{{ $center->post_office }}';
                            var foundSelected = false;
                            
                            $.each(response.results, function(key, value) {
                                var selected = (value.id == existingPostOffice) ? 'selected' : '';
                                if (value.id == existingPostOffice) {
                                    foundSelected = true;
                                }
                                options += '<option value="' + value.id + '" ' + selected + 
                                        ' data-district="' + value.district + '" ' +
                                        'data-state="' + value.state + '" ' +
                                        'data-district-id="' + (value.district_id || '') + '" ' +
                                        'data-state-id="' + (value.state_id || '') + '">' + 
                                        value.text + '</option>';
                            });
                            
                            $('#post_office').prop('disabled', false).html(options);
                            
                            // If we have an existing post office value and it was found in the results
                            if (existingPostOffice && foundSelected) {
                                $('#post_office').val(existingPostOffice).trigger('change');
                            }
                            // Auto-select if only one option and no existing value
                            else if (response.results.length === 1 && !existingPostOffice) {
                                $('#post_office').val(response.results[0].id).trigger('change');
                            }
                            // If we have an existing value but it wasn't found, clear it
                            else if (existingPostOffice && !foundSelected) {
                                $('#post_office').val('').trigger('change');
                                toastr.warning('Previously selected post office not found for this pincode');
                            }
                        } else {
                            $('#post_office').prop('disabled', true).html('<option value="">No post offices found</option>');
                            // Clear district/state if no results
                            $('#district_display, #state_display, #city').val('');
                            $('#district_id, #state_id').val('');
                        }
               },
               error: function() {
                  $('#post_office').prop('disabled', true).html('<option value="">Error loading data</option>');
                  toastr.error('Failed to fetch post office details');
               },
               complete: function() {
                  $('#pincodeLoader').hide();
               }
            });
         } else {
            $('#post_office').prop('disabled', true).html('<option value="">Enter valid pincode first</option>');
            $('#city, #district, #state').val('');
            $('#district_id, #state_id').val('');
         }
      });

      // Post Office selection - auto-fill city, district, state
      $('#post_office').on('change', function() {
         var selected = $(this).find('option:selected');
         var district = selected.data('district');
         var state = selected.data('state');
         var districtId = selected.data('district-id');
         var stateId = selected.data('state-id');
         
         if (district && state) {
            $('#city').val(selected.text().split('(')[0].trim());
            $('#district').val(district);
            $('#state').val(state);
            $('#district_id').val(districtId);
            $('#state_id').val(stateId);
         }
      });

      // Get current location for GPS
      $('#getLocation').on('click', function() {
         if (navigator.geolocation) {
            $(this).html('<i class="las la-spinner la-spin"></i>');
            
            navigator.geolocation.getCurrentPosition(function(position) {
               var lat = position.coords.latitude;
               var lng = position.coords.longitude;
               
               $('#latitude').val(lat);
               $('#longitude').val(lng);
               $('#gps_loc').val(lat + ', ' + lng);
               toastr.success('Location captured successfully');
               
               $('#getLocation').html('<i class="las la-map-marker"></i>');
            }, function(error) {
               toastr.error('Unable to get location: ' + error.message);
               $('#getLocation').html('<i class="las la-map-marker"></i>');
            });
         } else {
            toastr.error('Geolocation is not supported by this browser');
         }
      });

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

        $('#loaderStatus').text('Starting updating...');
        $('#refreshLoader').removeClass('d-none');
         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) {
                  $('#refreshLoader').addClass('d-none');
               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);
               $('#refreshLoader').addClass('d-none');

               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  
                  // Clear previous errors
                  $('#centerForm .form-control').removeClass('is-invalid');
                  $('#centerForm .help-block').remove();
                  
                  // Display new errors
                  $.each(errors, (field, messages) => {
                     let input = $('[name="' + field + '"]');
                     input.addClass('is-invalid');
                     
                     // Add error message
                     let errorHtml = '<span class="help-block">' + messages[0] + '</span>';
                     input.closest('label').append(errorHtml);
                  });
                  
                  // Scroll to first error
                  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();
         $('#centerForm')[0].reset();
         $('#centerForm .form-control').removeClass('is-invalid');
         $('#centerForm .help-block').remove();
      });

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

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