@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">
                {{-- Steps --}}
                <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">
                
                {{-- STEP 1: TRAINER INFO --}}
                <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(isset($trainerDetails) && $trainerDetails->count() > 0)
                         <x-centre.trainers-card :trainers="$trainerDetails" />
                        <div class="text-center mt-4">
                            @if ($latest_application_status == null)
                                <!-- Application not started -->
                                <form id="start_application_form">
                                    @csrf
                                    <button type="submit" class="btn btn-success" id="start_application_btn">
                                        <i class="fa fa-play"></i> Start Application Process
                                    </button>
                                </form>
                            @elseif ($latest_application_status == 'INITIATED')
                                <!-- Application started -->
                                <button type="button" id="btn_next_step_two" class="btn btn-primary btn-next">
                                    <i class="fa fa-arrow-right"></i> Proceed to Infrastructure
                                </button>
                            @endif
                        </div>
                    @endif
                </div>


    
              {{-- STEP 2: INFRASTRUCTURE --}}
                <div id="step-2" class="tab-pane" role="tabpanel">
                    <form id="infrastructure_form">
                        @csrf
                        <input type="hidden" name="training_centre_id" value="{{ request('id') ?? $centre_application_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="{{ config('centre.min_classrooms', 1) }}" 
                                    max="{{ config('centre.max_classrooms', 5) }}"
                                    value="{{ isset($infrastructure->classrooms) ? $infrastructure->classrooms : '' }}"
                                    required>
                            </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', 300) }} sq ft? <span class="text-danger">*</span></label>
                                @php 
                                    $classroomConfirmation = isset($infrastructure->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' : '' }} required>
                                    <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' : '' }} required>
                                    <label class="form-check-label" for="classroom_size_confirmation_no">No</label>
                                </div>
                            </div>

                            {{-- Number of Demonstration Lab --}}
                            <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', 1) }}"
                                    max="{{ config('centre.max_labs', 10) }}"
                                    value="{{ isset($infrastructure->number_of_laboratories) ? $infrastructure->number_of_laboratories : '' }}"
                                    required>
                            </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', 700) }} sq ft? <span class="text-danger">*</span></label>
                                @php 
                                    $labConfirmation = isset($infrastructure->laboratory_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' : '' }} required>
                                    <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' : '' }} required>
                                    <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', 500) }}"
                                    max="{{ config('centre.max_total_area', 5000) }}"
                                    value="{{ isset($infrastructure->total_area) ? $infrastructure->total_area : '' }}"
                                    required>
                            </div>

                            {{-- Available Facilities --}}
                            <div class="col-12 mb-3">
                                <label class="form-label">Available Facilities(optional)</label>
                                <div>
                                    @php 
                                        $facilities = $facilities ?? []; 
                                        $selectedFacilities = isset($selectedFacilities) ? $selectedFacilities : [];
                                    @endphp

                                    @foreach ($facilities as $facility)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                name="facilities[]"
                                                value="{{ $facility->id }}"
                                                id="facility_{{ $facility->id }}"
                                                {{ in_array($facility->id, $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>



                {{-- STEP 3: TRAINING PROGRAMS --}}
                <div id="step-3" class="tab-pane" role="tabpanel">
                    <form id="program_form">@csrf
                        <input type="hidden" name="training_centre_id" value="{{ request('id') ?? $centre_application_id }}">

                      
                        <div class="step-header mb-3">
                            <h2 class="step-title">Training Program(s)</h2>
                            <p class="step-subtitle">Select the training program(s) you want to offer</p>
                        </div>

                        <div class="program-options">
                            @php
                                $selected = old('programs', $selectedProgramIds ?? []);
                            @endphp

                            @foreach($trainingPrograms as $program)
                                <label class="program-option">
                                    <input type="checkbox" name="programs[]" value="{{ $program->id }}"
                                        {{ in_array($program->id, $selected) ? '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
                            <label id="programs-error-target" class="error" for="programs[]" style="display:none;"></label>
                        </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_3" class="btn btn-primary btn-next">
                                <i class="fa fa-save"></i> Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- {{-- STEP 4: PAYMENT DETAILS --}}
                 <div id="step-4" class="tab-pane" role="tabpanel">
                    {{-- enctype is needed for file upload --}}
                    <form id="payment_form" enctype="multipart/form-data">@csrf 
                        <input type="hidden" name="training_centre_id" value="{{ request('id') ?? $centre_application_id }}">

                       
                        <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>
                                    {{-- Use $payment->payment_mode ?? '' instead of $centre->id ?? $centreId ?? '' --}}
                                    <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>

                            <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="15000"  readonly>
                            </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>

                               <div class="col-12 mb-3">
                                    <label for="receipt">Upload Receipt (PDF/Image, Max 5MB) 
                                        @if(empty($payment->receipt_path)) 
                                            <span class="text-danger">*</span> 
                                        @endif 
                                    </label>

                                    <input 
                                        type="file" 
                                        name="receipt" 
                                        id="receipt" 
                                        class="form-control" 
                                        accept=".pdf,.jpg,.jpeg,.png"
                                        data-has-file="{{ !empty($payment->receipt_path) ? '1' : '0' }}"
                                    >

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

                                    @if(!empty($payment->receipt_path))
                                        <small class="text-success d-block mt-1">
                                            <i class="fa fa-check-circle"></i> Existing file uploaded. Upload a new one to replace it.
                                        </small>
                                        <a href="{{ asset('storage/' . $payment->receipt_path) }}" target="_blank" class="d-block mt-1">
                                            View Current Receipt
                                        </a>
                                    @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">
                    <div id="step-5" class="tab-pane" role="tabpanel">
                    <form id="documents_form" enctype="multipart/form-data" method="POST">
                        @csrf
                        <input type="hidden" name="training_centre_id" value="{{ request('id') ?? $centre_application_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> Save & Preview
                            </button>
                        </div>
                    </form>
                </div>





               {{-- The Progress Bar --}}
                <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>

    <x-centre.add-trainers-detail-modal :trainers="$trainerDetails" :qualifications="$qualifications" />
</div>
@endsection


@section('pages-scripts')

<script>
$(document).ready(function () {

    // Open trainer modal
    $(document).on('click', '#openTrainersModal', function() {
        $('#trainerModal').modal('show');
    });

    // ----------------------------
    // Client-side validation
    // ----------------------------
    function validateField(input) {
        let value = input.val();
        let isValid = true;

        input.removeClass('is-invalid');
        input.next('.text-danger').remove();

        // Required validation
        if (input.prop('required') && (!value || value.trim() === '')) {
            isValid = false;
            input.addClass('is-invalid');
            input.after('<small class="text-danger d-block mt-1">This field is required.</small>');
        }

        // Number validation
        if (input.attr('type') === 'number' && value !== '') {
            if (isNaN(value) || parseInt(value) < parseInt(input.attr('min') || 0)) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid number.</small>');
            }
        }

        // Email validation
        if (input.attr('type') === 'email' && value !== '') {
            let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(value)) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid email address.</small>');
            }
        }

        // Date validation
        if (input.attr('type') === 'date' && value !== '') {
            let date = new Date(value);
            if (isNaN(date.getTime())) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid date.</small>');
            }
        }

        // File validation
        if (input.attr('type') === 'file' && value !== '') {
            let accept = input.attr('accept');
            if (accept) {
                let allowed = accept.split(',');
                let fileExt = value.split('.').pop().toLowerCase();
                let valid = allowed.some(a => a.includes(fileExt) || a === 'image/*' || a === 'application/pdf');
                if (!valid) {
                    isValid = false;
                    input.addClass('is-invalid');
                    input.after('<small class="text-danger d-block mt-1">Invalid file type.</small>');
                }
            }
        }

        return isValid;
    }

    // Validate fields on input/change
    $('#trainer_form input').on('input change', function() {
        validateField($(this));
    });

    // ----------------------------
    // Form submit with confirmation
    // ----------------------------
    $(document).on('submit', '#trainer_form', function (e) {
        e.preventDefault();

        let allValid = true;

        // Validate all inputs
        $('#trainer_form input').each(function() {
            if (!validateField($(this))) allValid = false;
        });

        if (!allValid) {
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please fix the errors highlighted in the form.',
                confirmButtonText: 'Ok'
            });
            return;
        }

        // Confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to save this trainer's details?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, save it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                let formData = new FormData($('#trainer_form')[0]);

                $.ajax({
                    url: $('#trainer_form').attr('action'),
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        Swal.fire({
                            icon: response.success ? 'success' : 'error',
                            title: response.success ? 'Success!' : 'Error!',
                            text: response.message || (response.success ? 'Trainer added successfully.' : 'Something went wrong.'),
                            confirmButtonText: 'Ok'
                        }).then(() => {
                            if (response.success) {
                                $('#trainerModal').modal('hide');
                                location.reload();
                            }
                        });
                    },
                    error: function (xhr) {
                        if(xhr.status === 422) {
                            // Server validation errors
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                let inputField = $('[name="'+key+'"]');
                                inputField.addClass('is-invalid');
                                inputField.next('.text-danger').remove();
                                inputField.after('<small class="text-danger d-block mt-1">'+value[0]+'</small>');
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please correct the highlighted errors.',
                                confirmButtonText: 'Ok'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message || 'Something went wrong.',
                                confirmButtonText: 'Ok'
                            });
                        }
                    }
                });

            }
        });

    });

});
</script>


<script>
$(document).ready(function () {
    let isSubmitting = false;
    const fileStorage = {};
    const url = new URL(window.location.href);
    const params = url.searchParams;
    const applicationId = params.get('id');
    const stepParam = parseInt(params.get('step'));
    const $wizard = $('#smartwizard');

    
    function handleValidationError(xhr) {
        if (xhr.status === 422) {
            const errors = xhr.responseJSON.errors;
            let firstError = "Validation failed. Please check the inputs.";
            for (const field in errors) {
                firstError = errors[field][0];
                break;
            }
            Swal.fire("Validation Error!", firstError, "warning");
        } else {
            Swal.fire("System Error!", "An unexpected error occurred: " + (xhr.responseJSON?.message || xhr.statusText), "error");
        }
    }

    $.validator.addMethod("requireCheckbox", function (value, element) {
        return $('input[name="' + element.name + '"]:checked').length > 0;
    }, "Please select at least one option.");

        $.validator.addMethod("requireCheckbox", function (value, element) {
        return $('input[name="facilities[]"]:checked').length > 0;
    }, "Select at least one facility.");

    $.validator.addMethod("extension", function(value, element, param) {
        param = typeof param === "string" ? param.replace(/,/g, "|") : "pdf|jpg|jpeg|png|mp4";
        return this.optional(element) || value.match(new RegExp("\\.(" + param + ")$", "i"));
    }, "Please upload files in allowed formats: PDF, JPG, PNG, or MP4.");

    // --- SMART WIZARD SETUP ---
    $wizard.smartWizard({
        theme: "arrows",
        autoAdjustHeight: false,
        toolbar: {
            position: 'bottom',
            showNextButton: false,
            showPreviousButton: false,
        },
    });

    // Progress bar update
    $wizard.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);
    });

    // On page load: if `step` query param exists and is valid, navigate to it
    if (!isNaN(stepParam) && stepParam >= 1) {
        // SmartWizard steps are zero-indexed internally
        $wizard.smartWizard("goToStep", stepParam - 1);
    }

    // On step change, update the URL’s `step` parameter (and keep the `id`)
    $wizard.on("showStep", function (e, anchorObject, stepIndex, stepDirection, stepPosition) {
        let newStep = stepIndex + 1;
        params.set('step', newStep);
        if (applicationId) {
            params.set('id', applicationId);
        }
        window.history.replaceState({}, '', url.pathname + '?' + params.toString());
    });

    // Go‑back button
    $(document).on('click', '.btn_go_back', function () {
        $wizard.smartWizard("prev");
    });

    // btn-next / submit trigger
    $(document).on('click', '.btn-next', function (e) {
        const form = $(this).closest("form");
        if (form.length) {
            form.submit();
        } else {
            // If no form (step 1 “Proceed to Infrastructure”)
            if (this.id === 'btn_next_step_two') {
                $wizard.smartWizard("next");
            }
        }
    });

    // Utility: add applicationId to FormData
    function appendIdToFormData(fd) {
        if (applicationId) {
            fd.append('centre_application_id', applicationId);
        }
    }

   // --- STEP 1: Start Application ---
    $('#start_application_form').on('submit', function (e) {
        e.preventDefault();
        const $btn = $('#start_application_btn');
        const origHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Starting...');

        $.ajax({
            url: "{{ route('centre.start-application') }}",
            method: "POST",
            data: { _token: '{{ csrf_token() }}' },
            success: function (response) {
                if (response.success) {
                    Swal.fire("Success!", response.message, "success").then(() => {
                        const url = new URL(window.location.href);
                        url.searchParams.set('step', 2); 
                        url.searchParams.set('id', response.applicationId); 
                        window.location.href = url.toString();
                    });
                } else {
                    Swal.fire("Error!", response.message || "Could not start application.", "error");
                }
            },
            error: handleValidationError,
            complete: function () {
                $btn.prop('disabled', false).html(origHtml);
            }
        });
    });

        $('input[name="classrooms"]').on('input', function () {
        let value = parseInt(this.value);
        if (value > 5) {
                this.value = 5;
            }
        });


    // --- STEP 2: Infrastructure ---
    $('#infrastructure_form').validate({
        ignore: [],
        rules: {
            training_centre_id: { required: true },

            total_area: {
                required: true,
                number: true,
                min: 1
            },

            classrooms: {
                required: true,
                number: true,
                min: 1,
                max: 5
            },

            classroom_size_confirmation: {
                required: true
            },

            laboratories: {
                required: true,
                number: true,
                min: 0
            },

            lab_size_confirmation: {
                required: function () {
                    return $('input[name="laboratories"]').val() > 0;
                }
            },

           
        },

        messages: {
            training_centre_id: "Centre ID is missing. Please start from step 1.",
            total_area: "Please enter total area.",
            classrooms: "Enter number of classrooms (max 5).",
            classroom_size_confirmation: "Please confirm classroom size.",
            laboratories: "Enter number of labs or 0.",
            lab_size_confirmation: "Please confirm lab size if labs exist.",
            'facilities[]': "Select at least one facility."
        },

        errorPlacement: function (error, element) {
           if (element.attr("name") === "classroom_size_confirmation") {
                error.insertAfter($('#classroom_size_confirmation_no').closest('.form-check-inline').parent());
            } else if (element.attr("name") === "lab_size_confirmation") {
                error.insertAfter($('#lab_size_confirmation_no').closest('.form-check-inline').parent());
            } else {
                error.insertAfter(element);
            }
        },

        submitHandler: function (form) {
            const classroomSize = $('input[name="classroom_size_confirmation"]:checked').val();
            const labSize = $('input[name="lab_size_confirmation"]:checked').val();
            const labCount = parseInt($('input[name="laboratories"]').val());

            // Block if classroom size is "No"
            if (classroomSize === 'No') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'All classrooms must be at least 300 sq ft to proceed.'
                });

                $('input[name="classroom_size_confirmation"]').closest('.form-check-inline').addClass('is-invalid');
                return false;
            } else {
                $('input[name="classroom_size_confirmation"]').closest('.form-check-inline').removeClass('is-invalid');
            }

            //  Block if lab size is "No" and labs exist
            if (labCount > 0 && labSize === 'No') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'All labs must be at least 700 sq ft to proceed.'
                });

                $('input[name="lab_size_confirmation"]').closest('.form-check-inline').addClass('is-invalid');
                return false;
            } else {
                $('input[name="lab_size_confirmation"]').closest('.form-check-inline').removeClass('is-invalid');
            }

            // Prevent double submission
            if (isSubmitting) return;
            isSubmitting = true;

            const $btn = $('#btn_save_step_2');
            const origHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

            let formData = new FormData(form);
            appendIdToFormData(formData);

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


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

            if (!$('input[name="programs[]"]:checked').length) {
                $('#program_form').validate().element('input[name="programs[]"]');
                return;
            }

            isSubmitting = true;
            const $btn = $('#btn_save_step_3');
            const origHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

            let formData = new FormData(form);
            appendIdToFormData(formData);

            $.ajax({
                url: "{{ route('centre.save-programs') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.success) {
                        Swal.fire("Success!", response.message, "success").then(() => {
                            $wizard.smartWizard("next");
                        });
                    } else {
                        Swal.fire("Error!", response.message || "Something went wrong.", "error");
                    }
                },
                error: handleValidationError,
                complete: function () {
                    isSubmitting = false;
                    $btn.prop('disabled', false).html(origHtml);
                }
            });
        }
    });

    

    // Custom validator for file size
    $.validator.addMethod('filesize', function(value, element, param) {
        if (element.files.length === 0) return true; // no file selected
        return element.files[0].size <= param * 1024; // param in KB
    }, 'File size must not exceed {0} KB');

 
 
    function resetFileInputs() {
        // 1. Clear JavaScript storage
        if (typeof fileStorage !== 'undefined') { // Safety check for fileStorage
            Object.keys(fileStorage).forEach(k => delete fileStorage[k]);
        }

        // 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
        });
    }
    $('.upload-input').on('change', function () {
        const input = this;
        const fieldName = input.name;
        const $display = $(`#filename-${input.id}`);

        // *** 1. Accumulate: ONLY INITIALIZE, DO NOT CLEAR. ***
        if (!fileStorage[fieldName]) fileStorage[fieldName] = []; 

        const newFiles = Array.from(input.files);
        // Add the newly selected files to the existing array
        fileStorage[fieldName].push(...newFiles);

        // Remove duplicates by name (Crucial for accumulation)
        fileStorage[fieldName] = fileStorage[fieldName].filter(
            (f, i, arr) => arr.findIndex(x => x.name === f.name) === i
        );

        // 2. Run Validation
        const isValid = $(this).valid();
        
        // 3. CHECK FOR ERROR AND CLEAR INPUTS IF INVALID
        // Note: Since multiExtension checks ALL files, any error means the entire accumulated set is rejected.
        if (!isValid) {
            // Clear the actual file input element (resets browser state)
            input.value = ''; 
            
            // Clear the fileStorage for this field 
            fileStorage[fieldName] = [];
        }

        // 4. Update Display
        const names = fileStorage[fieldName].map(f => f.name);
        $display.text(names.length ? names.join(', ') : 'No file selected');
        
        // 5. Clear the files attached to the native input element after successful processing
        // This is done to prevent the same files from being resubmitted on the next 'change' event
        // if the user clicks the input again without selecting a file.
        if (input.value && isValid) {
            input.value = '';
        }
    });

    // Custom validator for multiple file extensions - REVISED TO CHECK fileStorage
    $.validator.addMethod("multiExtension", function (value, element, param) {
        const fieldName = element.name;
        // *** KEY CHANGE: Check fileStorage, which holds accumulated files. ***
        const files = fileStorage[fieldName] || []; 

        if (files.length === 0) {
            // Validation passes if not required (the 'required' rule handles file missing)
            return true; 
        }
        
        const allowedExtensions = param.split(',').map(e => e.trim().toLowerCase());
        
        for (let i = 0; i < files.length; i++) {
            // Check extension against the files in fileStorage
            const ext = files[i].name.split('.').pop().toLowerCase();
            if (!allowedExtensions.includes(ext)) return false;
        }
        return true;
    }, "Invalid file type.");

    // Dynamic rules for Step 5 (Unchanged)
    function getDocumentRules() {
        const rules = {
            training_centre_id: "required",
            agree_terms: "required",
            agree_inspection: "required",
            declare_info: "required"
        };

        const docFields = [
            'registration_certificate[]', 'noc_certificate[]',
            'building_photos[]', 'classroom_photos[]', 'lab_photos[]',
            'cctv_photo[]', 'staff_certificates[]', 'washroom_photos[]',
            'classroom_video[]', 'lab_video[]'
        ];

        docFields.forEach(name => {
            const $input = $(`input[name="${name}"]`);
            const type = $input.data('filetype');
            let allowed = "";

            if(type === 'pdf') allowed = "pdf";
            if(type === 'image') allowed = "jpg,jpeg,png";
            if(type === 'video') allowed = "mp4";

            rules[name] = { multiExtension: allowed };

            if (name !== 'noc_certificate[]') {
                rules[name].required = true;
            }
        });

        return rules;
    }

        /* ===============================
            STEP 5 FORM VALIDATION + SUBMIT - REVISED AJAX ERROR HANDLING
        =============================== */
    $('#documents_form').validate({
        rules: getDocumentRules(),
        messages: {
            'registration_certificate[]': { required: "Upload registration certificate", multiExtension: "Only PDF allowed." },
            'noc_certificate[]': { multiExtension: "Only PDF allowed." },
            'building_photos[]': { required: "Upload building photos", multiExtension: "Only images allowed." },
            'classroom_photos[]': { required: "Upload classroom photos", multiExtension: "Only images allowed." },
            'lab_photos[]': { required: "Upload lab photos", multiExtension: "Only images allowed." },
            'cctv_photo[]': { required: "Upload CCTV control room photo", multiExtension: "Only images allowed." },
            'staff_certificates[]': { required: "Upload staff qualification certificates", multiExtension: "Only PDF allowed." },
            'washroom_photos[]': { required: "Upload washroom photos", multiExtension: "Only images allowed." },
            'classroom_video[]': { multiExtension: "Only MP4 allowed." },
            'lab_video[]': { multiExtension: "Only MP4 allowed." },

            agree_terms: "You must accept terms.",
            agree_inspection: "You must accept inspection.",
            declare_info: "You must declare accuracy."
        },
        errorPlacement: function (error, element) {
            const name = element.attr("name");
            if (name && (name.startsWith("agree_") || name.startsWith("declare_"))) {
                error.appendTo("#declaration-group");
            } else if (element.is(':file')) {
                error.insertAfter(element.closest('.upload-group').find('.selected-file-name'));
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function (form) {
            if (isSubmitting) return;

            // Update dynamic rules before submit
            $('#documents_form').validate().settings.rules = getDocumentRules();
            if (!$('#documents_form').valid()) return;

            isSubmitting = true;
            const $btn = $('#btn_final_submit');
            const origHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Submitting...');

            const formData = new FormData();

            // Append all files stored in fileStorage
            for (const fieldName in fileStorage) {
                fileStorage[fieldName].forEach(file => {
                    formData.append(fieldName, file);
                });
            }

            // Append form fields (checkboxes, text inputs)
            $('#documents_form').serializeArray().forEach(field => {
                formData.append(field.name, field.value);
            });

            appendIdToFormData(formData);

            $.ajax({
                url: "{{ route('centre.submit-documents.declaration') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.success) {
                        Swal.fire("Submitted!", response.message, "success").then(() => {
                            window.location.href = response.redirect_url;
                        });
                        // Clearing storage for successful submission is handled by resetFileInputs() if needed, 
                        // but the successful redirect usually makes this less critical.
                    } else {
                        // *** NEW LOGIC: Clear files and reset input/display on server-side failure ***
                        resetFileInputs(); 
                        Swal.fire("Error!", response.message || "Something went wrong.", "error");
                    }
                },
                error: function(xhr, status, error) {
                    // *** NEW LOGIC: Clear files and reset input/display on AJAX error (e.g., 500 server error) ***
                    resetFileInputs();
                    // Call the existing error handler to display field-specific messages
                    handleValidationError(xhr, status, error); 
                },
                complete: function () {
                    isSubmitting = false;
                    $btn.prop('disabled', false).html(origHtml);
                }
            });
        }
    });

});
</script>
@endsection