@extends('layouts.training_centre_layout')

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />
<style>
    /* ... (CSS is unchanged and is generally good practice) ... */
    .upload-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1.5rem;
    }

    .upload-group {
        text-align: center;
        position: relative;
    }

    .upload-label {
        border: 2px dashed #ccc;
        padding: 30px 10px;
        border-radius: 10px;
        cursor: pointer;
        background-color: #fdfdfd;
        transition: 0.3s;
        height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .upload-label:hover {
        background-color: #f0f8ff;
        border-color: #007bff;
        color: #007bff;
    }

    .upload-label i {
        font-size: 30px;
        margin-bottom: 8px;
        color: #888;
    }

    .upload-label span {
        font-size: 14px;
    }

    .upload-input {
        display: none;
    }

    .selected-file-name {
        display: block;
        margin-top: 10px;
        font-size: 13px;
        color: #555;
        word-break: break-word;
    }

    .form-check {
        margin-bottom: 10px;
    }

    /* Style for program selection cards */
    .program-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: start;
    }

    .program-option input[type="checkbox"] {
        display: none;
    }

    .program-card-option {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        width: 100%; /* Fixed width for better grid layout */
        background-color: #fff;
        min-height: 100px;
    }

    .program-option input[type="checkbox"]:checked + .program-card-option {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        background-color: #e9f5ff;
    }

    .program-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .program-meta {
        font-size: 0.8rem;
        color: #6c757d;
    }
</style>

<div class="row">
    <div class="col-12">
        <div id="smartwizard">
            <ul class="nav">
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-1"><span class="num">1</span> Trainers Info</a>
                </li>
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-2"><span class="num">2</span> Infrastructure</a>
                </li>
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-3"><span class="num">3</span> Training Program(s)</a>
                </li>
                <!-- <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-4"><span class="num">4</span> Payment Details</a>
                </li> -->
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-5"><span class="num">4</span> Docs & Declarations</a>
                </li>
            </ul>

            <div class="tab-content px-3 py-4 bg-white">
                
                <div id="step-1" class="tab-pane" role="tabpanel">
                    <div class="step-header mb-3">
                        <h2 class="step-title">Trainer Information </h2>
                        <p class="step-subtitle">Add trainer details and upload certificates</p>
                    </div>
                    
                    <div class="col-12 mb-3">
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#trainerModal">
                            <i class="fa fa-plus"></i> Add Trainer
                        </button>
                    </div>

                    @if($trainers->count() > 0)
                        {{-- Assuming x-centre.trainers-card handles the display of $trainers --}}
                        <x-centre.trainers-card :trainers="$trainers" />
                        
                        {{-- In edit mode, we only need a next button, not Start Application --}}
                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-primary btn-next" id="step1-next-btn">
                                Save & Next <i class="fa fa-arrow-right"></i>
                            </button>
                        </div>
                    @else
                        <div class="alert alert-warning text-center mt-4">
                            <strong>Note:</strong> Please add at least one trainer.
                        </div>
                        <div class="text-center mt-4">
                            {{-- Added ID for easier control in JS --}}
                            <button type="button" class="btn btn-primary btn-next" id="step1-next-btn" disabled>
                                Save & Next <i class="fa fa-arrow-right"></i>
                            </button>
                        </div>
                    @endif
                </div>

                <div id="step-2" class="tab-pane" role="tabpanel">
                    <form id="infrastructure_form">
                        @csrf
                        <input type="hidden" name="training_centre_id" value="{{ $centre->id ?? '' }}">

                        <div class="step-header mb-3">
                            <h2 class="step-title">Infrastructure</h2>
                            <p class="step-subtitle">Provide details about training infrastructure</p>
                        </div>

                        <div class="row">
                            {{-- Number of Classrooms --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Number of Classrooms <span class="text-danger">*</span></label>
                                <input type="number" name="classrooms" class="form-control"
                                    min="1"
                                    max="{{ config('centre.max_classrooms') }}"
                                    value="{{ old('classrooms', $infrastructure->classrooms ?? '') }}">
                            </div>

                            {{-- Classroom Size Confirmation --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block">
                                    Is each classroom size at least {{ config('centre.min_classroom_size') }} sq ft?
                                    <span class="text-danger">*</span>
                                </label>
                                @php
                                    $classroomConfirmation = old('classroom_size_confirmation', $infrastructure->classroom_size_confirmation ?? '');
                                @endphp
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="classroom_size_confirmation"
                                        id="classroom_size_confirmation_yes" value="Yes"
                                        {{ $classroomConfirmation === 'Yes' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="classroom_size_confirmation_yes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="classroom_size_confirmation"
                                        id="classroom_size_confirmation_no" value="No"
                                        {{ $classroomConfirmation === 'No' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="classroom_size_confirmation_no">No</label>
                                </div>
                            </div>

                            {{-- Number of Laboratories --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Number of Demonstration Lab <span class="text-danger">*</span></label>
                                <input type="number" name="laboratories" class="form-control"
                                    min="{{ config('centre.min_labs') }}"
                                    value="{{ old('laboratories', $infrastructure->number_of_laboratories ?? '') }}">
                            </div>

                            {{-- Lab Size Confirmation --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-block">
                                    Is each Demonstration Lab size at least {{ config('centre.min_lab_size') }} sq ft?
                                    <span class="text-danger">*</span>
                                </label>
                                @php
                                    $labConfirmation = old('lab_size_confirmation', $infrastructure->laboratory_size_confirmation ?? '');
                                @endphp
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="lab_size_confirmation"
                                        id="lab_size_confirmation_yes" value="Yes"
                                        {{ $labConfirmation === 'Yes' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="lab_size_confirmation_yes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="lab_size_confirmation"
                                        id="lab_size_confirmation_no" value="No"
                                        {{ $labConfirmation === 'No' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="lab_size_confirmation_no">No</label>
                                </div>
                            </div>

                            {{-- Total Area --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Total Area (sq ft) <span class="text-danger">*</span></label>
                                <input type="number" name="total_area" class="form-control"
                                    min="{{ config('centre.min_total_area') }}"
                                    value="{{ old('total_area', $infrastructure->total_area ?? '') }}">
                            </div>

                           {{-- Available Facilities --}}
                            <div class="col-12 mb-3">
                                <label class="form-label">Available Facilities(optional) </label>
                                <div>
                                    @foreach ($allFacilities as $facility)
                                        <div class="form-check mb-1">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                name="facilities[]"
                                                value="{{ $facility->id }}"
                                                id="facility_{{ $facility->id }}"
                                                {{ in_array($facility->id, old('facilities', $selectedFacilities ?? [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="facility_{{ $facility->id }}">
                                                {{ $facility->name }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <label id="facilities-error-target" class="error" for="facilities[]" style="display:none;"></label>
                            </div>

                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="submit" id="btn_save_step_2" class="btn btn-primary btn-next">
                                <i class="fa fa-save"></i> Save & Next
                            </button>
                        </div>
                    </form>
                </div>



                    <div id="step-3" class="tab-pane" role="tabpanel">
                        <form id="program_form">@csrf
                            <input type="hidden" name="training_centre_id" id="program_centre_id" value="{{ $centre->id ?? '' }}">

                            <div class="step-header mb-3">
                                <h2 class="step-title">Training Programs</h2>
                                <p class="step-subtitle">Select the training programs you want to offer</p>
                            </div>

                            
                            <div class="program-options">
                                {{-- CORRECTED: Looping over $allTrainingPrograms for ALL options --}}
                                @foreach($allTrainingPrograms as $program)
                                    <label class="program-option">
                                        <input type="checkbox" name="programs[]" value="{{ $program->id }}"
                                            {{-- Using $selectedProgramIds (passed from controller) for pre-checking --}}
                                            {{ in_array($program->id, old('programs', $selectedProgramIds)) ? 'checked' : '' }}>
                                        
                                        <div class="program-card-option">
                                            <h3 class="program-name">{{ $program->title }}</h3>
                                            <div class="program-meta">
                                                <span class="program-duration">Duration: {{ $program->total_hours }} hrs</span>
                                                <span class="program-type">Type: {{ $program->course_type_desc }}</span>
                                            </div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>

                            <div class="text-center mt-4">
                                <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                                <button type="submit" class="btn btn-primary btn-next">
                                    <i class="fa fa-send"></i> Save & Next
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- <div id="step-4" class="tab-pane" role="tabpanel">
                        <form id="payment_form" enctype="multipart/form-data" method="POST">
                            @csrf

                        
                                @if(isset($payment) && $payment->id)
                                    <input type="hidden" name="payment_id" value="{{ $payment->id }}">
                                @endif
                                <input type="hidden" name="training_centre_id" value="{{ $centre->id ?? $centreId ?? '' }}">

                            <div class="step-header mb-3">
                                <h2 class="step-title">Payment Details</h2>
                                <p class="step-subtitle">Provide payment information related to the training centre</p>
                            </div>

                        <div class="row">
                               
                                <div class="col-md-6 mb-3">
                                    <label for="payment_mode">Payment Mode <span class="text-danger">*</span></label>
                                    <select name="payment_mode" id="payment_mode" class="form-control" required>
                                        <option value="">-- Select Payment Mode --</option>
                                        <option value="Cheque" {{ old('payment_mode', $payment->payment_mode ?? '') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                                        <option value="NEFT" {{ old('payment_mode', $payment->payment_mode ?? '') == 'NEFT' ? 'selected' : '' }}>NEFT</option>
                                        <option value="RTGS" {{ old('payment_mode', $payment->payment_mode ?? '') == 'RTGS' ? 'selected' : '' }}>RTGS</option>
                                        <option value="UPI" {{ old('payment_mode', $payment->payment_mode ?? '') == 'UPI' ? 'selected' : '' }}>UPI</option>
                                    </select>
                                </div>

                             
                                <div class="col-md-6 mb-3">
                                    <label for="transaction_id">Transaction ID <span class="text-danger">*</span></label>
                                    <input type="text" name="transaction_id" id="transaction_id" class="form-control"
                                        value="{{ old('transaction_id', $payment->transaction_id ?? '') }}" required>
                                </div>

                               
                                <div class="col-md-6 mb-3">
                                    <label for="transaction_date">Transaction Date <span class="text-danger">*</span></label>
                                    <input type="date" name="transaction_date" id="transaction_date" class="form-control"
                                        value="{{ old('transaction_date', $payment->transaction_date ?? '') }}" required>
                                </div>

                              
                                @php
                                    $fixedAmount = config('centre.fixed_amount'); 
                                @endphp

                                <div class="col-md-6 mb-3">
                                    <label for="amount">Amount (in INR) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" name="amount" id="amount" class="form-control"
                                        value="{{ old('amount', $payment->amount ?? $fixedAmount) }}" readonly required>
                                </div>

                              
                                <div class="col-12 mb-3">
                                    <label for="transaction_details">Transaction Details (Optional)</label>
                                    <textarea name="transaction_details" id="transaction_details" class="form-control" rows="3">{{ old('transaction_details', $payment->transaction_details ?? '') }}</textarea>
                                </div>

                                @php
                                    $receiptPath = $payment->receipt_path ?? null;
                                    $isReceiptUploaded = !empty($receiptPath);
                                @endphp

                                <div class="col-12 mb-3">
                                    <label for="receipt">
                                        Upload Receipt (PDF/Image, Max 5MB)
                                        @unless($isReceiptUploaded)
                                            <span class="text-danger">*</span>
                                        @endunless
                                    </label>

                                    <input type="file"
                                        name="receipt"
                                        id="receipt"
                                        class="form-control"
                                        accept=".pdf,.jpg,.jpeg,.png"
                                        {{ !$isReceiptUploaded ? 'required' : '' }}>

                                    <small class="text-muted">Accepted: .pdf, .jpg, .jpeg, .png. Max Size: 5MB.</small>

                                    {{-- Show existing file info --}}
                                    @if($isReceiptUploaded)
                                        <div class="mt-2">
                                            <p>Existing Receipt:
                                                <a class="btn btn-sm btn-outline-primary" href="{{ asset('storage/' . $receiptPath) }}" target="_blank" rel="noopener">
                                                    View
                                                </a>
                                            </p>

                                        
                                        </div>
                                    @endif
                                </div>

                            </div>


                            <div class="text-center mt-4">
                                <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                                <button type="submit" id="btn_save_step_4" class="btn btn-primary btn-next">
                                    <i class="fa fa-save"></i> Save & Next
                                </button>
                            </div>
                        </form>
                    </div> -->
                          <div id="step-5" class="tab-pane" role="tabpanel">
                    <form id="documents_form" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="training_centre_id" id="documents_centre_id" value="{{ $centre->id ?? '' }}">

                        <div class="step-header mb-3">
                            <h2 class="step-title">Documents & Declarations</h2>
                            <p class="step-subtitle">Upload required documents and agree to terms</p>
                        </div>

                        <div class="upload-grid">
                            @php
                                $docs = [
                                    'registration_certificate' => ['label' => 'Rent Agreement/Address Proof.', 'type' => 'pdf'],
                                    'utility_bill' =>  ['label' => 'Utility Bill (Electric, Water)', 'type' => 'pdf'],
                                    'noc_certificate' => ['label' => 'NOC from Local Authority (Optional)', 'type' => 'pdf'],
                                    'building_photos' => ['label' => 'Building Photos', 'type' => 'image'],
                                    'classroom_photos' => ['label' => 'Classroom Photos', 'type' => 'image'],
                                    'lab_photos' => ['label' => 'Laboratory Photos', 'type' => 'image'],
                                    'cctv_photo' => ['label' => 'CCTV Control Room Photo', 'type' => 'image'],
                                    'staff_certificates' => ['label' => 'Staff Qualification Certificates', 'type' => 'pdf'],
                                    'washroom_photos' => ['label' => 'Washroom Photos', 'type' => 'image'],
                                    'classroom_video' => ['label' => 'Classroom Video', 'type' => 'video'],
                                    'lab_video' => ['label' => 'Laboratory Video', 'type' => 'video'],
                                ];
                            @endphp

                            @foreach($docs as $field => $doc)
                                @php
                                    $label = $doc['label'];
                                    $type = $doc['type'];
                                    $accept = $type === 'pdf' ? '.pdf' : ($type === 'video' ? '.mp4' : '.jpg,.jpeg,.png');

                                    $existingFiles = $uploadedFiles[$label] ?? [];
                                    $hasFiles = count($existingFiles) > 0;
                                @endphp

                                <div class="upload-group">
                                    <label class="upload-label" for="{{ $field }}">
                                        <i class="fa fa-upload"></i>
                                       <span>{{ $label }} 
                                            @if(
                                                strtolower($label) != 'noc from local authority (optional)' 
                                                && $type !== 'video' 
                                                && !$hasFiles
                                            )
                                                <span class="text-danger">*</span>
                                            @endif
                                        </span>

                                        <small class="text-muted d-block mb-1">
                                            Allowed types: {{ strtoupper($accept) }}. Max size per file: 5MB.
                                        </small>

                                        <input type="file"
                                            id="{{ $field }}"
                                            name="{{ $field }}[]"
                                            multiple
                                            accept="{{ $accept }}"
                                            class="upload-input"
                                            data-filetype="{{ $type }}"
                                            data-has-files="{{ $hasFiles ? 'true' : 'false' }}">
                                    </label>

                                    <small class="selected-file-name" id="filename-{{ $field }}">
                                        {{ $hasFiles ? count($existingFiles) . ' file(s) uploaded' : 'No file selected' }}
                                    </small>

                                    @if($hasFiles)
                                        <div class="mt-2 d-flex flex-row gap-2 flex-wrap align-items-center">
                                            @foreach($existingFiles as $file)
                                                <a href="{{ $file }}" target="_blank" class="btn btn-sm btn-outline-primary" style="white-space: nowrap;">View</a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        {{-- Declarations --}}
                        <div class="mt-4">
                            <h4>Declarations</h4>
                            <small class="text-muted mb-3 d-block">Please confirm all declarations to proceed to submission.</small>

                            <div id="declaration-group">
                                @foreach($declarations as $column => $value)
                                    @php
                                        $checked = old($column, $value) ? 'checked' : '';
                                    @endphp
                                    <div class="form-check">
                                        <input type="checkbox" 
                                            name="{{ $column }}" 
                                            id="{{ $column }}" 
                                            class="form-check-input" 
                                            value="1" 
                                            {{ $checked }} 
                                            required>
                                        <label class="form-check-label" for="{{ $column }}">
                                            @switch($column)
                                                @case('agree_terms')
                                                    I agree to the Terms and Conditions and Privacy Policy
                                                    @break
                                                @case('agree_inspection')
                                                    I agree to facility inspection by NISD officials
                                                    @break
                                                @case('declare_info')
                                                    I declare that all information provided is accurate and complete
                                                    @break
                                            @endswitch
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="submit" id="btn_final_submit" class="btn btn-primary">
                                <i class="fa fa-send"></i> Update & Preview
                            </button>
                        </div>
                    </form>
                </div>




                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
    </div>
</div>

{{-- Assumed Laravel components --}}
<x-centre.add-trainers-detail-modal :trainers="$trainers" :qualifications="$qualifications" />
@endsection

@section('pages-scripts')
<script>
   
    const INFRA_CONFIG = {
        minClassroomSize: {{ config('centre.min_classroom_size') }},
        maxClassrooms: {{ config('centre.max_classrooms') }},
        minLabs: {{ config('centre.min_labs') }},
        minLabSize: {{ config('centre.min_lab_size') }},
        minTotalArea: {{ config('centre.min_total_area') }},
        minPaymentAmount: 15000  // Hardcoded as per your request
    };
</script>

<script>
$(document).ready(function () {
    let isSubmitting = false;

    function handleValidationError(xhr) {
        $('#smartwizard').smartWizard("hideLoading");
        isSubmitting = false;

        if (xhr.status === 422) {
            let errors = xhr.responseJSON.errors;
            // Format error messages into a readable list
            let errorMessages = Object.values(errors)
                .flat()
                .map(msg => `<li>${msg}</li>`).join("");
            let formattedMessage = `<ul>${errorMessages}</ul>`;
            
            Swal.fire({
                title: "Validation Error",
                html: formattedMessage,
                icon: "error",
                confirmButtonText: "OK"
            });
        } else {
            Swal.fire("Error!", xhr.responseJSON?.message || "An unexpected error occurred. Please try again.", "error");
        }
    }

    // Initialize SmartWizard
    $('#smartwizard').smartWizard({
        theme: "arrows",
        autoAdjustHeight: false,
        toolbar: {
            position: 'bottom',
            showNextButton: false,
            showPreviousButton: false,
        },
        transition: {
            animation: 'fade' // smooth transition
        }
    });

    // Update progress bar on step show
    $("#smartwizard").on("showStep", function (e, anchorObject, stepIndex) {
        const totalSteps = $('.nav .nav-item').length;
        const progress = ((stepIndex + 1) / totalSteps) * 100;
        $(".progress-bar").css("width", progress + "%").attr("aria-valuenow", progress);

        // Step 1: trainers check (enable/disable next)
        if (stepIndex === 0) {
            const hasTrainers = {{ $trainers->count() > 0 ? 'true' : 'false' }};
            $('#step1-next-btn').prop('disabled', !hasTrainers);
        }
    });

    // "Go Back" button logic
    $(document).on('click', '.btn_go_back', function () {
        $('#smartwizard').smartWizard("prev");
    });

    // Universal Next button handler
    $(document).on('click', '.btn-next', function (e) {
        e.preventDefault();
        const step = $(this).closest(".tab-pane");

        // Step‑1 special: no form submission, just navigation if enabled
        if (step.attr('id') === 'step-1') {
            if (!$(this).prop('disabled')) {
                $('#smartwizard').smartWizard("next");
            }
            return;
        }

        // For steps 2,3,4,5: form is present
        const form = $(this).closest("form");
        if (form.length) {
            form.submit();
        } else {
            // fallback
            $('#smartwizard').smartWizard("next");
        }
    });

    // Custom validator for facilities checkbox group
   

    // Custom validator for file uploads in EDIT mode
    $.validator.addMethod("fileRequiredIfNew", function (value, element) {
        if ($(element).data('required') === true || $(element).data('required') === 'true') {
            if ($(element).data('has-file') === true || $(element).data('has-file') === 'true') {
                return true;
            }
            return element.files.length > 0;
        }
        return true;
    }, "This file is required for application approval.");

   
    $.validator.addMethod("mustBeYes", function(value, element) {
        return value === "Yes";
    }, "You must confirm 'Yes' to proceed.");

    $('#infrastructure_form').validate({
        ignore: [],
        rules: {
            training_centre_id: { required: true },
            total_area: {
                required: true,
                number: true,
                min: INFRA_CONFIG.minTotalArea
            },
            classrooms: {
                required: true,
                number: true,
                min: 1,
                max: INFRA_CONFIG.maxClassrooms
            },
            laboratories: {
                required: true,
                number: true,
                min: INFRA_CONFIG.minLabs
            },
            classroom_size_confirmation: {
                required: true,
                mustBeYes: true
            },
            lab_size_confirmation: {
                required: true,
                mustBeYes: true
            },
            
        },
        messages: {
            total_area: `Total area is required and must be at least ${INFRA_CONFIG.minTotalArea} sq ft.`,
            classrooms: `Enter a number between 1 and ${INFRA_CONFIG.maxClassrooms}.`,
            laboratories: `Minimum ${INFRA_CONFIG.minLabs} demonstration lab(s) required.`,
            classroom_size_confirmation: "You must confirm that all classrooms are at least the minimum size.",
            lab_size_confirmation: "You must confirm that all labs are at least the minimum size.",
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") === "classroom_size_confirmation" || element.attr("name") === "lab_size_confirmation") {
                // Insert error after the last radio in the group
                error.insertAfter($(`input[name="${element.attr("name")}"]:last`).parent());
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
            if (isSubmitting) return;
            isSubmitting = true;

            let formData = new FormData(form);

            $.ajax({
                url: "{{ route('centre.save-infrastructure') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('#smartwizard').smartWizard("showLoading");
                },
                success: function (response) {
                    isSubmitting = false;
                    if (response.success) {
                        Swal.fire("Success!", response.message, "success").then(() => {
                            $('#smartwizard').smartWizard("next");
                        });
                    } else {
                        Swal.fire("Error!", response.message || "Something went wrong.", "error");
                    }
                },
                error: handleValidationError,
                complete: function() {
                    $('#smartwizard').smartWizard("hideLoading");
                }
            });
        }
    });

  
    /*** STEP 3: Training Programs Form Validation ***/
    $('#program_form').validate({
        ignore: [],
        rules: {
            training_centre_id: { required: true },
            "programs[]": { required: true }
        },
        messages: {
            training_centre_id: "Centre ID is missing.",
            "programs[]": "Please select at least one training program."
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") === "programs[]") {
                error.insertAfter(".program-options");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
            if (isSubmitting) return;
            isSubmitting = true;

            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('centre.save-programs') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('#smartwizard').smartWizard("showLoading");
                },
                success: function (response) {
                    isSubmitting = false;
                    if (response.success) {
                        Swal.fire("Success!", response.message, "success").then(() => {
                            $('#smartwizard').smartWizard("next");
                        });
                    } else {
                        Swal.fire("Error!", response.message || "Something went wrong.", "error");
                    }
                },
                error: handleValidationError,
                complete: function() {
                    $('#smartwizard').smartWizard("hideLoading");
                }
            });
        }
    });

    // Clear error when a program checkbox changes
    $('input[name="programs[]"]').on('change', function() {
        if ($('input[name="programs[]"]:checked').length > 0) {
            $('.program-options').next('.error').remove();
        }
    });

 


  let filesStore = {};

// Helper function to reset file inputs and storage upon failure
function resetFileInputs() {
    // 1. Clear JavaScript storage
    filesStore = {};
    
    // 2. Clear native input elements and their displays
    $('.upload-input').each(function() {
        this.value = ''; // Clear native input element
        const inputId = this.id;
        $(`#filename-${inputId}`).text('No file selected'); // Clear display
        // Also re-initialize the empty array for subsequent selections
        filesStore[this.name] = []; 
    });
}

// Initialize storage
$('.upload-input').each(function(){
    filesStore[this.name] = [];
});

// On file selection
$('.upload-input').on('change', function() {
    const name = this.name;
    const display = $('#filename-' + this.id);

    // Merge new files with previous selection
    let mergedFiles = filesStore[name].concat(Array.from(this.files));
    
    // **NEW: Remove duplicates by file name (Essential for accumulation)**
    filesStore[name] = mergedFiles.filter(
        (f, i, arr) => arr.findIndex(x => x.name === f.name) === i
    );

    // Display selected file names
    display.text(filesStore[name].map(f => f.name).join(', ') || 'No file selected');

    this.value = ''; // Reset input to allow same file selection again (for accumulation)
});

// On form submit
$('#documents_form').on('submit', function(e){
    e.preventDefault();
    // Prevent double submission if a submission is already in progress
    if ($(this).data('is-submitting')) return;
    $(this).data('is-submitting', true);
    
    let formData = new FormData(this);

    // Append all files from filesStore
    for(let key in filesStore){
        filesStore[key].forEach(file => formData.append(key, file));
    }

    $.ajax({
        url: "{{ route('centre.submit-documents.declaration') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res){
            if(res.success){
                Swal.fire("Success!", res.message, "success")
                    .then(()=>location.href = res.redirect_url);
                // No need to call resetFileInputs here if redirecting
            } else {
                // **NEW: Clear files on server-side validation error**
                resetFileInputs();
                Swal.fire("Error!", res.message, "error");
            }
        },
        error: function(xhr){
            // **NEW: Clear files on AJAX failure (like a 500 or security error)**
            resetFileInputs();
            Swal.fire("Error!", xhr.responseJSON?.message || "Something went wrong.", "error");
        },
        complete: function() {
            // Re-enable submission button
            $('#documents_form').data('is-submitting', false);
        }
    });
});


});
</script>

@endsection