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

@section('title', 'Create New 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.store') }}" 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">Training Center Details
                                        <a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Save</a>
                                    </h5>
                                    <div class="group">
                                       <!-- 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')}}" 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')}}</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')}}" 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 disabled>
                                                <option value="">Enter Pincode first</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')}}" 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')}}" required name="district" id="district" placeholder="District" readonly>
                                             <input type="hidden" name="district_id" id="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')}}" required name="state" id="state" placeholder="State" readonly>
                                             <input type="hidden" name="state_id" id="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')}}" 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')}}">
                                       <!-- Longitude (hidden) -->
                                       <input type="hidden" name="longitude" id="longitude" value="{{old('longitude')}}">

                                       <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')}}" 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')}}" 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')}}" 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')}}" 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>
                                       
                                       <!-- Form Actions -->
                                       <div class="row mt-4">
                                          <div class="col-lg-12 text-right">
                                             <button type="reset" class="btn btn-sm btn-dark mr-2 cancel01">Reset</button>
                                             <button type="submit" class="btn btn-sm btn-primary submit01">Create 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
      $('#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
         }
      });

      // Load Statuses
      $('#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
         }
      });

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

      // Pincode API call with loader and delay after user stops typing
      $('#pincode').on('keyup', function() {
         clearTimeout(pincodeTimer);
         var pincode = $(this).val();
         
         if (pincode.length === 6) {
            // Show loader
            $('#pincodeLoader').show();
            
            // Clear previous post office data
            $('#post_office').prop('disabled', true).html('<option value="">Loading...</option>');
            $('#city, #district, #state').val('');
            $('#district_id, #state_id').val('');
            
            // Set timer to call API after user stops typing
            pincodeTimer = setTimeout(function() {
               $.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>';
                        $.each(response.results, function(key, value) {
                           options += '<option value="' + value.id + '" data-district="' + value.district + '" data-state="' + value.state + '">' + value.text + '</option>';
                        });
                        $('#post_office').prop('disabled', false).html(options);
                     } 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() {
                     // Hide loader
                     $('#pincodeLoader').hide();
                  }
               });
            }, 500); // Wait 500ms after user stops typing
         } else {
            $('#pincodeLoader').hide();
            $('#post_office').prop('disabled', true).html('<option value="">Enter valid pincode first</option>');
            $('#city, #district, #state').val('');
            $('#district_id, #state_id').val('');
         }
      });

      // Also handle blur event as backup
      $('#pincode').on('blur', function() {
         clearTimeout(pincodeTimer);
         var pincode = $(this).val();
         
         if (pincode.length === 6) {
            // Check if we already have loaded data
            if ($('#post_office option').length <= 1) {
               $('#pincode').trigger('keyup');
            }
         }
      });

      // 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');
         
         if (district && state) {
            $('#city').val(selected.text().split('(')[0].trim());
            $('#district').val(district);
            $('#state').val(state);
            
            // You might want to lookup district_id and state_id from your database
            // This would require another API call to match names to IDs
         }
      });

      // Get current location for GPS
      $('#getLocation').on('click', function() {
         if (navigator.geolocation) {
            // Show loading on button
            $(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');
               
               // Reset button
               $('#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 saving...');
        $('#refreshLoader').removeClass('d-none');

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

         $.ajax({
            url: "{{ route('crm.training-centers.store') }}",
            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();
         $('#training_partner_id').val(null).trigger('change');
         $('#status_id').val(null).trigger('change');
         $('#post_office').prop('disabled', true).html('<option value="">Enter Pincode first</option>');
         $('#pincodeLoader').hide();
      });

      // 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