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

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

@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;
   }
   .readonly-field {
      background-color: #e9ecef;
      cursor: not-allowed;
   }
</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.assessors.update', crypt_encrypt($assessor->id)) }}" id="assessorForm">
               @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 - Assessor Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Edit Assessor
                                        <a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Update</a>
                                    </h5>
                                    <div class="group">
                                       <!-- Assessor Code (Read Only) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Assessor Code<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm bg-light" value="{{ $assessor->assessor_code }}" readonly disabled>
                                             <small class="form-text text-muted">Assessor code is auto-generated</small>
                                          </label>
                                       </div>

                                       <!-- Assessor Name -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Assessor 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('name', $assessor->name) }}" required name="name" placeholder="Enter Assessor Full Name">
                                             @if ($errors->has('name')) 
                                             <span class="help-block">{{ $errors->first('name') }}</span>
                                             @endif
                                          </label>
                                       </div>

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

                                       <!-- 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', $assessor->contact_number) }}" required name="contact_number" id="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>

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

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

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

                                       <!-- Rate -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Rate (per candidate)<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <div class="input-group">
                                                <div class="input-group-prepend">
                                                   <span class="input-group-text">₹</span>
                                                </div>
                                                <input type="number" class="form-control form-control-sm" value="{{ old('rate', $assessor->rate) }}" name="rate" id="rate" placeholder="0.00" step="0.01" min="0">
                                             </div>
                                             <small class="form-text text-muted">Assessment rate per candidate (optional)</small>
                                             @if ($errors->has('rate')) 
                                             <span class="help-block">{{ $errors->first('rate') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>

                                    <h5 class="mb-2 mt-4 groupTitle">Job Roles</h5>
                                    <div class="group">
                                       <!-- Job Roles Multi-Select -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Job Roles<span class="asterisk"> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2-multiple" name="job_roles[]" id="job_roles" multiple="multiple" required>
                                                @foreach($jobRoles as $jobRole)
                                                   <option value="{{ $jobRole->id }}" {{ (in_array($jobRole->id, $selectedJobRoles)) ? 'selected' : '' }}>
                                                      {{ $jobRole->name }} ({{ $jobRole->sector->name ?? 'N/A' }})
                                                   </option>
                                                @endforeach
                                             </select>
                                             <small class="form-text text-muted">Select all job roles this assessor can assess</small>
                                             @if ($errors->has('job_roles')) 
                                             <span class="help-block">{{ $errors->first('job_roles') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- Right Side - Address & Location Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Address & Location Information</h5>
                                    <div class="group">
                                       <!-- Address -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Address<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="2" name="address" placeholder="Enter Full Address">{{ old('address', $assessor->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="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', $assessor->pincode) }}" 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 (optional)</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="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="post_office" id="post_office">
                                                <option value="">Select Post Office</option>
                                             </select>
                                             @if ($errors->has('post_office')) 
                                             <span class="help-block">{{ $errors->first('post_office') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- District - Readonly -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">District<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm readonly-field" name="district" id="district" value="{{ old('district', $assessor->district) }}" placeholder="Auto-filled from post office" readonly>
                                             <input type="hidden" name="district_id" id="district_id" value="{{ old('district_id', $assessor->district_id) }}">
                                             @if ($errors->has('district')) 
                                             <span class="help-block">{{ $errors->first('district') }}</span>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- State - Readonly -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">State<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm readonly-field" name="state" id="state" value="{{ old('state', $assessor->state) }}" placeholder="Auto-filled from post office" readonly>
                                             <input type="hidden" name="state_id" id="state_id" value="{{ old('state_id', $assessor->state_id) }}">
                                             @if ($errors->has('state')) 
                                             <span class="help-block">{{ $errors->first('state') }}</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>{{ $assessor->created_at ? date('d M Y, h:i A', strtotime($assessor->created_at)) : '--' }}</strong>
                                                   </div>
                                                   <div class="col-6">
                                                      <small class="text-muted">Last Updated:</small><br>
                                                      <strong>{{ $assessor->updated_at ? date('d M Y, h:i A', strtotime($assessor->updated_at)) : '--' }}</strong>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>

                                    <h5 class="mb-2 mt-4 groupTitle">Status</h5>
                                    <div class="group">
                                       <!-- 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" name="is_active" required>
                                                <option value="1" {{ old('is_active', $assessor->is_active) == 1 ? 'selected' : '' }}>Active</option>
                                                <option value="0" {{ old('is_active', $assessor->is_active) == 0 ? 'selected' : '' }}>Inactive</option>
                                             </select>
                                             @if ($errors->has('is_active')) 
                                             <span class="help-block">{{ $errors->first('is_active') }}</span>
                                             @endif
                                          </label>
                                       </div>
                                    </div>

                                    <!-- Form Actions -->
                                    <div class="row mt-4">
                                       <div class="col-lg-12 text-right">
                                          <a href="{{ route('crm.assessors.show', crypt_encrypt($assessor->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 Assessor
                                          </button>
                                       </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-multiple').select2({ 
         width: '100%', 
         placeholder: "Select an option", 
         allowClear: true 
      });

      // Initialize Multi-select for Job Roles
      $('#job_roles').select2({
         width: '100%',
         placeholder: "Select Job Roles",
         allowClear: true
      });

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

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

      // Pincode API call with loader
      $('#pincode').on('blur', function() {
         clearTimeout(pincodeTimer);
         var pincode = $(this).val();
         
         if (pincode.length === 6) {
            $('#pincodeLoader').show();
            $('#post_office').prop('disabled', true).html('<option value="">Loading...</option>');
            
            $.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 = '{{ $assessor->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 (existingPostOffice && foundSelected) {
                        $('#post_office').val(existingPostOffice).trigger('change');
                     } else if (response.results.length === 1 && !existingPostOffice) {
                        $('#post_office').val(response.results[0].id).trigger('change');
                     }
                  } else {
                     $('#post_office').prop('disabled', true).html('<option value="">No post offices found</option>');
                     toastr.warning('No post offices found for this pincode');
                  }
               },
               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 {
            $('#pincodeLoader').hide();
            $('#post_office').prop('disabled', true).html('<option value="">Enter valid pincode first</option>');
         }
      });

      // Post Office selection - auto-fill district and 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) {
            $('#district').val(district);
            $('#state').val(state);
            $('#district_id').val(districtId);
            $('#state_id').val(stateId);
         }
      });

      // Form Submit
      $('#assessorForm').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;
                  
                  $('#assessorForm .form-control, #assessorForm .select2-hidden-accessible').removeClass('is-invalid');
                  $('#assessorForm .help-block').remove();
                  
                  $.each(errors, (field, messages) => {
                     let input = $('[name="' + field + '"]');
                     if (field === 'job_roles') {
                        input = $('#job_roles');
                     }
                     if (field === 'district') {
                        input = $('#district');
                     }
                     if (field === 'state') {
                        input = $('#state');
                     }
                     input.addClass('is-invalid');
                     
                     let errorHtml = '<span class="help-block">' + messages[0] + '</span>';
                     if (field === 'job_roles') {
                        input.closest('.row').find('label').after(errorHtml);
                     } else {
                        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();
         $('#assessorForm')[0].reset();
         $('#assessorForm .form-control, #assessorForm .select2-hidden-accessible').removeClass('is-invalid');
         $('#assessorForm .help-block').remove();
         $('#job_roles').val(null).trigger('change');
         $('#post_office').prop('disabled', true).html('<option value="">Enter Pincode first</option>');
         $('#district').val('');
         $('#state').val('');
         $('#district_id').val('');
         $('#state_id').val('');
         $('#pincodeLoader').hide();
      });

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

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