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

@section('title', 'Create New Batch')

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

@section('content')
<div class="loadPages01">
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="card bd-0 navtab-card01 viewPageTabs">
            <form method="POST" action="{{ route('crm.batches.store') }}" id="batchForm">
               @csrf
               <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab overflow-auto">
                  <div id="azTab1" class="az-tab-pane active">
                     <div class="mail-view personal-div01 mx-2 bg-white">
                        <div class="message-body py-3 px-2">
                           <div class="item-details-page">
                              <div class="row">
                                 <!-- Left Side - Batch Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Batch Details
                                        <a href="#" class="addNewBtn saveBtn"><i class="las la-save"></i> Save</a>
                                    </h5>
                                    <div class="group">
                                       <!-- Awarding Body -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Awarding Body<span class="asterisk"> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2-ajax" name="awarding_body_id" id="awarding_body_id" required>
                                                <option value="">Select Awarding Body</option>
                                             </select>
                                             @if ($errors->has('awarding_body_id')) 
                                             <span class="help-block">{{ $errors->first('awarding_body_id') }}</span>
                                             @endif
                                          </label>
                                       </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==============================================
// 6. ASSESSOR - Independent AJAX Select2 (with job_role_id filter)
// ==============================================
$('#assessor_id').select2({
    placeholder: 'Search and Select Assessor',
    allowClear: true,
    ajax: {
        url: "{{ route('crm.batches.ajax.assessors') }}",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                search: params.term,
                job_role_id: $('#job_role_id').val(),
                page: params.page || 1,
                pagination: true
            };
        },
        processResults: function(response, params) {
            params.page = params.page || 1;
            return {
                results: response.results,
                pagination: {
                    more: (params.page * 10) < response.count_filtered
                }
            };
        },
        cache: true
    }
});
      // Date validation
      $('#requested_date, #estimated_date, #actual_date').on('change', function() {
         var requested = $('#requested_date').val();
         var estimated = $('#estimated_date').val();
         var actual = $('#actual_date').val();
         
         if (requested && estimated && new Date(estimated) < new Date(requested)) {
            toastr.warning('Estimated date should be after requested date');
            $('#estimated_date').val('');
         }
         
         if (estimated && actual && new Date(actual) < new Date(estimated)) {
            toastr.warning('Actual date should be after estimated date');
            $('#actual_date').val('');
         }
      });

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

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

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

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

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

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