@extends('layouts.training_centre_layout')

@php
    use Illuminate\Support\Str;
    use Carbon\Carbon;

    $trainers = $trainers ?? collect();
    $infrastructure = $infrastructure ?? []; 
    $facilityDetails = $facilityDetails ?? collect();
    $selectedProgram = $selectedProgram ?? collect();
    $payment = $payment ?? null;
    $centreDocument = $centreDocument ?? (object)[]; 
    $centreId = $centre->id ?? null;
    $pageTitle = $pageTitle ?? 'Application Preview';
    $status = $centre->application_status ?? null;
    $editRoute = $centreId ? route('centre.my-application.edit', ['id' => $centreId]) : '#'; 
    $applyRoute = route('training-centre.my-application.apply-now'); 
    $backButtonRoute = ($status === 'DISCREPANCY_FOUND')? $editRoute: $applyRoute;
@endphp

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<style>
    /* ===============================
       📂 Document Upload Section
    =============================== */
    .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;
    }

    /* ===============================
       🎓 Program Cards (Apply + Preview)
    =============================== */

    .program-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: start;
    }

    /* Hide checkbox for apply form UI */
    .program-option input[type="checkbox"] {
        display: none;
    }

    .program-card-option {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        background-color: #fff;
        transition: all 0.2s;
        width: 100%;
        min-height: 100px;
        position: relative;
    }

    /* Active/selected state (Apply form) */
    .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;
    }

    /* ✅ Preview version styling — selected programs */
    .program-card-option.preview {
        border-color: #007bff;
        box-shadow: 0 0 6px rgba(0, 123, 255, 0.15);
        background-color: #f8fbff;
        cursor: default;
    }

    .program-card-option.preview:hover {
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

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

    .program-meta {
        font-size: 0.85rem;
        color: #6c757d;
    }

    .program-meta h6 {
        font-size: 0.75rem;
        color: #6c757d;
        margin-bottom: 2px;
    }

    .program-meta p {
        font-size: 0.9rem;
        color: #212529;
        margin: 0;
    }

    /* ✅ Check icon styling for preview */
    .program-card-option .fa-check-circle {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #198754;
        font-size: 1.2rem;
    }

  .document-card {
    border: 1px solid #e6ecf5;
    transition: all 0.25s ease-in-out;
}

.file-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: #f8faff;
    border: 1px solid #d0e2ff;
    color: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
}
.file-btn:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.05);
}

</style>

<x-page-header title="{{ $pageTitle }}" />

<div class="card shadow-sm p-4">

    {{-- Main Navigation Tabs (Pills) --}}
    <ul class="nav nav-pills mb-4 justify-content-left" id="previewTabs" role="tablist">
        <li class="nav-item me-3" role="presentation"> 
            <a class="nav-link active" style="gap: 10px; display: flex; flex-wrap: wrap;" id="step1-tab" data-bs-toggle="pill" data-bs-target="#step1" type="button" role="tab" aria-controls="step1" aria-selected="true">Trainers Info</a>
        </li>
        <li class="nav-item me-3" role="presentation">
            <a class="nav-link" style="gap: 10px; display: flex; flex-wrap: wrap;" id="step2-tab" data-bs-toggle="pill" data-bs-target="#step2" type="button" role="tab" aria-controls="step2" aria-bs-selected="false">Infrastructure</a>
        </li>
        <li class="nav-item me-3" role="presentation">
            <a class="nav-link" id="step3-tab" data-bs-toggle="pill" data-bs-target="#step3" type="button" role="tab" aria-controls="step3" aria-selected="false">Training Program(s)</a>
        </li>
        <!-- <li class="nav-item me-3" role="presentation">
            <a class="nav-link" id="step4-tab" data-bs-toggle="pill" data-bs-target="#step4" type="button" role="tab" aria-controls="step4" aria-selected="false">Payment Details</a>
        </li> -->
        <li class="nav-item" role="presentation"> 
            <a class="nav-link" id="step5-tab" data-bs-toggle="pill" data-bs-target="#step5" type="button" role="tab" aria-controls="step5" aria-selected="false">Document & Declaration</a>
        </li>
    </ul>


    {{-- Tab Content Panes --}}
    <div class="tab-content" id="previewTabContent">

        {{-- ------------------------------------------------------------------------------------------------------ --}}
        {{-- Step 1: Trainers Info --}}
        <div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab">
             <h2 class="step-title">Trainer Information </h2>
            {{-- Your main content goes here (trainer list, etc.) --}}
            <div class="row" id="trainerList">
                @if ($trainers->count() > 0)
                @foreach ($trainers as $trainer)
                <div class="col-md-4 col-sm-6 col-12 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">

                            {{-- Main details --}}
                            <div>
                                <h5 class="card-title mb-2">
                                    {{ $trainer->name ?? 'Not Specified' }}
                                </h5>
                                <p class="text-muted mb-1"><strong>Date of Birth:</strong>
                                    {{ $trainer->dob ? \Carbon\Carbon::parse($trainer->dob)->format('d M Y') : 'N/A' }}
                                </p>
                                <p class="text-muted mb-1"><strong>Education:</strong>
                                    {{ $trainer->higher_qualification  ?? 'N/A' }}
                                </p>
                                <p class="text-muted mb-1"><strong>Experience:</strong>
                                    {{ $trainer->experience ? $trainer->experience . ' years' : 'N/A' }}
                                </p>
                            </div>

                            {{-- Document Links - UPDATED CONTAINER --}}
                            <div class="mt-3 d-flex flex-wrap gap-2">

                                {{-- Education Certificate --}}
                                @if ($trainer->higher_qualification_certificate)
                                <a href="{{ asset('storage/centre_trainer/highest_qualification_certificate/' . $trainer->higher_qualification_certificate) }}"
                                    class="btn btn-sm btn-secondary btn-doc-link" target="_blank">
                                    <i class="fa fa-file-text-o"></i> Education Certificate
                                </a>
                                @endif

                                {{-- Experience Letter --}}
                                @if ($trainer->experience_certificate)
                                <a href="{{ asset('storage/centre_trainer/experience_certificate/' . $trainer->experience_certificate) }}"
                                    class="btn btn-sm btn-secondary btn-doc-link" target="_blank">
                                    <i class="fa fa-file-text-o"></i> Experience Letter
                                </a>
                                @endif

                                {{-- NISD Certificate --}}
                                @if ($trainer->nisd_certificate)
                                <!-- <a href="{{ asset('storage/centre_trainer/nisd_certificate/' . $trainer->nisd_certificate) }}"
                                    class="btn btn-sm btn-secondary btn-doc-link" target="_blank">
                                    <i class="fa fa-file-text-o"></i> NISD Certificate
                                </a> -->
                                @endif

                                {{-- TOT Certificate --}}
                                @if ($trainer->nisd_tot_certificate)
                                <a href="{{ asset('storage/centre_trainer/tot_certificate/' . $trainer->nisd_tot_certificate) }}"
                                    class="btn btn-sm btn-secondary btn-doc-link" target="_blank">
                                    <i class="fa fa-file-text-o"></i> NISD TOT Master Trainer Certificate
                                </a>
                                @endif

                                {{-- TOA Certificate (Optional) --}}
                                @if ($trainer->toa_certificate)
                                <a href="{{ asset('storage/centre_trainer/toa_certificate/' . $trainer->toa_certificate) }}"
                                    class="btn btn-sm btn-secondary btn-doc-link" target="_blank">
                                    <i class="fa fa-file-text-o"></i> NISD TOA Certificate
                                </a>
                                @endif

                                {{-- Show message if no documents are uploaded --}}
                                @if (
                                !($trainer->higher_qualification_certificate || $trainer->experience_certificate || $trainer->nisd_certificate || $trainer->tot_certificate || $trainer->toa_certificate)
                                )
                                <span class="text-muted fst-italic">No documents uploaded.</span>
                                @endif

                            </div>

                        </div>
                    </div>
                </div>
                @endforeach
                @else
                {{-- Message when no trainers found --}}
                <div class="col-12">
                    <p class="text-center text-muted">No trainers have been added yet.</p>
                </div>
                @endif
            </div>


            {{-- Navigation Button --}}
            <div class="d-flex justify-content-end mt-4 p-3">
                <button class="btn btn-primary next-tab-btn" data-target-tab="#step2">
                    Next: Infrastructure <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>
        
        {{-- ------------------------------------------------------------------------------------------------------ --}}
        {{-- Step 2: Infrastructure --}}
        <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
            <div class="row g-3">

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

                @php
                    // Get the list of facilities
                    $facilityList = ($facilityDetails instanceof \Illuminate\Support\Collection)
                        ? $facilityDetails->pluck('name')->toArray()
                        : [];

                    $infraFields = [
                        ['label' => 'Total Area (sq ft)', 'value' => $infrastructure['total_area'] ?? '❌ Not Provided', 'icon' => 'fa-ruler-combined'],
                        ['label' => 'Number of Classrooms', 'value' => $infrastructure['classrooms'] ?? '❌ Not Provided', 'icon' => 'fa-chalkboard-teacher'],
                        ['label' => 'Classroom Size Confirmed', 'value' => ($infrastructure['classroom_size_confirmation'] ?? false) ? '✅ Confirmed' : '❌ Not Confirmed', 'icon' => 'fa-expand'],
                        ['label' => 'Number of Demonstration Labs', 'value' => $infrastructure['number_of_laboratories'] ?? '❌ Not Provided', 'icon' => 'fa-flask'],
                        ['label' => 'Demo Lab Size Confirmed', 'value' => ($infrastructure['laboratory_size_confirmation'] ?? false) ? '✅ Confirmed' : '❌ Not Confirmed', 'icon' => 'fa-vector-square'],
                        ['label' => 'Available Facilities', 'value' => $facilityList, 'icon' => 'fa-tools']
                    ];
                @endphp

                @foreach ($infraFields as $field)
                    <div class="col-md-6 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1">
                                <i class="fa {{ $field['icon'] }} fa-fw me-2 text-primary"></i>
                                {{ $field['label'] }}
                            </h6>

                            @if ($field['label'] === 'Available Facilities')
                                @if (!empty($field['value']))
                                    <ul class="mb-0 fw-semibold ps-3">
                                        @foreach ($field['value'] as $facility)
                                            <li>{{ $facility }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="mb-0 fw-semibold">❌ Not Provided</p>
                                @endif
                            @else
                                <p class="mb-0 fw-semibold">{{ $field['value'] }}</p>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- NAV BUTTONS --}}
            <div class="d-flex justify-content-between mt-4 p-3 border-top">
                <button class="btn btn-secondary prev-tab-btn" data-target-tab="#step1">
                    <i class="fas fa-arrow-left me-2"></i> Previous: Trainers
                </button>
                <button class="btn btn-primary next-tab-btn" data-target-tab="#step3">
                    Next: Programs <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>


        {{-- Step 3: Training Programs --}}
        <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
            
            <div class="step-header mb-3">
                <h2 class="step-title">Training Program(s)</h2>
                <p class="step-subtitle">These are the programs selected for your centre</p>
            </div>

            <div class="row g-3">
                @if($selectedProgram->count() > 0)
                    @foreach($selectedProgram as $program)
                        @php
                            $programData = $program->program ?? null;
                        @endphp

                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
                            <div class="program-card-option preview">
                                
                                <h5 class="program-name">{{ $program->program->title ?? 'N/A' }}</h5>
                                <div class="program-meta mt-2">
                                    <p><i class="fas fa-hourglass-start me-1"></i> Duration: {{ $program->program->total_hours ?? 'N/A' }} hrs</p>
                                    <p><i class="fas fa-tag me-1"></i> Type: {{ $program->program->course_type_desc ?? 'N/A' }}</p>
                                </div>
                            </div>

                        </div>
                    @endforeach
                @else
                    <div class="col-12">
                        <div class="alert alert-info text-center" role="alert">
                            <i class="fas fa-info-circle me-2"></i> No programs selected.
                        </div>
                    </div>
                @endif
            </div>

            {{-- NAV BUTTONS --}}
            <div class="d-flex justify-content-between mt-4 p-3 border-top">
                <button class="btn btn-secondary prev-tab-btn" data-target-tab="#step2">
                    <i class="fas fa-arrow-left me-2"></i> Previous: Infrastructure
                </button>
                <button class="btn btn-primary next-tab-btn" data-target-tab="#step5">
                    Next: Uploaded Documents & Declaration <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div>



        {{-- ------------------------------------------------------------------------------------------------------ --}}
        {{-- Step 4: Payment Details --}}
        <!-- <div class="tab-pane fade" id="step4" role="tabpanel" aria-labelledby="step4-tab">
            <h4 class="mb-4 text-secondary"> Payment Details</h4>
             @if($payment)
                <div class="row g-3">
                    {{-- Payment Mode (Col 1) --}}
                    <div class="col-md-6 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1"><i class="fas fa-credit-card me-1 text-primary"></i> Payment Mode</h6>
                            <p class="mb-0 fw-semibold">{{ $payment->payment_mode ?? 'N/A' }}</p>
                        </div>
                    </div>

                    {{-- Transaction ID (Col 2) --}}
                    <div class="col-md-6 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1"><i class="fas fa-receipt me-1 text-primary"></i> Transaction ID</h6>
                            <p class="mb-0 fw-semibold">{{ $payment->transaction_id ?? 'N/A' }}</p>
                        </div>
                    </div>

                    {{-- Transaction Date (Col 3) --}}
                    <div class="col-md-6 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1"><i class="fas fa-calendar-alt me-1 text-primary"></i> Transaction Date</h6>
                            <p class="mb-0 fw-semibold">
                                {{ $payment->transaction_date ? Carbon::parse($payment->transaction_date)->format('d M Y') : 'N/A' }}
                            </p>
                        </div>
                    </div>

                    {{-- Amount (INR) (Col 4) --}}
                    <div class="col-md-6 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1"><i class="fas fa-rupee-sign me-1 text-primary"></i> Amount (INR)</h6>
                            <p class="mb-0 fw-bold text-success">
                                {{ $payment->amount !== null ? number_format($payment->amount, 2) : 'N/A' }}
                            </p>
                        </div>
                    </div>

                    {{-- Transaction Details (Col 5) --}}
                    <div class="col-12 col-md-8 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm">
                            <h6 class="text-muted mb-1"><i class="fas fa-info-circle me-1 text-primary"></i> Transaction Details</h6>
                            <p class="mb-0 fw-semibold">{{ $payment->transaction_details ?? 'No additional details provided.' }}</p>
                        </div>
                    </div>

                    {{-- Receipt (Col 6) --}}
                    <div class="col-12 col-md-8 col-lg-4">
                        <div class="p-3 border rounded h-100 bg-white shadow-sm d-flex justify-content-between align-items-center">
                            <h6 class="text-muted mb-0"><i class="fas fa-file-invoice-dollar me-1 text-primary"></i> Receipt Document</h6>
                            @if(!empty($payment->receipt) || !empty($payment->receipt_path))
                                @php
                                    $receiptPath = $payment->receipt_path ?? $payment->receipt;
                                    $receiptUrl = Str::startsWith($receiptPath, ['http', 'www']) ? $receiptPath : asset('storage/' . ltrim($receiptPath, '/'));
                                @endphp
                                <a href="{{ $receiptUrl }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-eye"></i> View Receipt
                                </a>
                            @else
                                <span class="text-muted fst-italic">No receipt uploaded.</span>
                            @endif
                        </div>
                    </div>

                </div>
            @else
                <div class="alert alert-info text-center" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i> Payment not yet submitted.
                </div>
            @endif

            {{-- NAV BUTTONS --}}
            <div class="d-flex justify-content-between mt-4 p-3 border-top">
                <button class="btn btn-secondary prev-tab-btn" data-target-tab="#step3">
                    <i class="fas fa-arrow-left me-2"></i> Previous: Programs
                </button>
                <button class="btn btn-primary next-tab-btn" data-target-tab="#step5">
                    Next: Documents <i class="fas fa-arrow-right ms-2"></i>
                </button>
            </div>
        </div> -->


        {{-- ------------------------------------------------------------------------------------------------------ --}}
        {{-- Step 5: Document & Declaration --}}
        <div class="tab-pane fade" id="step5" role="tabpanel" aria-labelledby="step5-tab">
            <div class="mb-5">
                <h4 class="mb-3 text-secondary fw-bold"><i class="fas fa-folder-open me-2 text-primary"></i> Uploaded Documents & Declaration</h4>

                <div class="row g-3">
                    @foreach($centreDocument as $label => $files)
                        <div class="col-md-6 col-lg-4">
                            <div class="document-card p-3 rounded-3 shadow-sm bg-white position-relative">

                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="fw-semibold text-dark mb-1">{{ $label }}</h6>
                                        <p class="small text-muted mb-2">
                                            {{ count($files) }} {{ Str::plural('file', count($files)) }}
                                        </p>
                                    </div>

                                    <div class="file-icons d-flex flex-wrap gap-2">
                                        @forelse($files as $file)
                                            <a href="{{ $file }}" target="_blank" 
                                            class="file-btn" 
                                            title="{{ basename($file) }}">
                                            <i class="fa fa-eye"></i>
                                            </a>
                                        @empty
                                            <span class="text-muted small fst-italic">No file</span>
                                        @endforelse
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endforeach
                </div>
            </div>



           @php
                $declarationLabels = [
                    'agree_terms' => 'I agree to the Terms and Conditions and Privacy Policy',
                    'agree_inspection' => 'I agree to facility inspection by NISD officials',
                    'declare_info' => 'I declare that all information provided is accurate and complete',
                ];
            @endphp

            <div class="mt-4">
                <h4>Declarations</h4>
                <small class="text-muted mb-3 d-block">Declarations confirmed for this application:</small>

                <div id="declaration-group">
                    @foreach($declarations as $key => $value)
                        <div class="form-check">
                            <input type="checkbox" 
                                name="{{ $key }}" 
                                id="{{ $key }}" 
                                class="form-check-input" 
                                value="1" 
                                {{ $value ? 'checked' : '' }} 
                                disabled>
                            <label class="form-check-label" for="{{ $key }}">{{ $declarationLabels[$key] }}</label>
                        </div>
                    @endforeach
                </div>
            </div>



            {{-- NAV BUTTONS --}}
            <div class="d-flex justify-content-start mt-4 p-3 border-top">
                <button class="btn btn-secondary prev-tab-btn" data-target-tab="#step3">
                    <i class="fas fa-arrow-left me-2"></i> Previous: Training Programs
                </button>
            </div>
        </div>




    </div>
    <hr>
    {{-- Final Action Buttons --}}
    <div class="card shadow mt-4">
        <div class="card-body d-flex justify-content-between">

            {{-- Back Button --}}
            <button type="button" id="backButton" class="btn btn-outline-secondary">
                <i class="fa fa-arrow-left"></i> Go Back to Application
            </button>

            {{-- Final Submit Form --}}
            @if ($centreId)
                <form id="finalSubmitForm" method="POST" action="">
                    @csrf
                    <input type="hidden" name="application_id" value="{{ $centreId }}">
                    <input type="hidden" id="finalSubmitRoute" value="{{ route('centre.final-submit', ['id' => $centreId]) }}">
                    <button type="submit" class="btn btn-success" id="submitButton">
                        <i class="fa fa-check"></i> Final Submit
                    </button>
                </form>
            @else
                <div class="text-danger fw-bold">
                    <i class="fas fa-exclamation-triangle"></i> Cannot submit application. Application ID is missing.
                </div>
            @endif

        </div>
    </div>


</div>

@endsection

@section('pages-scripts')
<script>
    // 💡 Pass the dynamic route from Blade to JavaScript
    const backRoute = @json($backButtonRoute); 
    const isEditMode = backRoute.includes('/edit/');

    $(document).ready(function () {
        // ------------------------------------------------------
        // 1. Tab Navigation Logic
        // ------------------------------------------------------
        $('.next-tab-btn, .prev-tab-btn').on('click', function() {
            const targetTabId = $(this).data('target-tab'); 
            const targetTab = $(targetTabId + '-tab');

            if (targetTab.length) {
                const tab = new bootstrap.Tab(targetTab[0]);
                tab.show();
            } else {
                 console.error('Target tab not found:', targetTabId);
            }

            $('html, body').animate({
                scrollTop: $('#previewTabs').offset().top - 20 
            }, 500);
        });

        // ------------------------------------------------------
        // 2. Go Back Button Logic (CONDITIONAL)
        // ------------------------------------------------------
        $('#backButton').on('click', function () {
            // Dynamic text based on the route chosen in the @php block
            const formType = isEditMode ? 'EDIT FORM' : 'APPLICATION FORM';

            Swal.fire({
                title: 'Go Back?',
                text: "Your changes won't be saved unless submitted. You will be redirected to the " + formType + ". Proceed?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Go Back',
                cancelButtonText: 'Stay Here',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = backRoute;
                }
            });
        });

        // ------------------------------------------------------
        // 3. Final Submission Logic
        // ------------------------------------------------------
        $('#finalSubmitForm').on('submit', function (e) {
            e.preventDefault();

            Swal.fire({
                title: 'Final Submission Confirmation ',
                text: "Once submitted, your application will be locked and you cannot edit it. Proceed?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, Final Submit',
                cancelButtonText: 'Cancel',
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = this;
                    const submitBtn = $(form).find('button[type="submit"]');
                    const originalHtml = submitBtn.html();

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

                    $.ajax({
                        url: $('#finalSubmitRoute').val(),
                        method: 'POST',
                        data: $(form).serialize(),
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
                        dataType: 'json',
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Submitted!', response.message || 'Application submitted.', 'success').then(() => {
                                    if (response.redirect_url) {
                                        window.location.href = response.redirect_url;
                                    } else {
                                        location.reload();
                                    }
                                });
                            } else {
                                Swal.fire('Error', response.message || 'Submission failed.', 'error');
                            }
                        },
                        error: function(xhr) {
                            let msg = 'An error occurred.';
                            if (xhr.status === 422) msg = 'Validation failed. Please check your data.';
                            else if (xhr.status === 419) msg = 'Session expired. Please refresh the page.';
                            else if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
                            Swal.fire('Error', msg, 'error');
                        },
                        complete: function() {
                            submitBtn.prop('disabled', false).html(originalHtml);
                        }
                    });
                }
            });
        });
    });
</script>
@endsection