@include('components.header')

<!-- Font Awesome for calendar icon -->
{{--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> --}}
{{--
<script src="https://kit.fontawesome.com/ff110e9818.js" crossorigin="anonymous"></script> --}}

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<style>
    /* Theme color utility classes dynamically governed by league_colors */
    .bg-\[var\(--primary-theme-color\)\] { background-color: var(--primary-theme-color) !important; }
    .text-\[var\(--primary-theme-color\)\] { color: var(--primary-theme-color) !important; }
    .border-\[var\(--primary-theme-color\)\], .border-t-\[var\(--primary-theme-color\)\], .focus\:border-\[var\(--primary-theme-color\)\]:focus { border-color: var(--primary-theme-color) !important; }
    .border-t-\[var\(--primary-theme-color\)\] { border-top-color: var(--primary-theme-color) !important; }

    /* General input styles */
    /* Hide number input spinners */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }


    .btn-loading {
        pointer-events: none;
        opacity: 0.7;
        position: relative;
    }

    .btn-loading::after {
        content: "";
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
        to {
            transform: translateY(-50%) rotate(360deg);
        }
    }


    input[type="text"],
    input[type="email"],
    input[type="date"] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-size: 1rem;
        line-height: 1.5;
        box-sizing: border-box;
    }

    /* Global Checkbox & Radio Theme Styling */
    input[type="checkbox"],
    input[type="radio"],
    .checkbox-group input[type="checkbox"],
    .checkbox-group input[type="radio"] {
        accent-color: var(--primary-theme-color, #dc2626) !important;
    }

    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
        --tw-ring-color: var(--primary-theme-color, #dc2626) !important;
        border-color: var(--primary-theme-color, #dc2626) !important;
        outline-color: var(--primary-theme-color, #dc2626) !important;
    }

    /* Inline Auth Static Red & Black Theme Overrides */
    .inline-auth-card {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
        animation: inlineCardSlide 0.4s ease-out;
        border-top: 5px solid #dc2626; /* Static Red Header Accent */
    }

    @keyframes inlineCardSlide {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .inline-auth-input {
        width: 100% !important;
        height: 48px !important;
        padding: 0 14px 0 44px !important;
        border-radius: 12px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #f9fafb !important;
        font-size: 0.9375rem !important;
        color: #111827 !important;
        transition: all 0.25s ease !important;
        box-sizing: border-box !important;
    }

    .inline-auth-input:focus {
        border-color: #dc2626 !important; /* Static Red Border */
        outline: none !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15) !important; /* Static Red Focus Glow */
    }

    .inline-auth-input.no-icon {
        padding-left: 14px !important;
    }

    .inline-input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #4b5563;
        font-size: 15px;
        z-index: 2;
        pointer-events: none;
    }

    .inline-auth-btn {
        background: linear-gradient(135deg, #111827 0%, #000000 100%) !important; /* Static Black Gradient */
        color: #ffffff !important;
        height: 48px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.95rem;
        transition: all 0.25s ease;
        border: 1px solid #111827;
    }

    .inline-auth-btn:hover {
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important; /* Crimson Red Hover */
        border-color: #dc2626 !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35) !important;
    }

    .inline-auth-btn:active {
        transform: translateY(0);
    }

    .inline-auth-link {
        color: #dc2626 !important;
        font-weight: 700 !important;
        background: none;
        border: none;
        cursor: pointer;
    }

    .inline-auth-link:hover {
        color: #991b1b !important;
        text-decoration: underline !important;
    }

    .date-input-container {
        position: relative;
        width: 100%;
    }

    /* Hide built-in calendar icon */
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* Custom placeholder (always visible) */
    .date-placeholder {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
        font-size: 1rem;
        z-index: 1;
        transition: all 0.2s;
    }

    /* Hide placeholder when value exists */
    input[type="date"]:valid+.date-placeholder {
        opacity: 0;
        visibility: hidden;
    }

    /* Calendar icon styling */
    .calendar-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        cursor: pointer;
        z-index: 2;
    }

    .calendar-icon i {
        font-size: 16px;
    }

    /* Mobile safe font size */
    /* Mobile safe font size & Native Calendar Hacks */
    @supports (-webkit-touch-callout: none) {
        input[type="date"] {
            font-size: 16px;
        }
    }

    /* Hide native date icon but keep picker triggerable */
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    input[type="date"]:disabled::-webkit-calendar-picker-indicator,
    input:disabled::-webkit-calendar-picker-indicator {
        pointer-events: none !important;
        cursor: not-allowed !important;
        display: none !important;
    }

    .date-input {
        position: relative;
        padding-right: 2rem !important;
    }

    .date-input:disabled {
        background-color: #f3f4f6 !important;
        cursor: not-allowed !important;
        color: #374151 !important;
        pointer-events: none !important;
    }

    .custom-blue {
        background-color: var(--primary-theme-color);
    }

    .custom-blue:hover {
        background-color: #0d2f57;
    }

    /* Accordion Animation Styles */
    .accordion-content {
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }

    .accordion-content.accordion-open {
        max-height: none;
        /* Allow dynamic height */
        height: auto;
        opacity: 1;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        overflow: visible;
    }

    .accordion-icon {
        transition: transform 0.3s ease;
    }

    .accordion-icon.rotated {
        transform: rotate(180deg);
    }

    /* Payment Modal Styles */
    #payment-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    #payment-modal .modal-content {
        background-color: #fff;
        margin: 4vh auto;
        padding: 0;
        border-radius: 24px;
        width: 90%;
        max-width: 520px;
        height: 85vh;
        position: relative;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        animation: slideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Rich text / Prose field description styling */
    .prose h1 {
        font-size: 1.875rem;
        font-weight: 700;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
        line-height: 1.25;
        color: #1e293b;
    }
    .prose h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
        color: #1e293b;
    }
    .prose h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
        line-height: 1.4;
        color: #1e293b;
    }
    .prose h4 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        color: #1e293b;
    }
    .prose h5, .prose h6 {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        color: #1e293b;
    }
    .prose p {
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }
    .prose strong, .prose b {
        font-weight: 700;
        color: #0f172a;
    }
    .prose em, .prose i {
        font-style: italic;
    }
    .prose u {
        text-decoration: underline;
    }
    .prose s, .prose strike, .prose del {
        text-decoration: line-through;
    }
    .prose ul {
        list-style-type: disc;
        margin-left: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .prose ol {
        list-style-type: decimal;
        margin-left: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .prose li {
        margin-bottom: 0.25rem;
    }
    .prose blockquote {
        border-left: 4px solid #cbd5e1;
        padding-left: 1rem;
        font-style: italic;
        margin-bottom: 0.75rem;
        color: #475569;
    }
    .prose table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 1rem;
    }
    .prose td, .prose th {
        border: 1px solid #cbd5e1;
        padding: 0.5rem;
    }

    .modal-header {
        padding: 1.25rem 2rem;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }

    .modal-header h3 {
        font-weight: 800;
        color: #0f172a;
        margin: 0;
        font-size: 1.25rem;
        letter-spacing: -0.025em;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-header h3 i {
        color: #4f46e5;
    }

    .close-modal {
        color: #94a3b8;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .close-modal:hover {
        background: #f1f5f9;
        color: #1e293b;
    }

    iframe#payment-iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: none;
        background: transparent;
    }

    #payment-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        z-index: 10;
        transition: opacity 0.3s;
    }

    #payment-loading .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #e2e8f0;
        border-top-color: #4f46e5;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .hidden {
        display: none !important;
    }

    /* Material Design Input Styles */
    .material-input-group {
        position: relative;
        margin-bottom: 0;
    }

    .material-input-group input,
    .material-input-group select,
    .material-input-group textarea {
        width: 100%;
        padding: 1rem 0 0.5rem 0;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        background-color: transparent;
        border-radius: 0;
        font-size: 0.875rem;
        transition: border-color 0.3s ease;
        outline: none;
    }

    .material-input-group input:focus,
    .material-input-group select:focus,
    .material-input-group textarea:focus {
        border-bottom-color: var(--primary-theme-color);
    }

    .material-input-group label {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.3s ease;
        background: transparent;
    }

    .material-input-group input:focus+label,
    .material-input-group input:not(:placeholder-shown)+label,
    .material-input-group select:focus+label,
    .material-input-group select:not([value=""])+label,
    .material-input-group textarea:focus+label,
    .material-input-group textarea:not(:placeholder-shown)+label,
    .material-input-group .label-float {
        top: 0.35rem;
        transform: translateY(0);
        font-size: 0.65rem;
        color: var(--primary-theme-color);
        font-weight: 600;
    }

    .required-star {
        color: #ef4444 !important;
    }

    .field-info-icon {
        cursor: pointer;
        color: #60a5fa;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-top: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .material-input-group .field-info-icon {
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
    }

    .field-info-icon:hover {
        color: var(--primary-theme-color);
    }

    .material-input-group .calendar-icon,
    .material-input-group .select-arrow {
        z-index: 5;
    }

    /* Select specific styling */
    .material-input-group select {
        appearance: none;
        cursor: pointer;
        padding-right: 2rem;
    }

    .material-input-group .select-arrow,
    .material-input-group .calendar-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6b7280;
    }

    /* For select elements, always float the label */
    .material-input-group.has-value label,
    .material-input-group select+label {
        top: 0.35rem;
        transform: translateY(0);
        font-size: 0.65rem;
        color: var(--primary-theme-color);
        font-weight: 600;
    }

    /* Disabled option styling (e.g. non-eligible divisions) */
    .material-input-group select option:disabled {
        color: #9ca3af;
        font-style: italic;
        background-color: #f3f4f6;
    }

    .material-input-group.hidden-label label {
        display: none !important;
    }

    .material-input-group.hidden-label input,
    .material-input-group.hidden-label select {
        padding-top: 0.5rem;
    }


    .checkbox-group {
        width: 100%;
    }

    .checkbox-group.md\\:col-span-2 {
        grid-column: span 2;
    }

    /* Membership Card Styles */
    .membership-card {
        position: relative;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1.25rem;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #fff;
    }

    .membership-card:hover {
        border-color: #d1d5db;
        box-shadow: 0 4px 12px rgba(0, 0, 128, 0.1);
        transform: translateY(-2px);
    }

    .membership-card.selected {
        border-color: var(--primary-theme-color);
        background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
        box-shadow: 0 4px 16px rgba(0, 0, 128, 0.15);
    }

    .membership-card .radio-circle {
        width: 22px;
        height: 22px;
        border: 2px solid #d1d5db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .membership-card.selected .radio-circle {
        border-color: var(--primary-theme-color);
    }

    .membership-card .radio-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-theme-color);
        transform: scale(0);
        transition: transform 0.2s ease;
    }

    .membership-card.selected .radio-dot {
        transform: scale(1);
    }

    .membership-card .membership-fee {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-theme-color);
    }

    .membership-card .membership-desc {
        font-size: 0.875rem;
        color: #4b5563;
        line-height: 1.5;
    }

    .membership-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 2rem 0;
    }

    .membership-loading .spinner {
        width: 36px;
        height: 36px;
        border: 3px solid #e5e7eb;
        border-top-color: var(--primary-theme-color);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    /* Custom Tooltip Styling */
    .custom-tooltip-bubble {
        position: fixed;
        background: #1e293b;
        color: white;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.875rem;
        line-height: 1.6;
        max-width: 300px;
        z-index: 10000;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(4px);
    }

    .custom-tooltip-bubble.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .custom-tooltip-arrow {
        position: absolute;
        width: 12px;
        height: 12px;
        background: #1e293b;
        transform: rotate(45deg);
        z-index: -1;
        bottom: -6px;
        left: calc(50% - 6px);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
</style>
</head>

@php
    $hideHeaderNav = $hideHeaderNav ?? request()->is('registration-form*');
@endphp
<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden {{ !$hideHeaderNav ? 'topbar-layout' : '' }}">


    @if(!$hideHeaderNav)
        @include('components.navbar')
        @include('components.topbar', ['page' => 'current-registration'])
    @else
        @include('components.navbar', ['hideMarkup' => true])
    @endif

    <div class="flex-1 overflow-hidden">
        <main id="content" class="flex-1 overflow-y-auto bg-gray-100 p-6 transition-all duration-300 h-full">
            <div class="max-w-4xl mx-auto font-sans">

                <!-- Form Selection Section -->
                <div id="form-selection-section" class="rounded-xl shadow-2xl overflow-hidden mb-6">
                    <div class="bg-[var(--primary-theme-color)] text-white p-6 text-center">
                        <h1 class="text-2xl font-bold tracking-wide">Registration Forms</h1>
                        <p class="text-sm mt-2 opacity-90">Select a registration form to continue</p>
                    </div>
                    <div class="bg-white p-6">
                        <div id="form-selection-loading" class="text-center py-8">
                            <div
                                class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-gray-200 border-t-[var(--primary-theme-color)]">
                            </div>
                            <p class="mt-4 text-gray-600">Loading available forms...</p>
                        </div>
                        <div id="form-selection-container" class="hidden">
                            <label for="registration-form-select" class="block text-gray-700 font-semibold mb-3">
                                <i class="fa-solid fa-clipboard-list mr-2 text-[var(--primary-theme-color)]"></i>
                                Select Registration Form
                            </label>
                            <select id="registration-form-select"
                                class="w-full p-4 border-2 border-gray-200 rounded-lg text-lg focus:border-[var(--primary-theme-color)] focus:ring-2 focus:ring-[var(--primary-theme-color)]/20 transition-all cursor-pointer bg-white">
                                <option value="">-- Select a Registration Form --</option>
                            </select>
                            <p id="form-selection-error" class="text-red-500 mt-2 hidden"></p>
                        </div>
                        <div id="no-forms-message" class="hidden text-center py-8">
                            <i class="fa-solid fa-folder-open text-4xl text-gray-400 mb-4"></i>
                            <p class="text-gray-600">No registration forms available at this time.</p>
                        </div>
                    </div>
                </div>

                <!-- Main Card Container (Hidden until form is selected) -->
                <div id="registration-form-card" class="rounded-xl shadow-2xl overflow-hidden hidden">

                    <!-- Main Header (Welcome Title) -->
                    <div class="bg-[var(--primary-theme-color)] text-white p-8 text-center">
                        <h1 id="form-title" class="text-2xl font-bold tracking-wide">Welcome to Sports League
                            Registration</h1>
                        <p id="form-subtitle-info" class="text-base font-semibold mt-1 opacity-95 hidden"></p>
                        <p class="text-sm mt-2 opacity-90">Please complete all sections to register your player</p>
                    </div>

                    <!-- Main Body (Grey Container with Accordions) -->
                    <div class="bg-[#f3f4f6] p-8 space-y-6">

                        <!-- Loading State -->
                        <div id="loading-state" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-white border-t-[var(--primary-theme-color)]">
                            </div>
                            <p class="mt-4 text-gray-700 font-semibold">Loading registration form...</p>
                        </div>

                        <!-- Dynamic Pages Container -->
                        <div id="pages-container" class="space-y-6 hidden"></div>

                        <!-- Submit Button Inside Card Body -->
                        <div id="submit-container" class="flex flex-col items-center gap-4 pt-4 pb-2 hidden">
                            <p id="submit-league-warning" class="text-red-500 text-sm font-semibold text-center max-w-lg hidden"></p>
                            <button id="save-draft-btn"
                                class="bg-[var(--primary-theme-color)] text-white px-12 py-3 rounded-lg font-bold shadow-lg hover:bg-blue-900 transition transform hover:scale-105 w-64 max-w-full text-center">Save Draft</button>
                            <button id="submit-registration-btn"
                                class="bg-[var(--primary-theme-color)] text-white px-12 py-3 rounded-lg font-bold shadow-lg hover:bg-blue-900 transition transform hover:scale-105 w-64 max-w-full text-center">Submit
                                Registration</button>
                        </div>
                    </div>
                </div>

                <!-- Compulsory Form ID Missing Alert -->
                <div id="compulsory-param-error-section" class="hidden rounded-2xl shadow-xl overflow-hidden bg-white max-w-xl mx-auto my-8 border border-red-100">
                    <div class="bg-red-600 text-white p-6 text-center">
                        <i class="fa-solid fa-triangle-exclamation text-4xl mb-2"></i>
                        <h2 class="text-xl font-bold tracking-wide">Missing Required Parameter</h2>
                    </div>
                    <div class="p-8 text-center">
                        <p class="text-gray-700 font-medium text-base mb-4">
                            The <code class="bg-red-50 text-red-600 px-2 py-1 rounded border border-red-200 font-mono text-sm">form_id</code> parameter is required to access this registration form.
                        </p>
                        <p class="text-gray-500 text-sm">
                            Please ensure your URL includes <code class="bg-gray-100 px-2 py-0.5 rounded text-gray-700">?form_id=YOUR_FORM_ID</code> and try again.
                        </p>
                    </div>
                </div>

                <!-- Inline Auth Section (Login / Signup) when dbname or token are missing -->
                <div id="inline-auth-section" class="hidden max-w-md mx-auto my-10 px-4">
                    <!-- Inline Login Card -->
                    <div id="inline-login-card" class="inline-auth-card p-10">
                        <div class="text-center mb-8">
                            <h1 class="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h1>
                            <p class="text-gray-500 text-sm">Sign in to access your registration form</p>
                        </div>

                        <div id="inline-login-flash" class="mb-6"></div>

                        <form id="inlineLoginForm" class="space-y-6">
                            <input type="hidden" id="inline-organisation" name="organisation">

                            <div class="space-y-2">
                                <label class="text-sm font-semibold text-gray-700">User ID or Username</label>
                                <div class="relative">
                                    <i class="fa-regular fa-user inline-input-icon"></i>
                                    <input type="text" id="inline-email" class="inline-auth-input" placeholder="Enter your username or email" required>
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label class="text-sm font-semibold text-gray-700">Password</label>
                                <div class="relative">
                                    <i class="fa-solid fa-lock inline-input-icon"></i>
                                    <input type="password" id="inline-password" class="inline-auth-input" placeholder="••••••••" required>
                                    <button type="button" id="inlineTogglePassword" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-indigo-600 z-10">
                                        <i class="fa-regular fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center justify-between text-sm">
                                <label class="flex items-center gap-2 cursor-pointer text-gray-600">
                                    <input type="checkbox" id="inline-remember" class="w-4 h-4 text-[var(--primary-theme-color,#dc2626)] border-gray-300 rounded focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer" style="accent-color: var(--primary-theme-color, #dc2626);">
                                    <span>Remember me</span>
                                </label>
                            </div>

                            <button type="submit" id="inlineLoginBtn" class="inline-auth-btn w-full flex items-center justify-center gap-2">
                                <span class="inline-btn-loader hidden w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                                <span class="inline-btn-text">Sign In</span>
                            </button>
                        </form>

                        <p class="text-center mt-8 text-sm text-gray-600">
                            Don't have an account?
                            <button type="button" id="switchToSignup" class="inline-auth-link">Sign up</button>
                        </p>
                    </div>

                    <!-- Inline Signup Card -->
                    <div id="inline-signup-card" class="inline-auth-card p-10 hidden">
                        <div class="text-center mb-8">
                            <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
                            <p class="text-gray-500 text-sm">Sign up to view and complete your registration form</p>
                        </div>

                        <div id="inline-signup-flash" class="mb-6"></div>

                        <div id="inlineSignupStep" class="space-y-6">
                            <form id="inlineSignupForm" class="space-y-5">
                                <input type="hidden" id="inline-signup-org" name="organisation">

                                <div class="grid grid-cols-2 gap-4">
                                    <div class="space-y-2">
                                        <label class="text-sm font-semibold text-gray-700">First Name</label>
                                        <input type="text" id="inline-signup-firstname" class="inline-auth-input no-icon" placeholder="John" required>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-sm font-semibold text-gray-700">Last Name</label>
                                        <input type="text" id="inline-signup-lastname" class="inline-auth-input no-icon" placeholder="Doe" required>
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label class="text-sm font-semibold text-gray-700">Email Address</label>
                                    <div class="relative">
                                        <i class="fa-regular fa-envelope inline-input-icon"></i>
                                        <input type="email" id="inline-signup-email" class="inline-auth-input" placeholder="name@example.com" required>
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label class="text-sm font-semibold text-gray-700">Password</label>
                                    <div class="relative">
                                        <i class="fa-solid fa-lock inline-input-icon"></i>
                                        <input type="password" id="inline-signup-password" class="inline-auth-input" placeholder="••••••••" required>
                                    </div>
                                </div>

                                <div class="space-y-2">
                                    <label class="text-sm font-semibold text-gray-700">Confirm Password</label>
                                    <div class="relative">
                                        <i class="fa-solid fa-lock inline-input-icon"></i>
                                        <input type="password" id="inline-signup-confirmpassword" class="inline-auth-input" placeholder="••••••••" required>
                                    </div>
                                </div>

                                <button type="submit" id="inlineSignupBtn" class="inline-auth-btn w-full flex items-center justify-center gap-2 mt-4">
                                    <span class="inline-btn-loader hidden w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                                    <span class="inline-btn-text">Send Verification OTP</span>
                                </button>
                            </form>
                        </div>

                        <!-- OTP Step for Inline Signup -->
                        <div id="inlineOtpStep" class="space-y-8 hidden">
                            <div class="text-center">
                                <div class="w-16 h-16 bg-red-50 text-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fa-solid fa-envelope-open-text text-2xl"></i>
                                </div>
                                <h2 class="text-2xl font-bold text-gray-900 mb-2">Verify Your Email</h2>
                                <p class="text-gray-500 text-sm">We've sent a code to <span id="inlineDisplayEmail" class="font-semibold text-gray-700"></span></p>
                            </div>

                            <div class="flex justify-between gap-2" id="inlineOtpInputs">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-xl bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="0">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="1">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="2">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="3">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="4">
                                <input type="text" maxlength="1" class="inline-otp-box w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg bg-gray-50 focus:border-red-600 focus:bg-white focus:outline-none" data-index="5">
                            </div>

                            <button type="button" id="inlineVerifyBtn" class="inline-auth-btn w-full flex items-center justify-center gap-2">
                                <span class="inline-btn-loader hidden w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                                <span class="inline-btn-text">Verify & Complete Signup</span>
                            </button>

                            <button type="button" id="inlineBackToSignup" class="w-full text-sm font-semibold text-gray-500 hover:text-gray-700 text-center block">
                                <i class="fa-solid fa-arrow-left mr-2"></i>Back to Signup
                            </button>
                        </div>

                        <p class="text-center mt-8 text-sm text-gray-600">
                            Already have an account?
                            <button type="button" id="switchToLogin" class="inline-auth-link">Sign in</button>
                        </p>
                    </div>
                </div>

                <!-- User Selection Modal for Inline Login -->
                <div id="inlineUserSelectionModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden z-50 flex items-center justify-center">
                    <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 mx-4">
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Select Account</h2>
                        <p class="text-sm text-gray-500 mb-4">Please choose which account you want to log in as:</p>
                        <div id="inlineUserSelectionList" class="space-y-3 max-h-64 overflow-y-auto pr-2"></div>
                        <button type="button" onclick="document.getElementById('inlineUserSelectionModal').classList.add('hidden')" class="mt-6 w-full py-2 px-4 border border-gray-300 rounded-xl text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
                            Cancel
                        </button>
                    </div>
                </div>

            </div>

            <script>
                // Global helper to safely sanitize and clean field values (preventing [object HTML...] strings)
                function cleanFieldValue(val) {
                    if (val === null || val === undefined) return '';
                    if (typeof val === 'boolean') return val ? "1" : "0";
                    if (typeof val === 'number') return String(val);
                    if (typeof val === 'object') {
                        if (val instanceof Element || val.nodeType || (val.tagName && typeof val.tagName === 'string')) {
                            if (val.type === 'checkbox') return val.checked ? "1" : "0";
                            if (val.type === 'file') return val.getAttribute('data-uploaded-url') || (val.files && val.files[0] ? val.files[0].name : '') || val.value || '';
                            if (val.type === 'radio') {
                                const name = val.getAttribute('name');
                                if (name) {
                                    const checkedRadio = document.querySelector(`[name="${CSS.escape(name)}"]:checked`);
                                    return checkedRadio ? checkedRadio.value : '';
                                }
                                return val.checked ? val.value : '';
                            }
                            return val.value !== undefined && val.value !== null ? String(val.value).trim() : '';
                        }
                        const inner = val.values !== undefined ? val.values : (val.value !== undefined ? val.value : val.val);
                        if (inner !== undefined && inner !== val) {
                            return cleanFieldValue(inner);
                        }
                        return '';
                    }
                    const str = String(val).trim();
                    if (str.startsWith('[object HTML') || str.startsWith('[object Object]')) {
                        return '';
                    }
                    return str;
                }
                window.cleanFieldValue = cleanFieldValue;

                // Discount Code Helpers
                let availableDiscountCodes = [];
                let hasLoadedDiscountCodes = false;
                window.appliedDiscountCode = null;
                window.appliedDiscountCodeText = '';
                window.appliedDiscountAmount = 0;

                window.setInputValue = function(input, val) {
                    if (!input) return;
                    if (input.type === 'file') {
                        const fieldId = input.id;
                        const uploadBox = document.getElementById(`upload-box-${fieldId}`);
                        const previewBox = document.getElementById(`preview-box-${fieldId}`);
                        const previewImg = document.getElementById(`preview-img-${fieldId}`);

                        if (!val || String(val).trim() === '') {
                            input.value = '';
                            input.removeAttribute('data-uploaded-url');
                            if (input.classList.contains('profile-picture-input')) {
                                if (previewImg) previewImg.src = '';
                                if (previewBox) previewBox.classList.add('hidden');
                                if (uploadBox) uploadBox.classList.remove('hidden');
                                const wasReq = input.hasAttribute('data-was-required');
                                if (wasReq) input.setAttribute('required', 'required');
                            } else if (input.classList.contains('generic-file-input')) {
                                if (typeof window.updateGenericFilePreview === 'function') {
                                    window.updateGenericFilePreview(input, '');
                                }
                            }
                        } else {
                            input.setAttribute('data-uploaded-url', val);
                            input.removeAttribute('required');
                            if (input.classList.contains('profile-picture-input')) {
                                const fullUrl = window.formatProfilePictureUrl ? window.formatProfilePictureUrl(val) : val;
                                const displayUrl = (fullUrl && fullUrl.startsWith('http')) 
                                    ? (fullUrl.includes('?') ? `${fullUrl}&t=${Date.now()}` : `${fullUrl}?t=${Date.now()}`) 
                                    : fullUrl;
                                if (previewImg) previewImg.src = displayUrl;
                                if (uploadBox) uploadBox.classList.add('hidden');
                                if (previewBox) previewBox.classList.remove('hidden');
                            } else if (input.classList.contains('generic-file-input')) {
                                if (typeof window.updateGenericFilePreview === 'function') {
                                    window.updateGenericFilePreview(input, val);
                                }
                            }
                        }
                        return;
                    }
                    if (input.type === 'radio') {
                        const valStr = val !== undefined && val !== null ? String(val).trim() : '';
                        if (input.name) {
                            const container = input.closest('form') || input.closest('.accordion-content') || input.closest('#page-content') || document;
                            const radios = container.querySelectorAll(`input[type="radio"][name="${CSS.escape(input.name)}"]`);
                            if (radios && radios.length > 0) {
                                radios.forEach(r => {
                                    const rVal = (r.value || '').trim();
                                    r.checked = (valStr !== '' && (rVal === valStr || rVal.toLowerCase() === valStr.toLowerCase()));
                                });
                                return;
                            }
                        }
                        const rVal = (input.value || '').trim();
                        input.checked = (valStr !== '' && (rVal === valStr || rVal.toLowerCase() === valStr.toLowerCase()));
                        return;
                    }
                    if (input.type === 'checkbox') {
                        input.checked = (val == 1 || val === true || val === 'true' || val === '1' || (typeof val === 'string' && val.toLowerCase() === 'yes'));
                        return;
                    }
                    if (input.tagName === 'SELECT') {
                        let cleanVal = val !== undefined && val !== null ? val.toString().trim() : '';

                        // Check if this select is a gender dropdown
                        const isGenderSelect = input.classList.contains('gender-select') || 
                            /gender|sex/i.test(input.name || '') || 
                            /gender|sex/i.test(input.getAttribute('data-original-label') || '');

                        if (isGenderSelect) {
                            let normGender = 0;
                            const s = cleanVal.toLowerCase().trim();
                            if (s === '1' || s === '1.00' || s === '1.0' || s === 'male' || s === 'm' || s.includes('male') || s === 'boy' || s.includes('boys')) normGender = 1;
                            else if (s === '2' || s === '2.00' || s === '2.0' || s === 'female' || s === 'f' || s.includes('female') || s === 'girl' || s.includes('girls')) normGender = 2;
                            else {
                                const num = parseFloat(s);
                                if (num === 1 || num === 1.0) normGender = 1;
                                else if (num === 2 || num === 2.0) normGender = 2;
                            }
                            const options = Array.from(input.options || []);
                            if (normGender === 1) {
                                const opt = options.find(o => o.value === '1.00' || o.value === '1' || parseFloat(o.value) === 1 || o.text.toLowerCase().trim() === 'male');
                                if (opt) {
                                    input.selectedIndex = options.indexOf(opt);
                                    return;
                                }
                            } else if (normGender === 2) {
                                const opt = options.find(o => o.value === '2.00' || o.value === '2' || parseFloat(o.value) === 2 || o.text.toLowerCase().trim() === 'female');
                                if (opt) {
                                    input.selectedIndex = options.indexOf(opt);
                                    return;
                                }
                            }
                        }

                        // Check if this select is a country code dropdown
                        const isCountryCodeSelect = /countrycode|phonecode/i.test(input.name || '') ||
                            /country code|phone code|code \d+/i.test(input.getAttribute('data-original-label') || '') ||
                            Array.from(input.options || []).some(o => (o.text.includes('United States') || o.text.includes('US')) && (o.value === '+1' || o.value === '1'));

                        if (isCountryCodeSelect) {
                            if (cleanVal && !cleanVal.startsWith('+') && !isNaN(cleanVal)) {
                                cleanVal = '+' + cleanVal;
                            }
                            if (!cleanVal) {
                                cleanVal = '+1';
                            }
                            const options = Array.from(input.options || []);
                            if (cleanVal === '+1') {
                                const usOpt = options.find(o => (o.text.includes('United States') || o.text.includes('US')) && o.value === '+1');
                                if (usOpt) {
                                    input.selectedIndex = options.indexOf(usOpt);
                                    return;
                                }
                            }
                            const matchingOpt = options.find(o => o.value === cleanVal);
                            if (matchingOpt) {
                                input.selectedIndex = options.indexOf(matchingOpt);
                                return;
                            }
                            const usOpt = options.find(o => (o.text.includes('United States') || o.text.includes('US')));
                            input.selectedIndex = usOpt ? options.indexOf(usOpt) : 0;
                            return;
                        }

                        input.value = val !== undefined && val !== null ? val : '';
                        return;
                    }

                    // Check if this input is a date of birth field
                    const origLabel = (input.getAttribute('data-original-label') || (input.labels && input.labels[0] ? input.labels[0].innerText : '') || input.name || input.id || '').toLowerCase();
                    const isDOBInput = origLabel.includes('birth') || origLabel.includes('dob') || (input.name && (input.name.toLowerCase().includes('birth') || input.name.toLowerCase().includes('dob')));

                    if (isDOBInput && val && String(val).trim() !== '' && !String(val).startsWith('0000') && val !== '00/00/0000' && val !== '00-00-0000' && isValidDateString(val)) {
                        input.type = 'text';
                        input.value = formatToMMDDYYYY(val);
                        input.setAttribute('disabled', 'disabled');
                        input.setAttribute('readonly', 'readonly');
                        input.style.backgroundColor = '#f3f4f6';
                        input.style.cursor = 'not-allowed';
                        input.style.color = '#374151';
                        input.removeAttribute('onclick');
                        const container = input.closest('.material-input-group, .date-input-container, div');
                        if (container) {
                            const calIcon = container.querySelector('.calendar-icon');
                            if (calIcon) {
                                calIcon.style.pointerEvents = 'none';
                                calIcon.style.opacity = '0.4';
                                calIcon.style.cursor = 'not-allowed';
                            }
                        }
                        return;
                    }

                    input.value = val !== undefined && val !== null ? val : '';
                };

                window.formatProfilePictureUrl = function(url) {
                    if (!url) return '';
                    let cleanUrl = url.trim();
                    if (cleanUrl.startsWith('http://') || cleanUrl.startsWith('https://')) {
                        return cleanUrl;
                    }
                    if (cleanUrl.startsWith('data:')) {
                        return cleanUrl;
                    }
                    if (cleanUrl.startsWith('/')) {
                        return `{{ config('api.url') }}${cleanUrl}`;
                    }
                    return `{{ config('api.url') }}/${cleanUrl}`;
                };

                window.checkSubmitButtonState = function() {
                    const submitBtn = document.getElementById('submit-registration-btn');
                    const warningEl = document.getElementById('submit-league-warning');
                    if (!submitBtn) return true;

                    if (typeof isRegistrationSet !== 'undefined' && isRegistrationSet) {
                        const activePids = Array.from(updatedPlayerIds).map(id => parseInt(id));
                        
                        if (activePids.length === 0) {
                            submitBtn.disabled = true;
                            submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
                            if (warningEl) {
                                warningEl.textContent = 'Please add and save at least one player to submit registration.';
                                warningEl.classList.remove('hidden');
                            }
                            return false;
                        }

                        let hasInvalidPlayer = false;
                        const playersWithoutLeague = [];
                        activePids.forEach(pid => {
                            const playerObj = playersList.find(p => p.player_id == pid);
                            if (!playerObj || !playerObj.selected_form_ids || playerObj.selected_form_ids.length === 0) {
                                hasInvalidPlayer = true;
                                const name = playerObj ? `${playerObj.first_name || ''} ${playerObj.last_name || ''}`.trim() : `Player #${pid}`;
                                playersWithoutLeague.push(name || 'Player');
                            }
                        });

                        if (hasInvalidPlayer) {
                            submitBtn.disabled = true;
                            submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
                            if (warningEl) {
                                warningEl.textContent = `Please select at least one league for: ${playersWithoutLeague.join(', ')}`;
                                warningEl.classList.remove('hidden');
                            }
                            return false;
                        }
                    }

                    submitBtn.disabled = false;
                    submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
                    if (warningEl) warningEl.classList.add('hidden');
                    return true;
                };

                window.getPlayerBirthDateRange = function() {
                    const today = new Date().toISOString().split('T')[0];
                    const currentYear = new Date().getFullYear();
                    
                    let minDate = '';
                    let maxDate = today;

                    let criteria = null;
                    let start = null;
                    let end = null;

                    if (typeof isRegistrationSet !== 'undefined' && isRegistrationSet) {
                        const formsList = window.criteriaAvailableForms || window.availableForms || [];
                        const firstFormItem = formsList[0];
                        if (firstFormItem) {
                            criteria = (firstFormItem.criteria || 'grade').toLowerCase().trim();
                            start = parseInt(firstFormItem.start);
                            end = parseInt(firstFormItem.end);
                        }
                    } else if (typeof currentForm !== 'undefined' && currentForm) {
                        criteria = (currentForm.criteria || currentForm.league_criteria || 'grade').toLowerCase().trim();
                        
                        const startVal = (currentForm.start !== undefined && currentForm.start !== null) ? currentForm.start : currentForm.league_start;
                        start = parseInt(startVal);

                        const endVal = (currentForm.end !== undefined && currentForm.end !== null) ? currentForm.end : currentForm.league_end;
                        end = parseInt(endVal);
                    }

                    if (criteria && start !== null && !isNaN(start) && end !== null && !isNaN(end)) {
                        const offsetStart = (criteria === 'age') ? (start - 1) : (start + 3);
                        const offsetEnd = (criteria === 'age') ? (end + 3) : (end + 7);

                        const yearStart = currentYear - offsetStart;
                        const yearEnd = currentYear - offsetEnd;

                        minDate = `${yearEnd}-01-01`;
                        maxDate = `${yearStart}-12-31`;

                        if (maxDate > today) maxDate = today;
                    }

                    return { min: minDate, max: maxDate };
                };

                window.loadProfilePicture = async function(imgElement, url) {
                    if (!url) return;
                    
                    const absoluteUrl = window.formatProfilePictureUrl(url);
                    imgElement.src = absoluteUrl;
                    
                    imgElement.onerror = async function() {
                        if (imgElement.getAttribute('data-loaded-blob') === 'true') return;
                        
                        try {
                            const token = authToken || localStorage.getItem('authToken') || '';
                            const org = authOrganisation || localStorage.getItem('organisation') || '';
                            
                            const headers = {};
                            if (org) headers['X-Organisation'] = org;
                            if (token) headers['X-Token'] = token;
                            
                            const response = await fetch(absoluteUrl, { headers });
                            if (response.ok) {
                                const blob = await response.blob();
                                const objectUrl = URL.createObjectURL(blob);
                                imgElement.setAttribute('data-loaded-blob', 'true');
                                imgElement.src = objectUrl;
                            }
                        } catch (e) {
                            console.error('Failed to load profile picture with auth headers:', e);
                        }
                    };
                };

                window.loadDiscountCodes = async function() {
                    try {
                        hasLoadedDiscountCodes = true;
                        const urlParams = new URLSearchParams(window.location.search);
                        const org = (typeof authOrganisation !== 'undefined' && authOrganisation) 
                            || urlParams.get('dbname') 
                            || urlParams.get('db_name') 
                            || urlParams.get('organisation') 
                            || urlParams.get('org') 
                            || urlParams.get('db') 
                            || localStorage.getItem('organisation') 
                            || localStorage.getItem('last_db') 
                            || '';
                        const token = (typeof authToken !== 'undefined' && authToken) 
                            || urlParams.get('token') 
                            || urlParams.get('authToken') 
                            || urlParams.get('auth_token') 
                            || localStorage.getItem('authToken') 
                            || '';

                        if (!org) {
                            console.warn('⚠️ No organisation available to fetch discount codes');
                            availableDiscountCodes = [];
                            return;
                        }

                        const headers = {
                            'Content-Type': 'application/json',
                            'X-Organisation': org
                        };
                        if (token) {
                            headers['X-Token'] = token;
                        }

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: headers,
                            body: JSON.stringify({
                                query: `query {
                                    fetchDiscountCodes {
                                        id
                                        name
                                        code
                                        fee_grps
                                        amount
                                        type
                                        num_players
                                        start_date
                                        expiration_date
                                        league_id
                                    }
                                }`
                            })
                        });
                        const result = await response.json();
                        if (result.data && result.data.fetchDiscountCodes) {
                            availableDiscountCodes = result.data.fetchDiscountCodes;
                            console.log('✅ Loaded discount codes:', availableDiscountCodes);
                            if (typeof window.updateFeeSummary === 'function') {
                                window.updateFeeSummary();
                            }
                        } else {
                            availableDiscountCodes = [];
                        }
                    } catch (e) {
                        console.error('Error loading discount codes:', e);
                        availableDiscountCodes = [];
                    }
                };

                window.getActiveDiscountCodes = function() {
                    if (!Array.isArray(availableDiscountCodes) || availableDiscountCodes.length === 0) {
                        return [];
                    }

                    const now = new Date();

                    // Collect current league IDs in registration (if any)
                    const activeLeagueIds = new Set();
                    if (typeof currentForm !== 'undefined' && currentForm && currentForm.league_id) {
                        activeLeagueIds.add(String(currentForm.league_id));
                    }
                    if (window.availableForms && Array.isArray(window.availableForms)) {
                        window.availableForms.forEach(f => {
                            if (f && f.league_id) activeLeagueIds.add(String(f.league_id));
                        });
                    }
                    if (window.currentRegistrationSet && window.currentRegistrationSet.forms_info && Array.isArray(window.currentRegistrationSet.forms_info)) {
                        window.currentRegistrationSet.forms_info.forEach(f => {
                            if (f && f.league_id) activeLeagueIds.add(String(f.league_id));
                        });
                    }

                    return availableDiscountCodes.filter(c => {
                        if (!c || (!c.code && !c.name)) return false;

                        // Check start date (if specified)
                        if (c.start_date) {
                            const startDate = new Date(c.start_date);
                            startDate.setHours(0, 0, 0, 0);
                            if (!isNaN(startDate.getTime()) && now < startDate) {
                                return false;
                            }
                        }

                        // Check expiration date (if specified)
                        if (c.expiration_date) {
                            const expDate = new Date(c.expiration_date);
                            expDate.setHours(23, 59, 59, 999);
                            if (!isNaN(expDate.getTime()) && now > expDate) {
                                return false;
                            }
                        }

                        // Check league_id if configured for a specific season/league
                        const codeLeagueId = c.league_id ? parseInt(c.league_id) : 0;
                        if (codeLeagueId > 0 && activeLeagueIds.size > 0) {
                            if (!activeLeagueIds.has(String(codeLeagueId))) {
                                return false;
                            }
                        }

                        return true;
                    });
                };

                window.discountFeedbackMsg = '';
                window.discountFeedbackType = null;

                window.updateFeeSummary = function() {
                    if (typeof renderFeeSummary === 'function' && window.lastFeeSummaryContainer && window.lastPlayerFeeResults) {
                        renderFeeSummary(window.lastFeeSummaryContainer, window.lastPlayerFeeResults);
                    }
                };

                window.applyDiscountCode = async function() {
                    const input = document.getElementById('discount-code-input');
                    const applyBtn = document.getElementById('apply-discount-btn');
                    if (!input) return;

                    const rawCode = input.value.trim();
                    window.appliedDiscountCodeText = rawCode;

                    if (!rawCode) {
                        window.appliedDiscountCode = null;
                        window.appliedDiscountAmount = 0;
                        window.discountFeedbackMsg = 'Please enter a discount code.';
                        window.discountFeedbackType = 'error';
                        window.updateFeeSummary();
                        return;
                    }

                    if (applyBtn) {
                        applyBtn.disabled = true;
                        applyBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-1"></i> Checking...';
                    }

                    // Ensure available discount codes are loaded from API
                    if (!availableDiscountCodes || availableDiscountCodes.length === 0) {
                        try {
                            await window.loadDiscountCodes();
                        } catch (e) {
                            console.error('Error loading discount codes:', e);
                        }
                    }

                    // Match by code or name (case-insensitive)
                    const matched = (availableDiscountCodes || []).find(c => 
                        (c.code || '').toLowerCase().trim() === rawCode.toLowerCase() ||
                        (c.name || '').toLowerCase().trim() === rawCode.toLowerCase()
                    );
                    
                    if (!matched) {
                        window.appliedDiscountCode = null;
                        window.appliedDiscountAmount = 0;
                        window.discountFeedbackMsg = `Invalid discount code "${rawCode}". Please check and try again.`;
                        window.discountFeedbackType = 'error';
                        window.updateFeeSummary();
                        return;
                    }

                    // Check if Early Bird is active and this is a Late Fee discount code
                    const codeStr = (matched.code || matched.name || matched.fee_grps || '').toLowerCase();
                    if (window.hasEarlyBirdApplied && codeStr.includes('late')) {
                        window.appliedDiscountCode = null;
                        window.appliedDiscountAmount = 0;
                        window.discountFeedbackMsg = 'Late Fee discount code cannot be applied when Early Bird discount is active.';
                        window.discountFeedbackType = 'error';
                        window.updateFeeSummary();
                        return;
                    }

                    // Check start date if present
                    if (matched.start_date) {
                        const startDate = new Date(matched.start_date);
                        startDate.setHours(0, 0, 0, 0);
                        if (!isNaN(startDate.getTime()) && new Date() < startDate) {
                            window.appliedDiscountCode = null;
                            window.appliedDiscountAmount = 0;
                            window.discountFeedbackMsg = `Discount code "${matched.code || matched.name}" is not active yet.`;
                            window.discountFeedbackType = 'error';
                            window.updateFeeSummary();
                            return;
                        }
                    }

                    // Check expiration date if present
                    if (matched.expiration_date) {
                        const expDate = new Date(matched.expiration_date);
                        expDate.setHours(23, 59, 59, 999);
                        if (!isNaN(expDate.getTime()) && new Date() > expDate) {
                            window.appliedDiscountCode = null;
                            window.appliedDiscountAmount = 0;
                            window.discountFeedbackMsg = `Discount code "${matched.code || matched.name}" has expired.`;
                            window.discountFeedbackType = 'error';
                            window.updateFeeSummary();
                            return;
                        }
                    }

                    // Check league_id if configured for a specific season/league
                    const codeLeagueId = matched.league_id ? parseInt(matched.league_id) : 0;
                    if (codeLeagueId > 0) {
                        const activeLeagueIds = new Set();
                        if (typeof currentForm !== 'undefined' && currentForm && currentForm.league_id) {
                            activeLeagueIds.add(String(currentForm.league_id));
                        }
                        if (window.availableForms && Array.isArray(window.availableForms)) {
                            window.availableForms.forEach(f => {
                                if (f && f.league_id) activeLeagueIds.add(String(f.league_id));
                            });
                        }
                        if (window.currentRegistrationSet && window.currentRegistrationSet.forms_info && Array.isArray(window.currentRegistrationSet.forms_info)) {
                            window.currentRegistrationSet.forms_info.forEach(f => {
                                if (f && f.league_id) activeLeagueIds.add(String(f.league_id));
                            });
                        }
                        if (activeLeagueIds.size > 0 && !activeLeagueIds.has(String(codeLeagueId))) {
                            window.appliedDiscountCode = null;
                            window.appliedDiscountAmount = 0;
                            window.discountFeedbackMsg = `Discount code "${matched.code || matched.name}" is not valid for this program/season.`;
                            window.discountFeedbackType = 'error';
                            window.updateFeeSummary();
                            return;
                        }
                    }

                    // Success! Apply code
                    window.appliedDiscountCode = matched;
                    const discountType = (matched.type || '').toLowerCase();
                    const discountVal = parseFloat(matched.amount) || 0;
                    let label = '';
                    if (discountType.includes('percent') || discountType === '%' || (discountType !== 'amount' && discountType !== 'flat' && discountType !== 'fixed' && discountVal < 1)) {
                        const pct = discountVal > 1 ? discountVal : discountVal * 100;
                        label = `${pct}% OFF`;
                    } else {
                        label = `$${discountVal.toFixed(2)} OFF`;
                    }
                    window.discountFeedbackMsg = `Code "${(matched.code || matched.name).toUpperCase()}" applied successfully (${label})!`;
                    window.discountFeedbackType = 'success';
                    window.updateFeeSummary();
                };

                window.removeDiscountCode = function() {
                    window.appliedDiscountCode = null;
                    window.appliedDiscountCodeText = '';
                    window.appliedDiscountAmount = 0;
                    window.discountFeedbackMsg = '';
                    window.discountFeedbackType = null;
                    window.updateFeeSummary();
                };

                // Profile Picture Upload
                // Profile Picture Crop and Upload Helpers
                let cropperInstance = null;
                let currentCropInput = null;
                let currentCropPlayerId = null;

                window.loadCropper = function(callback) {
                    if (window.Cropper) {
                        callback();
                        return;
                    }
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css';
                    document.head.appendChild(link);

                    const script = document.createElement('script');
                    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js';
                    script.onload = callback;
                    document.head.appendChild(script);
                };

                window.showImagePreviewPopup = function(imageUrl) {
                    let modal = document.getElementById('image-preview-popup-modal');
                    if (!modal) {
                        modal = document.createElement('div');
                        modal.id = 'image-preview-popup-modal';
                        modal.className = 'fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75 hidden';
                        modal.innerHTML = `
                            <div class="relative max-w-3xl max-h-[90vh] bg-white p-2 rounded-lg shadow-2xl flex flex-col items-center">
                                <button type="button" class="absolute top-4 right-4 text-white bg-black bg-opacity-50 hover:bg-opacity-70 transition-all rounded-full p-2 w-10 h-10 flex items-center justify-center text-xl font-bold" onclick="document.getElementById('image-preview-popup-modal').classList.add('hidden')">
                                    &times;
                                </button>
                                <img id="popup-preview-img" src="" class="max-w-full max-h-[80vh] object-contain rounded-lg" alt="Preview">
                            </div>
                        `;
                        document.body.appendChild(modal);
                        modal.addEventListener('click', (e) => {
                            if (e.target === modal) {
                                modal.classList.add('hidden');
                            }
                        });
                    }
                    document.getElementById('popup-preview-img').src = imageUrl;
                    modal.classList.remove('hidden');
                };

                window.openCropModal = function(imageSrc, input, playerId) {
                    currentCropInput = input;
                    currentCropPlayerId = playerId;

                    let modal = document.getElementById('image-crop-modal');
                    if (!modal) {
                        modal = document.createElement('div');
                        modal.id = 'image-crop-modal';
                        modal.className = 'fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75 hidden';
                        modal.innerHTML = `
                            <div class="relative bg-white rounded-xl shadow-2xl p-6 w-full max-w-lg mx-4 flex flex-col">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-xl font-bold text-gray-800">Crop Profile Picture</h3>
                                    <button type="button" class="text-gray-500 hover:text-gray-700 text-2xl font-bold" onclick="closeCropModal()">&times;</button>
                                </div>
                                <div class="w-full h-80 bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center mb-6">
                                    <img id="cropper-target-img" src="" class="max-w-full max-h-full" style="display: block;">
                                </div>
                                <div class="flex justify-end gap-3">
                                    <button type="button" class="px-5 py-2 border border-gray-300 text-gray-700 rounded-lg font-bold hover:bg-gray-50 transition-colors" onclick="closeCropModal()">Cancel</button>
                                    <button type="button" id="crop-submit-btn" class="px-5 py-2 bg-[#f48120] text-white rounded-lg font-bold hover:bg-[#d9731b] transition-colors flex items-center gap-2" onclick="submitCroppedImage()">
                                        Crop & Upload
                                    </button>
                                </div>
                            </div>
                        `;
                        document.body.appendChild(modal);
                    }

                    const targetImg = document.getElementById('cropper-target-img');
                    targetImg.src = imageSrc;
                    modal.classList.remove('hidden');

                    window.loadCropper(() => {
                        if (cropperInstance) {
                            cropperInstance.destroy();
                        }
                        cropperInstance = new Cropper(targetImg, {
                            aspectRatio: 1,
                            viewMode: 1,
                            dragMode: 'move',
                            autoCropArea: 0.8,
                            restore: false,
                            guides: true,
                            center: true,
                            highlight: false,
                            cropBoxMovable: true,
                            cropBoxResizable: true,
                            toggleDragModeOnDblclick: false,
                        });
                    });
                };

                window.closeCropModal = function() {
                    const modal = document.getElementById('image-crop-modal');
                    if (modal) {
                        modal.classList.add('hidden');
                    }
                    if (cropperInstance) {
                        cropperInstance.destroy();
                        cropperInstance = null;
                    }
                    if (currentCropInput) {
                        currentCropInput.value = '';
                    }
                };

                window.submitCroppedImage = async function() {
                    if (!cropperInstance || !currentCropInput) return;

                    const submitBtn = document.getElementById('crop-submit-btn');
                    const originalBtnHtml = submitBtn.innerHTML;
                    submitBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> Uploading...`;
                    submitBtn.disabled = true;

                    const canvas = cropperInstance.getCroppedCanvas({
                        width: 400,
                        height: 400
                    });

                    canvas.toBlob(async (blob) => {
                        if (!blob) {
                            showAlert('Failed to crop image.', 'error');
                            submitBtn.innerHTML = originalBtnHtml;
                            submitBtn.disabled = false;
                            return;
                        }

                        const fieldId = currentCropInput.id;
                        const uploadBox = document.getElementById(`upload-box-${fieldId}`);
                        const previewBox = document.getElementById(`preview-box-${fieldId}`);
                        const previewImg = document.getElementById(`preview-img-${fieldId}`);

                        let playerId = currentCropPlayerId || currentCropInput.getAttribute('data-player-id');
                        if (!playerId || playerId === 'null' || playerId === 'new' || playerId === 'undefined') {
                            playerId = currentlyEditingPlayerId || localStorage.getItem('player_id') || 'parent';
                        }

                        const isParentField = (playerId === 'parent' || playerId === 'parent_1' || playerId === 'parent_2' || (typeof activeParentNumber !== 'undefined' && currentCropInput.closest('#page-content-parent, [id*="parent"]')));
                        const isParent2 = (playerId === 'parent_2' || (isParentField && typeof activeParentNumber !== 'undefined' && activeParentNumber === 2));

                        try {
                            const formData = new FormData();
                            formData.append('file', blob, 'profile_picture.png');
                            formData.append('image', blob, 'profile_picture.png');
                            formData.append('profile_picture', blob, 'profile_picture.png');
                            formData.append('player_id', isParentField ? (isParent2 ? 'parent_2' : 'parent') : playerId);

                            const response = await fetch('{{ config('api.url') }}/api/player/profile-picture', {
                                method: 'POST',
                                headers: {
                                    'X-Organisation': authOrganisation || localStorage.getItem('organisation') || '',
                                    'X-Token': authToken || localStorage.getItem('authToken') || '',
                                },
                                body: formData
                            });

                            if (!response.ok) {
                                throw new Error(`HTTP Error ${response.status}`);
                            }

                            const result = await response.json();
                            console.log('Profile picture upload response:', result);

                            let imageUrl = '';
                            if (result.image_url) imageUrl = result.image_url;
                            else if (result.url) imageUrl = result.url;
                            else if (result.path) imageUrl = result.path;
                            else if (result.data && result.data.image_url) imageUrl = result.data.image_url;
                            else if (result.data && result.data.url) imageUrl = result.data.url;
                            else if (result.data && result.data.path) imageUrl = result.data.path;
                            else if (result.success && typeof result.success === 'string') imageUrl = result.success;

                            const blobUrl = URL.createObjectURL(blob);
                            if (!imageUrl) {
                                imageUrl = blobUrl;
                            } else {
                                imageUrl = window.formatProfilePictureUrl(imageUrl);
                            }

                            // Add timestamp cache-buster for display so the browser immediately renders the newly uploaded image
                            const displayUrl = (imageUrl && imageUrl.startsWith('http')) 
                                ? (imageUrl.includes('?') ? `${imageUrl}&t=${Date.now()}` : `${imageUrl}?t=${Date.now()}`) 
                                : (blobUrl || imageUrl);

                            currentCropInput.setAttribute('data-uploaded-url', imageUrl);
                            currentCropInput.removeAttribute('required');

                            if (previewImg) previewImg.src = displayUrl;
                            if (uploadBox) uploadBox.classList.add('hidden');
                            if (previewBox) previewBox.classList.remove('hidden');

                            // Store in the correct value map for Parent 1 or Parent 2
                            const targetMap = isParent2 ? parent2FieldValues : fieldValues;
                            const dataFieldId = currentCropInput.getAttribute('data-field-id');
                            const labelEl = currentCropInput.closest('.photo-upload-group')?.previousElementSibling;
                            const origLabel = labelEl?.getAttribute('data-original-label') || '';
                            const normLabel = origLabel.toLowerCase().trim();

                            if (normLabel) {
                                targetMap[normLabel] = imageUrl;
                            }
                            if (dataFieldId) {
                                targetMap[`id_${dataFieldId}`] = imageUrl;
                            }
                            if (currentCropInput.name) {
                                targetMap[currentCropInput.name] = imageUrl;
                            }

                            window.closeCropModal();
                            showAlert('Profile picture uploaded successfully.', 'success');
                        } catch (error) {
                            console.error('Error uploading profile picture:', error);
                            showAlert('Failed to upload profile picture. Please try again.', 'error');
                        } finally {
                            submitBtn.innerHTML = originalBtnHtml;
                            submitBtn.disabled = false;
                        }
                    }, 'image/png');
                };

                window.handleProfilePictureUpload = async function(input, playerIdArg) {
                    const file = input.files[0];
                    if (!file) return;

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        window.openCropModal(e.target.result, input, playerIdArg);
                    };
                    reader.readAsDataURL(file);
                };

                window.deleteProfilePicture = async function(btn, fieldId) {
                    const input = document.getElementById(fieldId);
                    const uploadBox = document.getElementById(`upload-box-${fieldId}`);
                    const previewBox = document.getElementById(`preview-box-${fieldId}`);
                    const previewImg = document.getElementById(`preview-img-${fieldId}`);

                    let playerId = input.getAttribute('data-player-id');
                    if (!playerId || playerId === 'null' || playerId === 'parent' || playerId === 'new' || playerId === 'undefined') {
                        playerId = currentlyEditingPlayerId || localStorage.getItem('player_id') || 'parent';
                    }

                    const isParentField = (playerId === 'parent' || playerId === 'parent_1' || playerId === 'parent_2' || (typeof activeParentNumber !== 'undefined' && input.closest('#page-content-parent, [id*="parent"]')));
                    const isParent2 = (playerId === 'parent_2' || (isParentField && typeof activeParentNumber !== 'undefined' && activeParentNumber === 2));

                    const originalBtnHtml = btn.innerHTML;
                    btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin text-red-500"></i>`;
                    btn.disabled = true;

                    try {
                        const response = await fetch(`{{ config('api.url') }}/api/player/profile-picture?player_id=${isParentField ? (isParent2 ? 'parent_2' : 'parent') : playerId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-Organisation': authOrganisation || localStorage.getItem('organisation') || '',
                                'X-Token': authToken || localStorage.getItem('authToken') || '',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({ player_id: isParentField ? (isParent2 ? 'parent_2' : 'parent') : playerId })
                        });

                        // Clear input value and data attributes
                        input.value = '';
                        input.removeAttribute('data-uploaded-url');
                        
                        // Restore required if field was required
                        const isRequired = input.hasAttribute('data-was-required') || input.className.includes('required');
                        if (isRequired) {
                            input.setAttribute('required', 'required');
                        }

                        // Hide preview, show upload box
                        if (previewImg) previewImg.src = '';
                        if (previewBox) previewBox.classList.add('hidden');
                        if (uploadBox) uploadBox.classList.remove('hidden');

                        // Clear in value maps
                        const targetMap = isParent2 ? parent2FieldValues : fieldValues;
                        const dataFieldId = input.getAttribute('data-field-id');
                        const labelEl = input.closest('.photo-upload-group')?.previousElementSibling;
                        const origLabel = labelEl?.getAttribute('data-original-label') || '';
                        const normLabel = origLabel.toLowerCase().trim();

                        if (normLabel) delete targetMap[normLabel];
                        if (dataFieldId) delete targetMap[`id_${dataFieldId}`];
                        if (input.name) delete targetMap[input.name];

                        showAlert('Profile picture deleted successfully.', 'success');
                    } catch (error) {
                        console.error('Error deleting profile picture:', error);
                        showAlert('Failed to delete profile picture.', 'error');
                    } finally {
                        btn.innerHTML = originalBtnHtml;
                        btn.disabled = false;
                    }
                };

                // Generic File Upload Helpers (Form Builder File Upload fields)
                window.getGenericUploadBoxDefaultHtml = function() {
                    return `
                        <div class="flex flex-col items-center justify-center gap-2 text-gray-500">
                            <i class="fa-solid fa-cloud-arrow-up text-2xl text-[var(--primary-theme-color,#11315b)]"></i>
                            <span class="font-bold text-base text-gray-700">Choose file or drag here</span>
                            <span class="text-xs text-gray-400">PDF, DOC, DOCX, Images, Excel, up to 50MB</span>
                        </div>
                    `;
                };

                window.getFileIconHtml = function(fileNameOrUrl) {
                    if (!fileNameOrUrl) return '<i class="fa-solid fa-file text-blue-500 text-2xl"></i>';
                    const ext = (fileNameOrUrl.toString().split('.').pop() || '').toLowerCase().split('?')[0];
                    if (['pdf'].includes(ext)) {
                        return '<i class="fa-solid fa-file-pdf text-red-500 text-2xl"></i>';
                    } else if (['doc', 'docx'].includes(ext)) {
                        return '<i class="fa-solid fa-file-word text-blue-600 text-2xl"></i>';
                    } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
                        return '<i class="fa-solid fa-file-excel text-green-600 text-2xl"></i>';
                    } else if (['ppt', 'pptx'].includes(ext)) {
                        return '<i class="fa-solid fa-file-powerpoint text-orange-500 text-2xl"></i>';
                    } else if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) {
                        return '<i class="fa-solid fa-file-image text-purple-500 text-2xl"></i>';
                    } else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) {
                        return '<i class="fa-solid fa-file-zipper text-amber-600 text-2xl"></i>';
                    }
                    return '<i class="fa-solid fa-file-lines text-blue-500 text-2xl"></i>';
                };

                window.updateGenericFilePreview = function(input, fileUrlOrName) {
                    if (!input) return;
                    const fieldId = input.id;
                    const uploadBox = document.getElementById(`upload-box-${fieldId}`);
                    const previewBox = document.getElementById(`preview-box-${fieldId}`);
                    const nameEl = document.getElementById(`file-name-${fieldId}`);
                    const linkEl = document.getElementById(`file-link-${fieldId}`);
                    const iconEl = document.getElementById(`file-icon-${fieldId}`);

                    if (!fileUrlOrName) {
                        if (uploadBox) {
                            uploadBox.innerHTML = window.getGenericUploadBoxDefaultHtml();
                            uploadBox.classList.remove('hidden');
                        }
                        if (previewBox) previewBox.classList.add('hidden');
                        return;
                    }

                    const fullUrl = fileUrlOrName.startsWith('http') ? fileUrlOrName : `{{ config('api.url') }}/storage/form_builder/${fileUrlOrName}`;
                    const cleanName = fileUrlOrName.split('/').pop().replace(/^\d+_[a-f0-9]+_/, '') || 'Uploaded Document';

                    if (nameEl) {
                        nameEl.textContent = cleanName;
                        nameEl.title = cleanName;
                    }
                    if (linkEl) {
                        linkEl.href = fullUrl;
                        linkEl.classList.remove('hidden');
                    }
                    if (iconEl && typeof window.getFileIconHtml === 'function') {
                        iconEl.innerHTML = window.getFileIconHtml(fileUrlOrName);
                    }
                    if (uploadBox) {
                        uploadBox.innerHTML = window.getGenericUploadBoxDefaultHtml();
                        uploadBox.classList.add('hidden');
                    }
                    if (previewBox) previewBox.classList.remove('hidden');
                };

                window.handleGenericFileUpload = async function(input, playerIdArg, fieldIdArg) {
                    const file = input.files && input.files[0];
                    if (!file) return;

                    const fieldId = input.id;
                    const uploadBox = document.getElementById(`upload-box-${fieldId}`);
                    const previewBox = document.getElementById(`preview-box-${fieldId}`);

                    const originalUploadBoxHtml = uploadBox ? uploadBox.innerHTML : window.getGenericUploadBoxDefaultHtml();
                    if (uploadBox) {
                        uploadBox.innerHTML = `
                            <div class="flex items-center justify-center gap-3 text-blue-600 py-3">
                                <i class="fa-solid fa-spinner fa-spin text-2xl"></i>
                                <span class="font-semibold text-sm">Uploading ${file.name}...</span>
                            </div>
                        `;
                    }

                    try {
                        const formData = new FormData();
                        formData.append('file_upload', file);
                        formData.append('organisation', authOrganisation || localStorage.getItem('organisation') || '');
                        formData.append('token', authToken || localStorage.getItem('authToken') || '');

                        const response = await fetch('{{ config('api.url') }}/api/form-builder/upload-file', {
                            method: 'POST',
                            headers: {
                                'X-Organisation': authOrganisation || localStorage.getItem('organisation') || '',
                                'X-Token': authToken || localStorage.getItem('authToken') || '',
                            },
                            body: formData
                        });

                        const result = await response.json();
                        console.log('Form Builder File Upload response:', result);

                        if (!response.ok || (result && result.success === false)) {
                            throw new Error(result.message || 'File upload failed');
                        }

                        const fileUrl = result.file_url || result.url || result.path || '';
                        const fileName = result.file_name || file.name;

                        input.setAttribute('data-uploaded-url', fileUrl || fileName);
                        input.removeAttribute('required');

                        if (typeof window.updateGenericFilePreview === 'function') {
                            window.updateGenericFilePreview(input, fileUrl || fileName);
                        }

                        if (typeof showAlert === 'function') {
                            showAlert('File uploaded successfully.', 'success');
                        }
                    } catch (err) {
                        console.error('Error uploading file:', err);
                        if (uploadBox) {
                            uploadBox.innerHTML = originalUploadBoxHtml;
                        }
                        if (typeof showAlert === 'function') {
                            showAlert(err.message || 'Failed to upload file. Please try again.', 'error');
                        }
                    } finally {
                        if (uploadBox) {
                            uploadBox.innerHTML = window.getGenericUploadBoxDefaultHtml();
                        }
                    }
                };

                window.deleteGenericFile = async function(btn, fieldId) {
                    const input = document.getElementById(fieldId);
                    if (!input) return;

                    const fileUrlOrName = input.getAttribute('data-uploaded-url') || input.value || '';
                    
                    let originalBtnHtml = '';
                    if (btn) {
                        originalBtnHtml = btn.innerHTML;
                        btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin text-red-500 text-xl"></i>`;
                        btn.disabled = true;
                    }

                    try {
                        if (fileUrlOrName) {
                            const org = authOrganisation || localStorage.getItem('organisation') || '';
                            const token = authToken || localStorage.getItem('authToken') || '';

                            const res = await fetch(`{{ config('api.url') }}/api/form-builder/delete-file`, {
                                method: 'DELETE',
                                headers: {
                                    'X-Organisation': org,
                                    'X-Token': token,
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({
                                    file_url: fileUrlOrName,
                                    file_name: fileUrlOrName,
                                    organisation: org,
                                    token: token
                                })
                            });
                            const data = await res.json();
                            console.log('Delete file response:', data);
                        }

                        input.value = '';
                        input.removeAttribute('data-uploaded-url');

                        // Restore required attribute if it was originally required
                        const isRequired = input.hasAttribute('data-was-required') || input.className.includes('required');
                        if (isRequired) {
                            input.setAttribute('required', 'required');
                        }

                        if (typeof window.updateGenericFilePreview === 'function') {
                            window.updateGenericFilePreview(input, '');
                        }

                        if (typeof showAlert === 'function') {
                            showAlert('File removed.', 'success');
                        }
                    } catch (err) {
                        console.error('Error deleting file:', err);
                        input.value = '';
                        input.removeAttribute('data-uploaded-url');

                        const isRequired = input.hasAttribute('data-was-required') || input.className.includes('required');
                        if (isRequired) {
                            input.setAttribute('required', 'required');
                        }

                        if (typeof window.updateGenericFilePreview === 'function') {
                            window.updateGenericFilePreview(input, '');
                        }

                        if (typeof showAlert === 'function') {
                            showAlert('File removed.', 'success');
                        }
                    } finally {
                        if (btn) {
                            btn.innerHTML = originalBtnHtml;
                            btn.disabled = false;
                        }
                    }
                };

                // Value Sanitizer: Cleans dummy zeroes and invalid placeholder dates
                function sanitizeFieldValue(val, label = '', fieldType = '') {
                    if (val === null || val === undefined) return '';
                    const strVal = String(val).trim();
                    if (strVal.startsWith('0000') || strVal === '00/00/0000' || strVal === '00-00-0000') return '';
                    const normLabel = (label || '').toLowerCase().trim();
                    const normType = (fieldType || '').toLowerCase().trim();
                    const isPhone = normLabel.includes('phone') || normType === 'phone';
                    const isEmail = normLabel.includes('email') || normType === 'email';
                    const isNumericValueAllowedZero = normLabel.includes('grade') || normLabel.includes('division') || normLabel.includes('year') || normLabel.includes('fee') || normLabel.includes('amount') || normLabel.includes('cost');
                    if (!isNumericValueAllowedZero && (val === 0 || strVal === '0' || /^0+$/.test(strVal))) {
                        return '';
                    }
                    if ((isPhone || isEmail) && (val === 0 || strVal === '0' || /^0+$/.test(strVal))) {
                        return '';
                    }
                    return val;
                }

                // Phone Number Formatting (XXX) XXX XXXX
                function formatPhoneNumber(value) {
                    if (!value) return '';
                    let digits = value.toString().replace(/\D/g, '');
                    if (digits === '0' || /^0+$/.test(digits)) return '';
                    if (digits.length > 10) digits = digits.substring(0, 10);

                    if (digits.length === 0) return '';
                    if (digits.length <= 3) return '(' + digits;
                    if (digits.length <= 6) return '(' + digits.substring(0, 3) + ') ' + digits.substring(3);
                    return '(' + digits.substring(0, 3) + ') ' + digits.substring(3, 6) + ' ' + digits.substring(6);
                }

                // Email Address Validation (Valid structure, domain extension must be letters only, e.g. .com, no digits like .c0m)
                function isValidEmail(value) {
                    if (!value || typeof value !== 'string') return false;
                    const val = value.trim();
                    if (!val) return false;
                    if (val.toLowerCase() === 'test-data@example.com') return false;

                    // Must match user@domain.tld with domain extension having letters only (at least 2 letters, no digits like c0m)
                    const emailRegex = /^[a-zA-Z0-9._%+-]+@([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*\.)+[a-zA-Z]{2,}$/;
                    if (!emailRegex.test(val)) return false;

                    // Ensure no consecutive dots
                    if (val.includes('..')) return false;

                    // Verify top-level domain (TLD) is letters only (no numbers like .c0m, .n3t, etc.)
                    const lastDot = val.lastIndexOf('.');
                    if (lastDot === -1) return false;
                    const tld = val.substring(lastDot + 1);
                    if (!/^[a-zA-Z]{2,}$/.test(tld)) return false;

                    return true;
                }

                // Helper to validate whether a date string is non-empty and not a MySQL zero date
                function isValidDateString(dateStr) {
                    if (!dateStr) return false;
                    const str = String(dateStr).trim();
                    if (str === '' || str === '0' || str.startsWith('0000') || str === '00/00/0000' || str === '00-00-0000') return false;
                    return true;
                }

                // Helper to format any date string into ISO format (YYYY-MM-DD) for native <input type="date">
                function formatDateToYYYYMMDD(dateStr) {
                    if (!isValidDateString(dateStr)) return '';
                    dateStr = String(dateStr).trim();

                    // Already YYYY-MM-DD
                    const isoMatch = dateStr.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
                    if (isoMatch) {
                        const [, y, m, d] = isoMatch;
                        if (parseInt(y, 10) === 0 || parseInt(m, 10) === 0 || parseInt(d, 10) === 0) return '';
                        return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
                    }

                    // MM/DD/YYYY or DD/MM/YYYY
                    const slashMatch = dateStr.match(/^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})/);
                    if (slashMatch) {
                        const [, part1, part2, y] = slashMatch;
                        if (parseInt(y, 10) === 0) return '';
                        const p1 = parseInt(part1, 10);
                        const p2 = parseInt(part2, 10);
                        if (p1 > 12 && p2 <= 12) {
                            return `${y}-${part2.padStart(2, '0')}-${part1.padStart(2, '0')}`;
                        }
                        return `${y}-${part1.padStart(2, '0')}-${part2.padStart(2, '0')}`;
                    }

                    try {
                        const d = new Date(dateStr);
                        if (!isNaN(d.getTime()) && d.getFullYear() > 1900) {
                            const m = String(d.getMonth() + 1).padStart(2, '0');
                            const day = String(d.getDate()).padStart(2, '0');
                            const y = d.getFullYear();
                            return `${y}-${m}-${day}`;
                        }
                    } catch (e) {}

                    return dateStr;
                }

                // Helper to format any date string into MM/DD/YYYY format for display
                function formatToMMDDYYYY(dateStr) {
                    if (!isValidDateString(dateStr)) return '';
                    dateStr = String(dateStr).trim();

                    // ISO format: YYYY-MM-DD
                    const isoMatch = dateStr.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
                    if (isoMatch) {
                        const [, y, m, d] = isoMatch;
                        if (parseInt(y, 10) === 0 || parseInt(m, 10) === 0 || parseInt(d, 10) === 0) return '';
                        return `${m.padStart(2, '0')}/${d.padStart(2, '0')}/${y}`;
                    }

                    // DD/MM/YYYY or MM/DD/YYYY
                    const slashMatch = dateStr.match(/^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})/);
                    if (slashMatch) {
                        const [, part1, part2, y] = slashMatch;
                        if (parseInt(y, 10) === 0) return '';
                        const p1 = parseInt(part1, 10);
                        const p2 = parseInt(part2, 10);
                        if (p1 > 12 && p2 <= 12) {
                            return `${part2.padStart(2, '0')}/${part1.padStart(2, '0')}/${y}`;
                        }
                        if (p2 > 12 && p1 <= 12) {
                            return `${part1.padStart(2, '0')}/${part2.padStart(2, '0')}/${y}`;
                        }
                        return `${part1.padStart(2, '0')}/${part2.padStart(2, '0')}/${y}`;
                    }

                    try {
                        const d = new Date(dateStr);
                        if (!isNaN(d.getTime()) && d.getFullYear() > 1900) {
                            const m = String(d.getMonth() + 1).padStart(2, '0');
                            const day = String(d.getDate()).padStart(2, '0');
                            const y = d.getFullYear();
                            return `${m}/${day}/${y}`;
                        }
                    } catch (e) {}

                    return dateStr;
                }

                // Helper to sanitize field labels: suppress generic "Text" / "text" labels as requested
                function cleanFieldLabel(label) {
                    if (!label) return '';
                    const trimmed = String(label).trim();
                    if (trimmed.toLowerCase() === 'text') {
                        return '';
                    }
                    return trimmed;
                }

                // Helper to get fallback priority for form section groups to guarantee proper sequence (Name -> Personal Info -> Address -> Phone -> Email -> Emergency -> Comments -> Additional -> Custom)
                function getGroupPriority(groupName) {
                    const name = (groupName || '').toLowerCase().trim();
                    if (name === 'name' || name === 'name details') return 10;
                    if (name === 'personal info' || name === 'player info' || name === 'personal details') return 20;
                    if (name.includes('address')) return 30;
                    if (name.includes('phone') || name.includes('contact')) return 40;
                    if (name.includes('email')) return 50;
                    if (name.includes('emergency')) return 60;
                    if (name.includes('comment') || name.includes('memo')) return 70;
                    if (name.includes('additional') || name.includes('custom')) return 80;
                    return 90;
                }

                // Toggle accordion section
                function toggleSection(id, header) {
                    const section = document.getElementById(id);
                    const icon = header.querySelector('.accordion-icon');
                    const isOpen = section.classList.contains('accordion-open');

                    // Close all accordions first
                    const allSections = document.querySelectorAll('.accordion-content');
                    const allIcons = document.querySelectorAll('.accordion-icon');

                    allSections.forEach(s => s.classList.remove('accordion-open'));
                    allIcons.forEach(i => i.classList.add('rotated'));

                    // If it was closed, open it now
                    if (!isOpen) {
                        section.classList.add('accordion-open');
                        if (icon) icon.classList.remove('rotated');

                        // Check if this is a Player page accordion — auto-fetch player data
                        const pageIdMatch = id.match(/^page-(\d+)$/);
                        if (pageIdMatch) {
                            const numericPageId = parseInt(pageIdMatch[1]);
                            const page = allPagesMap[numericPageId];

                            // Explicitly fetch divisions if opening a Level/Division selection page
                            const isLevelListPage = page && (
                                (page.file && (page.file.includes('levellist.php') || page.file.includes('levelist.php'))) ||
                                (page.name && (
                                    page.name.toLowerCase().trim().includes('level') ||
                                    page.name.toLowerCase().trim().includes('division')
                                ))
                            );

                            if (isLevelListPage) {
                                console.log(`🔄 Level Selection opened — explicitly fetching divisions for page ${numericPageId}`);
                                (async () => {
                                    await fetchAllDivisionsForLevelPage(numericPageId);
                                    renderLevelListDropdown(numericPageId);
                                })();
                            }

                            if (playerPages[numericPageId]) {
                                // If this was a saved single-player accordion being re-opened for editing,
                                // clear the saved state so the user must save again after editing
                                const sectionWrapper = document.getElementById(`section-wrapper-${numericPageId}`);
                                const hasDirectPlayerToggle = isAdultLeaguePlayer || !!localStorage.getItem('player_id');
                                if (sectionWrapper && sectionWrapper.getAttribute('data-saved') === 'true' && hasDirectPlayerToggle && updatedPlayerIds.size === 1) {
                                    // Remove saved state — user is editing
                                    sectionWrapper.removeAttribute('data-saved');

                                    // Reset header title back to page name if it's an identity page
                                    const headerTitle = document.getElementById(`header-title-${numericPageId}`);
                                    if (headerTitle) {
                                        const pName = (page.name || '').toLowerCase();
                                        const isIdentityPage = (pName.includes('player') || pName.includes('children') || pName.includes('minor') || page.fields.some(f => f.label.toLowerCase().includes('first name'))) && !pName.includes('preference') && !pName.includes('waiver') && !pName.includes('conduct') && !pName.includes('comment');
                                        if (isIdentityPage) {
                                            headerTitle.textContent = typeof normalizePageTitle === 'function' ? normalizePageTitle(page.name) : page.name;
                                        }
                                    }

                                    // Keep checkmark hidden (single player, not yet re-saved)
                                    const headerCheckmark = document.getElementById(`header-checkmark-${numericPageId}`);
                                    if (headerCheckmark) {
                                        headerCheckmark.classList.add('hidden');
                                    }
                                }

                                // Skip auto-fetch when re-opening a single-player accordion for editing
                                // (the form already has data filled in from the previous save)
                                const hasDirectPlayer = isAdultLeaguePlayer || !!localStorage.getItem('player_id');
                                const isSinglePlayerReEdit = (hasDirectPlayer && updatedPlayerIds.size === 1 && currentlyEditingPlayerId);

                                if (!isSinglePlayerReEdit) {
                                    if (currentlyEditingPlayerId) {
                                        // Re-fetch data for the currently editing player
                                         const selectedId = currentlyEditingPlayerId;
                                        const player = playersList.find(p => p.player_id == selectedId);
                                        const playerName = player ? `${player.first_name} ${player.last_name}` : '';
                                        // console.log(`🔄 Player accordion opened — fetching data for active player ${selectedId}`);
                                        onPlayerSelect(selectedId, playerName, true);
                                    } else if (!isRegistrationSet && selectedPlayerIds.size > 0) {
                                        // Single form flow: auto-populate the last selected player
                                        const selectedId = Array.from(selectedPlayerIds)[selectedPlayerIds.size - 1];
                                        const player = playersList.find(p => p.player_id == selectedId);
                                        const playerName = player ? `${player.first_name} ${player.last_name}` : '';
                                        onPlayerSelect(selectedId, playerName, true);
                                    } else if (!isRegistrationSet && playersList.length > 0 && !isAdultLeaguePlayer) {
                                        // Single form flow: auto-select the first player in the list by default
                                        const player = playersList[0];
                                        const playerName = `${player.first_name || ''} ${player.last_name || ''}`.trim() || 'Player';
                                        // console.log(`🔄 Player accordion opened — auto-selecting first player ${player.player_id} (${playerName})`);
                                        onPlayerSelect(player.player_id, playerName, true);
                                    } else {
                                        // If multi-player registration set or players exist but none is currentlyEditingPlayerId
                                        if (isRegistrationSet || playersList.length > 0) {
                                            // console.log(`🔄 Player accordion opened — rendering empty fields.`);
                                            playerFieldValues = {};
                                            Object.values(playerPages).forEach(page => {
                                                const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                                if (container) {
                                                    container.innerHTML = generatePlayerFields(page, false);
                                                }
                                            });
                                        } else {
                                            // No players in list — use player_id from localStorage (set during login)
                                        const loggedInPlayerId = localStorage.getItem('player_id');
                                        if (loggedInPlayerId) {
                                            // console.log(`🔄 Player accordion opened — fetching data using login player_id: ${loggedInPlayerId}`);
                                            (async () => {
                                                try {
                                                    const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                                                        method: 'POST',
                                                        headers: {
                                                            'Content-Type': 'application/json',
                                                            'X-Organisation': authOrganisation,
                                                            'X-Token': authToken,
                                                        },
                                                        body: JSON.stringify({
                                                            query: `query FetchPlayerData {
                                                                fetchPlayerData(player_id: ${loggedInPlayerId}) {
                                                                    player_id
                                                                    registration_id
                                                                    form_id
                                                                    page_id
                                                                    fields {
                                                                        field_id
                                                                        label
                                                                        value
                                                                    }
                                                                }
                                                            }`
                                                        })
                                                    });

                                                    const result = await response.json();
                                                    // console.log('✅ FetchPlayerData API Response:', JSON.stringify(result, null, 2));

                                                    playerFieldValues = {};

                                                    if (result.data && result.data.fetchPlayerData) {
                                                        const playerData = result.data.fetchPlayerData;
                                                        const parsedPlayerId = parseInt(loggedInPlayerId);
                                                        // console.log(`✅ Player Data — player_id: ${playerData.player_id}, form_id: ${playerData.form_id}, page_id: ${playerData.page_id}, registration_id: ${playerData.registration_id}`);

                                                        // Map fields to playerFieldValues
                                                        if (playerData.fields && Array.isArray(playerData.fields)) {
                                                            playerData.fields.forEach(field => {
                                                                if (field.label && field.value !== null && field.value !== undefined) {
                                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                                    const cleanLabel = field.label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                                                    const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                                                    if (cleanVal !== '') {
                                                                        playerFieldValues[normalizedLabel] = cleanVal;
                                                                        playerFieldValues[cleanLabel] = cleanVal;
                                                                        if (cleanLabel.includes('birth') || cleanLabel.includes('dob') || normalizedLabel.includes('birth') || normalizedLabel.includes('dob')) {
                                                                            playerFieldValues['date of birth'] = cleanVal;
                                                                            playerFieldValues['birth date'] = cleanVal;
                                                                            playerFieldValues['birthdate'] = cleanVal;
                                                                            playerFieldValues['dob'] = cleanVal;
                                                                            playerFieldValues['player - date of birth'] = cleanVal;
                                                                            playerFieldValues['player - birthdate'] = cleanVal;
                                                                            playerFieldValues['player - dob'] = cleanVal;
                                                                        }
                                                                        if (field.field_id) {
                                                                            playerFieldValues[`id_${field.field_id}`] = cleanVal;
                                                                        }
                                                                    }
                                                                }
                                                            });
                                                        }

                                                        // console.log('✅ All playerFieldValues:', playerFieldValues);

                                                        // Add player to playersList if not already there
                                                        const pFirstName = playerFieldValues['first name'] || '';
                                                        const pLastName = playerFieldValues['last name'] || '';
                                                        if (!playersList.some(p => p.player_id == parsedPlayerId)) {
                                                            playersList.push({
                                                                player_id: parsedPlayerId,
                                                                first_name: pFirstName,
                                                                last_name: pLastName,
                                                                fields: Object.entries(playerFieldValues).map(([label, value]) => ({ label, value }))
                                                            });
                                                        }

                                                        // Mark as selected
                                                        selectedPlayerIds.add(parsedPlayerId);
                                                        currentlyEditingPlayerId = parsedPlayerId;

                                                        // Re-render player fields with pre-populated values
                                                        Object.values(playerPages).forEach(page => {
                                                            const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                                            if (container) {
                                                                container.innerHTML = generatePlayerFields(page, true);
                                                            }
                                                        });

                                                        // Update player selection UI
                                                        updatePlayerSelectionUI();
                                                    } else {
                                                        console.warn('⚠️ FetchPlayerData returned no data for player_id:', loggedInPlayerId);
                                                    }
                                                } catch (error) {
                                                    console.error('❌ Error fetching player data on accordion open:', error);
                                                }
                                            })();
                                        }
                                    }
                                }
                            }
                            }
                        }

                        // Scroll to the top of this accordion gently
                        setTimeout(() => {
                            const offset = 80; // Accounting for fixed navbar
                            const container = document.getElementById('content');
                            const elementPosition = header.parentElement.getBoundingClientRect().top;
                            const offsetPosition = elementPosition + container.scrollTop - offset;

                            container.scrollTo({
                                top: offsetPosition,
                                behavior: 'smooth'
                            });
                        }, 50);
                    }
                }

                // Close a specific section accordion
                function closeAccordion(pageId) {
                    const section = document.getElementById(`page-${pageId}`);
                    if (section && section.classList.contains('accordion-open')) {
                        const accordionWrapper = section.closest('.bg-white.rounded-lg.border-2');
                        if (accordionWrapper) {
                            const header = accordionWrapper.querySelector('.bg-\\[var\\(--primary-theme-color\\)\\]');
                            if (header) {
                                section.classList.remove('accordion-open');
                                const icon = header.querySelector('.accordion-icon');
                                if (icon) icon.classList.add('rotated');
                            }
                        }
                    }
                }

                // Global variable for country dial codes
                const countryDialCodes = [
                    { name: "Afghanistan", dial_code: "+93", code: "AF", flag: "🇦🇫" },
                    { name: "Albania", dial_code: "+355", code: "AL", flag: "🇦🇱" },
                    { name: "Algeria", dial_code: "+213", code: "DZ", flag: "🇩🇿" },
                    { name: "American Samoa", dial_code: "+1684", code: "AS", flag: "🇦🇸" },
                    { name: "Andorra", dial_code: "+376", code: "AD", flag: "🇦🇩" },
                    { name: "Angola", dial_code: "+244", code: "AO", flag: "🇦🇴" },
                    { name: "Anguilla", dial_code: "+1264", code: "AI", flag: "🇦🇮" },
                    { name: "Antarctica", dial_code: "+672", code: "AQ", flag: "🇦🇶" },
                    { name: "Antigua and Barbuda", dial_code: "+1268", code: "AG", flag: "🇦🇬" },
                    { name: "Argentina", dial_code: "+54", code: "AR", flag: "🇦🇷" },
                    { name: "Armenia", dial_code: "+374", code: "AM", flag: "🇦🇲" },
                    { name: "Aruba", dial_code: "+297", code: "AW", flag: "🇦🇼" },
                    { name: "Australia", dial_code: "+61", code: "AU", flag: "🇦🇺" },
                    { name: "Austria", dial_code: "+43", code: "AT", flag: "🇦🇹" },
                    { name: "Azerbaijan", dial_code: "+994", code: "AZ", flag: "🇦🇿" },
                    { name: "Bahamas", dial_code: "+1242", code: "BS", flag: "🇧🇸" },
                    { name: "Bahrain", dial_code: "+973", code: "BH", flag: "🇧🇭" },
                    { name: "Bangladesh", dial_code: "+880", code: "BD", flag: "🇧🇩" },
                    { name: "Barbados", dial_code: "+1246", code: "BB", flag: "🇧🇧" },
                    { name: "Belarus", dial_code: "+375", code: "BY", flag: "🇧🇾" },
                    { name: "Belgium", dial_code: "+32", code: "BE", flag: "🇧🇪" },
                    { name: "Belize", dial_code: "+501", code: "BZ", flag: "🇧🇿" },
                    { name: "Benin", dial_code: "+229", code: "BJ", flag: "🇧🇯" },
                    { name: "Bermuda", dial_code: "+1441", code: "BM", flag: "🇧🇲" },
                    { name: "Bhutan", dial_code: "+975", code: "BT", flag: "🇧🇹" },
                    { name: "Bolivia", dial_code: "+591", code: "BO", flag: "🇧🇴" },
                    { name: "Bosnia and Herzegovina", dial_code: "+387", code: "BA", flag: "🇧🇦" },
                    { name: "Botswana", dial_code: "+267", code: "BW", flag: "🇧🇼" },
                    { name: "Brazil", dial_code: "+55", code: "BR", flag: "🇧🇷" },
                    { name: "British Indian Ocean Territory", dial_code: "+246", code: "IO", flag: "🇮🇴" },
                    { name: "Brunei", dial_code: "+673", code: "BN", flag: "🇧🇳" },
                    { name: "Bulgaria", dial_code: "+359", code: "BG", flag: "🇧🇬" },
                    { name: "Burkina Faso", dial_code: "+226", code: "BF", flag: "🇧🇫" },
                    { name: "Burundi", dial_code: "+257", code: "BI", flag: "🇧🇮" },
                    { name: "Cambodia", dial_code: "+855", code: "KH", flag: "🇰🇭" },
                    { name: "Cameroon", dial_code: "+237", code: "CM", flag: "🇨🇲" },
                    { name: "Canada", dial_code: "+1", code: "CA", flag: "🇨🇦" },
                    { name: "Cape Verde", dial_code: "+238", code: "CV", flag: "🇨🇻" },
                    { name: "Cayman Islands", dial_code: "+1345", code: "KY", flag: "🇰🇾" },
                    { name: "Central African Republic", dial_code: "+236", code: "CF", flag: "🇨🇫" },
                    { name: "Chad", dial_code: "+235", code: "TD", flag: "🇹🇩" },
                    { name: "Chile", dial_code: "+56", code: "CL", flag: "🇨🇱" },
                    { name: "China", dial_code: "+86", code: "CN", flag: "🇨🇳" },
                    { name: "Christmas Island", dial_code: "+61", code: "CX", flag: "🇨🇽" },
                    { name: "Cocos (Keeling) Islands", dial_code: "+61", code: "CC", flag: "🇨🇨" },
                    { name: "Colombia", dial_code: "+57", code: "CO", flag: "🇨🇴" },
                    { name: "Comoros", dial_code: "+269", code: "KM", flag: "🇰🇲" },
                    { name: "Congo", dial_code: "+242", code: "CG", flag: "🇨🇬" },
                    { name: "Cook Islands", dial_code: "+682", code: "CK", flag: "🇨🇰" },
                    { name: "Costa Rica", dial_code: "+506", code: "CR", flag: "🇨🇷" },
                    { name: "Croatia", dial_code: "+385", code: "HR", flag: "🇭🇷" },
                    { name: "Cuba", dial_code: "+53", code: "CU", flag: "🇨🇺" },
                    { name: "Cyprus", dial_code: "+357", code: "CY", flag: "🇨🇾" },
                    { name: "Czech Republic", dial_code: "+420", code: "CZ", flag: "🇨🇿" },
                    { name: "Denmark", dial_code: "+45", code: "DK", flag: "🇩🇰" },
                    { name: "Djibouti", dial_code: "+253", code: "DJ", flag: "🇩🇯" },
                    { name: "Dominica", dial_code: "+1767", code: "DM", flag: "🇩🇲" },
                    { name: "Dominican Republic", dial_code: "+1809", code: "DO", flag: "🇩🇴" },
                    { name: "Ecuador", dial_code: "+593", code: "EC", flag: "🇪🇨" },
                    { name: "Egypt", dial_code: "+20", code: "EG", flag: "🇪🇬" },
                    { name: "El Salvador", dial_code: "+503", code: "SV", flag: "🇸🇻" },
                    { name: "Equatorial Guinea", dial_code: "+240", code: "GQ", flag: "🇬🇶" },
                    { name: "Eritrea", dial_code: "+291", code: "ER", flag: "🇪🇷" },
                    { name: "Estonia", dial_code: "+372", code: "EE", flag: "🇪🇪" },
                    { name: "Ethiopia", dial_code: "+251", code: "ET", flag: "🇪🇹" },
                    { name: "Falkland Islands (Malvinas)", dial_code: "+500", code: "FK", flag: "🇫🇰" },
                    { name: "Faroe Islands", dial_code: "+298", code: "FO", flag: "🇫🇴" },
                    { name: "Fiji", dial_code: "+679", code: "FJ", flag: "🇫🇯" },
                    { name: "Finland", dial_code: "+358", code: "FI", flag: "🇫🇮" },
                    { name: "France", dial_code: "+33", code: "FR", flag: "🇫🇷" },
                    { name: "French Guiana", dial_code: "+594", code: "GF", flag: "🇬🇫" },
                    { name: "French Polynesia", dial_code: "+689", code: "PF", flag: "🇵🇫" },
                    { name: "Gabon", dial_code: "+241", code: "GA", flag: "🇬🇦" },
                    { name: "Gambia", dial_code: "+220", code: "GM", flag: "🇬🇲" },
                    { name: "Georgia", dial_code: "+995", code: "GE", flag: "🇬🇪" },
                    { name: "Germany", dial_code: "+49", code: "DE", flag: "🇩🇪" },
                    { name: "Ghana", dial_code: "+233", code: "GH", flag: "🇬🇭" },
                    { name: "Gibraltar", dial_code: "+350", code: "GI", flag: "🇬🇮" },
                    { name: "Greece", dial_code: "+30", code: "GR", flag: "🇬🇷" },
                    { name: "Greenland", dial_code: "+299", code: "GL", flag: "🇬🇱" },
                    { name: "Grenada", dial_code: "+1473", code: "GD", flag: "🇬🇩" },
                    { name: "Guadeloupe", dial_code: "+590", code: "GP", flag: "🇬🇵" },
                    { name: "Guam", dial_code: "+1671", code: "GU", flag: "🇬🇺" },
                    { name: "Guatemala", dial_code: "+502", code: "GT", flag: "🇬🇹" },
                    { name: "Guernsey", dial_code: "+44", code: "GG", flag: "🇬🇬" },
                    { name: "Guinea", dial_code: "+224", code: "GN", flag: "🇬🇳" },
                    { name: "Guinea-Bissau", dial_code: "+245", code: "GW", flag: "🇬🇼" },
                    { name: "Guyana", dial_code: "+592", code: "GY", flag: "🇬🇾" },
                    { name: "Haiti", dial_code: "+509", code: "HT", flag: "🇭🇹" },
                    { name: "Honduras", dial_code: "+504", code: "HN", flag: "🇭🇳" },
                    { name: "Hong Kong", dial_code: "+852", code: "HK", flag: "🇭🇰" },
                    { name: "Hungary", dial_code: "+36", code: "HU", flag: "🇭🇺" },
                    { name: "Iceland", dial_code: "+354", code: "IS", flag: "🇮🇸" },
                    { name: "India", dial_code: "+91", code: "IN", flag: "🇮🇳" },
                    { name: "Indonesia", dial_code: "+62", code: "ID", flag: "🇮🇩" },
                    { name: "Iran", dial_code: "+98", code: "IR", flag: "🇮🇷" },
                    { name: "Iraq", dial_code: "+964", code: "IQ", flag: "🇮🇶" },
                    { name: "Ireland", dial_code: "+353", code: "IE", flag: "🇮🇪" },
                    { name: "Isle of Man", dial_code: "+44", code: "IM", flag: "🇮🇲" },
                    { name: "Israel", dial_code: "+972", code: "IL", flag: "🇮🇱" },
                    { name: "Italy", dial_code: "+39", code: "IT", flag: "🇮🇹" },
                    { name: "Jamaica", dial_code: "+1876", code: "JM", flag: "🇯🇲" },
                    { name: "Japan", dial_code: "+81", code: "JP", flag: "🇯🇵" },
                    { name: "Jersey", dial_code: "+44", code: "JE", flag: "🇯🇪" },
                    { name: "Jordan", dial_code: "+962", code: "JO", flag: "🇯🇴" },
                    { name: "Kazakhstan", dial_code: "+7", code: "KZ", flag: "🇰🇿" },
                    { name: "Kenya", dial_code: "+254", code: "KE", flag: "🇰🇪" },
                    { name: "Kiribati", dial_code: "+686", code: "KI", flag: "🇰🇮" },
                    { name: "Kuwait", dial_code: "+965", code: "KW", flag: "🇰🇼" },
                    { name: "Kyrgyzstan", dial_code: "+996", code: "KG", flag: "🇰🇬" },
                    { name: "Laos", dial_code: "+856", code: "LA", flag: "🇱🇦" },
                    { name: "Latvia", dial_code: "+371", code: "LV", flag: "🇱🇻" },
                    { name: "Lebanon", dial_code: "+961", code: "LB", flag: "🇱🇧" },
                    { name: "Lesotho", dial_code: "+266", code: "LS", flag: "🇱🇸" },
                    { name: "Liberia", dial_code: "+231", code: "LR", flag: "🇱🇷" },
                    { name: "Libya", dial_code: "+218", code: "LY", flag: "🇱🇾" },
                    { name: "Liechtenstein", dial_code: "+423", code: "LI", flag: "🇱🇮" },
                    { name: "Lithuania", dial_code: "+370", code: "LT", flag: "🇱🇹" },
                    { name: "Luxembourg", dial_code: "+352", code: "LU", flag: "🇱🇺" },
                    { name: "Macao", dial_code: "+853", code: "MO", flag: "🇲🇴" },
                    { name: "Macedonia", dial_code: "+389", code: "MK", flag: "🇲🇰" },
                    { name: "Madagascar", dial_code: "+261", code: "MG", flag: "🇲🇬" },
                    { name: "Malawi", dial_code: "+265", code: "MW", flag: "🇲🇼" },
                    { name: "Malaysia", dial_code: "+60", code: "MY", flag: "🇲🇾" },
                    { name: "Maldives", dial_code: "+960", code: "MV", flag: "🇲🇻" },
                    { name: "Mali", dial_code: "+223", code: "ML", flag: "🇲🇱" },
                    { name: "Malta", dial_code: "+356", code: "MT", flag: "🇲🇹" },
                    { name: "Marshall Islands", dial_code: "+692", code: "MH", flag: "🇲🇭" },
                    { name: "Martinique", dial_code: "+596", code: "MQ", flag: "🇲🇶" },
                    { name: "Mauritania", dial_code: "+222", code: "MR", flag: "🇲🇷" },
                    { name: "Mauritius", dial_code: "+230", code: "MU", flag: "🇲🇺" },
                    { name: "Mayotte", dial_code: "+262", code: "YT", flag: "🇾🇹" },
                    { name: "Mexico", dial_code: "+52", code: "MX", flag: "🇲🇽" },
                    { name: "Micronesia", dial_code: "+691", code: "FM", flag: "🇫🇲" },
                    { name: "Moldova", dial_code: "+373", code: "MD", flag: "🇲🇩" },
                    { name: "Monaco", dial_code: "+377", code: "MC", flag: "🇲🇨" },
                    { name: "Mongolia", dial_code: "+976", code: "MN", flag: "🇲🇳" },
                    { name: "Montenegro", dial_code: "+382", code: "ME", flag: "🇲🇪" },
                    { name: "Montserrat", dial_code: "+1664", code: "MS", flag: "🇲🇸" },
                    { name: "Morocco", dial_code: "+212", code: "MA", flag: "🇲🇦" },
                    { name: "Mozambique", dial_code: "+258", code: "MZ", flag: "🇲🇿" },
                    { name: "Myanmar", dial_code: "+95", code: "MM", flag: "🇲🇲" },
                    { name: "Namibia", dial_code: "+264", code: "NA", flag: "🇳🇦" },
                    { name: "Nauru", dial_code: "+674", code: "NR", flag: "🇳🇷" },
                    { name: "Nepal", dial_code: "+977", code: "NP", flag: "🇳🇵" },
                    { name: "Netherlands", dial_code: "+31", code: "NL", flag: "🇳🇱" },
                    { name: "New Caledonia", dial_code: "+687", code: "NC", flag: "🇳🇨" },
                    { name: "New Zealand", dial_code: "+64", code: "NZ", flag: "🇳🇿" },
                    { name: "Nicaragua", dial_code: "+505", code: "NI", flag: "🇳🇮" },
                    { name: "Niger", dial_code: "+227", code: "NE", flag: "🇳🇪" },
                    { name: "Nigeria", dial_code: "+234", code: "NG", flag: "🇳🇬" },
                    { name: "Niue", dial_code: "+683", code: "NU", flag: "🇳🇺" },
                    { name: "Norfolk Island", dial_code: "+672", code: "NF", flag: "🇳🇫" },
                    { name: "North Korea", dial_code: "+850", code: "KP", flag: "🇰🇵" },
                    { name: "Northern Mariana Islands", dial_code: "+1670", code: "MP", flag: "🇲🇵" },
                    { name: "Norway", dial_code: "+47", code: "NO", flag: "🇳🇴" },
                    { name: "Oman", dial_code: "+968", code: "OM", flag: "🇴🇲" },
                    { name: "Pakistan", dial_code: "+92", code: "PK", flag: "🇵🇰" },
                    { name: "Palau", dial_code: "+680", code: "PW", flag: "🇵🇼" },
                    { name: "Palestinian Territory", dial_code: "+970", code: "PS", flag: "🇵🇸" },
                    { name: "Panama", dial_code: "+507", code: "PA", flag: "🇵🇦" },
                    { name: "Papua New Guinea", dial_code: "+675", code: "PG", flag: "🇵🇬" },
                    { name: "Paraguay", dial_code: "+595", code: "PY", flag: "🇵🇾" },
                    { name: "Peru", dial_code: "+51", code: "PE", flag: "🇵🇪" },
                    { name: "Philippines", dial_code: "+63", code: "PH", flag: "🇵🇭" },
                    { name: "Pitcairn", dial_code: "+870", code: "PN", flag: "🇵🇳" },
                    { name: "Poland", dial_code: "+48", code: "PL", flag: "🇵🇱" },
                    { name: "Portugal", dial_code: "+351", code: "PT", flag: "🇵🇹" },
                    { name: "Puerto Rico", dial_code: "+1787", code: "PR", flag: "🇵🇷" },
                    { name: "Qatar", dial_code: "+974", code: "QA", flag: "🇶🇦" },
                    { name: "Reunion", dial_code: "+262", code: "RE", flag: "🇷🇪" },
                    { name: "Romania", dial_code: "+40", code: "RO", flag: "🇷🇴" },
                    { name: "Russia", dial_code: "+7", code: "RU", flag: "🇷🇺" },
                    { name: "Rwanda", dial_code: "+250", code: "RW", flag: "🇷🇼" },
                    { name: "Saint Helena", dial_code: "+290", code: "SH", flag: "🇸🇭" },
                    { name: "Saint Kitts and Nevis", dial_code: "+1869", code: "KN", flag: "🇰🇳" },
                    { name: "Saint Lucia", dial_code: "+1758", code: "LC", flag: "🇱🇨" },
                    { name: "Saint Pierre and Miquelon", dial_code: "+508", code: "PM", flag: "🇵🇲" },
                    { name: "Saint Vincent and the Grenadines", dial_code: "+1784", code: "VC", flag: "🇻🇨" },
                    { name: "Samoa", dial_code: "+685", code: "WS", flag: "🇼🇸" },
                    { name: "San Marino", dial_code: "+378", code: "SM", flag: "🇸🇲" },
                    { name: "Sao Tome and Principe", dial_code: "+239", code: "ST", flag: "🇸🇹" },
                    { name: "Saudi Arabia", dial_code: "+966", code: "SA", flag: "🇸🇦" },
                    { name: "Senegal", dial_code: "+221", code: "SN", flag: "🇸🇳" },
                    { name: "Serbia", dial_code: "+381", code: "RS", flag: "🇷🇸" },
                    { name: "Seychelles", dial_code: "+248", code: "SC", flag: "🇸🇨" },
                    { name: "Sierra Leone", dial_code: "+232", code: "SL", flag: "🇸🇱" },
                    { name: "Singapore", dial_code: "+65", code: "SG", flag: "🇸🇬" },
                    { name: "Slovakia", dial_code: "+421", code: "SK", flag: "🇸🇰" },
                    { name: "Slovenia", dial_code: "+386", code: "SI", flag: "🇸🇮" },
                    { name: "Solomon Islands", dial_code: "+677", code: "SB", flag: "🇸🇧" },
                    { name: "Somalia", dial_code: "+252", code: "SO", flag: "🇸🇴" },
                    { name: "South Africa", dial_code: "+27", code: "ZA", flag: "🇿🇦" },
                    { name: "South Georgia and the South Sandwich Islands", dial_code: "+500", code: "GS", flag: "🇬🇸" },
                    { name: "South Korea", dial_code: "+82", code: "KR", flag: "🇰🇷" },
                    { name: "Spain", dial_code: "+34", code: "ES", flag: "🇪🇸" },
                    { name: "Sri Lanka", dial_code: "+94", code: "LK", flag: "🇱🇰" },
                    { name: "Sudan", dial_code: "+249", code: "SD", flag: "🇸🇩" },
                    { name: "Suriname", dial_code: "+597", code: "SR", flag: "🇸🇷" },
                    { name: "Svalbard and Jan Mayen", dial_code: "+47", code: "SJ", flag: "🇸🇯" },
                    { name: "Swaziland", dial_code: "+268", code: "SZ", flag: "🇸🇿" },
                    { name: "Sweden", dial_code: "+46", code: "SE", flag: "🇸🇪" },
                    { name: "Switzerland", dial_code: "+41", code: "CH", flag: "🇨🇭" },
                    { name: "Syria", dial_code: "+963", code: "SY", flag: "🇸🇾" },
                    { name: "Taiwan", dial_code: "+886", code: "TW", flag: "🇹🇼" },
                    { name: "Tajikistan", dial_code: "+992", code: "TJ", flag: "🇹🇯" },
                    { name: "Tanzania", dial_code: "+255", code: "TZ", flag: "🇹🇿" },
                    { name: "Thailand", dial_code: "+66", code: "TH", flag: "🇹🇭" },
                    { name: "Timor-Leste", dial_code: "+670", code: "TL", flag: "🇹🇱" },
                    { name: "Togo", dial_code: "+228", code: "TG", flag: "🇹🇬" },
                    { name: "Tokelau", dial_code: "+690", code: "TK", flag: "🇹🇰" },
                    { name: "Tonga", dial_code: "+676", code: "TO", flag: "🇹🇴" },
                    { name: "Trinidad and Tobago", dial_code: "+1868", code: "TT", flag: "🇹🇹" },
                    { name: "Tunisia", dial_code: "+216", code: "TN", flag: "🇹🇳" },
                    { name: "Turkey", dial_code: "+90", code: "TR", flag: "🇹🇷" },
                    { name: "Turkmenistan", dial_code: "+993", code: "TM", flag: "🇹🇲" },
                    { name: "Turks and Caicos Islands", dial_code: "+1649", code: "TC", flag: "🇹🇨" },
                    { name: "Tuvalu", dial_code: "+688", code: "TV", flag: "🇹🇻" },
                    { name: "Uganda", dial_code: "+256", code: "UG", flag: "🇺🇬" },
                    { name: "Ukraine", dial_code: "+380", code: "UA", flag: "🇺🇦" },
                    { name: "United Arab Emirates", dial_code: "+971", code: "AE", flag: "🇦🇪" },
                    { name: "United Kingdom", dial_code: "+44", code: "GB", flag: "🇬🇧" },
                    { name: "United States", dial_code: "+1", code: "US", flag: "🇺🇸" },
                    { name: "Uruguay", dial_code: "+598", code: "UY", flag: "🇺🇾" },
                    { name: "Uzbekistan", dial_code: "+998", code: "UZ", flag: "🇺🇿" },
                    { name: "Vanuatu", dial_code: "+678", code: "VU", flag: "🇻🇺" },
                    { name: "Vatican City State", dial_code: "+379", code: "VA", flag: "🇻🇦" },
                    { name: "Venezuela", dial_code: "+58", code: "VE", flag: "🇻🇪" },
                    { name: "Vietnam", dial_code: "+84", code: "VN", flag: "🇻🇳" },
                    { name: "Virgin Islands (British)", dial_code: "+1284", code: "VG", flag: "🇻🇬" },
                    { name: "Virgin Islands (U.S.)", dial_code: "+1340", code: "VI", flag: "🇻🇮" },
                    { name: "Wallis and Futuna", dial_code: "+681", code: "WF", flag: "🇼🇫" },
                    { name: "Western Sahara", dial_code: "+212", code: "EH", flag: "🇪🇭" },
                    { name: "Yemen", dial_code: "+967", code: "YE", flag: "🇾🇪" },
                    { name: "Zambia", dial_code: "+260", code: "ZM", flag: "🇿🇲" },
                    { name: "Zimbabwe", dial_code: "+263", code: "ZW", flag: "🇿🇼" }
                ];

                // Global variable to store field values from parent data
                let fieldValues = {};
                let parent2FieldValues = {}; // Store parent2 field values separately
                let globalParentId = null;
                let isParentSaved = false; // Track if parent information has been saved in this session
                let savedParentKeys = new Set(); // Track which parent IDs/numbers have been saved (e.g. 1 and 2 for 2 parents)

                // Update checkmark state for Parent section header (Green tick when ALL parents saved, Yellow tick when 1 parent saved)
                function updateParentHeaderCheckmark(pageId) {
                    try {
                        if (!pageId) {
                            const parentPage = Object.values(allPagesMap || {}).find(p => {
                                const pageName = (p.name || '').toLowerCase().trim();
                                return (pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account')) &&
                                    !pageName.includes('preference') && !pageName.includes('waiver') && !pageName.includes('conduct') &&
                                    !pageName.includes('rules') && !pageName.includes('comment') && !pageName.includes('selection') &&
                                    !pageName.includes('returning') && !pageName.includes('contact') && !pageName.includes('pledge') &&
                                    !pageName.includes('policy') && !pageName.includes('agreement');
                            });
                            if (parentPage) pageId = parentPage.page_id;
                        }
                        if (!pageId) return;

                        const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                        const sectionWrapper = document.getElementById(`section-wrapper-${pageId}`);
                        if (!headerCheckmark) return;

                        let totalParents = 1;
                        if (typeof familyCircleParents !== 'undefined' && familyCircleParents && familyCircleParents.length > 0) {
                            totalParents = familyCircleParents.length;
                        } else if (typeof hasTwoParents !== 'undefined' && hasTwoParents) {
                            totalParents = 2;
                        }

                        const savedCount = savedParentKeys.size;

                        if (savedCount === 0) {
                            headerCheckmark.classList.add('hidden');
                            headerCheckmark.classList.remove('text-green-500', 'text-yellow-500');
                            if (sectionWrapper) sectionWrapper.removeAttribute('data-saved');
                        } else if (savedCount >= totalParents) {
                            // ALL parents saved -> show GREEN tick!
                            headerCheckmark.classList.remove('hidden', 'text-yellow-500');
                            headerCheckmark.classList.add('text-green-500');
                            if (sectionWrapper) sectionWrapper.setAttribute('data-saved', 'true');
                            // console.log(`✅ Parent section checkmark: All ${totalParents} parent(s) saved -> GREEN tick displayed.`);
                        } else {
                            // Only 1 out of 2 parents (or partial parents) saved -> show YELLOW tick!
                            headerCheckmark.classList.remove('hidden', 'text-green-500');
                            headerCheckmark.classList.add('text-yellow-500');
                            if (sectionWrapper) sectionWrapper.setAttribute('data-saved', 'true');
                            // console.log(`⚠️ Parent section checkmark: Partial parent save (${savedCount}/${totalParents}) -> YELLOW tick displayed.`);
                        }
                    } catch (e) {
                        console.error('Error in updateParentHeaderCheckmark:', e);
                    }
                }

                // Parent switching state
                let hasTwoParents = false;
                let activeParentNumber = 1; // Which parent is currently displayed (1 or 2)
                let parent1Name = null;
                let parent2Name = null;
                let parentId1 = null;
                let parentId2 = null;
                let parent1FieldsRaw = []; // Raw field data from API for parent1
                let parent2FieldsRaw = []; // Raw field data from API for parent2

                // Family Circle parent list (fetched from fetchFamilyCircleParentsByToken)
                let familyCircleParents = []; // [{parent_id, first_name, last_name}, ...]
                let loggedInParentId = null;  // The parent_id of the currently logged-in user
                let activeParentId = null;    // The parent_id currently selected in the switcher

                // Global variable to store player field values (for Children/Player page)
                let playerFieldValues = {};

                // Global variable to store players list
                let playersList = [];
                let selectedPlayerIds = new Set();
                let updatedPlayerIds = new Set(); // Track players that have been updated/saved
                let excludedPlayerIds = new Set(); // Track players unchecked from registration (data kept in draft)
                let playerPages = {};
                let currentlyEditingPlayerId = null; // Track which player is currently being edited/autofilled

                let globalPayCred = '';
                let globalPayTesting = '1';

                // Parent switching function - swaps field values and re-populates form inputs
                function switchParent(parentNum, pageId) {
                    if (parentNum === activeParentNumber) return;

                    // Save current field values from DOM before switching
                    const pageContainer = document.getElementById(`page-content-${pageId}`);
                    if (pageContainer) {
                        const inputs = pageContainer.querySelectorAll('input, select, textarea');
                        const targetMap = activeParentNumber === 1 ? fieldValues : parent2FieldValues;
                        inputs.forEach(input => {
                            if (input.type !== 'button' && input.name) {
                                const dataFieldId = input.getAttribute('data-field-id');
                                // Try to find matching field to get label
                                const page = (pageId && allPagesMap[pageId]) || Object.values(allPagesMap).find(p => {
                                    const pn = (p.name || '').toLowerCase().trim();
                                    return pn.includes('parent') || pn.includes('guardian');
                                });
                                if (page && page.fields) {
                                    let field = null;
                                    if (dataFieldId) {
                                        field = page.fields.find(f => f.field_id == dataFieldId || f.fieldid == dataFieldId);
                                    }
                                    if (!field && input.name) {
                                        field = page.fields.find(f => f.page_field_name === input.name);
                                    }
                                    if (field && field.label) {
                                        const normalizedLabel = field.label.toLowerCase().trim();
                                        if (input.type === 'radio') {
                                            if (input.checked) {
                                                targetMap[normalizedLabel] = input.value;
                                                if (field.field_id) {
                                                    targetMap[`id_${field.field_id}`] = input.value;
                                                }
                                            }
                                        } else {
                                            let val = '';
                                            if (input.type === 'checkbox') {
                                                val = input.checked ? "1" : "0";
                                            } else if (input.type === 'file') {
                                                val = input.getAttribute('data-uploaded-url') || '';
                                            } else {
                                                val = input.value;
                                            }
                                            targetMap[normalizedLabel] = val;
                                            if (field.field_id) {
                                                targetMap[`id_${field.field_id}`] = val;
                                            }
                                        }
                                    }
                                }
                            }
                        });

                        if (activeParentNumber === 1) {
                            const p1F = fieldValues['first name'] || fieldValues['firstname'] || '';
                            const p1L = fieldValues['last name'] || fieldValues['lastname'] || '';
                            if (p1F || p1L) parent1Name = `${p1F} ${p1L}`.trim();
                        } else if (activeParentNumber === 2) {
                            const p2F = parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '';
                            const p2L = parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '';
                            if (p2F || p2L) parent2Name = `${p2F} ${p2L}`.trim();
                        }
                    }

                    activeParentNumber = parentNum;

                    // Swap the active values into the inputs
                    const newValues = parentNum === 1 ? fieldValues : parent2FieldValues;
                    if (pageContainer) {
                        const inputs = pageContainer.querySelectorAll('input, select, textarea');
                        inputs.forEach(input => {
                            if (input.type === 'button') return;
                            const dataFieldId = input.getAttribute('data-field-id');

                            // Find matching field for label lookup
                            const page = (pageId && allPagesMap[pageId]) || Object.values(allPagesMap).find(p => {
                                const pn = (p.name || '').toLowerCase().trim();
                                return pn.includes('parent') || pn.includes('guardian');
                            });
                            if (!page || !page.fields) return;

                            let field = null;
                            if (dataFieldId) {
                                field = page.fields.find(f => f.field_id == dataFieldId || f.fieldid == dataFieldId);
                            }
                            if (!field && input.name) {
                                field = page.fields.find(f => f.page_field_name === input.name);
                            }
                            if (!field) return;

                            const normalizedLabel = (field.label || '').toLowerCase().trim();
                            let newVal = fuzzyLookupValue(newValues, field.field_id, field.label);
                            if (newVal === undefined) newVal = '';

                            const isCcField = (field.label && (field.label.toLowerCase().includes('country code') || field.label.toLowerCase().includes('phone code') || field.label.toLowerCase().includes('code'))) ||
                                              (input.name && (input.name.toLowerCase().includes('countrycode') || input.name.toLowerCase().includes('phonecode')));

                            if (isCcField && !newVal) {
                                newVal = '+1';
                            }

                            // Update data-player-id on file inputs
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                input.setAttribute('data-player-id', parentNum === 2 ? 'parent_2' : 'parent');
                                input.setAttribute('onchange', `handleProfilePictureUpload(this, '${parentNum === 2 ? 'parent_2' : 'parent'}')`);
                            }

                            if (input.type === 'checkbox') {
                                input.checked = (newVal === '1' || newVal === 'true' || newVal === true);
                            } else {
                                window.setInputValue(input, newVal);
                            }
                        });
                    }

                    // Update radio button styling
                    document.querySelectorAll('.parent-switch-radio').forEach(radio => {
                        radio.checked = (parseInt(radio.value) === parentNum);
                    });

                    console.log(`🔄 Switched to Parent ${parentNum}: ${parentNum === 1 ? parent1Name : parent2Name}`);
                    if (typeof refreshCustomPages === 'function') {
                        refreshCustomPages();
                    }
                }

                // Global switchParentById helper for dynamic family circle parents list
                window.switchParentById = function(parentId, pageId) {
                    activeParentId = parentId;
                    if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 0) {
                        const idx = familyCircleParents.findIndex(p => p.parent_id == parentId);
                        if (idx !== -1) {
                            switchParent(idx + 1, pageId);
                        }
                    }
                };

                // Generate parent switcher HTML — uses familyCircleParents list when available
                function getParentSwitcherHtml(pageId) {
                    // Use dynamic family circle parents list if available
                    if (familyCircleParents.length > 0) {
                        const radios = familyCircleParents.map((parent, idx) => {
                            const fullName = `${parent.first_name || ''} ${parent.last_name || ''}`.trim() || `Parent ${idx + 1}`;
                            const isChecked = (activeParentId && parent.parent_id == activeParentId) ||
                                              (loggedInParentId && parent.parent_id == loggedInParentId) ||
                                              (!activeParentId && !loggedInParentId && idx === 0);
                            return `
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <div class="relative flex items-center justify-center">
                                        <input type="radio" name="parent-switch-${pageId}" value="${parent.parent_id}"
                                               class="parent-switch-radio appearance-none w-6 h-6 border-2 border-[var(--primary-theme-color)] rounded-full checked:bg-white transition-all cursor-pointer"
                                               ${isChecked ? 'checked' : ''}
                                               onchange="switchParentById(${parent.parent_id}, '${pageId}')">
                                        <div class="absolute w-3 h-3 rounded-full bg-[var(--primary-theme-color)] transform scale-0 group-has-[:checked]:scale-100 transition-transform"></div>
                                    </div>
                                    <span class="text-sm font-medium text-gray-700 group-hover:text-[var(--primary-theme-color)] transition-colors">${fullName}${isChecked ? ' (You)' : ''}</span>
                                </label>
                            `;
                        }).join('');
                        return `
                            <div id="parent-switcher-${pageId}" class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <p class="text-xs font-semibold text-gray-500 mb-3 tracking-wider uppercase">Select Parent to Edit</p>
                                <div class="flex flex-col sm:flex-row gap-4">
                                    ${radios}
                                </div>
                            </div>
                        `;
                    }
                    // Fallback: use old hasTwoParents logic
                    if (hasTwoParents) {
                        const p1Label = parent1Name ? `Parent 1: ${parent1Name}` : 'Parent 1';
                        const p2Label = parent2Name ? `Parent 2: ${parent2Name}` : 'Parent 2';
                        return `
                            <div id="parent-switcher-${pageId}" class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <p class="text-xs font-semibold text-gray-500 mb-3 tracking-wider uppercase">Select Parent to Edit</p>
                                <div class="flex flex-col sm:flex-row gap-4">
                                    <label class="flex items-center gap-3 cursor-pointer group">
                                        <div class="relative flex items-center justify-center">
                                            <input type="radio" name="parent-switch-${pageId}" value="1"
                                                   class="parent-switch-radio appearance-none w-6 h-6 border-2 border-[var(--primary-theme-color)] rounded-full checked:bg-white transition-all cursor-pointer"
                                                   checked
                                                   onchange="switchParent(1, ${pageId})">
                                            <div class="absolute w-3 h-3 rounded-full bg-[var(--primary-theme-color)] transform scale-0 group-has-[:checked]:scale-100 transition-transform"></div>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700 group-hover:text-[var(--primary-theme-color)] transition-colors">${p1Label}</span>
                                    </label>
                                    <label class="flex items-center gap-3 cursor-pointer group">
                                        <div class="relative flex items-center justify-center">
                                            <input type="radio" name="parent-switch-${pageId}" value="2"
                                                   class="parent-switch-radio appearance-none w-6 h-6 border-2 border-[var(--primary-theme-color)] rounded-full checked:bg-white transition-all cursor-pointer"
                                                   onchange="switchParent(2, ${pageId})">
                                            <div class="absolute w-3 h-3 rounded-full bg-[var(--primary-theme-color)] transform scale-0 group-has-[:checked]:scale-100 transition-transform"></div>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700 group-hover:text-[var(--primary-theme-color)] transition-colors">${p2Label}</span>
                                    </label>
                                </div>
                            </div>
                        `;
                    } else if (parent1Name) {
                        // Single parent - show a checkbox style label
                        return `
                            <div id="parent-switcher-${pageId}" class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <label class="flex items-center gap-3">
                                    <div class="relative flex items-center justify-center">
                                        <input type="checkbox" checked disabled
                                               class="appearance-none w-6 h-6 border-2 border-[var(--primary-theme-color)] rounded checked:bg-white transition-all cursor-default">
                                        <div class="absolute w-3 h-3 rounded bg-[var(--primary-theme-color)] transform scale-100"></div>
                                    </div>
                                    <span class="text-sm font-medium text-gray-700">${parent1Name}</span>
                                </label>
                            </div>
                        `;
                    }
                    return '';
                }

                // Fuzzy lookup helper: finds value in a map by label,
                // handling mismatches like 'firstname' vs 'first name'
                function fuzzyLookupValue(map, fieldId, label) {
                    if (!map) return undefined;
                    // Try by field_id first
                    if (fieldId && map[`id_${fieldId}`] !== undefined) {
                        return map[`id_${fieldId}`];
                    }
                    // Try exact normalized label
                    const normalizedLabel = (label || '').toLowerCase().trim();
                    if (map[normalizedLabel] !== undefined) {
                        return map[normalizedLabel];
                    }
                    // Try clean label without 'Player - ' prefix
                    const cleanLabel = (label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                    if (map[cleanLabel] !== undefined) {
                        return map[cleanLabel];
                    }
                    // Fuzzy: strip spaces/underscores/hyphens
                    const stripped = normalizedLabel.replace(/[\s_\-]/g, '');
                    const strippedClean = cleanLabel.replace(/[\s_\-]/g, '');
                    for (const key in map) {
                        if (key.startsWith('id_')) continue;
                        const normKey = key.toLowerCase().replace(/[\s_\-]/g, '');
                        const cleanKey = key.replace(/^Player - /i, '').toLowerCase().replace(/[\s_\-]/g, '');
                        if (normKey === stripped || normKey === strippedClean || cleanKey === stripped || cleanKey === strippedClean) {
                            return map[key];
                        }
                    }
                    return undefined;
                }

                // Sync optional dbname and token query parameters if provided in URL
                (function syncUrlAuthParams() {
                    try {
                        const urlParams = new URLSearchParams(window.location.search);
                        const paramDb = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db');
                        const paramToken = urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token');

                        if (paramDb) {
                            localStorage.setItem('organisation', paramDb);
                            localStorage.setItem('last_db', paramDb);
                        }
                        if (paramToken) {
                            localStorage.setItem('authToken', paramToken);
                        }
                    } catch (e) {
                        console.error('Error parsing URL parameters:', e);
                    }
                })();

                function applyRegistrationThemeColor(themeColor) {
                    if (!themeColor || !themeColor.startsWith('#')) return;
                    document.documentElement.style.setProperty('--primary-theme-color', themeColor);
                    const hexToRgb = (hex) => {
                        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                        return result ? {
                            r: parseInt(result[1], 16),
                            g: parseInt(result[2], 16),
                            b: parseInt(result[3], 16)
                        } : null;
                    };
                    const rgb = hexToRgb(themeColor);
                    if (rgb) {
                        document.documentElement.style.setProperty('--primary-theme-rgb', `${rgb.r}, ${rgb.g}, ${rgb.b}`);
                    }
                    let dynamicStyle = document.getElementById('dynamic-branding-style');
                    if (!dynamicStyle) {
                        dynamicStyle = document.createElement('style');
                        dynamicStyle.id = 'dynamic-branding-style';
                        document.head.appendChild(dynamicStyle);
                    }
                    dynamicStyle.innerHTML = `
                        .stat-card { border-left-color: ${themeColor} !important; }
                        .sidebar-item:hover:not(.active) { background-color: rgba(255,255,255,0.1) !important; }
                        .btn-primary, .login-button, .signup-button, .login-button:hover, .signup-button:hover { background: ${themeColor} !important; }
                        #submit-registration-btn, #save-draft-btn { background-color: ${themeColor} !important; }
                        .material-input-group input:focus, .material-input-group select:focus, .material-input-group textarea:focus { border-bottom-color: ${themeColor} !important; }
                        .material-input-group input:focus+label, .material-input-group input:not(:placeholder-shown)+label, .material-input-group .label-float { color: ${themeColor} !important; }
                    `;
                }

                // If theme color is already in localStorage (previously fetched from league_colors table), apply it immediately
                (function initThemeColor() {
                    const themeColor = localStorage.getItem('themeColor');
                    if (themeColor && themeColor.startsWith('#')) {
                        applyRegistrationThemeColor(themeColor);
                    }
                })();

                // Fetch league colors and settings directly from league_colors table via GraphQL
                async function fetchLeagueSettings() {
                    try {
                        const urlParams = new URLSearchParams(window.location.search);
                        const organisation = localStorage.getItem('organisation') || urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || '';
                        const token = localStorage.getItem('authToken') || urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token') || '';

                        if (!organisation || !token) return;

                        const response = await fetch('{{ config('api.url') }}/graphql/authentication', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token
                            },
                            body: JSON.stringify({
                                query: `query FetchLeagueResource {
                                    fetchLeagueResource {
                                        name
                                        logo1
                                        primary_background
                                        secondary_background
                                        global_pay_credential
                                        global_pay_testing
                                    }
                                }`
                            })
                        });

                        const json = await response.json();
                        if (json.data && json.data.fetchLeagueResource) {
                            const settings = json.data.fetchLeagueResource;
                            globalPayCred = settings.global_pay_credential || '';
                            globalPayTesting = settings.global_pay_testing !== null ? String(settings.global_pay_testing) : '1';
                            console.log('💳 Global Payments settings loaded:', { globalPayCred, globalPayTesting });

                            // Apply branding theme color purely from league_colors table (primary_background & secondary_background)
                            const primary = settings.primary_background;
                            const secondary = settings.secondary_background;
                            if (primary || secondary) {
                                const getBrightness = (hex) => {
                                    if (!hex || typeof hex !== 'string' || !hex.startsWith('#')) return 255;
                                    const h = hex.replace('#', '');
                                    const r = parseInt(h.substr(0, 2), 16);
                                    const g = parseInt(h.substr(2, 2), 16);
                                    const b = parseInt(h.substr(4, 2), 16);
                                    return (r * 299 + g * 587 + b * 114) / 1000;
                                };

                                const p = primary || secondary;
                                const s = secondary || primary;
                                const b1 = getBrightness(p);
                                const b2 = getBrightness(s);
                                const themeColor = b1 < b2 ? p : s;
                                if (themeColor && themeColor.startsWith('#')) {
                                    localStorage.setItem('themeColor', themeColor);
                                    applyRegistrationThemeColor(themeColor);
                                }
                            }
                        }
                    } catch (error) {
                        console.error('Error fetching league settings:', error);
                    }
                }

                // Call this on page load or after org setup
                fetchLeagueSettings();

                // Auth Guard & Compulsory Parameter Check for /registration-form route
                function checkRegistrationFormAuthGuard() {
                    try {
                        const urlParams = new URLSearchParams(window.location.search);
                        const urlFormId = urlParams.get('form_id');
                        const urlRegSetId = urlParams.get('registration_set_id');
                        const isRegFormRoute = window.location.pathname.includes('/registration-form') || urlFormId !== null || urlRegSetId !== null;

                        if (!isRegFormRoute) {
                            return true; // Regular dashboard view, not form route
                        }

                        // 1. Compulsory form_id check
                        if (!urlFormId && !urlRegSetId) {
                            const formSelSec = document.getElementById('form-selection-section');
                            const regCard = document.getElementById('registration-form-card');
                            const authSec = document.getElementById('inline-auth-section');
                            const errSec = document.getElementById('compulsory-param-error-section');

                            if (formSelSec) formSelSec.classList.add('hidden');
                            if (regCard) regCard.classList.add('hidden');
                            if (authSec) authSec.classList.add('hidden');
                            if (errSec) errSec.classList.remove('hidden');
                            return false;
                        }

                        // 2. Check for compulsory dbname and token query parameters
                        const paramDb = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || localStorage.getItem('organisation') || localStorage.getItem('last_db');
                        const paramToken = urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token');

                        if (!paramDb || !paramToken) {
                            // Missing dbname or token parameter -> show Inline Login / Signup UI on current route
                            const formSelSec = document.getElementById('form-selection-section');
                            const regCard = document.getElementById('registration-form-card');
                            const errSec = document.getElementById('compulsory-param-error-section');
                            const authSec = document.getElementById('inline-auth-section');

                            if (formSelSec) formSelSec.classList.add('hidden');
                            if (regCard) regCard.classList.add('hidden');
                            if (errSec) errSec.classList.add('hidden');

                            if (authSec) {
                                authSec.classList.remove('hidden');
                                const effectiveDb = paramDb || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
                                if (effectiveDb) {
                                    const sanitizedDb = effectiveDb.replace('_lms', '');
                                    const inlineOrgInput = document.getElementById('inline-organisation');
                                    const inlineSignupOrgInput = document.getElementById('inline-signup-org');
                                    if (inlineOrgInput) inlineOrgInput.value = sanitizedDb;
                                    if (inlineSignupOrgInput) inlineSignupOrgInput.value = sanitizedDb;
                                }
                            }
                            return false; // Authentication required via inline form
                        }

                        // Parameters are valid and present
                        const errSec = document.getElementById('compulsory-param-error-section');
                        const authSec = document.getElementById('inline-auth-section');
                        if (errSec) errSec.classList.add('hidden');
                        if (authSec) authSec.classList.add('hidden');
                        return true;
                    } catch (e) {
                        console.error('Error checking registration form auth guard:', e);
                        return true;
                    }
                }

                // Global auth tokens for API calls
                let authOrganisation = localStorage.getItem('organisation') || '';
                let authToken = localStorage.getItem('authToken') || '';
                let isAdultLeaguePlayer = false; // True when logged-in user IS the player (role=player)

                // Global object to collect all registration data
                let collectedRegistrationData = {};
                let currentForm = null;
                let allPagesMap = {};
                let gradesList = [];
                let divisionsList = [];
                let schoolsList = [];

                // Track if this is a registration set (multiple forms) vs single form
                let isRegistrationSet = false;
                let availableFormIds = []; // Form IDs available in the registration set
                let playerEligibilityMap = {}; // Map of player_id -> eligible forms from API

                // Store custom pages by form_id for dynamic rendering
                let customPagesByFormId = {}; // Map of form_id -> array of custom pages
                let allPagesIncludingHidden = []; // All pages including custom pages that are initially hidden
                let playerFormSelections = {}; // Map of player_id -> array of selected form_ids

                // Membership data from FetchMembership API
                let membershipOptions = []; // Array of { id, description, fee_1 }
                let selectedMembershipId = null; // Currently selected membership ID
                let playerHasActiveMembership = false; // Whether the player already has an active membership
                let activeMembershipData = null; // Data returned from checkingMembershipActiveOrNot API

                // Level list / Division data for level list pages (file = ./levellist.php)
                let levelPageDivisions = []; // Divisions fetched for level list page
                let selectedLevelDivisionId = null; // Currently selected division on level page

                // ── Field Mapping Layer ──
                // Remap field IDs from a source form to a target form using form_field_name as the semantic key.
                // In Registration Sets, the UI shows fields from the first form (L1S1) but the submission
                // may target a different form (L1S2/L1S3) which has different field_ids for the same logical fields.
                // The mapping is stored per page type (parent/player/payment) because fields like 'id', 'email',
                // 'phone1' etc. exist in BOTH parent and player pages with DIFFERENT field_ids.

                // Helper to determine page type from page name
                function getPageType(pageName, pageObj = null) {
                    const name = (pageName || (pageObj ? pageObj.name : '') || '').toLowerCase().trim();
                    
                    // 1. Custom keywords take highest priority (waiver, conduct, rules, returning, etc.)
                    const customKeywords = [
                        'conduct', 'rules', 'release', 'waiver', 'consent', 'mailing', 'returning',
                        'preference', 'pledge', 'policy', 'agreement', 'tolerance', 'volunteer',
                        'uniform', 'experience', 'medical', 'photo', 'liability', 'permission',
                        'custom', 'question', 'survey', 'emergency', 'comment'
                    ];

                    if (customKeywords.some(kw => name.includes(kw))) {
                        return 'custom';
                    }

                    if (pageObj && (pageObj.type === 'custom' || pageObj.page_type === 'custom')) {
                        if (!['parent', 'parents', 'player', 'players', 'children', 'child', 'welcome', 'summary', 'payment', 'payments'].includes(name)) {
                            return 'custom';
                        }
                    }

                    // 2. If we have a page object, check step_type and file
                    if (pageObj) {
                        const stepType = (pageObj.step_type || '').toLowerCase().trim();
                        const file = (pageObj.file || '').toLowerCase().trim();

                        if (stepType === 'parent' || file.includes('parents.php')) return 'parent';
                        if (stepType === 'player' || file.includes('children.php')) return 'player';
                        if (stepType === 'payment' || file.includes('payment.php')) return 'payment';
                        if (stepType === 'welcome' || file.includes('welcome.php')) return 'welcome';
                        if (stepType === 'summary' || file.includes('confirm.php')) return 'summary';
                        if (stepType === 'custom' || file.includes('custom.php')) return 'custom';
                    }

                    // 3. Fallback to name-based exact/includes logic
                    if (['parent', 'parents'].includes(name) || name === 'parent details' || name === 'parent information' || name === 'parent info') return 'parent';
                    if (['player', 'players', 'children', 'child'].includes(name) || name === 'player details' || name === 'player information' || name === 'player info') return 'player';
                    if (['payment', 'payments', 'checkout'].includes(name)) return 'payment';
                    if (name === 'welcome') return 'welcome';
                    if (['summary', 'review'].includes(name)) return 'summary';
                    return 'custom';
                }

                // Helper to get normalized page deduplication key (only for system default pages)
                function getPageDedupKey(page) {
                    if (!page) return null;
                    const pageName = (page.name || page.page_name || '').toLowerCase().trim();
                    const pageType = getPageType(pageName, page);
                    if (['parent', 'player', 'welcome', 'summary', 'payment'].includes(pageType)) {
                        return pageType;
                    }
                    // For custom pages, do not deduplicate by name or page_id
                    return null;
                }


                function remapFieldsForForm(dataArray, sourceFormId, targetFormId, pageType) {
                    if (!sourceFormId || !targetFormId || sourceFormId == targetFormId) return dataArray;
                    if (!window.fieldMappingByForm) return dataArray;

                    const sourceFormMapping = window.fieldMappingByForm[sourceFormId];
                    const targetFormMapping = window.fieldMappingByForm[targetFormId];

                    if (!sourceFormMapping || !targetFormMapping) {
                        console.warn(`⚠️ Field mapping not available for forms ${sourceFormId} → ${targetFormId}`);
                        return dataArray;
                    }

                    const sourceMapping = sourceFormMapping[pageType];
                    const targetMapping = targetFormMapping[pageType];

                    if (!sourceMapping || !targetMapping) {
                        console.warn(`⚠️ No ${pageType} page mapping for forms ${sourceFormId} → ${targetFormId}`);
                        return dataArray;
                    }

                    // Build reverse mapping: source field_id → available metadata keys
                    const reverseSourceMap = {};
                    Object.entries(sourceMapping).forEach(([key, fieldId]) => {
                        if (!reverseSourceMap[fieldId]) reverseSourceMap[fieldId] = [];
                        reverseSourceMap[fieldId].push(key);
                    });

                    return dataArray.map(item => {
                        const clone = { ...item };
                        const possibleKeys = reverseSourceMap[item.field_id] || [];

                        // Add explicitly passed field name or label if present
                        if (item.field_name) possibleKeys.push(item.field_name);
                        if (item.label) possibleKeys.push((item.label).toLowerCase().trim().replace(/[^a-z0-9]/g, ''));

                        // Find first key that exists in target mapping
                        for (const key of possibleKeys) {
                            if (targetMapping[key] !== undefined) {
                                const newFieldId = targetMapping[key];
                                if (newFieldId !== item.field_id) {
                                    clone.field_id = newFieldId;
                                }
                                return clone;
                            }
                        }
                        return null; // No mapping found for this target form
                    }).filter(Boolean);
                }

                // Helper to calculate age from birthdate string
                function calculateAge(birthdate) {
                    if (!birthdate) return null;
                    const birthDate = new Date(birthdate);
                    if (isNaN(birthDate.getTime())) return null;
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const m = today.getMonth() - birthDate.getMonth();
                    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    return age;
                }

                // Helper to check if a custom field is checked/filled for a player
                function isCustomFieldApplicable(playerId, customFieldId) {

                    // 1. Check current session's edits in collectedRegistrationData
                    for (const pageId in collectedRegistrationData) {
                        const pageEntry = collectedRegistrationData[pageId];
                        const playerData = pageEntry[playerId] || pageEntry;
                        if (playerData && typeof playerData === 'object') {
                            for (const fieldId in playerData) {
                                const fEntry = playerData[fieldId];
                                if (fEntry.customfieldId == customFieldId || fEntry.customFieldId == customFieldId || fieldId == customFieldId || fEntry.field_id == customFieldId) {
                                    const val = fEntry.values;
                                    return val === true || val === "1" || val === 1 || (typeof val === 'string' && val.trim() !== "" && val !== "0");
                                }
                            }
                        }
                    }

                    // Check by field label for cloned fields
                    let targetLabel = '';
                    const allLoadedPages = [...Object.values(allPagesMap || {}), ...(typeof allPagesIncludingHidden !== 'undefined' ? allPagesIncludingHidden : [])];
                    for (const page of allLoadedPages) {
                        if (page && page.fields) {
                            const field = page.fields.find(f => (f.field_id || f.fieldid || f.custom_field_id || f.customFieldId) == customFieldId);
                            if (field) {
                                targetLabel = (field.label || field.page_field_name || field.form_field_name || '').toLowerCase().trim();
                                break;
                            }
                        }
                    }

                    if (targetLabel) {
                        for (const pageId in collectedRegistrationData) {
                            const pageEntry = collectedRegistrationData[pageId];
                            const playerData = pageEntry[playerId] || pageEntry;
                            if (playerData && typeof playerData === 'object') {
                                for (const fieldId in playerData) {
                                    const fEntry = playerData[fieldId];
                                    const fieldLabel = (fEntry.label || '').toLowerCase().trim();
                                    if (fieldLabel && fieldLabel === targetLabel) {
                                        const val = fEntry.values;
                                        return val === true || val === "1" || val === 1 || (typeof val === 'string' && val.trim() !== "" && val !== "0");
                                    }
                                }
                            }
                        }
                    }

                    // 2. Check pre-populated fieldValues (using field mapping)
                    for (const pageId in allPagesMap) {
                        const page = allPagesMap[pageId];
                        if (page && page.fields) {
                            const field = page.fields.find(f => (f.custom_field_id || f.customFieldId || f.field_id || f.fieldid) == customFieldId);
                            if (field) {
                                const fid = field.field_id || field.fieldid;
                                const val = fuzzyLookupValue(fieldValues, fid, field.label);
                                if (val !== undefined && val !== null) {
                                    return val === true || val === "1" || val === 1 || (typeof val === 'string' && val.trim() !== "" && val !== "0");
                                }
                            }
                        }
                    }
                    return false;
                }

                // Helper to get player's age
                function getPlayerAge(playerId) {
                    const player = playersList.find(p => p.player_id == playerId);
                    if (!player) return null;

                    // Check fields collected during this session
                    if (player.fields) {
                        const birthdateField = player.fields.find(f => {
                            const label = (f.label || '').toLowerCase();
                            return label.includes('birthdate') || label.includes('date of birth') || label.includes('dob');
                        });
                        if (birthdateField && birthdateField.value) {
                            return calculateAge(birthdateField.value);
                        }
                    }

                    // Check pre-populated fieldValues (normalized labels)
                    const possibleLabels = ['birthdate', 'date of birth', 'dob', 'player birthdate'];
                    for (const label of possibleLabels) {
                        if (fieldValues[label]) {
                            return calculateAge(fieldValues[label]);
                        }
                    }

                    return null;
                }

                // Helper to get player's grade value
                function getPlayerGrade(playerId) {
                    // 1. Check collectedRegistrationData
                    for (const pageId in collectedRegistrationData) {
                        const entry = collectedRegistrationData[pageId];
                        if (!entry) continue;
                        const playerData = (entry[playerId] && typeof entry[playerId] === 'object') ? entry[playerId] : entry;
                        if (playerData && typeof playerData === 'object') {
                            for (const fId in playerData) {
                                const fieldObj = playerData[fId];
                                if (!fieldObj) continue;
                                const label = (typeof fieldObj === 'object' ? (fieldObj.label || '') : '').toLowerCase();
                                if (label.includes('grade')) {
                                    const val = parseInt(typeof fieldObj === 'object' ? (fieldObj.values !== undefined ? fieldObj.values : fieldObj.value) : fieldObj);
                                    if (!isNaN(val) && val > 0) return val;
                                }
                            }
                        }
                    }
                    // 2. Check playersList
                    const player = playersList.find(p => p.player_id == playerId);
                    if (player) {
                        if (player.grade) {
                            const val = parseInt(player.grade);
                            if (!isNaN(val) && val > 0) return val;
                        }
                        if (player.fields && Array.isArray(player.fields)) {
                            const gradeField = player.fields.find(f => (f.label || '').toLowerCase().includes('grade'));
                            if (gradeField && gradeField.value) {
                                const val = parseInt(gradeField.value);
                                if (!isNaN(val) && val > 0) return val;
                            }
                        }
                    }
                    // 3. Check pre-populated fieldValues / playerFieldValues
                    if (typeof playerFieldValues !== 'undefined' && playerFieldValues['grade']) {
                        const val = parseInt(playerFieldValues['grade']);
                        if (!isNaN(val) && val > 0) return val;
                    }
                    if (typeof fieldValues !== 'undefined' && fieldValues['grade']) {
                        const val = parseInt(fieldValues['grade']);
                        if (!isNaN(val) && val > 0) return val;
                    }
                    // 4. DOM check
                    const gradeSelect = document.querySelector(`.grade-select[data-player-id="${playerId}"], select[name*="grade"], input[name*="grade"]`);
                    if (gradeSelect && gradeSelect.value) {
                        const val = parseInt(gradeSelect.value);
                        if (!isNaN(val) && val > 0) return val;
                    }
                    return null;
                }

                // Helper to get player's normalized gender string ('male' or 'female' or '')
                function getPlayerGenderStr(playerId) {
                    if (typeof getPlayerGender === 'function') {
                        const gNum = getPlayerGender(playerId);
                        if (gNum === 1) return 'male';
                        if (gNum === 2) return 'female';
                    }
                    return '';
                }


                // Helper to get player's division ID
                // Helper to get player's division ID
                function getPlayerDivisionId(playerId) {
                    // 1. Check collectedRegistrationData
                    for (const pageId in collectedRegistrationData) {
                        const entry = collectedRegistrationData[pageId];
                        if (!entry) continue;

                        // Structure A: Multi-player [pageId][playerId][fieldId]
                        if (entry[playerId] && typeof entry[playerId] === 'object') {
                            const playerData = entry[playerId];
                            for (const fId in playerData) {
                                const fieldObj = playerData[fId];
                                const label = (typeof fieldObj === 'object' ? (fieldObj.label || '') : '').toLowerCase();
                                if (label.includes('division') || label === 'division') {
                                    const val = parseInt(typeof fieldObj === 'object' ? fieldObj.values : fieldObj);
                                    if (val) return val;
                                }
                            }
                        }

                        // Structure B: Single-player [pageId][fieldId] 
                        for (const fId in entry) {
                            const fieldObj = entry[fId];
                            if (fieldObj && typeof fieldObj === 'object' && fieldObj.label) {
                                const label = (fieldObj.label || '').toLowerCase();
                                if (label.includes('division') || label === 'division') {
                                    const val = parseInt(fieldObj.values);
                                    if (val) return val;
                                }
                            }
                        }
                    }

                    // 2. Check pre-populated fieldValues
                    if (fieldValues && fieldValues['division']) {
                        const val = parseInt(fieldValues['division']);
                        if (val) return val;
                    }

                    // 3. Check playersList
                    const player = playersList.find(p => p.player_id == playerId);
                    if (player) {
                        if (player.division_id) {
                            const val = parseInt(player.division_id);
                            if (val) return val;
                        }

                        if (player.fields && Array.isArray(player.fields)) {
                            const divField = player.fields.find(f => (f.label || '').toLowerCase().includes('division'));
                            if (divField && divField.value) {
                                const val = parseInt(divField.value);
                                if (val) return val;
                            }
                        }
                    }

                    // 4. Fallback: DOM check
                    const domSelect = document.querySelector(`.division-select[data-player-id="${playerId}"], .division-select[name*="${playerId}"]`);
                    if (domSelect && domSelect.value) {
                        const val = parseInt(domSelect.value);
                        if (val) return val;
                    }

                    return 0;
                    return 0;
                }

                // Helper to resolve division ID for a player (either via explicit selection or calculated by criteria grade/age + gender against form divisions)
                async function getResolvedPlayerDivisionId(playerId, formId = null) {
                    let divisionId = parseInt(getPlayerDivisionId(playerId)) || 0;
                    if (divisionId > 0) {
                        console.log(`🎯 [Level ID Resolved] Directly selected division ID ${divisionId} for player ${playerId}`);
                        return divisionId;
                    }

                    const checkFormId = formId || (typeof currentFormId !== 'undefined' ? currentFormId : (typeof currentForm !== 'undefined' && currentForm ? currentForm.form_id : null));
                    if (!checkFormId) return 0;

                    try {
                        const divisionData = await getDivisionsWithOrder(checkFormId);
                        const rawDivs = (divisionData && Array.isArray(divisionData.all_divisions)) ? divisionData.all_divisions : (Array.isArray(divisionData) ? divisionData : []);
                        const criteria = (divisionData && divisionData.criteria ? divisionData.criteria : 'grade').toLowerCase().trim();

                        if (rawDivs.length === 0) return 0;

                        const sortedDivs = [...rawDivs].sort((a, b) => {
                            const orderA = (a.level_order !== null && a.level_order !== undefined) ? parseFloat(a.level_order) : Infinity;
                            const orderB = (b.level_order !== null && b.level_order !== undefined) ? parseFloat(b.level_order) : Infinity;
                            if (orderA !== Infinity || orderB !== Infinity) return orderA - orderB;
                            return 0;
                        });

                        const isGenderCompatible = (pGenNum, dGen) => {
                            let dGenNum = 0;
                            if (dGen !== null && dGen !== undefined && dGen !== '') {
                                const s = String(dGen).toLowerCase().trim();
                                if (s === '1' || s === 'male' || s === 'm' || s.includes('boy')) dGenNum = 1;
                                else if (s === '2' || s === 'female' || s === 'f' || s.includes('girl')) dGenNum = 2;
                            }
                            if (dGenNum === 0 || pGenNum === 0) return true;
                            return pGenNum === dGenNum;
                        };

                        const playerGenderNum = getPlayerGender(playerId);
                        let playerDivisionObj = null;

                        if (criteria.includes('grade') || criteria === '') {
                            const pGrade = getPlayerGrade(playerId);
                            if (pGrade !== null && pGrade !== undefined) {
                                playerDivisionObj = sortedDivs.find(d => {
                                    const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                    const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                    const gradeMatches = pGrade >= startVal && pGrade <= endVal;
                                    const genderMatches = isGenderCompatible(playerGenderNum, d.gender);
                                    return gradeMatches && genderMatches;
                                });
                                if (!playerDivisionObj && playerGenderNum === 0) {
                                    playerDivisionObj = sortedDivs.find(d => {
                                        const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                        const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                        return pGrade >= startVal && pGrade <= endVal;
                                    });
                                }
                            }
                        }

                        if (!playerDivisionObj && (criteria.includes('age') || criteria === '')) {
                            const pAge = getPlayerAge(playerId);
                            if (pAge !== null && pAge !== undefined) {
                                playerDivisionObj = sortedDivs.find(d => {
                                    const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                    const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                    const ageMatches = pAge >= startVal && pAge <= endVal;
                                    const genderMatches = isGenderCompatible(playerGenderNum, d.gender);
                                    return ageMatches && genderMatches;
                                });
                                if (!playerDivisionObj && playerGenderNum === 0) {
                                    playerDivisionObj = sortedDivs.find(d => {
                                        const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                        const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                        return pAge >= startVal && pAge <= endVal;
                                    });
                                }
                            }
                        }

                        if (playerDivisionObj) {
                            console.log(`🎯 [Level ID Resolved] Matched player ${playerId} to division ID ${playerDivisionObj.division_id} (${playerDivisionObj.division_name})`);
                            return parseInt(playerDivisionObj.division_id) || 0;
                        }
                    } catch (err) {
                        console.error('Error resolving player division ID:', err);
                    }

                    return 0;
                }

                // Check if a page is effectively empty or contains only automated placeholder messages
                function isPageEffectivelyEmpty(page) {
                    if (!page) return true;

                    // If page has a description at page level, it's not empty
                    if (page.page_field_description || page.description || page.form_field_description) {
                        return false;
                    }

                    if (!page.fields || page.fields.length === 0) {
                        return true;
                    }

                    // If it's a default/system page (Parent, Player, Summary, Payment, Welcome), do not filter by fields display
                    const pageName = (page.name || '').toLowerCase().trim();
                    const isParent = pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account');
                    const isPlayer = pageName.includes('player') || pageName.includes('children') || pageName.includes('minor');
                    const isSystemic = isParent || isPlayer || pageName === 'summary' || pageName === 'payment' || pageName === 'payments' || pageName === 'welcome';
                    
                    // Also check if any field has description (e.g. waiver text, consent text)
                    const hasFieldDescriptions = page.fields.some(f => f.page_field_description || f.form_field_description || f.description);
                    if (hasFieldDescriptions) {
                        return false;
                    }

                    if (isSystemic) {
                        return false;
                    }

                    // Check if the page has at least one field that is not explicitly disabled
                    const hasVisibleFields = page.fields.some(f => 
                        f.display !== false && f.display !== 'false' && f.display !== 'hidden'
                    );
                    if (!hasVisibleFields) {
                        return true;
                    }

                    const placeholderRegex = /No additional information required|This section is automatically completed/i;

                    // Check if the page has any interactive input fields or description content
                    const hasRealInputs = page.fields.some(f => {
                        const isVisible = f.display !== false && f.display !== 'false' && f.display !== 'hidden';
                        if (!isVisible) return false;

                        const fieldId = f.fieldid || f.field_id;
                        const customFieldId = f.custom_field_id || f.customfieldId;

                        if (fieldId || (customFieldId && customFieldId !== 0 && customFieldId !== "0")) {
                            const label = (f.label || '').trim();
                            if (placeholderRegex.test(label)) return false;
                            return true;
                        }

                        const label = (f.label || '').trim();
                        if (label && !placeholderRegex.test(label)) return true;

                        const desc = (f.page_field_description || f.form_field_description || '').trim();
                        if (desc) return true;

                        return false;
                    });

                    return !hasRealInputs;
                }

                // Check if a Welcome page has any meaningful content (fields data or page_field_description)
                function doesWelcomePageHaveContent(page) {
                    // If no fields at all, no content
                    if (!page.fields || page.fields.length === 0) return false;

                    // Check if any field has page_field_description with real content
                    const hasDescription = page.fields.some(f => {
                        const desc = (f.page_field_description || '').trim();
                        return desc.length > 0;
                    });
                    if (hasDescription) return true;

                    // Check if any field has a real field_id or label (actual form input fields)
                    const hasFormFields = page.fields.some(f => {
                        const fieldId = f.fieldid || f.field_id;
                        const customFieldId = f.custom_field_id || f.customfieldId;
                        const label = (f.label || '').trim();
                        return fieldId || (customFieldId && customFieldId !== 0 && customFieldId !== "0") || label.length > 0;
                    });

                    return hasFormFields;
                }

                // Check if a Welcome page has page_field_description or form_field_description
                // Used to prioritize welcome pages with descriptions to appear first
                function doesWelcomePageHaveDescription(page) {
                    if (!page.fields || page.fields.length === 0) return false;
                    return page.fields.some(f => {
                        const pageDesc = (f.page_field_description || '').trim();
                        const formDesc = (f.form_field_description || '').trim();
                        return pageDesc.length > 0 || formDesc.length > 0;
                    });
                }

                // Helper to deduplicate fields on a page (especially custom pages with multiple representations of the same field)
                function deduplicatePageFields(fields, isCustom = false) {
                    if (!Array.isArray(fields) || fields.length === 0) return [];
                    const map = new Map();
                    fields.forEach(f => {
                        let key = '';
                        if (isCustom) {
                            key = (f.label || f.name || f.page_field_name || (f.field_id ? String(f.field_id) : '')).toLowerCase().trim();
                        } else {
                            key = (f.field_id || f.custom_field_id || f.customfieldId) ? String(f.field_id || f.custom_field_id || f.customfieldId) : (f.label || '').toLowerCase().trim();
                        }
                        if (!key) return;
                        if (!map.has(key)) {
                            map.set(key, f);
                        } else {
                            const existing = map.get(key);
                            // Merge richer properties (prefer one with non-empty page_field_name, options, or validation_rules)
                            const merged = { ...existing };
                            if (!merged.page_field_name && f.page_field_name) merged.page_field_name = f.page_field_name;
                            if ((!merged.options || merged.options.length === 0) && f.options && f.options.length > 0) merged.options = f.options;
                            if (!merged.page_field_description && f.page_field_description) merged.page_field_description = f.page_field_description;
                            if (!merged.form_field_description && f.form_field_description) merged.form_field_description = f.form_field_description;
                            if (!merged.validation_rules && f.validation_rules) merged.validation_rules = f.validation_rules;
                            if (!merged.required && (f.required || f.is_required)) merged.required = f.required || f.is_required;
                            map.set(key, merged);
                        }
                    });
                    return Array.from(map.values());
                }

                // Fetch grades list from API
                async function fetchGradeList(leagueId = null) {
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const query = `
                                query FetchGradeList {
                                    fetchGradeList${leagueId ? `(League_ID: ${leagueId})` : ''} {
                                        num_equiv
                                        name
                                    }
                                }
                            `;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        if (result.data && result.data.fetchGradeList) {
                            // Deduplicate grades by name to handle API inconsistencies
                            const uniqueGrades = [];
                            const seenNames = new Set();

                            result.data.fetchGradeList.forEach(grade => {
                                if (grade && grade.name && !seenNames.has(grade.name)) {
                                    seenNames.add(grade.name);
                                    uniqueGrades.push(grade);
                                }
                            });

                            gradesList = uniqueGrades;
                            // 
                        }
                    } catch (error) {
                        console.error('Error fetching grades:', error);
                    }
                }

                // Fetch school list from API
                async function fetchSchoolList(leagueId = null) {
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const lId = leagueId ? parseInt(leagueId) : 1;
                        const query = `
                                query FetchSchoolList {
                                    fetchSchoolList(League_ID: ${lId}) {
                                        id
                                        name
                                        school_order
                                        resident
                                        League_ID
                                    }
                                }
                            `;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        if (result.data && result.data.fetchSchoolList && Array.isArray(result.data.fetchSchoolList)) {
                            const uniqueSchools = [];
                            const seenNames = new Set();

                            result.data.fetchSchoolList.forEach(school => {
                                if (school && school.name && !seenNames.has(school.name.trim())) {
                                    seenNames.add(school.name.trim());
                                    uniqueSchools.push(school);
                                }
                            });

                            schoolsList = uniqueSchools;
                        } else {
                            schoolsList = [];
                        }
                    } catch (error) {
                        console.error('Error fetching school list:', error);
                        schoolsList = [];
                    }
                }

                window.getFieldHelpText = function(field) {
                    if (!field) return '';
                    const isValidationRulesJson = (str) => {
                        if (!str || typeof str !== 'string') return false;
                        const trimmed = str.trim();
                        if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) return false;
                        try {
                            const parsed = JSON.parse(trimmed);
                            return typeof parsed === 'object' && parsed !== null && (
                                parsed.input_mode !== undefined ||
                                parsed.min_length !== undefined ||
                                parsed.max_length !== undefined ||
                                parsed.min_val !== undefined ||
                                parsed.max_val !== undefined ||
                                parsed.regex !== undefined ||
                                parsed.regex_type !== undefined ||
                                parsed.error_msg !== undefined ||
                                parsed.rules !== undefined
                            );
                        } catch(e) {
                            return false;
                        }
                    };

                    const pageDescriptions = [
                        field.page_field_description,
                        field.form_field_description,
                        field.description
                    ].filter(d => typeof d === 'string' && d.trim()).map(d => d.trim());

                    const candidates = [
                        field.additional_info,
                        field.info,
                        field.comment,
                        field.help_text,
                        field.helpText,
                        field.help,
                        field.hint
                    ];

                    for (const cand of candidates) {
                        if (cand && typeof cand === 'string') {
                            const trimmed = cand.trim();
                            if (trimmed && 
                                trimmed !== 'none' && 
                                trimmed !== field.page_field_name && 
                                trimmed !== field.form_field_name && 
                                trimmed !== field.label &&
                                !pageDescriptions.includes(trimmed) &&
                                !isValidationRulesJson(trimmed)) {
                                return trimmed;
                            }
                        }
                    }
                    return '';
                };

                window.showRegistrationTooltip = function (el, text) {
                    // Remove existing tooltips
                    const existing = document.querySelectorAll('.custom-tooltip-bubble');
                    existing.forEach(t => {
                        t.classList.remove('visible');
                        setTimeout(() => t.remove(), 200);
                    });

                    if (!text) return;

                    // Create tooltip element
                    const tooltip = document.createElement('div');
                    tooltip.className = 'custom-tooltip-bubble';
                    tooltip.innerHTML = `
                        ${text.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>')}
                        <div class="custom-tooltip-arrow"></div>
                    `;

                    document.body.appendChild(tooltip);

                    // Position calculation
                    const rect = el.getBoundingClientRect();
                    const tooltipRect = tooltip.getBoundingClientRect();

                    // Default to showing above the icon
                    let top = rect.top - tooltipRect.height - 12;
                    let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
                    const arrow = tooltip.querySelector('.custom-tooltip-arrow');

                    // Adjust if too high (show below instead)
                    if (top < 10) {
                        top = rect.bottom + 12;
                        if (arrow) {
                            arrow.style.bottom = 'auto';
                            arrow.style.top = '-6px';
                            arrow.style.borderRight = 'none';
                            arrow.style.borderBottom = 'none';
                            arrow.style.borderLeft = '1px solid rgba(255, 255, 255, 0.1)';
                            arrow.style.borderTop = '1px solid rgba(255, 255, 255, 0.1)';
                        }
                    }

                    // Horizontal bounds check
                    if (left < 10) {
                        const shift = 10 - left;
                        left = 10;
                        if (arrow) arrow.style.left = `calc(50% - 6px - ${shift}px)`;
                    } else if (left + tooltipRect.width > window.innerWidth - 10) {
                        const shift = (left + tooltipRect.width) - (window.innerWidth - 10);
                        left = window.innerWidth - tooltipRect.width - 10;
                        if (arrow) arrow.style.left = `calc(50% - 6px + ${shift}px)`;
                    }

                    tooltip.style.top = top + 'px';
                    tooltip.style.left = left + 'px';

                    // Reveal
                    requestAnimationFrame(() => {
                        tooltip.classList.add('visible');
                    });

                    // Close listeners
                    const closeHandler = (e) => {
                        if (!tooltip.contains(e.target) && e.target !== el && !el.contains(e.target)) {
                            tooltip.classList.remove('visible');
                            setTimeout(() => {
                                if (tooltip.parentNode) tooltip.remove();
                            }, 200);
                            document.removeEventListener('click', closeHandler);
                            window.removeEventListener('scroll', closeHandler, true);
                        }
                    };

                    setTimeout(() => {
                        document.addEventListener('click', closeHandler);
                        window.addEventListener('scroll', closeHandler, true);
                    }, 10);
                };

                // Fetch divisions list from API based on grade and gender
                async function fetchDivisionsList(formId = null, grade = 0, gender = '') {
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const formIdParam = formId ? formId : 'null';
                        const query = `
                                query FetchAllDivisions {
                                    fetchAllDivisions(form_id: ${formIdParam}, grade: ${grade}, gender: "${gender}", age: 0) {
                                        applicable_divisions {
                                            division_id
                                            division_name
                                            status
                                        }
                                    }
                                }
                            `;



                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();


                        if (result.data && result.data.fetchAllDivisions && result.data.fetchAllDivisions.applicable_divisions) {
                            divisionsList = result.data.fetchAllDivisions.applicable_divisions;

                        } else {
                            divisionsList = [];

                        }
                    } catch (error) {
                        console.error('Error fetching divisions:', error);
                    }
                }

                // Refresh divisions dropdown when grade or gender changes
                async function refreshDivisions(element) {
                    // Find the container loop (accordion content) to scope our search
                    const container = element ? element.closest('.accordion-content') : document;

                    if (!container) {
                        console.warn('refreshDivisions: No container found');
                        return;
                    }

                    // Find grade and gender selects WITHIN this container
                    const gradeSelect = container.querySelector('.grade-select');
                    const genderSelect = container.querySelector('.gender-select');
                    const divisionSelect = container.querySelector('.division-select');

                    // If no division select in this scope, nothing to do
                    if (!divisionSelect) return;

                    // Capture current value BEFORE clearing innerHTML and starting async fetch
                    // This ensures that if the user already made a selection, it's preserved
                    const capturedDivValue = divisionSelect.getAttribute('data-prevalue') || divisionSelect.value;

                    const gradeValue = gradeSelect ? gradeSelect.value : '';
                    const genderValue = genderSelect ? genderSelect.value : '';



                    // Only fetch if grade is selected
                    if (!gradeValue) {

                        divisionSelect.innerHTML = '<option value="" disabled selected>Select grade first</option>';
                        return;
                    }

                    // Map gender value: 1.00 = male,                            
                    // Map gender to string
                    let genderString = '';
                    if (genderValue) {
                        const genderNum = parseFloat(genderValue);
                        if (genderNum === 1 || genderNum === 1.00) genderString = 'male';
                        else if (genderNum === 2 || genderNum === 2.00) genderString = 'female';
                        // else if (genderNum === 3 || genderNum === 3.00) genderString = 'other';
                    }

                    divisionSelect.innerHTML = '<option value="" disabled selected>Loading divisions...</option>';

                    const formId = currentForm ? currentForm.form_id : null;
                    const gradeInt = parseInt(gradeValue) || 0;

                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';
                        const formIdParam = formId ? formId : 'null';
                        const query = `
                                    query FetchAllDivisions {
                                        fetchAllDivisions(form_id: ${formIdParam}, gender: "${genderString}", grade: ${gradeInt}, age: 0) {
                                            applicable_divisions {
                                                division_id
                                                division_name
                                                status
                                                level_order
                                            }
                                        }
                                    }
                                `;

                        // console.log(`🔍 Division API Request (Form ID: ${formIdParam})`);
                        // console.log(`  - Organisation: ${organisation}`);
                        // console.log(`  - Token (last 8): ...${token.slice(-8)}`);
                        // console.log(`  - Query Params: grade: ${gradeInt}, gender: "${genderString}", age: 0`);



                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        // console.log('✅ Division API Response:', JSON.stringify(result, null, 2));
                        let localDivisions = [];

                        // Cache ALL divisions for fee calculation logic (needed for resolving start/end level IDs)
                        if (result.data && result.data.fetchAllDivisions) {
                            if (!window.allFetchedDivisions) {
                                window.allFetchedDivisions = {};
                            }

                            // Process applicable divisions
                            if (result.data.fetchAllDivisions.applicable_divisions) {
                                localDivisions = result.data.fetchAllDivisions.applicable_divisions;
                                // Update cache with these detailed objects too
                                localDivisions.forEach(div => {
                                    window.allFetchedDivisions[div.division_id] = div;
                                });

                            }
                        }

                        if (localDivisions.length > 0) {
                            // The API's applicable_divisions already handles grade/gender filtering correctly.
                            // We used to filter by data-start-level and data-end-level here, but that incorrectly
                            // hides valid divisions in Registration Sets where players might registration across leagues.
                            // We now trust the API response entirely for the list contents.

                            // Sort by level_order
                            localDivisions.sort((a, b) => {
                                const orderA = a.level_order !== undefined ? parseFloat(a.level_order) : 9999;
                                const orderB = b.level_order !== undefined ? parseFloat(b.level_order) : 9999;
                                return orderA - orderB;
                            });
                        }

                        // Update the specific division dropdown
                        if (localDivisions.length > 0) {
                            const currentDivValue = capturedDivValue;
                            // Only mark placeholder as selected if we don't have a valid value to restore
                            const placeholderSelected = !currentDivValue ? 'selected' : '';
                            let optionsHtml = `<option value="" disabled ${placeholderSelected}>Select Division</option>`;

                            localDivisions.forEach(div => {
                                const isEligible = (div.status || '').toLowerCase() === 'eligible';
                                // Check against current value OR data-prevalue attribute (set during init)
                                const isSelected = (currentDivValue && (currentDivValue == div.division_id || String(currentDivValue).trim() === String(div.division_id).trim() || String(currentDivValue).toLowerCase().trim() === String(div.division_name).toLowerCase().trim())) ? 'selected' : '';
                                const disabledAttr = !isEligible ? 'disabled' : '';
                                const statusLabel = !isEligible ? ` (${div.status})` : '';
                                optionsHtml += `<option value="${div.division_id}" ${isSelected} ${disabledAttr}>${div.division_name}${statusLabel}</option>`;
                            });
                            divisionSelect.innerHTML = optionsHtml;
                            if (divisionSelect.value) {
                                divisionSelect.setAttribute('data-prevalue', divisionSelect.value);
                            }
                        } else {
                            divisionSelect.innerHTML = '<option value="" disabled selected>No divisions available</option>';
                        }
                    } catch (error) {
                        console.error('Error fetching divisions:', error);
                        divisionSelect.innerHTML = '<option value="" disabled selected>Error loading divisions</option>';
                    }
                }

                // Helper to generate a country code dropdown
                function generateCountryCodeDropdown(field, usePrePopulate, valueMap = fieldValues, hideLabel = false, isCustomPage = false, isPlayerPage = false) {
                    const targetPlayerId = isPlayerPage ? (currentlyEditingPlayerId || localStorage.getItem('player_id') || 'parent') : 'parent';
                    const commonDataAttrs = `data-field-id="${field.field_id}" data-player-id="${targetPlayerId}"`;
                    const labelLower = (field.label || '').toLowerCase().trim();
                    if (labelLower === 'text only text' || labelLower === 'text') {
                        return '';
                    }

                    const fieldId = `field-${field.field_id}`;
                    const isRequired = field.is_required == 1 || field.required == 1 || String(field.is_required).toLowerCase() === 'true';
                    const requiredStar = isRequired ? '<span class="required-star">*</span>' : '';
                    const displayLabel = field.label || '';

                    let preValue = '';
                    if (usePrePopulate) {
                        const targetMap = valueMap || ((typeof activeParentNumber !== 'undefined' && activeParentNumber === 2) ? parent2FieldValues : fieldValues);
                        const normalizedLabel = (field.label || '').toLowerCase().trim();
                        preValue = targetMap[normalizedLabel] || targetMap[`id_${field.field_id}`] || fuzzyLookupValue(targetMap, field.field_id, field.label) || '';
                    }

                    // Ensure preValue matches the format (+dial_code)
                    let preValueStr = preValue ? preValue.toString().trim() : '';
                    if (preValueStr && !preValueStr.startsWith('+') && !isNaN(preValueStr)) {
                        preValueStr = '+' + preValueStr;
                    }

                    // For country code, if no pre-value, default to +1 (US) as it's common
                    if (!preValueStr) {
                        preValueStr = '+1';
                    }

                    // Check if it should be hidden
                    const isHidden = (field.display == 0 || field.display == 2 || String(field.display) === '0' || String(field.display) === '2' || String(field.display) === 'false' || field.display === false);
                    if (isHidden) {
                        return `<input type="hidden" id="${fieldId}" name="${field.page_field_name}" ${commonDataAttrs} value="${preValueStr}">`;
                    }

                    let optionsHtml = '';
                    countryDialCodes.forEach(cd => {
                        let isSelected = false;
                        if (preValueStr === cd.dial_code) {
                            if (preValueStr === '+1') {
                                isSelected = (cd.code === 'US');
                            } else {
                                isSelected = true;
                            }
                        }
                        const selectedAttr = isSelected ? 'selected' : '';
                        optionsHtml += `<option value="${cd.dial_code}" ${selectedAttr}>${cd.name} (${cd.dial_code})</option>`;
                    });

                    return `
                        <div class="material-input-group ${hideLabel ? 'hidden-label' : ''}">
                            <select id="${fieldId}" name="${field.page_field_name}" ${commonDataAttrs} ${isRequired ? 'required' : ''}>
                                ${optionsHtml}
                            </select>
                            <label for="${fieldId}" class="dynamic-label" data-id-table="1" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                            <i class="fa-solid fa-chevron-down select-arrow"></i>
                        </div>
                    `;
                }

                // Generate input field based on field type
                // usePrePopulate: only set to true for Parent page fields
                function generateInputField(field, isParentPage = false, isCustomPage = false, isCountryCode = false, hideLabel = false, isPlayerPage = false) {
                    const targetPlayerId = isPlayerPage ? (currentlyEditingPlayerId || localStorage.getItem('player_id') || 'parent') : 'parent';
                    const commonDataAttrs = `data-field-id="${field.field_id}" data-player-id="${targetPlayerId}"`;
                    const labelLower = (field.label || '').toLowerCase().trim();
                    const hideInputOnly = labelLower === 'text only text' || labelLower === 'text';

                    const today = new Date().toISOString().split('T')[0];
                    let minDate = '';
                    let maxDate = today;

                    if (typeof window.getPlayerBirthDateRange === 'function') {
                        const range = window.getPlayerBirthDateRange();
                        minDate = range.min;
                        maxDate = range.max;
                    }
                    const activeParentMap = (isParentPage && typeof activeParentNumber !== 'undefined' && activeParentNumber === 2) ? parent2FieldValues : fieldValues;
                    if (!hideInputOnly) {
                        if (isCountryCode || labelLower === 'country code' || labelLower === 'phone code') {
                            return generateCountryCodeDropdown(field, isParentPage, activeParentMap, hideLabel, isCustomPage, isPlayerPage);
                        }
                    }
                    const fieldId = `field-${field.field_id}`;
                    const isRequired = String(field.is_required) === '1' || String(field.required) === '1' || String(field.is_required).toLowerCase() === 'true';
                    const requiredStar = isRequired ? '<span class="required-star">*</span>' : '';

                    // Get pre-populated value from fieldValues map
                    let preValue = '';
                    if (isParentPage) {
                        const targetValueMap = activeParentMap;
                        // Try by label first (normalized)
                        const normalizedLabel = (field.label || '').toLowerCase().trim();
                        if (targetValueMap[normalizedLabel] !== undefined) {
                            preValue = targetValueMap[normalizedLabel];
                        }

                        // Try by ID if label failed
                        if (!preValue && targetValueMap[`id_${field.field_id}`] !== undefined) {
                            preValue = targetValueMap[`id_${field.field_id}`];
                        }

                        // Fuzzy match: strip spaces/underscores/hyphens and compare
                        // Handles 'firstname' vs 'first name', 'address1' vs 'address 1', etc.
                        if (!preValue) {
                            preValue = fuzzyLookupValue(targetValueMap, field.field_id, field.label) || '';
                        }
                    } else if (isPlayerPage) {
                        const targetValueMap = playerFieldValues;
                        const normalizedLabel = (field.label || '').toLowerCase().trim();
                        const cleanLabel = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                        const pageFieldName = (field.page_field_name || '').toLowerCase().trim();
                        const formFieldName = (field.form_field_name || '').toLowerCase().trim();
                        preValue = targetValueMap[normalizedLabel] || 
                                   targetValueMap[cleanLabel] || 
                                   targetValueMap[`id_${field.field_id}`] || 
                                   targetValueMap[`id_${field.fieldid}`] || 
                                   targetValueMap[pageFieldName] || 
                                   targetValueMap[formFieldName] || 
                                   fuzzyLookupValue(targetValueMap, field.field_id, field.label) || '';
                    }

                    const cleanLabelForDOB = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                    const fieldNameLowerForDOB = (field.page_field_name || field.form_field_name || '').toLowerCase().trim();
                    const isDOBCheck = cleanLabelForDOB.includes('birth') || cleanLabelForDOB.includes('dob') || fieldNameLowerForDOB.includes('birth') || fieldNameLowerForDOB.includes('dob') || (field.label || '').toLowerCase().includes('birth') || (field.label || '').toLowerCase().includes('dob');
                    if (isDOBCheck) {
                        if (!preValue) {
                            const checkMap = isParentPage ? activeParentMap : (isPlayerPage ? playerFieldValues : (Object.keys(playerFieldValues).length > 0 ? playerFieldValues : fieldValues));
                            preValue = checkMap['date of birth'] || 
                                       checkMap['birthdate'] || 
                                       checkMap['birth date'] || 
                                       checkMap['dob'] || 
                                       checkMap['player - date of birth'] || 
                                       checkMap['player - birthdate'] || 
                                       checkMap['player - dob'] || '';
                        }
                        if (preValue && (String(preValue).startsWith('0000') || preValue === '00/00/0000' || preValue === '00-00-0000')) {
                            preValue = '';
                        }
                    }

                    preValue = sanitizeFieldValue(preValue, field.label, field.field_type);
                    const escapedValue = preValue !== null && preValue !== undefined ? preValue.toString().replace(/"/g, '&quot;') : '';
                    
                    let dynamicValidationAttrs = '';
                    let hasCustomPhoneValidation = false;
                    const isValRulesJson = (str) => {
                        if (!str || typeof str !== 'string') return false;
                        const trimmed = str.trim();
                        if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) return false;
                        try {
                            const parsed = JSON.parse(trimmed);
                            return typeof parsed === 'object' && parsed !== null && (
                                parsed.input_mode !== undefined ||
                                parsed.min_length !== undefined ||
                                parsed.max_length !== undefined ||
                                parsed.rules !== undefined
                            );
                        } catch(e) { return false; }
                    };
                    const resolvedRules = field.validation_rules || (isValRulesJson(field.comment) ? field.comment : null);
                    if (resolvedRules) {
                        try {
                            const rules = typeof resolvedRules === 'string' ? JSON.parse(resolvedRules) : resolvedRules;
                            if (rules && (rules.input_mode || rules.min_length || rules.max_length)) {
                                let pattern = '.*';
                                let errorMessage = "Invalid input";
                                let replaceRegex = '';

                                if (rules.input_mode === 'numeric') {
                                    pattern = '[0-9]*';
                                    errorMessage = "Please enter only numbers";
                                    replaceRegex = '/[^0-9]/g';
                                } else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') {
                                    pattern = '[a-zA-Z]*';
                                    errorMessage = "Please enter only alphabets";
                                    replaceRegex = '/[^a-zA-Z]/g';
                                } else if (rules.input_mode === 'alphanumeric') {
                                    pattern = '(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+';
                                    errorMessage = "Please enter both letters and numbers";
                                    replaceRegex = '/[^a-zA-Z0-9]/g';
                                }

                                if (rules.min_length && rules.max_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},${rules.max_length}}`; }
                                    else { pattern = `.{${rules.min_length},${rules.max_length}}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} characters`;
                                } else if (rules.min_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},}`; }
                                    else { pattern = `.{${rules.min_length},}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter at least ${rules.min_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at least ${rules.min_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at least ${rules.min_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter at least ${rules.min_length} characters`;
                                } else if (rules.max_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{0,${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{0,${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{0,${rules.max_length}}`; }
                                    else { pattern = `.{0,${rules.max_length}}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter at most ${rules.max_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at most ${rules.max_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at most ${rules.max_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter at most ${rules.max_length} characters`;
                                }

                                if (replaceRegex) {
                                    dynamicValidationAttrs += ` pattern="${pattern}" oninput="this.value = this.value.replace(${replaceRegex}, '')" title="${errorMessage}"`;
                                    hasCustomPhoneValidation = true;
                                } else if (pattern !== '.*') {
                                    dynamicValidationAttrs += ` pattern="${pattern}" title="${errorMessage}"`;
                                }
                                
                                if (rules.input_mode === 'numeric') {
                                    dynamicValidationAttrs += ` inputmode="numeric"`;
                                }

                                if (rules.min_length) dynamicValidationAttrs += ` minlength="${rules.min_length}"`;
                                if (rules.max_length) dynamicValidationAttrs += ` maxlength="${rules.max_length}"`;
                            }
                        } catch(e) { console.error("Invalid validation_rules", e); }
                    }

                    const labelLowerForPhone = (field.label || '').toLowerCase();
                    const isPhoneField = !hasCustomPhoneValidation && (field.field_type === 'phone' || (labelLowerForPhone.includes('phone') && !labelLowerForPhone.includes('ext') && !labelLowerForPhone.includes('code')));
                    let displayValue = isPhoneField ? formatPhoneNumber(escapedValue) : escapedValue;

                    let displayLabel = field.label;
                    const fieldIdTable = field.idTable || field.id_table || field.idtable;
                    const isDynamicType = field.field_type === 'select' || field.field_type === 'dropdown' || field.field_type === 'checkbox';
                    // Apply dynamic-label to both player (2,3) and parent (1) fields on custom pages
                    const dynamicClass = (isCustomPage && isDynamicType && (fieldIdTable == 1 || fieldIdTable == 2 || fieldIdTable == 3)) ? 'dynamic-label' : '';
                    const dataOriginalAttr = (isCustomPage && isDynamicType) ? `data-original-label="${field.label}"` : '';
                    if (isCustomPage) {
                        const parentFName = fieldValues['first name'] || fieldValues['firstname'] || '';
                        const parentLName = fieldValues['last name'] || fieldValues['lastname'] || '';
                        const pName = (parentFName + ' ' + parentLName).trim() || 'Parent / Guardian';
                        const currentPName = isParentSaved ? pName : 'Parent';

                        const playerNames = Array.from(selectedPlayerIds).map(pid => {
                            // Convert to same type for Set check
                            const numericPid = parseInt(pid);
                            if (updatedPlayerIds.has(pid) || (numericPid && updatedPlayerIds.has(numericPid))) {
                                const p = playersList.find(pl => pl.player_id == pid);
                                return p ? `${p.first_name} ${p.last_name}` : 'Player';
                            }
                            return 'Player';
                        }).filter(Boolean).join(', ');

                        const cleanLabelText = (field.label || '').replace(/^Player - /i, '');
                        // Only remove "Player - " from the label if we are explicitly on a Player/Children page
                        const effectiveLabel = isPlayerPage ? cleanLabelText : field.label;

                        if (isPlayerPage || isParentPage) {
                            // On Parent or Player/Children pages, don't prepend names to labels as requested
                            displayLabel = effectiveLabel;
                        } else {
                            if (fieldIdTable == 1 || fieldIdTable == '1') {
                                // On custom pages, show ONLY the parent name for parent fields as requested
                                displayLabel = currentPName;
                            } else if (fieldIdTable == 2 || fieldIdTable == '2' || fieldIdTable == 3 || fieldIdTable == '3') {
                                // On custom pages, show ONLY the player name for player fields as requested
                                displayLabel = playerNames || effectiveLabel;
                            } else if (isDynamicType) {
                                // Use person name for dynamic types without explicit idTable on custom pages
                                if (field.display == 0 || field.display == 2 || String(field.display) === '0' || String(field.display) === '2' || String(field.display) === 'false' || field.display === false) {
                                    hideInputOnly = true;
                                }
                                if (playerNames) {
                                    displayLabel = playerNames;
                                } else if (currentPName && currentPName !== 'Parent' && fieldIdTable == 1) {
                                    displayLabel = currentPName;
                                } else {
                                    displayLabel = playerNames || effectiveLabel;
                                }
                            }
                        }
                    }

                    displayLabel = cleanFieldLabel(displayLabel);

                    const helpText = window.getFieldHelpText ? window.getFieldHelpText(field) : '';
                    const infoIconHtml = helpText ? `
                        <i class="fa-solid fa-circle-info field-info-icon" 
                           onclick="event.preventDefault(); event.stopPropagation(); if(window.showRegistrationTooltip) window.showRegistrationTooltip(this, \`${helpText.replace(/`/g, '\\`').replace(/'/g, "\\'").replace(/"/g, '&quot;')}\`)"
                           title="Click for more info"></i>
                    ` : '';

                    let inputHtml = '';
                    let colSpanClass = ''; // Default to col-span-1
                    const description = field.page_field_description || field.form_field_description || field.description || '';
                    const isRichHtmlDescription = description && (/<(p|div|ul|ol|li|table|h[1-6]|span|blockquote)[^>]*>/i.test(description) || (description.includes('<') && description.includes('>')));
                    const descriptionHtml = (isRichHtmlDescription && description.trim() !== helpText.trim()) ? `<div class="mb-2 prose max-w-none">${description}</div>` : '';

                    // Handle display = 0 or 2 (Hidden input)
                    if (field.display === 0 || field.display === 2 || String(field.display) === '0' || String(field.display) === '2' || String(field.display) === 'false' || field.display === false) {
                        return `<input type="hidden" class="hidden" id="${fieldId}" name="${field.page_field_name}" ${commonDataAttrs} value="${escapedValue}">`;
                    }

                    const isGradeField = (field.label || '').toLowerCase().trim() === 'grade';

                    if (!hideInputOnly && isGradeField && gradesList.length > 0) {
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                        gradesList.forEach(opt => {
                            const isSelected = hasValue && (preValue == opt.num_equiv || preValue == parseFloat(opt.num_equiv)) ? 'selected' : '';
                            optionsHtml += `<option value="${opt.num_equiv}" ${isSelected}>${opt.name}</option>`;
                        });

                        inputHtml = `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="grade-select" ${commonDataAttrs} onchange="refreshDivisions(this)" ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                    ${infoIconHtml}
                                </div>
                            `;

                        // Look for division update after render
                        if (hasValue) {
                            setTimeout(() => {
                                const el = document.getElementById(fieldId);
                                if (el) refreshDivisions(el);
                            }, 500);
                        }

                        return `
                                <div class="${colSpanClass}">
                                    ${descriptionHtml}
                                    ${inputHtml}
                                </div>
                            `;
                    }

                    const cleanLabelForSchool = (field.label || '').replace(/^Player - /i, '').toLowerCase().trim();
                    const isSchoolField = cleanLabelForSchool === 'school' || (field.page_field_name || '').toLowerCase().trim() === 'school';

                    if (!hideInputOnly && isSchoolField && schoolsList.length > 0) {
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                        schoolsList.forEach(opt => {
                            const optVal = opt.name || opt.id;
                            const isSelected = hasValue && (preValue == optVal || preValue == opt.id || preValue == opt.name) ? 'selected' : '';
                            optionsHtml += `<option value="${optVal.toString().replace(/"/g, '&quot;')}" ${isSelected}>${opt.name}</option>`;
                        });

                        inputHtml = `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="school-select" ${commonDataAttrs} ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                    ${infoIconHtml}
                                </div>
                            `;

                        return `
                                <div class="${colSpanClass}">
                                    ${descriptionHtml}
                                    ${inputHtml}
                                </div>
                            `;
                    }

                    // Check if this is a Division field with display = 1
                    const isDivisionField = (field.label || '').toLowerCase().trim() === 'division';

                    if (isDivisionField && field.display == 1) {
                        // Always render as dropdown - options will be populated dynamically after grade/gender selection
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = '';
                        if (divisionsList.length > 0) {
                            optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                            divisionsList.forEach(div => {
                                const isEligible = (div.status || '').toLowerCase() === 'eligible';
                                const isSelected = hasValue && (preValue == div.division_id) ? 'selected' : '';
                                const disabledAttr = !isEligible ? 'disabled' : '';
                                const statusLabel = !isEligible ? ` (${div.status})` : '';
                                optionsHtml += `<option value="${div.division_id}" ${isSelected} ${disabledAttr}>${div.division_name}${statusLabel}</option>`;
                            });
                        } else {
                            optionsHtml = '<option value="" disabled selected>Select grade first</option>';
                        }

                        // Store preValue in data attribute so refreshDivisions can use it for initial selection
                        const preValueAttr = hasValue ? `data-prevalue="${preValue}"` : '';
                        const startLevelAttr = field.start_level !== undefined && field.start_level !== null ? `data-start-level="${field.start_level}"` : '';
                        const endLevelAttr = field.end_level !== undefined && field.end_level !== null ? `data-end-level="${field.end_level}"` : '';

                        inputHtml = `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="division-select" ${preValueAttr} ${startLevelAttr} ${endLevelAttr} ${commonDataAttrs} onchange="this.setAttribute('data-prevalue', this.value)" required>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} <span class="required-star">*</span></label>
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                </div>
                            `;

                        return `
                                <div class="${colSpanClass}">
                                    ${descriptionHtml}
                                    ${inputHtml}
                                </div>
                            `;
                    }

                    const cleanLabelForGender = cleanFieldLabel ? cleanFieldLabel((field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '')).toLowerCase().trim() : (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                    const fieldNameLower = (field.page_field_name || field.form_field_name || '').toLowerCase().trim();
                    const isGenderField = cleanLabelForGender === 'gender' || cleanLabelForGender === 'sex' || fieldNameLower === 'gender' || fieldNameLower === 'sex' || (field.label || '').toLowerCase().includes('gender');

                    if (isGenderField) {
                        const genderOptions = [
                            { label: 'Male', value: '1.00', num: 1 },
                            { label: 'Female', value: '2.00', num: 2 },
                            // { label: 'Other', value: '3.00', num: 3 }
                        ];

                        let checkPreVal = preValue;
                        if ((checkPreVal === '' || checkPreVal === null || checkPreVal === undefined) && (isPlayerPage || isCustomPage)) {
                            const curPid = typeof currentlyEditingPlayerId !== 'undefined' ? currentlyEditingPlayerId : (typeof targetPlayerId !== 'undefined' ? targetPlayerId : null);
                            if (typeof playerFieldValues !== 'undefined' && playerFieldValues['gender']) checkPreVal = playerFieldValues['gender'];
                            else if (typeof playerFieldValues !== 'undefined' && playerFieldValues['player - gender']) checkPreVal = playerFieldValues['player - gender'];
                            else if (curPid && typeof getPlayerGender === 'function') {
                                const gNum = getPlayerGender(curPid);
                                if (gNum === 1) checkPreVal = '1.00';
                                else if (gNum === 2) checkPreVal = '2.00';
                            }
                        }

                        const hasValue = checkPreVal !== '' && checkPreVal !== null && checkPreVal !== undefined;
                        let normGender = 0;
                        if (hasValue) {
                            const s = String(checkPreVal).toLowerCase().trim();
                            if (s === '1' || s === '1.00' || s === '1.0' || s === 'male' || s === 'm' || s.includes('male') || s === 'boy' || s.includes('boys')) normGender = 1;
                            else if (s === '2' || s === '2.00' || s === '2.0' || s === 'female' || s === 'f' || s.includes('female') || s === 'girl' || s.includes('girls')) normGender = 2;
                            else {
                                const num = parseFloat(s);
                                if (num === 1 || num === 1.0) normGender = 1;
                                else if (num === 2 || num === 2.0) normGender = 2;
                            }
                        }

                        const isAnySelected = hasValue && (normGender !== 0 || genderOptions.some(opt => checkPreVal == opt.value || checkPreVal == parseFloat(opt.value)));
                        let optionsHtml = isAnySelected ? '' : '<option value="" disabled selected></option>';

                        genderOptions.forEach(opt => {
                            const isSelected = hasValue && (
                                (normGender !== 0 && normGender === opt.num) ||
                                checkPreVal == opt.value ||
                                checkPreVal == parseFloat(opt.value) ||
                                String(checkPreVal).toLowerCase().trim() === opt.label.toLowerCase()
                            ) ? 'selected' : '';
                            optionsHtml += `<option value="${opt.value}" ${isSelected}>${opt.label}</option>`;
                        });

                        inputHtml = `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="gender-select" ${commonDataAttrs} onchange="refreshDivisions(this)" ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                    ${infoIconHtml}
                                </div>
                            `;

                        return `
                                <div class="${colSpanClass}">
                                    ${descriptionHtml}
                                    ${inputHtml}
                                </div>
                            `;
                    }

                    const labelLowerClean = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                    const isCity = labelLowerClean === 'city';
                    const isState = labelLowerClean === 'state';
                    const isZip = labelLowerClean === 'zip' || labelLowerClean === 'zip code' || labelLowerClean === 'postal code' || labelLowerClean === 'zipcode' || labelLowerClean === 'zip/postal code';
                    const isAddressLine1 = labelLowerClean === 'address' || labelLowerClean === 'address 1' || labelLowerClean.includes('address line 1') || labelLowerClean === 'street address';
                    const isPlayerCam = labelLowerClean === 'cam no' || labelLowerClean === 'cam no.' || labelLowerClean === 'cam number';
                    const isCamNumber = labelLowerClean === 'season cam number' || isPlayerCam;
                    const validationClass = isCity ? 'city-input' : (isState ? 'state-input' : (isZip ? 'zip-input' : (isAddressLine1 ? 'address-input' : (isPlayerCam ? 'player-cam-input' : (isCamNumber ? 'cam-number-input' : '')))));


                    let isNumericOnly = (field.label || '').toLowerCase().includes('number') || isCamNumber;
                    // If we already have numeric validation from validation_rules, don't double up
                    if (dynamicValidationAttrs.includes('oninput')) {
                        isNumericOnly = false;
                    }
                    const camOnInput = isCamNumber ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\').substring(0,7)"' : '';
                    const numericOnInput = isCamNumber ? camOnInput : (isNumericOnly ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\')"' : '');
                    const numericInputMode = isNumericOnly ? 'inputmode="numeric"' : '';

                    const rawInputType = (field.field_type || 'text').toString().toLowerCase().trim();
                    const normalizedInputType = (rawInputType === 'text input' || rawInputType === 'text') ? 'text' :
                                               (rawInputType === 'text area' || rawInputType === 'textarea') ? 'textarea' :
                                               (rawInputType === 'dropdown' || rawInputType === 'select') ? 'dropdown' :
                                               (rawInputType === 'checkbox') ? 'checkbox' :
                                               (rawInputType === 'radio' || rawInputType === 'radio buttons') ? 'radio' :
                                               (rawInputType === 'file' || rawInputType === 'file upload' || rawInputType === 'file_upload' || rawInputType === 'document') ? 'file' :
                                               (rawInputType === 'image' || rawInputType === 'image upload' || rawInputType === 'photo') ? 'image' :
                                               rawInputType;

                    if (!hideInputOnly) switch (normalizedInputType) {
                        case 'text':
                        case 'phone':
                        case 'number':
                            let maxLengthAttr = isState ? 'minlength="2" maxlength="2" pattern="[a-zA-Z]{2}" title="State must be exactly 2 characters"' : (isZip ? 'minlength="5" maxlength="9" pattern="[0-9]{5,9}" title="Zip code must be between 5 and 9 digits"' : (isCity ? 'minlength="3" uppercase' : (isAddressLine1 ? 'minlength="5"' : (isPlayerCam ? 'maxlength="7" pattern="[0-9]{1,7}" title="CAM number must be up to 7 digits"' : (isCamNumber ? 'minlength="7" maxlength="7" pattern="[0-9]{7}" title="CAM number must be exactly 7 digits"' : '')))));
                            if (dynamicValidationAttrs) maxLengthAttr = dynamicValidationAttrs;
                            const stateStyle = isState ? 'style="text-transform: uppercase;"' : '';
                            if (isCustomPage) {
                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-1 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                        <div class="flex items-center gap-2">
                                            <div class="flex-grow">
                                                <input type="${isCamNumber ? 'text' : (hasCustomPhoneValidation ? (field.field_type === 'phone' ? 'tel' : 'text') : (field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'))}" 
                                                       ${(hasCustomPhoneValidation && field.field_type === 'number') ? 'inputmode="numeric"' : ''}
                                                       id="${fieldId}" 
                                                       name="${field.page_field_name}" 
                                                       ${commonDataAttrs}
                                                       ${numericOnInput}
                                                       ${numericInputMode}
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow ${isPhoneField ? 'phone-input' : ''} ${validationClass}"
                                                       placeholder="Enter ${field.label}"
                                                       value="${displayValue}"
                                                       ${maxLengthAttr}
                                                       ${stateStyle}
                                                       ${isRequired ? 'required' : ''}>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                        <div class="flex items-center gap-2">
                                            <div class="material-input-group flex-grow">
                                                <input type="${isCamNumber ? 'text' : (hasCustomPhoneValidation ? (field.field_type === 'phone' ? 'tel' : 'text') : (field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'))}" 
                                                       ${(hasCustomPhoneValidation && field.field_type === 'number') ? 'inputmode="numeric"' : ''}
                                                       id="${fieldId}" 
                                                       name="${field.page_field_name}" 
                                                       ${commonDataAttrs}
                                                       ${numericOnInput}
                                                       ${numericInputMode}
                                                       class="${isPhoneField ? 'phone-input' : ''} ${validationClass}"
                                                       placeholder=" "
                                                       value="${displayValue}"
                                                       ${maxLengthAttr}
                                                       ${stateStyle}
                                                       ${isRequired ? 'required' : ''}>
                                                <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                            break;
                        case 'email':
                            if (isCustomPage) {
                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-1 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                        <div class="flex items-center gap-2">
                                            <div class="flex-grow">
                                                <input type="email" 
                                                       id="${fieldId}" 
                                                       name="${field.page_field_name}" 
                                                       ${commonDataAttrs}
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow email-input"
                                                       placeholder="Enter ${field.label}"
                                                       value="${escapedValue}"
                                                       ${dynamicValidationAttrs}
                                                       ${isRequired ? 'required' : ''}>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                        <div class="flex items-center gap-2">
                                            <div class="material-input-group flex-grow">
                                                <input type="email" 
                                                       id="${fieldId}" 
                                                       name="${field.page_field_name}" 
                                                       ${commonDataAttrs}
                                                       class="email-input"
                                                       placeholder=" "
                                                       value="${escapedValue}"
                                                       ${dynamicValidationAttrs}
                                                       ${isRequired ? 'required' : ''}>
                                                <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                            break;
                        case 'date':
                            const isDOBField = (field.label || '').toLowerCase().includes('birth') || (field.label || '').toLowerCase().includes('dob') || (field.page_field_name || '').toLowerCase().includes('birth') || (field.page_field_name || '').toLowerCase().includes('dob');
                            const dateRangeAttrs = isDOBField ? `${minDate ? `min="${minDate}"` : ''} ${maxDate ? `max="${maxDate}"` : ''}` : '';
                            const isValidPreloadedDOB = isDOBField && escapedValue && isValidDateString(escapedValue) && !String(escapedValue).startsWith('0000') && escapedValue !== '00/00/0000' && escapedValue !== '00-00-0000';
                            const isDisabledDOB = isValidPreloadedDOB;
                            const disabledAttr = isDisabledDOB ? 'disabled readonly style="background-color: #f3f4f6; cursor: not-allowed; color: #374151;"' : '';
                            const dateInputType = isDisabledDOB ? 'text' : 'date';
                            const dateInputValue = isDisabledDOB ? formatToMMDDYYYY(escapedValue) : formatDateToYYYYMMDD(escapedValue);
                            const calIconStyle = isDisabledDOB ? 'style="pointer-events: none; opacity: 0.4; cursor: not-allowed;"' : '';

                            if (isCustomPage) {
                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-1 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                        <div class="flex items-center gap-2">
                                            <div class="flex-grow">
                                                <input type="${dateInputType}" 
                                                       id="${fieldId}" 
                                                       name="${field.page_field_name}" 
                                                       ${commonDataAttrs}
                                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow date-input"
                                                       ${!isDisabledDOB ? 'onclick="try { this.showPicker(); } catch(e) {}"' : ''}
                                                       value="${dateInputValue}"
                                                       ${dateRangeAttrs}
                                                       ${dynamicValidationAttrs}
                                                       ${isRequired ? 'required' : ''}
                                                       ${disabledAttr}>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                        <div class="material-input-group">
                                            <input type="${dateInputType}" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   ${commonDataAttrs}
                                                   placeholder=" "
                                                   class="date-input"
                                                   ${!isDisabledDOB ? 'onclick="try { this.showPicker(); } catch(e) {}"' : ''}
                                                   value="${dateInputValue}"
                                                   ${dateRangeAttrs}
                                                   ${dynamicValidationAttrs}
                                                   ${isRequired ? 'required' : ''}
                                                   ${disabledAttr}>
                                            <label for="${fieldId}" class="label-float dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                            <i class="fa-regular fa-calendar calendar-icon" ${calIconStyle}></i>
                                        </div>
                                    `;
                            }
                            break;
                        case 'select':
                        case 'dropdown':
                            let optionsHtml = preValue ? '' : '<option value="" disabled selected></option>';
                            if (field.options && field.options.length > 0) {
                                field.options.forEach(opt => {
                                    const optValue = opt.option_value || opt.value || opt;
                                    const optLabel = opt.option_value || opt.label || opt;
                                    const isSelected = preValue == optValue ? 'selected' : '';
                                    optionsHtml += `<option value="${optValue}" ${isSelected}>${optLabel}</option>`;
                                });
                            }
                            if (isCustomPage) {
                                const dropdownHeader = (field.label && cleanFieldLabel(field.label)) ? `<div class="font-bold text-[#11315b] text-sm mb-1">${cleanFieldLabel(field.label)} :</div>` : '';
                                const dropdownLabelText = (field.label && !displayLabel.toLowerCase().includes(field.label.toLowerCase())) 
                                    ? `${displayLabel} - ${field.label}` 
                                    : displayLabel;
                                inputHtml = `
                                    <div class="mb-4">
                                        ${dropdownHeader}
                                        <div class="flex items-center gap-2">
                                            <div class="material-input-group flex-grow">
                                                <select id="${fieldId}" name="${field.page_field_name}" 
                                                        ${commonDataAttrs}
                                                        class="w-full"
                                                        ${dynamicValidationAttrs}
                                                        ${isRequired ? 'required' : ''}>
                                                    ${optionsHtml}
                                                </select>
                                                <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${dropdownLabelText} ${requiredStar}</label>
                                                <i class="fa-solid fa-chevron-down select-arrow"></i>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                        <div class="flex items-center gap-2">
                                            <div class="material-input-group flex-grow">
                                                <select id="${fieldId}" name="${field.page_field_name}" ${commonDataAttrs} onchange="if(typeof refreshDivisions === 'function') refreshDivisions(this)" ${dynamicValidationAttrs} ${isRequired ? 'required' : ''}>
                                                    ${optionsHtml}
                                                </select>
                                                <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                                <i class="fa-solid fa-chevron-down select-arrow"></i>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                            break;
                        case 'checkbox':
                            // Checkbox handles its own structure including description
                            colSpanClass = descriptionHtml ? 'md:col-span-2' : '';
                            inputHtml = `
                                    ${descriptionHtml}
                                    <div class="checkbox-group">
                                        <div class="flex items-center gap-3 py-2 border-b border-gray-100">
                                            <input type="checkbox" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   ${commonDataAttrs}
                                                   class="w-5 h-5 text-[var(--primary-theme-color,#dc2626)] border-gray-300 rounded focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer flex-shrink-0"
                                                   style="accent-color: var(--primary-theme-color, #dc2626);"
                                                   ${preValue && (preValue === '1' || preValue === 'true' || preValue === true) ? 'checked' : ''}
                                                   ${dynamicValidationAttrs}
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}" class="text-sm font-bold text-gray-800 dynamic-label flex-grow cursor-pointer" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            // We return early for checkbox as it structures itself fully
                            return `<div class="${colSpanClass}">${inputHtml}</div>`;
                        case 'textarea':
                            // Textarea typically takes full width, but if in custom page user might want side-by-side. 
                            // Default to col-span-2 to match original style, unless we want to change it.
                            colSpanClass = 'md:col-span-2';
                            if (isCustomPage) {
                                const isMemoOrComment = labelLower.includes('comment') || labelLower.includes('memo');
                                inputHtml = `
                                    <div class="mb-4">
                                        ${isMemoOrComment ? '' : `<label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-1 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>`}
                                        <div class="flex items-start gap-2">
                                            <div class="flex-grow">
                                                <textarea id="${fieldId}" 
                                                          name="${field.page_field_name}" 
                                                          ${commonDataAttrs}
                                                          rows="3"
                                                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow"
                                                          placeholder="Enter ${field.label}"
                                                          ${dynamicValidationAttrs}
                                                          ${isRequired ? 'required' : ''}>${escapedValue}</textarea>
                                            </div>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                        <div class="material-input-group">
                                            <textarea id="${fieldId}" 
                                                      name="${field.page_field_name}" 
                                                      ${commonDataAttrs}
                                                      placeholder=" "
                                                      rows="3"
                                                      ${dynamicValidationAttrs}
                                                      ${isRequired ? 'required' : ''}>${escapedValue}</textarea>
                                            <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                            break;
                        case 'image':
                            colSpanClass = 'md:col-span-2';
                            {
                                const hasSavedImage = escapedValue && (escapedValue.startsWith('http') || escapedValue.includes('/') || escapedValue.includes('.'));
                                const displayValueUrl = hasSavedImage ? window.formatProfilePictureUrl(escapedValue) : '';
                                const isReqAttr = isRequired && !hasSavedImage ? 'required' : '';
                                const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                let displayName = 'Picture Image';
                                if (displayLabel) {
                                    if (displayLabel.toLowerCase().includes('player') && (displayLabel.toLowerCase().includes('pic') || displayLabel.toLowerCase().includes('image'))) {
                                        displayName = 'Player Picture Image';
                                    } else if (displayLabel.toLowerCase().endsWith('image') || displayLabel.toLowerCase().endsWith('picture') || displayLabel.toLowerCase().endsWith('photo')) {
                                        displayName = displayLabel;
                                    } else {
                                        displayName = `${displayLabel} Image`;
                                    }
                                }
                                const parentPlayerIdArg = (isParentPage && typeof activeParentNumber !== 'undefined' && activeParentNumber === 2) ? 'parent_2' : 'parent';
                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}" data-field-help="${(helpText || '').replace(/"/g, '&quot;')}">${displayLabel} ${requiredStar} ${infoIconHtml}</label>
                                        <div class="photo-upload-group relative w-full">
                                            <input type="file" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   ${commonDataAttrs}
                                                   data-player-id="${parentPlayerIdArg}"
                                                   accept="image/*"
                                                   class="hidden profile-picture-input"
                                                   data-uploaded-url="${displayValueUrl}"
                                                   ${wasReqAttr}
                                                   onchange="handleProfilePictureUpload(this, '${parentPlayerIdArg}')"
                                                   ${isReqAttr}>
                                            
                                            <!-- Select Picture Box (dashed orange border) -->
                                            <div id="upload-box-${fieldId}" class="upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-[#f48120] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-orange-50 transition-colors ${hasSavedImage ? 'hidden' : ''}" onclick="document.getElementById('${fieldId}').click()">
                                                <div class="flex items-center justify-center gap-2 text-[#f48120]">
                                                    <i class="fa-solid fa-camera text-2xl"></i>
                                                    <span class="font-bold text-lg">Select Picture</span>
                                                </div>
                                            </div>

                                            <!-- Preview Box -->
                                            <div id="preview-box-${fieldId}" class="preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedImage ? '' : 'hidden'}">
                                                <div class="flex items-center gap-4">
                                                    <img id="preview-img-${fieldId}" 
                                                          src="${displayValueUrl || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}" 
                                                          onload="if(this.src.startsWith('data:image/gif')){ const input = document.getElementById('${fieldId}'); const url = input ? input.getAttribute('data-uploaded-url') : ''; if(url) window.loadProfilePicture(this, url); }"
                                                          class="w-16 h-16 rounded-full object-cover border border-gray-300 cursor-pointer hover:opacity-80 transition-opacity" 
                                                          alt="${displayLabel}" 
                                                          onclick="showImagePreviewPopup(this.src)">
                                                    <div class="flex flex-col">
                                                        <span class="font-bold text-gray-800 text-lg">${displayName}</span>
                                                        <span class="text-green-600 font-semibold flex items-center gap-1 text-sm">
                                                            <i class="fa-solid fa-circle-check"></i> Uploaded
                                                        </span>
                                                    </div>
                                                </div>
                                                <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl" onclick="deleteProfilePicture(this, '${fieldId}')">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }
                            break;
                        case 'file':
                        case 'file_upload':
                        case 'file upload':
                        case 'document':
                            colSpanClass = 'md:col-span-2';
                            {
                                const hasSavedFile = escapedValue && (escapedValue.startsWith('http') || escapedValue.includes('/') || escapedValue.includes('.') || String(escapedValue).trim().length > 0);
                                const displayFileUrl = hasSavedFile ? (escapedValue.startsWith('http') ? escapedValue : `{{ config('api.url') }}/storage/form_builder/${escapedValue}`) : '';
                                const displayFileName = hasSavedFile ? (escapedValue.split('/').pop().replace(/^\d+_[a-f0-9]+_/, '') || 'Uploaded Document') : '';
                                const isReqAttr = isRequired && !hasSavedFile ? 'required' : '';
                                const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                const fileIconHtml = window.getFileIconHtml ? window.getFileIconHtml(displayFileName || escapedValue) : '<i class="fa-solid fa-file text-blue-500 text-2xl"></i>';

                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}" data-field-help="${(helpText || '').replace(/"/g, '&quot;')}">${displayLabel} ${requiredStar} ${infoIconHtml}</label>
                                        <div class="generic-file-group relative w-full">
                                            <input type="file" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   ${commonDataAttrs}
                                                   accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar"
                                                   class="hidden generic-file-input"
                                                   data-uploaded-url="${escapedValue}"
                                                   ${wasReqAttr}
                                                   onchange="handleGenericFileUpload(this, '${targetPlayerId}', '${field.field_id}')"
                                                   ${isReqAttr}>
                                            
                                            <!-- Upload Box (dashed border) -->
                                            <div id="upload-box-${fieldId}" class="upload-box generic-upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-gray-300 hover:border-[#11315b] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-blue-50/40 transition-colors ${hasSavedFile ? 'hidden' : ''}" 
                                                 onclick="document.getElementById('${fieldId}').click()"
                                                 ondragover="event.preventDefault(); this.classList.add('border-[#11315b]', 'bg-blue-50/60');" 
                                                 ondragleave="this.classList.remove('border-[#11315b]', 'bg-blue-50/60');" 
                                                 ondrop="event.preventDefault(); this.classList.remove('border-[#11315b]', 'bg-blue-50/60'); if(event.dataTransfer && event.dataTransfer.files.length){ const inp = document.getElementById('${fieldId}'); inp.files = event.dataTransfer.files; handleGenericFileUpload(inp, '${targetPlayerId}', '${field.field_id}'); }">
                                                <div class="flex flex-col items-center justify-center gap-2 text-gray-500">
                                                    <i class="fa-solid fa-cloud-arrow-up text-2xl text-[var(--primary-theme-color,#11315b)]"></i>
                                                    <span class="font-bold text-base text-gray-700">Choose file or drag here</span>
                                                    <span class="text-xs text-gray-400">PDF, DOC, DOCX, Images, Excel, up to 50MB</span>
                                                </div>
                                            </div>

                                            <!-- Preview Box -->
                                            <div id="preview-box-${fieldId}" class="preview-box generic-preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedFile ? '' : 'hidden'}">
                                                <div class="flex items-center gap-3 min-w-0">
                                                    <div id="file-icon-${fieldId}" class="flex-shrink-0">
                                                        ${fileIconHtml}
                                                    </div>
                                                    <div class="flex flex-col min-w-0">
                                                        <span id="file-name-${fieldId}" class="font-bold text-gray-800 text-sm truncate" title="${displayFileName}">${displayFileName}</span>
                                                        <div class="flex items-center gap-3 mt-1">
                                                            <span class="text-green-600 font-semibold flex items-center gap-1 text-xs">
                                                                <i class="fa-solid fa-circle-check"></i> Uploaded
                                                            </span>
                                                            <a id="file-link-${fieldId}" href="${displayFileUrl}" target="_blank" class="text-blue-600 hover:underline text-xs flex items-center gap-1 font-medium ${displayFileUrl ? '' : 'hidden'}">
                                                                <i class="fa-solid fa-arrow-up-right-from-square"></i> View
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl flex-shrink-0" onclick="deleteGenericFile(this, '${fieldId}')" title="Remove file">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }
                            break;
                        case 'radio':
                            colSpanClass = 'md:col-span-2';
                            let radioOptionsHtml = '';
                            let radioOpts = [];
                            if (field.options) {
                                if (Array.isArray(field.options)) {
                                    radioOpts = field.options;
                                } else if (typeof field.options === 'string') {
                                    radioOpts = field.options.split(',').map(s => {
                                        const trimmed = s.trim();
                                        return { option_value: trimmed, label: trimmed };
                                    });
                                }
                            }
                            if (radioOpts.length > 0) {
                                radioOpts.forEach((opt, idx) => {
                                    const optValue = opt.option_value || opt.value || opt;
                                    const optLabel = opt.option_value || opt.label || opt;
                                    const isChecked = (preValue !== '' && preValue !== null && preValue !== undefined) &&
                                        (String(preValue).trim().toLowerCase() === String(optValue).trim().toLowerCase()) ? 'checked' : '';
                                    const optionId = `${fieldId}-${idx}`;
                                    radioOptionsHtml += `
                                        <label class="flex items-center gap-2 text-sm text-gray-800 cursor-pointer py-1">
                                            <input type="radio" 
                                                   id="${optionId}" 
                                                   name="${field.page_field_name}" 
                                                   value="${optValue}" 
                                                   ${commonDataAttrs}
                                                   class="w-5 h-5 text-[var(--primary-theme-color,#dc2626)] border-gray-300 focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer"
                                                   style="accent-color: var(--primary-theme-color, #dc2626);"
                                                   ${isChecked}
                                                   ${isRequired ? 'required' : ''}>
                                            <span>${optLabel}</span>
                                        </label>
                                    `;
                                });
                            }
                            if (isCustomPage) {
                                const radioHeader = (field.label && cleanFieldLabel(field.label)) ? `<div class="font-bold text-[#11315b] text-sm mb-1">${cleanFieldLabel(field.label)} :</div>` : '';
                                inputHtml = `
                                    <div class="mb-4">
                                        ${radioHeader}
                                        <div class="flex flex-col sm:flex-row sm:flex-wrap gap-4 mt-2">
                                            ${radioOptionsHtml}
                                        </div>
                                    </div>
                                `;
                            } else {
                                inputHtml = `
                                    <div class="mb-4">
                                        <div class="text-sm font-bold text-[var(--primary-theme-color)] mb-2 dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar} ${infoIconHtml}</div>
                                        <div class="flex flex-col sm:flex-row sm:flex-wrap gap-4">
                                            ${radioOptionsHtml}
                                        </div>
                                    </div>
                                `;
                            }
                            break;
                        default:
                            // Default to text input for unknown types
                            if (field.field_type) {
                                inputHtml = `
                                        <div class="material-input-group">
                                            <input type="text" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   ${commonDataAttrs}
                                                   placeholder=" "
                                                   value="${escapedValue}"
                                                   ${dynamicValidationAttrs}
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}" class="dynamic-label" data-id-table="${fieldIdTable}" data-original-label="${field.label}">${displayLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                    }

                    // For non-checkbox fields, wrap with description if present
                    if ((inputHtml || descriptionHtml) && field.field_type !== 'checkbox') {
                        return `
                                <div class="${colSpanClass}">
                                    ${descriptionHtml}
                                    ${inputHtml}
                                </div>
                            `;
                    }

                    return inputHtml;
                }

                // Update all dynamic labels in the DOM to reflect latest parent/player names
                function refreshAllLabels() {
                    if (typeof fieldValues === 'undefined') return;

                    const parentFName = fieldValues['first name'] || fieldValues['firstname'] || '';
                    const parentLName = fieldValues['last name'] || fieldValues['lastname'] || '';
                    let pName = (parentFName + ' ' + parentLName).trim() || parent1Name || '';
                    if (!pName && typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 0) {
                        pName = `${familyCircleParents[0].first_name || ''} ${familyCircleParents[0].last_name || ''}`.trim();
                    }
                    if (!pName) pName = 'Parent / Guardian';

                    const isP1Saved = (typeof savedParentKeys !== 'undefined' && (savedParentKeys.has(1) || savedParentKeys.has('parent_1') || savedParentKeys.has('parent') || (typeof parentId1 !== 'undefined' && parentId1 && savedParentKeys.has(parentId1))));
                    const currentPName = (isP1Saved || isParentSaved) ? (pName || parent1Name || 'Parent 1') : (parent1Name || 'Parent');

                    // Prepare player names mapping
                    const playerNamesMap = {};
                    playersList.forEach(p => {
                        const fullName = `${p.first_name || ''} ${p.last_name || ''}`.trim() || 'Player';
                        playerNamesMap[p.player_id] = fullName;
                        playerNamesMap[String(p.player_id)] = fullName;
                        if (!isNaN(parseInt(p.player_id))) {
                            playerNamesMap[parseInt(p.player_id)] = fullName;
                        }
                    });

                    // Build a combined player names string (for labels without a specific player ID)
                    const allPlayerNames = Array.from(selectedPlayerIds).map(pid => {
                        const numericPid = parseInt(pid);
                        return playerNamesMap[pid] || playerNamesMap[numericPid] || 'Player';
                    }).filter(Boolean).join(', ');

                    let fcP2Name = '';
                    if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1) {
                        fcP2Name = `${familyCircleParents[1].first_name || ''} ${familyCircleParents[1].last_name || ''}`.trim();
                    }

                    const p2FName = (typeof parent2FieldValues !== 'undefined' ? (parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '') : '');
                    const p2LName = (typeof parent2FieldValues !== 'undefined' ? (parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '') : '');
                    let p2FullName = (p2FName + ' ' + p2LName).trim();

                    // If p2FullName is identical to parent 1 name or empty, fall back to known distinct parent2Name or familyCircleParents[1]
                    if (!p2FullName || p2FullName.toLowerCase() === currentPName.toLowerCase() || p2FullName.toLowerCase() === pName.toLowerCase()) {
                        if (fcP2Name && fcP2Name.toLowerCase() !== currentPName.toLowerCase()) {
                            p2FullName = fcP2Name;
                        } else if (parent2Name && parent2Name.toLowerCase() !== currentPName.toLowerCase()) {
                            p2FullName = parent2Name;
                        }
                    }
                    if (!p2FullName) p2FullName = parent2Name || fcP2Name || 'Parent 2';

                    const isP2Saved = (typeof savedParentKeys !== 'undefined' && (savedParentKeys.has(2) || savedParentKeys.has('parent_2') || (typeof parentId2 !== 'undefined' && parentId2 && savedParentKeys.has(parentId2))));
                    const currentP2Name = isP2Saved ? (p2FullName || parent2Name || 'Parent 2') : (p2FullName || parent2Name || 'Parent 2');

                    document.querySelectorAll('.dynamic-label').forEach(labelEl => {
                        const idTable = labelEl.getAttribute('data-id-table');
                        const originalLabel = labelEl.getAttribute('data-original-label');
                        const playerId = labelEl.getAttribute('data-player-id');

                        if (!originalLabel) return; // Skip labels without original-label data

                        // Determine if we should clean the "Player - " prefix based on the section name
                        let isPlayerSection = false;
                        let isParentSection = false;
                        const sectionWrapper = labelEl.closest('[id^="section-wrapper-"]');
                        if (sectionWrapper) {
                            const pageId = sectionWrapper.id.replace('section-wrapper-', '');
                            const headerTitle = document.getElementById(`header-title-${pageId}`);
                            if (headerTitle) {
                                const title = (headerTitle.innerText || '').toLowerCase().trim();
                                // Stricter check for player/children pages to avoid misidentifying custom pages like "Returning Player"
                                isPlayerSection = (title.includes('player') || title.includes('children') || title.includes('minor')) &&
                                    !title.includes('preference') && !title.includes('waiver') && !title.includes('conduct') &&
                                    !title.includes('comment') && !title.includes('selection') && !title.includes('level') &&
                                    !title.includes('rules') && !title.includes('returning');

                                isParentSection = (title.includes('parent') || title.includes('guardian') || title.includes('adult') || title.includes('account')) &&
                                    !title.includes('preference') && !title.includes('waiver') && !title.includes('conduct') &&
                                    !title.includes('rules') && !title.includes('comment') && !title.includes('selection') &&
                                    !title.includes('returning') && !title.includes('contact');
                            }
                        }

                        // Safety fallback for player-specific rendering containers
                        if (!isPlayerSection && labelEl.closest('[id^="player-fields-container-"]')) {
                            isPlayerSection = true;
                        }

                        const cleanOriginalLabel = cleanFieldLabel((isPlayerSection || isParentSection) ? (originalLabel || '').replace(/^Player - /i, '') : originalLabel);

                        let newLabelText = '';
                        if (isPlayerSection || isParentSection) {
                            // On Player/Children or Parent pages, don't prepend names to labels as requested
                            newLabelText = cleanOriginalLabel;
                        } else {
                            let isParentField = (idTable == 1 || idTable == '1' || playerId === 'parent' || playerId === 'parent_2' || playerId === 'parent2');

                            if (playerId === 'parent_2' || playerId === 'parent2') {
                                // On custom pages, show ONLY the Parent 2 Name
                                newLabelText = currentP2Name;
                            } else if (playerId === 'parent' || playerId === 'parent_1' || isParentField) {
                                // On custom pages, show ONLY the Parent 1 Name
                                newLabelText = currentPName;
                            } else if (playerId && playerId !== 'parent') {
                                // Specific player field: show ONLY that individual player's name
                                const pObj = playersList.find(p => p.player_id == playerId || String(p.player_id) === String(playerId));
                                if (pObj) {
                                    newLabelText = `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim() || 'Player';
                                } else {
                                    newLabelText = playerNamesMap[playerId] || playerNamesMap[String(playerId)] || playerNamesMap[parseInt(playerId)] || 'Player';
                                }
                            } else if (allPlayerNames) {
                                // Global field without a specific player: show combined player names
                                newLabelText = allPlayerNames;
                            } else {
                                newLabelText = currentPName || cleanOriginalLabel;
                            }
                            
                            newLabelText = cleanFieldLabel(newLabelText);
                        }

                        if (newLabelText) {
                            let iconHtml = '';
                            const existingIcon = labelEl.querySelector('.field-info-icon');
                            if (existingIcon) {
                                iconHtml = ` ${existingIcon.outerHTML}`;
                            } else {
                                const rawHelp = labelEl.getAttribute('data-field-help');
                                if (rawHelp) {
                                    const escapedHelp = rawHelp.replace(/`/g, '\\`').replace(/'/g, "\\'").replace(/"/g, '&quot;');
                                    iconHtml = ` <i class="fa-solid fa-circle-info field-info-icon" onclick="event.preventDefault(); event.stopPropagation(); if(window.showRegistrationTooltip) window.showRegistrationTooltip(this, \`${escapedHelp}\`)" title="Click for more info"></i>`;
                                }
                            }
                            const hasStar = labelEl.innerHTML.includes('required-star') || labelEl.innerHTML.includes('*');
                            labelEl.innerHTML = `${newLabelText} ${hasStar ? '<span class="required-star">*</span>' : ''}${iconHtml}`.trim();
                        }
                    });
                }

                // Fetch and populate player data when checkbox is selected
                async function onPlayerSelect(playerId, playerName, isChecked) {
                    // 

                    // Update selection set
                    if (isChecked) {
                        // Remove other unsaved players from selectedPlayerIds
                        Array.from(selectedPlayerIds).forEach(id => {
                            if (id != playerId && !updatedPlayerIds.has(id) && !updatedPlayerIds.has(String(id)) && !updatedPlayerIds.has(parseInt(id))) {
                                selectedPlayerIds.delete(id);
                            }
                        });
                        selectedPlayerIds.add(playerId);
                        currentlyEditingPlayerId = playerId;
                    } else {
                        selectedPlayerIds.delete(playerId);
                        if (currentlyEditingPlayerId === playerId) {
                            currentlyEditingPlayerId = null;
                        }
                    }

                    // Update dynamic labels across all pages when player selection changes
                    refreshAllLabels();

                    if (!isChecked) {
                        // Clear player field values when unchecked
                        playerFieldValues = {};

                        // Re-render ALL player accordions without pre-populated values
                        Object.values(playerPages).forEach(page => {
                            const container = document.getElementById(`player-fields-container-${page.page_id}`);
                            if (container) {
                                container.innerHTML = generatePlayerFields(page, false);
                            }
                        });
                        if (typeof refreshCustomPagesFields === 'function') {
                            refreshCustomPagesFields();
                        }
                        return;
                    }

                    try {
                        // Check for local player first
                        const localPlayer = playersList.find(p => p.player_id == playerId && p.is_local);
                        if (localPlayer) {
                            // 
                            playerFieldValues = {};

                            // Populate values from local fields
                            if (Array.isArray(localPlayer.fields)) {
                                localPlayer.fields.forEach(f => {
                                    if (f.label && f.value !== undefined && f.value !== null) {
                                        const cleanVal = sanitizeFieldValue(f.value, f.label, f.field_type);
                                        if (cleanVal !== '') {
                                            const normL = f.label.toLowerCase().trim();
                                            const cleanL = f.label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                            playerFieldValues[normL] = cleanVal;
                                            playerFieldValues[cleanL] = cleanVal;
                                            if (cleanL === 'gender' || cleanL === 'sex' || cleanL.includes('gender')) {
                                                playerFieldValues['gender'] = cleanVal;
                                                playerFieldValues['player - gender'] = cleanVal;
                                            }
                                            if (cleanL.includes('birth') || cleanL.includes('dob') || normL.includes('birth') || normL.includes('dob')) {
                                                playerFieldValues['date of birth'] = cleanVal;
                                                playerFieldValues['birth date'] = cleanVal;
                                                playerFieldValues['birthdate'] = cleanVal;
                                                playerFieldValues['dob'] = cleanVal;
                                                playerFieldValues['player - date of birth'] = cleanVal;
                                                playerFieldValues['player - birthdate'] = cleanVal;
                                                playerFieldValues['player - dob'] = cleanVal;
                                            }
                                            if (f.field_id) {
                                                playerFieldValues[`id_${f.field_id}`] = cleanVal;
                                            }
                                        }
                                    }
                                });
                            } else if (typeof localPlayer.fields === 'object') {
                                // Fallback if saved as map
                                Object.entries(localPlayer.fields).forEach(([k, v]) => {
                                    if (v !== undefined && v !== null) {
                                        const cleanVal = sanitizeFieldValue(v, k);
                                        if (cleanVal !== '') {
                                            const normL = k.toLowerCase().trim();
                                            const cleanL = k.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                            playerFieldValues[normL] = cleanVal;
                                            playerFieldValues[cleanL] = cleanVal;
                                            if (cleanL === 'gender' || cleanL === 'sex' || cleanL.includes('gender')) {
                                                playerFieldValues['gender'] = cleanVal;
                                                playerFieldValues['player - gender'] = cleanVal;
                                            }
                                            if (cleanL.includes('birth') || cleanL.includes('dob') || normL.includes('birth') || normL.includes('dob')) {
                                                playerFieldValues['date of birth'] = cleanVal;
                                                playerFieldValues['birth date'] = cleanVal;
                                                playerFieldValues['birthdate'] = cleanVal;
                                                playerFieldValues['dob'] = cleanVal;
                                                playerFieldValues['player - date of birth'] = cleanVal;
                                                playerFieldValues['player - birthdate'] = cleanVal;
                                                playerFieldValues['player - dob'] = cleanVal;
                                            }
                                        }
                                    }
                                });
                            }

                            if (localPlayer.gender !== undefined && localPlayer.gender !== null) {
                                playerFieldValues['gender'] = String(localPlayer.gender);
                                playerFieldValues['player - gender'] = String(localPlayer.gender);
                            }

                            if (localPlayer.division_id) {
                                playerFieldValues['division'] = String(localPlayer.division_id);
                            }

                            // Apply draft overrides if any
                            if (window.draftPlayerFieldValues && window.draftPlayerFieldValues[playerId]) {
                                Object.entries(window.draftPlayerFieldValues[playerId]).forEach(([label, val]) => {
                                    if (val !== undefined && val !== null) {
                                        const cleanVal = sanitizeFieldValue(val, label);
                                        if (cleanVal !== '') {
                                            const normL = label.toLowerCase().trim();
                                            const cleanL = label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                            playerFieldValues[label] = cleanVal;
                                            playerFieldValues[normL] = cleanVal;
                                            playerFieldValues[cleanL] = cleanVal;
                                            if (cleanL === 'gender' || cleanL === 'sex' || cleanL.includes('gender')) {
                                                playerFieldValues['gender'] = cleanVal;
                                                playerFieldValues['player - gender'] = cleanVal;
                                            }
                                            if (cleanL.includes('birth') || cleanL.includes('dob') || normL.includes('birth') || normL.includes('dob')) {
                                                playerFieldValues['date of birth'] = cleanVal;
                                                playerFieldValues['birth date'] = cleanVal;
                                                playerFieldValues['birthdate'] = cleanVal;
                                                playerFieldValues['dob'] = cleanVal;
                                                playerFieldValues['player - date of birth'] = cleanVal;
                                                playerFieldValues['player - birthdate'] = cleanVal;
                                                playerFieldValues['player - dob'] = cleanVal;
                                            }
                                        }
                                    }
                                });
                            }

                            // Re-render ALL player accordions with pre-populated values
                            Object.values(playerPages).forEach(page => {
                                const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                if (container) {
                                    container.innerHTML = generatePlayerFields(page, true);
                                    const gSelect = container.querySelector('.grade-select');
                                    if (gSelect && gSelect.value) {
                                        refreshDivisions(gSelect);
                                    } else {
                                        const genSelect = container.querySelector('.gender-select');
                                        if (genSelect && genSelect.value) {
                                            refreshDivisions(genSelect);
                                        }
                                    }
                                }
                            });

                            // Re-render ALL player selection UIs
                            updatePlayerSelectionUI();
                            if (typeof refreshCustomPagesFields === 'function') {
                                refreshCustomPagesFields();
                            }
                            return;
                        }
                        // Fetch player data
                        // console.log(`🔄 Calling FetchPlayerData API for player_id: ${playerId}`);
                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchPlayerData {
                                        fetchPlayerData(player_id: ${playerId}) {
                                            player_id
                                            registration_id
                                            form_id
                                            page_id
                                            fields {
                                                field_id
                                                label
                                                value
                                            }
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        // console.log('✅ FetchPlayerData API Response:', JSON.stringify(result, null, 2));

                        // Clear previous player field values
                        playerFieldValues = {};

                        if (result.data && result.data.fetchPlayerData) {
                            const playerData = result.data.fetchPlayerData;
                            // console.log(`✅ Player Data — player_id: ${playerData.player_id}, form_id: ${playerData.form_id}, page_id: ${playerData.page_id}, registration_id: ${playerData.registration_id}`);
                            // console.log(`✅ Player Fields count: ${playerData.fields ? playerData.fields.length : 0}`);

                            // Map label to value (normalized to lowercase)
                            if (playerData.fields && Array.isArray(playerData.fields)) {
                                playerData.fields.forEach(field => {
                                    if (field.label && field.value !== null && field.value !== undefined) {
                                        const normalizedLabel = field.label.toLowerCase().trim();
                                        const cleanLabel = field.label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                        let val = sanitizeFieldValue(field.value, field.label, field.field_type);
                                        if (val !== '') {
                                            playerFieldValues[normalizedLabel] = val;
                                            playerFieldValues[cleanLabel] = val;
                                            if (cleanLabel === 'gender' || cleanLabel === 'sex' || cleanLabel.includes('gender')) {
                                                playerFieldValues['gender'] = val;
                                                playerFieldValues['player - gender'] = val;
                                            }
                                            if (cleanLabel.includes('birth') || cleanLabel.includes('dob') || normalizedLabel.includes('birth') || normalizedLabel.includes('dob')) {
                                                playerFieldValues['date of birth'] = val;
                                                playerFieldValues['birth date'] = val;
                                                playerFieldValues['birthdate'] = val;
                                                playerFieldValues['dob'] = val;
                                                playerFieldValues['player - date of birth'] = val;
                                                playerFieldValues['player - birthdate'] = val;
                                                playerFieldValues['player - dob'] = val;
                                            }
                                            if (field.field_id) {
                                                playerFieldValues[`id_${field.field_id}`] = val;
                                            }
                                        }
                                        // console.log(`   📝 Field: "${field.label}" = "${val}"`);
                                    }
                                });
                            }
                            if (playerData.gender !== undefined && playerData.gender !== null) {
                                playerFieldValues['gender'] = String(playerData.gender);
                                playerFieldValues['player - gender'] = String(playerData.gender);
                            }
                        } else {
                            console.warn('⚠️ FetchPlayerData returned no data for player_id:', playerId);
                        }

                        // Apply draft overrides if any (always, regardless of API response)
                        if (window.draftPlayerFieldValues && window.draftPlayerFieldValues[playerId]) {
                            // console.log(`🛡️ Applying draft field overrides for player ${playerId}`);
                            Object.entries(window.draftPlayerFieldValues[playerId]).forEach(([label, val]) => {
                                const cleanVal = sanitizeFieldValue(val, label);
                                if (cleanVal !== '') {
                                    const normL = label.toLowerCase().trim();
                                    const cleanL = label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                    playerFieldValues[label] = cleanVal;
                                    playerFieldValues[normL] = cleanVal;
                                    playerFieldValues[cleanL] = cleanVal;
                                    if (cleanL === 'gender' || cleanL === 'sex' || cleanL.includes('gender')) {
                                        playerFieldValues['gender'] = cleanVal;
                                        playerFieldValues['player - gender'] = cleanVal;
                                    }
                                    if (cleanL.includes('birth') || cleanL.includes('dob') || normL.includes('birth') || normL.includes('dob')) {
                                        playerFieldValues['date of birth'] = cleanVal;
                                        playerFieldValues['birth date'] = cleanVal;
                                        playerFieldValues['birthdate'] = cleanVal;
                                        playerFieldValues['dob'] = cleanVal;
                                        playerFieldValues['player - date of birth'] = cleanVal;
                                        playerFieldValues['player - birthdate'] = cleanVal;
                                        playerFieldValues['player - dob'] = cleanVal;
                                    }
                                }
                                // console.log(`   💎 Draft Override: "${label}" = "${val}"`);
                            });
                        }

                        // console.log('✅ All playerFieldValues:', playerFieldValues);

                        // Re-render ALL player accordions with pre-populated values
                        Object.values(playerPages).forEach(page => {
                            const container = document.getElementById(`player-fields-container-${page.page_id}`);
                            if (container) {
                                container.innerHTML = generatePlayerFields(page, true);
                                const gSelect = container.querySelector('.grade-select');
                                if (gSelect && gSelect.value) {
                                    refreshDivisions(gSelect);
                                } else {
                                    const genSelect = container.querySelector('.gender-select');
                                    if (genSelect && genSelect.value) {
                                        refreshDivisions(genSelect);
                                    }
                                }
                            }
                        });

                        // Re-render ALL player selection UIs to reflect current loading state
                        updatePlayerSelectionUI();
                        if (typeof refreshCustomPagesFields === 'function') {
                            refreshCustomPagesFields();
                        }

                    } catch (error) {
                        console.error('Error fetching player data:', error);
                        
                        // Even if API fails, apply draft overrides so user sees saved values
                        if (window.draftPlayerFieldValues && window.draftPlayerFieldValues[playerId]) {
                            console.log(`🛡️ API failed — applying draft field overrides for player ${playerId}`);
                            Object.entries(window.draftPlayerFieldValues[playerId]).forEach(([label, val]) => {
                                const normL = label.toLowerCase().trim();
                                const cleanL = label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                playerFieldValues[label] = val;
                                playerFieldValues[normL] = val;
                                playerFieldValues[cleanL] = val;
                                if (cleanL === 'gender' || cleanL === 'sex' || cleanL.includes('gender')) {
                                    playerFieldValues['gender'] = val;
                                    playerFieldValues['player - gender'] = val;
                                }
                            });
                            
                            // Re-render with draft data
                            Object.values(playerPages).forEach(page => {
                                const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                if (container) {
                                    container.innerHTML = generatePlayerFields(page, true);
                                }
                            });
                            updatePlayerSelectionUI();
                            if (typeof refreshCustomPagesFields === 'function') {
                                refreshCustomPagesFields();
                            }
                        }
                    }
                }

                // Handle clicking "+ Add New Child" button
                window.addNewPlayerClick = function() {
                    // console.log('➕ Add New Child clicked');
                    currentlyEditingPlayerId = 'new';
                    playerFieldValues = {};

                    // Remove any unsaved profile players from selectedPlayerIds when creating a new child
                    Array.from(selectedPlayerIds).forEach(id => {
                        if (!updatedPlayerIds.has(id) && !updatedPlayerIds.has(String(id)) && !updatedPlayerIds.has(parseInt(id))) {
                            selectedPlayerIds.delete(id);
                        }
                    });

                    Object.values(playerPages).forEach(page => {
                        const container = document.getElementById(`player-fields-container-${page.page_id}`);
                        if (container) {
                            container.style.display = 'block';
                            container.innerHTML = generatePlayerFields(page, false);
                        }
                    });

                    updatePlayerSelectionUI();
                    refreshAllLabels();
                    if (typeof refreshCustomPagesFields === 'function') {
                        refreshCustomPagesFields();
                    }
                };

                // Handle clicking on a player's name to load their draft data (or toggle it off)
                async function onPlayerNameClick(playerId, playerName) {
                    // console.log(`👆 Player name clicked: ${playerName} (ID: ${playerId})`);

                    const isCurrentlySelected = currentlyEditingPlayerId === playerId;

                    if (isCurrentlySelected) {
                        // console.log(`Toggle off: Deselecting player ${playerId}`);
                        currentlyEditingPlayerId = null;

                        // Clear player field values
                        playerFieldValues = {};

                        // Remove any unsaved profile players from selectedPlayerIds
                        Array.from(selectedPlayerIds).forEach(id => {
                            if (!updatedPlayerIds.has(id) && !updatedPlayerIds.has(String(id)) && !updatedPlayerIds.has(parseInt(id))) {
                                selectedPlayerIds.delete(id);
                            }
                        });

                        // Hide player fields container for all player pages
                        Object.values(playerPages).forEach(page => {
                            const container = document.getElementById(`player-fields-container-${page.page_id}`);
                            if (container) {
                                container.style.display = 'none';
                            }
                        });

                        updatePlayerSelectionUI();
                        refreshAllLabels();
                        if (typeof refreshCustomPagesFields === 'function') {
                            refreshCustomPagesFields();
                        }
                        return;
                    }

                    // Otherwise, select the player and trigger data fetch + prefill
                    currentlyEditingPlayerId = playerId;
                    selectedPlayerIds.add(playerId);

                    // Show player fields container for all player pages
                    Object.values(playerPages).forEach(page => {
                        const container = document.getElementById(`player-fields-container-${page.page_id}`);
                        if (container) {
                            container.style.display = 'block';
                        }
                    });

                    // Trigger onPlayerSelect to fetch player data and apply draft overrides
                    await onPlayerSelect(playerId, playerName, true);
                    updatePlayerSelectionUI();
                }

                // Toggle a player's registration checkbox in the "Added Players" list
                // When unchecked: player stays in list (data in draft) but excluded from registration, summary, and custom pages
                // When checked: player is included in registration again
                function togglePlayerCheckbox(event, playerId, playerName) {
                    if (event) event.stopPropagation();
                    const pid = parseInt(playerId);

                    if (excludedPlayerIds.has(pid)) {
                        // Re-include: remove from excluded set
                        excludedPlayerIds.delete(pid);
                        selectedPlayerIds.add(pid);
                        // console.log(`✅ Player ${pid} re-included in registration`);
                    } else {
                        // Exclude: add to excluded set, remove from selected
                        excludedPlayerIds.add(pid);
                        selectedPlayerIds.delete(pid);
                        selectedPlayerIds.delete(String(pid));
                        if (currentlyEditingPlayerId == pid) {
                            currentlyEditingPlayerId = null;
                        }
                        // console.log(`❌ Player ${pid} excluded from registration (data kept in draft)`);
                    }

                    updatePlayerSelectionUI();
                    refreshAllLabels();
                    if (typeof refreshCustomPagesFields === 'function') {
                        refreshCustomPagesFields();
                    }
                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }
                }

                // Store ALL player pages data globally for re-rendering (keyed by page_id)
                // playerPages is already declared above

                // Generate HTML for player fields, optionally using pre-populated data
                function generatePlayerFields(page, updateWithData = false) {
                    if (!page) return '';

                    // For Player pages: include fields with display 0 (hidden), 1 (visible), and 2 (hidden)
                    // Note: display 0 and 2 are rendered as hidden inputs by generatePlayerInputField
                    const visibleFieldsRaw = page.fields.filter(f => f.display == 0 || f.display == 1 || f.display == 2 || f.display === true || f.display === false);
                    const seenFieldKeys = new Set();
                    const visibleFields = visibleFieldsRaw.filter(f => {
                        const key = (f.field_id || f.custom_field_id || f.customfieldId) ? String(f.field_id || f.custom_field_id || f.customfieldId) : (f.label || '').toLowerCase().trim();
                        if (!key) return true;
                        if (seenFieldKeys.has(key)) return false;
                        seenFieldKeys.add(key);
                        return true;
                    });

                    // Group fields by group_name
                    const groups = {};
                    visibleFields.forEach(field => {
                        const groupName = field.group_name || 'Other';
                        const fieldGroupSort = field.group_sort_order ?? 999;
                        if (!groups[groupName]) {
                            groups[groupName] = {
                                sort_order: fieldGroupSort,
                                priority: getGroupPriority(groupName),
                                fields: []
                            };
                        } else if (fieldGroupSort < groups[groupName].sort_order) {
                            groups[groupName].sort_order = fieldGroupSort;
                        }
                        groups[groupName].fields.push(field);
                    });

                    // Sort groups by group priority (Name -> Personal Info -> Address -> Phone -> Email -> Emergency -> Additional -> Comments)
                    const sortedGroups = Object.entries(groups)
                        .sort((a, b) => {
                            const prioDiff = a[1].priority - b[1].priority;
                            if (prioDiff !== 0) return prioDiff;
                            const diff = a[1].sort_order - b[1].sort_order;
                            if (diff !== 0) return diff;
                            const minSortA = a[1].fields && a[1].fields.length > 0 ? Math.min(...a[1].fields.map(f => f.sort_order ?? 999)) : 999;
                            const minSortB = b[1].fields && b[1].fields.length > 0 ? Math.min(...b[1].fields.map(f => f.sort_order ?? 999)) : 999;
                            return minSortA - minSortB;
                        });

                    // Build group content
                    let groupsHtml = '';

                    // Check if this is a waiver/consent page with just one checkbox
                    const isWaiverPage = visibleFields.length === 1 &&
                        visibleFields[0].field_type === 'checkbox' &&
                        visibleFields[0].page_field_description;

                    if (isWaiverPage) {
                        // Render waiver pages without group header, full width
                        const field = visibleFields[0];
                        // Pass updateWithData as usePrePopulate flag, but check it against playerFieldValues logic
                        groupsHtml = generatePlayerInputField(field, updateWithData);
                    } else {
                        sortedGroups.forEach(([groupName, groupData]) => {
                            // Sort fields within group by sort_order
                            const sortedFields = groupData.fields.sort((a, b) => a.sort_order - b.sort_order);

                            let fieldsHtml = '';

                            // Special handling for Phone Numbers group
                            if (groupName.toLowerCase() === 'phone numbers') {
                                // Organize phone fields by their number (1, 2, etc.)
                                const phoneGroups = {};
                                let otherFields = [];

                                sortedFields.forEach(field => {
                                    const isFieldVisible = field.display == 1 || field.display === true || field.display === '1' || field.display === 'true';
                                    if (!isFieldVisible) return;

                                    const labelLower = (field.label || '').toLowerCase();
                                    const fieldName = (field.page_field_name || field.form_field_name || '').toLowerCase();

                                    // Extract number from label or field name (1, 2, etc.)
                                    const numberMatch = labelLower.match(/(\d+)/) || fieldName.match(/(\d+)/);
                                    let phoneNumber = numberMatch ? numberMatch[1] : null;

                                    const isCode = labelLower.includes('code') || fieldName.includes('code');
                                    const isPhone = (labelLower.includes('phone') && !labelLower.includes('ext') && !labelLower.includes('code')) ||
                                        (fieldName.includes('phone') && !fieldName.includes('ext') && !fieldName.includes('code'));
                                    const isExt = labelLower.includes('ext') || fieldName.includes('ext');

                                    if (!phoneNumber && (isCode || isPhone || isExt)) {
                                        phoneNumber = '1';
                                    }

                                    if (phoneNumber && (isCode || isPhone || isExt)) {
                                        if (!phoneGroups[phoneNumber]) {
                                            phoneGroups[phoneNumber] = { code: null, phone: null, ext: null };
                                        }
                                        if (isCode) phoneGroups[phoneNumber].code = field;
                                        else if (isPhone) phoneGroups[phoneNumber].phone = field;
                                        else if (isExt) phoneGroups[phoneNumber].ext = field;
                                    } else {
                                        otherFields.push(field);
                                    }
                                });

                                // Render phone rows
                                Object.keys(phoneGroups).sort().forEach(num => {
                                    const group = phoneGroups[num];
                                    if (!group.phone && !group.code) return;

                                    // If phone is present but code is missing, supply standard country code field
                                    if (group.phone && !group.code) {
                                        group.code = {
                                            label: `Country Code ${num}`,
                                            page_field_name: `countryCode${num}`,
                                            form_field_name: `countryCode${num}`,
                                            display: 1,
                                            field_type: 'text',
                                            group_name: 'Phone Numbers'
                                        };
                                    }

                                    fieldsHtml += `<div class="col-span-full flex flex-wrap md:flex-nowrap gap-4 mb-4 items-end">`;
                                    if (group.code) {
                                        fieldsHtml += `<div class="w-full md:w-1/4">${generatePlayerInputField(group.code, updateWithData, true)}</div>`;
                                    }
                                    if (group.phone) {
                                        fieldsHtml += `<div class="flex-1 min-w-[200px]">${generatePlayerInputField(group.phone, updateWithData)}</div>`;
                                    }
                                    if (group.ext) {
                                        fieldsHtml += `<div class="w-full md:w-1/6">${generatePlayerInputField(group.ext, updateWithData)}</div>`;
                                    }
                                    fieldsHtml += '</div>';
                                });

                                otherFields.forEach(field => {
                                    fieldsHtml += `<div class="mt-2">${generatePlayerInputField(field, updateWithData)}</div>`;
                                });
                            } else if (groupName.toLowerCase().includes('emergency contact') || groupName.toLowerCase() === 'emergency contacts' || groupName.toLowerCase().includes('emergency info')) {
                                const hasVisibleFields = sortedFields.some(field => field.display == 1 || field.display === true || field.display === '1' || field.display === 'true');
                                if (!hasVisibleFields) {
                                    return; // Hide Emergency Info section completely when all fields are display: 0
                                }
                                // Group by number (1, 2, etc.)
                                const emergencyGroups = {};
                                let currentNum = '1';

                                sortedFields.forEach(field => {
                                    const labelLower = field.label.toLowerCase();
                                    const fieldName = field.page_field_name.toLowerCase();
                                    const numberMatch = labelLower.match(/(\d+)/) || fieldName.match(/(\d+)/);

                                    if (numberMatch) {
                                        currentNum = numberMatch[1];
                                    }

                                    if (!emergencyGroups[currentNum]) {
                                        emergencyGroups[currentNum] = [];
                                    }
                                    emergencyGroups[currentNum].push(field);
                                });

                                Object.keys(emergencyGroups).sort().forEach(num => {
                                    // Check if there are any visible fields for this contact
                                    const hasVisibleFields = emergencyGroups[num].some(field => field.display !== 0 && field.display !== 2 && String(field.display) !== 'false');

                                    // Only show subheader if there are multiple contacts in this group
                                    const showSubHeader = hasVisibleFields && (Object.keys(emergencyGroups).length > 1);
                                    if (showSubHeader) {
                                        const mtClass = num === '1' ? 'mt-0' : 'mt-6';
                                        fieldsHtml += `<div class="col-span-full ${mtClass} mb-3 border-b border-gray-200 pb-1">
                                            <h4 class="font-bold text-[var(--primary-theme-color)] text-sm tracking-wide">Contact ${num}</h4>
                                        </div>`;
                                    }

                                    let nameField, relField, phoneField, codeField;
                                    let others = [];

                                    emergencyGroups[num].forEach(field => {
                                        const labelLower = field.label.toLowerCase();
                                        if (labelLower.includes('name')) nameField = field;
                                        else if (labelLower.includes('relation')) relField = field;
                                        else if (labelLower.includes('code')) codeField = field;
                                        else if (labelLower.includes('phone') && !labelLower.includes('ext')) phoneField = field;
                                        else others.push(field);
                                    });

                                    if (nameField) {
                                        fieldsHtml += `<div>${generatePlayerInputField(nameField, updateWithData)}</div>`;
                                    }

                                    if (codeField || phoneField) {
                                        const isPhoneHidden = phoneField && (phoneField.display == 0 || String(phoneField.display) === 'false' || phoneField.display == 2);

                                        if (isPhoneHidden) {
                                            if (codeField) {
                                                codeField.display = 0;
                                                fieldsHtml += generatePlayerInputField(codeField, updateWithData, true);
                                            }
                                            if (phoneField) fieldsHtml += generatePlayerInputField(phoneField, updateWithData);
                                        } else {
                                            fieldsHtml += '<div class="col-span-full flex flex-wrap md:flex-nowrap gap-4 items-end mb-2">';
                                            if (!codeField) {
                                                codeField = {
                                                    field_id: 'virtual_emergencyCountryCode' + num,
                                                    label: 'Country Code',
                                                    field_type: 'text',
                                                    page_field_name: 'emergencyCountryCode' + num,
                                                    display: phoneField.display,
                                                    is_required: phoneField.is_required
                                                };
                                            } else {
                                                codeField.display = phoneField.display;
                                            }
                                            fieldsHtml += `<div class="w-full md:w-1/4">${generatePlayerInputField(codeField, updateWithData, true)}</div>`;
                                            if (phoneField) {
                                                fieldsHtml += `<div class="flex-1 min-w-[200px]">${generatePlayerInputField(phoneField, updateWithData)}</div>`;
                                            }
                                            fieldsHtml += '</div>';
                                        }
                                    }

                                    if (relField) {
                                        fieldsHtml += `<div>${generatePlayerInputField(relField, updateWithData)}</div>`;
                                    }

                                    others.forEach(field => {
                                        fieldsHtml += generatePlayerInputField(field, updateWithData);
                                    });
                                });
                            } else {
                                // Regular fields in 2-column grid
                                sortedFields.forEach(field => {
                                    fieldsHtml += generatePlayerInputField(field, updateWithData);
                                });
                            }

                            if (fieldsHtml) {
                                // Check if there are any fields that are actually displayed on the UI
                                const hasDisplayedFields = sortedFields.some(f => f.display != 0 && f.display != 2 && f.display !== false);

                                // Hide group header if it's "Additional Information" and there's only one group,
                                // OR if there are no displayed fields in this group.
                                const showGroupHeader = hasDisplayedFields && !(groupName === 'Additional Information' && sortedGroups.length === 1);

                                // Special styling for group header
                                const groupHeaderHtml = showGroupHeader ? `
                                        <div class="bg-gray-100 py-2 mb-4">
                                            <h3 class="text-sm font-bold text-[var(--primary-theme-color)] tracking-wide">${groupName}</h3>
                                            <div class="border-b-2 border-dashed border-[var(--primary-theme-color)] mt-2"></div>
                                        </div>
                                    ` : '';

                                // Use different grid layout for phone numbers group
                                const isPhoneGroup = groupName.toLowerCase() === 'phone numbers';
                                const gridClass = isPhoneGroup ? '' : 'grid grid-cols-1 md:grid-cols-2 gap-4';

                                if (hasDisplayedFields) {
                                    fieldsHtml = `
                                            <div class="mb-6">
                                                ${groupHeaderHtml}
                                                <div class="${gridClass}">
                                                    ${fieldsHtml}
                                                </div>
                                            </div>
                                        `;
                                    groupsHtml += fieldsHtml;
                                } else {
                                    groupsHtml += fieldsHtml;
                                }
                            }
                        });
                    }

                    // If no visible fields, check for description content (like Welcome page)
                    if (!groupsHtml && page.fields.length > 0) {
                        const descField = page.fields.find(f => f.page_field_description);
                        if (descField && descField.page_field_description) {
                            groupsHtml = `<div class="prose max-w-none">${descField.page_field_description}</div>`;
                        }
                    }

                    // Add Save Button for Player fields
                    groupsHtml += `
                            <div class="mt-6">
                                <button type="button" 
                                        onclick="saveNewPlayer(${page.page_id}, this)"
                                        class="w-full py-3 bg-[var(--primary-theme-color)] text-white rounded-lg font-bold shadow hover:bg-blue-900 transition text-center transform hover:scale-[1.02]">
                                    Save Player
                                </button>
                            </div>
                        `;

                    return groupsHtml;
                }

                // Helper to generate input field specifically for player section using playerFieldValues
                function generatePlayerInputField(field, usePrePopulate, isCountryCode = false, hideLabel = false) {
                    const labelLower = (field.label || '').toLowerCase().trim();
                    const hideInputOnly = labelLower === 'text only text' || labelLower === 'text';

                    const today = new Date().toISOString().split('T')[0];
                    let minDate = '';
                    let maxDate = today;

                    if (typeof window.getPlayerBirthDateRange === 'function') {
                        const range = window.getPlayerBirthDateRange();
                        minDate = range.min;
                        maxDate = range.max;
                    }
                    if (!hideInputOnly) {
                        if (isCountryCode || labelLower === 'country code' || labelLower === 'phone code') {
                            return generateCountryCodeDropdown(field, usePrePopulate, playerFieldValues, true, false, true); // Always hide label for country code as requested
                        }
                    }
                    const fieldId = `field-${field.field_id}`;
                    const isRequired = field.is_required == 1 || field.required == 1 || String(field.is_required).toLowerCase() === 'true';
                    const requiredStar = isRequired ? '<span class="required-star">*</span>' : '';

                    // Get pre-populated value from playerFieldValues map BY LABEL
                    let preValue = '';
                    if (usePrePopulate) {
                        const normalizedLabel = (field.label || '').toLowerCase().trim();
                        const cleanLabel = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                        const pageFieldName = (field.page_field_name || '').toLowerCase().trim();
                        const formFieldName = (field.form_field_name || '').toLowerCase().trim();

                        preValue = playerFieldValues[normalizedLabel] || 
                                   playerFieldValues[cleanLabel] || 
                                   playerFieldValues[`id_${field.field_id}`] || 
                                   playerFieldValues[`id_${field.fieldid}`] || 
                                   playerFieldValues[pageFieldName] || 
                                   playerFieldValues[formFieldName] || 
                                   fuzzyLookupValue(playerFieldValues, field.field_id, field.label) || '';

                        // If gender field and preValue is still empty, check gender fallbacks
                        const isGenderCheck = cleanLabel === 'gender' || cleanLabel === 'sex' || pageFieldName === 'gender' || formFieldName === 'gender' || normalizedLabel.includes('gender') || normalizedLabel.includes('sex');
                        if (isGenderCheck) {
                            if (!preValue) {
                                preValue = playerFieldValues['gender'] || playerFieldValues['player - gender'] || playerFieldValues['sex'] || playerFieldValues['player - sex'] || '';
                            }
                            if (!preValue && typeof currentlyEditingPlayerId !== 'undefined' && currentlyEditingPlayerId && window.draftPlayerFieldValues && window.draftPlayerFieldValues[currentlyEditingPlayerId]) {
                                const dPidMap = window.draftPlayerFieldValues[currentlyEditingPlayerId];
                                preValue = dPidMap['gender'] || dPidMap['player - gender'] || dPidMap[normalizedLabel] || dPidMap[cleanLabel] || dPidMap[`id_${field.field_id}`] || '';
                            }
                            if (!preValue && typeof currentlyEditingPlayerId !== 'undefined' && currentlyEditingPlayerId && typeof getPlayerGender === 'function') {
                                const gNum = getPlayerGender(currentlyEditingPlayerId);
                                if (gNum === 1) preValue = '1.00';
                                else if (gNum === 2) preValue = '2.00';
                            }
                        }

                        // If DOB field and preValue is still empty, check DOB fallbacks
                        const isDOBCheck = cleanLabel.includes('birth') || cleanLabel.includes('dob') || pageFieldName.includes('birth') || pageFieldName.includes('dob') || formFieldName.includes('birth') || formFieldName.includes('dob') || normalizedLabel.includes('birth') || normalizedLabel.includes('dob');
                        if (isDOBCheck) {
                            if (!preValue) {
                                preValue = playerFieldValues['date of birth'] || 
                                           playerFieldValues['birthdate'] || 
                                           playerFieldValues['birth date'] || 
                                           playerFieldValues['dob'] || 
                                           playerFieldValues['player - date of birth'] || 
                                           playerFieldValues['player - birthdate'] || 
                                           playerFieldValues['player - dob'] || '';
                            }
                            if (!preValue && typeof currentlyEditingPlayerId !== 'undefined' && currentlyEditingPlayerId && window.draftPlayerFieldValues && window.draftPlayerFieldValues[currentlyEditingPlayerId]) {
                                const dPidMap = window.draftPlayerFieldValues[currentlyEditingPlayerId];
                                preValue = dPidMap['date of birth'] || dPidMap['birthdate'] || dPidMap['birth date'] || dPidMap['dob'] || dPidMap['player - date of birth'] || dPidMap['player - birthdate'] || dPidMap['player - dob'] || dPidMap[normalizedLabel] || dPidMap[cleanLabel] || dPidMap[`id_${field.field_id}`] || '';
                            }
                            if (!preValue && typeof currentlyEditingPlayerId !== 'undefined' && currentlyEditingPlayerId && playersList) {
                                const pObj = playersList.find(p => p.player_id == currentlyEditingPlayerId);
                                if (pObj && pObj.fields) {
                                    if (Array.isArray(pObj.fields)) {
                                        const dobF = pObj.fields.find(f => (f.label || '').toLowerCase().includes('birth') || (f.label || '').toLowerCase().includes('dob'));
                                        if (dobF && dobF.value) preValue = dobF.value;
                                    } else if (typeof pObj.fields === 'object') {
                                        for (const k in pObj.fields) {
                                            if (k.toLowerCase().includes('birth') || k.toLowerCase().includes('dob')) {
                                                preValue = pObj.fields[k];
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                            if (preValue && (String(preValue).startsWith('0000') || preValue === '00/00/0000' || preValue === '00-00-0000')) {
                                preValue = '';
                            }
                        }

                        preValue = sanitizeFieldValue(preValue, field.label, field.field_type);
                        // Debug logging
                        if (preValue) {
                            // 
                        }
                    }
                    const escapedValue = preValue !== null && preValue !== undefined ? preValue.toString().replace(/"/g, '&quot;') : '';
                    
                    let dynamicValidationAttrs = '';
                    let hasCustomPhoneValidation = false;
                    if (field.validation) {
                        if (field.validation.type === 'pattern' && field.validation.regex) {
                            dynamicValidationAttrs = `pattern="${field.validation.regex.replace(/"/g, '&quot;')}" title="${(field.validation.error_message || '').replace(/"/g, '&quot;')}"`;
                            hasCustomPhoneValidation = true;
                        } else if (field.validation.type === 'length' && field.validation.rule_json) {
                            try {
                                const rules = typeof field.validation.rule_json === 'string' ? JSON.parse(field.validation.rule_json) : field.validation.rule_json;
                                if (rules.min) dynamicValidationAttrs += ` minlength="${rules.min}"`;
                                if (rules.max) dynamicValidationAttrs += ` maxlength="${rules.max}"`;
                                if (rules.equal) dynamicValidationAttrs += ` minlength="${rules.equal}" maxlength="${rules.equal}"`;
                                if (field.validation.error_message) dynamicValidationAttrs += ` title="${field.validation.error_message.replace(/"/g, '&quot;')}"`;
                                hasCustomPhoneValidation = true;
                            } catch(e) { console.error("Invalid rule_json", e); }
                        }
                    }

                    // Support for new validation_rules structure (from validation_rules or comment)
                    const isValRulesJsonPlayer = (str) => {
                        if (!str || typeof str !== 'string') return false;
                        const trimmed = str.trim();
                        if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) return false;
                        try {
                            const parsed = JSON.parse(trimmed);
                            return typeof parsed === 'object' && parsed !== null && (
                                parsed.input_mode !== undefined ||
                                parsed.min_length !== undefined ||
                                parsed.max_length !== undefined ||
                                parsed.rules !== undefined
                            );
                        } catch(e) { return false; }
                    };
                    const resolvedRulesPlayer = field.validation_rules || (isValRulesJsonPlayer(field.comment) ? field.comment : null);
                    if (resolvedRulesPlayer) {
                        try {
                            const rules = typeof resolvedRulesPlayer === 'string' ? JSON.parse(resolvedRulesPlayer) : resolvedRulesPlayer;
                            if (rules && (rules.input_mode || rules.min_length || rules.max_length)) {
                                let pattern = '.*';
                                let errorMessage = "Invalid input";
                                let replaceRegex = '';

                                if (rules.input_mode === 'numeric') {
                                    pattern = '[0-9]*';
                                    errorMessage = "Please enter only numbers";
                                    replaceRegex = '/[^0-9]/g';
                                } else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') {
                                    pattern = '[a-zA-Z]*';
                                    errorMessage = "Please enter only alphabets";
                                    replaceRegex = '/[^a-zA-Z]/g';
                                } else if (rules.input_mode === 'alphanumeric') {
                                    pattern = '(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+';
                                    errorMessage = "Please enter both letters and numbers";
                                    replaceRegex = '/[^a-zA-Z0-9]/g';
                                }

                                if (rules.min_length && rules.max_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},${rules.max_length}}`; }
                                    else { pattern = `.{${rules.min_length},${rules.max_length}}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} characters`;
                                } else if (rules.min_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},}`; }
                                    else { pattern = `.{${rules.min_length},}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter at least ${rules.min_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at least ${rules.min_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at least ${rules.min_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter at least ${rules.min_length} characters`;
                                } else if (rules.max_length) {
                                    if (rules.input_mode === 'numeric') { pattern = `[0-9]{0,${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{0,${rules.max_length}}`; }
                                    else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{0,${rules.max_length}}`; }
                                    else { pattern = `.{0,${rules.max_length}}`; }
                                    
                                    if (rules.input_mode === 'numeric') errorMessage = `Please enter at most ${rules.max_length} numbers`;
                                    else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at most ${rules.max_length} alphabets`;
                                    else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at most ${rules.max_length} letters and numbers (must include both)`;
                                    else errorMessage = `Please enter at most ${rules.max_length} characters`;
                                }

                                if (replaceRegex) {
                                    dynamicValidationAttrs += ` pattern="${pattern}" oninput="this.value = this.value.replace(${replaceRegex}, '')" title="${errorMessage}"`;
                                    hasCustomPhoneValidation = true;
                                } else if (pattern !== '.*') {
                                    dynamicValidationAttrs += ` pattern="${pattern}" title="${errorMessage}"`;
                                }
                                
                                if (rules.input_mode === 'numeric') {
                                    dynamicValidationAttrs += ` inputmode="numeric"`;
                                }

                                if (rules.min_length) dynamicValidationAttrs += ` minlength="${rules.min_length}"`;
                                if (rules.max_length) dynamicValidationAttrs += ` maxlength="${rules.max_length}"`;
                            }
                        } catch(e) { console.error("Invalid validation_rules", e); }
                    }

                    const labelLowerForPhone = (field.label || '').toLowerCase();
                    const isPhoneField = !hasCustomPhoneValidation && (field.field_type === 'phone' || (labelLowerForPhone.includes('phone') && !labelLowerForPhone.includes('ext') && !labelLowerForPhone.includes('code')));
                    const displayValue = isPhoneField ? formatPhoneNumber(escapedValue) : escapedValue;

                    // Handle display = 0 or 2 (Hidden input)
                    if (field.display == 0 || field.display == 2) {
                        return `<input type="hidden" class="hidden" id="${fieldId}" name="${field.page_field_name}" value="${escapedValue}">`;
                    }

                    const helpText = window.getFieldHelpText ? window.getFieldHelpText(field) : '';
                    const infoIconHtml = helpText ? `
                        <i class="fa-solid fa-circle-info field-info-icon" 
                           onclick="event.preventDefault(); event.stopPropagation(); if(window.showRegistrationTooltip) window.showRegistrationTooltip(this, \`${helpText.replace(/`/g, '\\`').replace(/'/g, "\\'").replace(/"/g, '&quot;')}\`)"
                           title="Click for more info"></i>
                    ` : '';

                    // We can reuse the same HTML structure as generateInputField, but we need to duplicate the logic 
                    // or refactor generateInputField to take a value map. 
                    // To keep it simple and safe, I'll basically duplicate the HTML generation part but using our preValue.

                    const cleanLabelForGender = cleanFieldLabel ? cleanFieldLabel((field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '')).toLowerCase().trim() : (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                    const fieldNameLower = (field.page_field_name || field.form_field_name || '').toLowerCase().trim();
                    const isGenderField = cleanLabelForGender === 'gender' || cleanLabelForGender === 'sex' || fieldNameLower === 'gender' || fieldNameLower === 'sex' || (field.label || '').toLowerCase().includes('gender');

                    if (isGenderField) {
                        const genderOptions = [
                            { label: 'Male', value: '1.00', num: 1 },
                            { label: 'Female', value: '2.00', num: 2 },
                            // { label: 'Other', value: '3.00', num: 3 }
                        ];

                        let checkPreVal = preValue;
                        if ((checkPreVal === '' || checkPreVal === null || checkPreVal === undefined)) {
                            const curPid = typeof currentlyEditingPlayerId !== 'undefined' ? currentlyEditingPlayerId : null;
                            if (typeof playerFieldValues !== 'undefined' && playerFieldValues['gender']) checkPreVal = playerFieldValues['gender'];
                            else if (typeof playerFieldValues !== 'undefined' && playerFieldValues['player - gender']) checkPreVal = playerFieldValues['player - gender'];
                            else if (curPid && typeof getPlayerGender === 'function') {
                                const gNum = getPlayerGender(curPid);
                                if (gNum === 1) checkPreVal = '1.00';
                                else if (gNum === 2) checkPreVal = '2.00';
                            }
                        }

                        const hasValue = checkPreVal !== '' && checkPreVal !== null && checkPreVal !== undefined;
                        let normGender = 0;
                        if (hasValue) {
                            const s = String(checkPreVal).toLowerCase().trim();
                            if (s === '1' || s === '1.00' || s === '1.0' || s === 'male' || s === 'm' || s.includes('male') || s === 'boy' || s.includes('boys')) normGender = 1;
                            else if (s === '2' || s === '2.00' || s === '2.0' || s === 'female' || s === 'f' || s.includes('female') || s === 'girl' || s.includes('girls')) normGender = 2;
                            else {
                                const num = parseFloat(s);
                                if (num === 1 || num === 1.0) normGender = 1;
                                else if (num === 2 || num === 2.0) normGender = 2;
                            }
                        }

                        const isAnySelected = hasValue && (normGender !== 0 || genderOptions.some(opt => checkPreVal == opt.value || checkPreVal == parseFloat(opt.value)));
                        let optionsHtml = isAnySelected ? '' : '<option value="" disabled selected></option>';

                        genderOptions.forEach(opt => {
                            const isSelected = hasValue && (
                                (normGender !== 0 && normGender === opt.num) ||
                                checkPreVal == opt.value ||
                                checkPreVal == parseFloat(opt.value) ||
                                String(checkPreVal).toLowerCase().trim() === opt.label.toLowerCase()
                            ) ? 'selected' : '';
                            optionsHtml += `<option value="${opt.value}" ${isSelected}>${opt.label}</option>`;
                        });

                        return `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="gender-select" onchange="refreshDivisions(this)" ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="2" data-original-label="${field.label}">${(field.label || '').replace(/^Player - /i, '')} ${requiredStar}</label>
                                    ${infoIconHtml}
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                </div>
                            `;
                    }

                    const isGradeField = (field.label || '').toLowerCase().trim() === 'grade';

                    if (isGradeField && gradesList.length > 0) {
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                        gradesList.forEach(opt => {
                            const isSelected = hasValue && (preValue == opt.num_equiv || preValue == parseFloat(opt.num_equiv)) ? 'selected' : '';
                            optionsHtml += `<option value="${opt.num_equiv}" ${isSelected}>${opt.name}</option>`;
                        });

                        // Trigger refresh after short delay if value exists
                        if (hasValue) {
                            setTimeout(() => {
                                const el = document.getElementById(fieldId);
                                if (el) refreshDivisions(el);
                            }, 500);
                        }

                        return `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="grade-select" onchange="refreshDivisions(this)" ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="2" data-original-label="${field.label}">${(field.label || '').replace(/^Player - /i, '')} ${requiredStar}</label>
                                    ${infoIconHtml}
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                </div>
                            `;
                    }

                    const cleanLabelForSchoolPlayer = (field.label || '').replace(/^Player - /i, '').toLowerCase().trim();
                    const isSchoolFieldPlayer = cleanLabelForSchoolPlayer === 'school' || (field.page_field_name || '').toLowerCase().trim() === 'school';

                    if (isSchoolFieldPlayer && schoolsList.length > 0) {
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                        schoolsList.forEach(opt => {
                            const optVal = opt.name || opt.id;
                            const isSelected = hasValue && (preValue == optVal || preValue == opt.id || preValue == opt.name) ? 'selected' : '';
                            optionsHtml += `<option value="${optVal.toString().replace(/"/g, '&quot;')}" ${isSelected}>${opt.name}</option>`;
                        });

                        return `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="school-select" ${isRequired ? 'required' : ''}>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="2" data-original-label="${field.label}">${(field.label || '').replace(/^Player - /i, '')} ${requiredStar}</label>
                                    ${infoIconHtml}
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                </div>
                            `;
                    }

                    // Check if this is a Division field with display = 1
                    const isDivisionField = (field.label || '').toLowerCase().trim() === 'division';

                    if (isDivisionField && field.display == 1) {
                        // Always render as dropdown - populated dynamically after grade/gender selection
                        const hasValue = preValue !== '' && preValue !== null && preValue !== undefined;
                        let optionsHtml = '';
                        if (divisionsList.length > 0) {
                            optionsHtml = hasValue ? '' : '<option value="" disabled selected></option>';
                            divisionsList.forEach(div => {
                                const isEligible = (div.status || '').toLowerCase() === 'eligible';
                                const isSelected = hasValue && (preValue == div.division_id) ? 'selected' : '';
                                const disabledAttr = !isEligible ? 'disabled' : '';
                                const statusLabel = !isEligible ? ` (${div.status})` : '';
                                optionsHtml += `<option value="${div.division_id}" ${isSelected} ${disabledAttr}>${div.division_name}${statusLabel}</option>`;
                            });
                        } else {
                            optionsHtml = '<option value="" disabled selected>Select grade first</option>';
                        }

                        // Store preValue in data attribute
                        const preValueAttr = hasValue ? `data-prevalue="${preValue}"` : '';

                        return `
                                <div class="material-input-group">
                                    <select id="${fieldId}" name="${field.page_field_name}" class="division-select" ${preValueAttr} onchange="this.setAttribute('data-prevalue', this.value)" required>
                                        ${optionsHtml}
                                    </select>
                                    <label for="${fieldId}" class="dynamic-label" data-id-table="2" data-original-label="${field.label}">${(field.label || '').replace(/^Player - /i, '')} <span class="required-star">*</span></label>
                                    ${infoIconHtml}
                                    <i class="fa-solid fa-chevron-down select-arrow"></i>
                                </div>
                            `;
                    }

                    let inputHtml = '';

                    const cleanLabel = cleanFieldLabel((field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, ''));
                    const labelLowerClean = cleanLabel.toLowerCase().trim();
                    const isCity = labelLowerClean === 'city';
                    const isState = labelLowerClean === 'state';
                    const isZip = labelLowerClean === 'zip' || labelLowerClean === 'zip code' || labelLowerClean === 'postal code' || labelLowerClean === 'zipcode' || labelLowerClean === 'zip/postal code';
                    const isAddressLine1 = labelLowerClean === 'address' || labelLowerClean === 'address 1' || labelLowerClean.includes('address line 1') || labelLowerClean === 'street address';
                    const isPlayerCam = labelLowerClean === 'cam no' || labelLowerClean === 'cam no.' || labelLowerClean === 'cam number';
                    const isCamNumber = labelLowerClean === 'season cam number' || isPlayerCam;
                    const validationClass = isCity ? 'city-input' : (isState ? 'state-input' : (isZip ? 'zip-input' : (isAddressLine1 ? 'address-input' : (isPlayerCam ? 'player-cam-input' : (isCamNumber ? 'cam-number-input' : '')))));

                    let isNumericOnly = (field.label || '').toLowerCase().includes('number') || isCamNumber;
                    if (dynamicValidationAttrs && dynamicValidationAttrs.includes('oninput')) {
                        isNumericOnly = false;
                    }
                    const camOnInput = isCamNumber ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\').substring(0,7)"' : '';
                    const numericOnInput = isCamNumber ? camOnInput : (isNumericOnly ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\')"' : '');
                    const numericInputMode = isNumericOnly ? 'inputmode="numeric"' : '';

                    const dynamicLabelHtml = (label, idTableValue) => `<label for="${fieldId}" class="dynamic-label" data-id-table="${idTableValue}" data-original-label="${field.label}">${label} ${requiredStar}</label>`;

                    const rawPlayerInputType = (field.field_type || 'text').toString().toLowerCase().trim();
                    const normalizedPlayerInputType = (rawPlayerInputType === 'text input' || rawPlayerInputType === 'text') ? 'text' :
                                                     (rawPlayerInputType === 'text area' || rawPlayerInputType === 'textarea') ? 'textarea' :
                                                     (rawPlayerInputType === 'dropdown' || rawPlayerInputType === 'select') ? 'dropdown' :
                                                     (rawPlayerInputType === 'checkbox') ? 'checkbox' :
                                                     (rawPlayerInputType === 'radio' || rawPlayerInputType === 'radio buttons') ? 'radio' :
                                                     (rawPlayerInputType === 'file' || rawPlayerInputType === 'file upload' || rawPlayerInputType === 'file_upload' || rawPlayerInputType === 'document') ? 'file' :
                                                     (rawPlayerInputType === 'image' || rawPlayerInputType === 'image upload' || rawPlayerInputType === 'photo') ? 'image' :
                                                     rawPlayerInputType;

                    if (!hideInputOnly) switch (normalizedPlayerInputType) {
                        case 'text':
                        case 'phone':
                        case 'number':
                            let maxLengthAttr = isState ? 'minlength="2" maxlength="2" pattern="[a-zA-Z]{2}" title="State must be exactly 2 characters"' : (isZip ? 'minlength="5" maxlength="9" pattern="[0-9]{5,9}" title="Zip code must be between 5 and 9 digits"' : (isCity ? 'minlength="3" uppercase' : (isAddressLine1 ? 'minlength="5"' : (isPlayerCam ? 'maxlength="7" pattern="[0-9]{1,7}" title="CAM number must be up to 7 digits"' : (isCamNumber ? 'minlength="7" maxlength="7" pattern="[0-9]{7}" title="CAM number must be exactly 7 digits"' : '')))));
                            if (dynamicValidationAttrs) maxLengthAttr = dynamicValidationAttrs;
                            const stateStyle = isState ? 'style="text-transform: uppercase;"' : '';
                            inputHtml = `
                                    <div class="material-input-group">
                                        <input type="${isCamNumber ? 'text' : (hasCustomPhoneValidation ? (field.field_type === 'phone' ? 'tel' : 'text') : (field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'))}" 
                                               ${(hasCustomPhoneValidation && field.field_type === 'number') ? 'inputmode="numeric"' : ''}
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               ${numericOnInput}
                                               ${numericInputMode}
                                               class="${isPhoneField ? 'phone-input' : ''} ${validationClass}"
                                               placeholder=" "
                                               value="${displayValue}"
                                               ${maxLengthAttr}
                                               ${stateStyle}
                                               ${isRequired ? 'required' : ''}>
                                        ${dynamicLabelHtml(cleanLabel, 2)}
                                        ${infoIconHtml}
                                    </div>
                                `;
                            break;
                        case 'email':
                            inputHtml = `
                                    <div class="material-input-group">
                                        <input type="email" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               class="email-input"
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${dynamicValidationAttrs}
                                               ${isRequired ? 'required' : ''}>
                                        ${dynamicLabelHtml(cleanLabel, 2)}
                                        ${infoIconHtml}
                                    </div>
                                `;
                            break;
                        case 'date':
                            const isDOBField = (field.label || '').toLowerCase().includes('birth') || (field.label || '').toLowerCase().includes('dob') || (field.page_field_name || '').toLowerCase().includes('birth') || (field.page_field_name || '').toLowerCase().includes('dob');
                            const dateRangeAttrs = isDOBField ? `${minDate ? `min="${minDate}"` : ''} ${maxDate ? `max="${maxDate}"` : ''}` : '';
                            const isValidPreloadedDOB = isDOBField && escapedValue && isValidDateString(escapedValue) && !String(escapedValue).startsWith('0000') && escapedValue !== '00/00/0000' && escapedValue !== '00-00-0000';
                            const isDisabledDOB = isValidPreloadedDOB;
                            const disabledAttr = isDisabledDOB ? 'disabled readonly style="background-color: #f3f4f6; cursor: not-allowed; color: #374151;"' : '';
                            const dateInputType = isDisabledDOB ? 'text' : 'date';
                            const dateInputValue = isDisabledDOB ? formatToMMDDYYYY(escapedValue) : formatDateToYYYYMMDD(escapedValue);
                            const calIconStyle = isDisabledDOB ? 'style="pointer-events: none; opacity: 0.4; cursor: not-allowed;"' : '';
                            inputHtml = `
                                    <div class="material-input-group">
                                        <input type="${dateInputType}" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               class="date-input"
                                               ${!isDisabledDOB ? 'onclick="try { this.showPicker(); } catch(e) {}"' : ''}
                                               value="${dateInputValue}"
                                               ${dateRangeAttrs}
                                               ${dynamicValidationAttrs}
                                               ${isRequired ? 'required' : ''}
                                               ${disabledAttr}>
                                        <label for="${fieldId}" class="label-float dynamic-label" data-id-table="2" data-original-label="${field.label}">${cleanLabel} ${requiredStar}</label>
                                        ${infoIconHtml}
                                        <i class="fa-regular fa-calendar calendar-icon" ${calIconStyle}></i>
                                    </div>
                                `;
                            break;
                        case 'select':
                        case 'dropdown':
                            let optionsHtmlSelect = preValue ? '' : '<option value="" disabled selected></option>';
                            if (field.options && field.options.length > 0) {
                                field.options.forEach(opt => {
                                    const optValue = opt.option_value || opt.value || opt;
                                    const optLabel = opt.option_value || opt.label || opt;
                                    const isSelected = preValue == optValue ? 'selected' : '';
                                    optionsHtmlSelect += `<option value="${optValue}" ${isSelected}>${optLabel}</option>`;
                                });
                            }
                            const selectHeader = (field.label && cleanFieldLabel(field.label)) ? `<div class="font-bold text-[#11315b] text-sm mb-1">${cleanFieldLabel(field.label)} :</div>` : '';
                            const selectLabel = `Player - ${cleanLabel}`;
                            inputHtml = `
                                    <div class="mb-2">
                                        ${selectHeader}
                                        <div class="material-input-group">
                                            <select id="${fieldId}" name="${field.page_field_name}" ${isRequired ? 'required' : ''}>
                                                ${optionsHtmlSelect}
                                            </select>
                                            <label for="${fieldId}" class="dynamic-label" data-id-table="2" data-original-label="${field.label}">${selectLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                            <i class="fa-solid fa-chevron-down select-arrow"></i>
                                        </div>
                                    </div>
                                `;
                            break;
                        case 'checkbox':
                            const descriptionText = field.page_field_description || field.form_field_description || field.description || '';
                            const descriptionHtmlMulti = descriptionText ? `<div class="mb-2 prose max-w-none">${descriptionText}</div>` : '';
                            const checkboxFullWidth = descriptionText ? 'md:col-span-2' : '';
                            inputHtml = `
                                    ${descriptionHtmlMulti}
                                    <div class="checkbox-group ${checkboxFullWidth}">
                                        <div class="flex items-center gap-3 py-2 border-b border-gray-100">
                                            <input type="checkbox" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   class="w-5 h-5 text-[var(--primary-theme-color,#dc2626)] border-gray-300 rounded focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer flex-shrink-0"
                                                   style="accent-color: var(--primary-theme-color, #dc2626);"
                                                   ${preValue && (preValue === '1' || preValue === 'true' || preValue === true) ? 'checked' : ''}
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}" class="text-sm font-bold text-gray-800 dynamic-label flex-grow cursor-pointer" data-id-table="2" data-original-label="${field.label}">${cleanLabel} ${requiredStar}</label>
                                            ${infoIconHtml}
                                        </div>
                                    </div>
                                `;
                            break;
                        case 'textarea':
                            inputHtml = `
                                    <div class="material-input-group md:col-span-2">
                                        <textarea id="${fieldId}" 
                                                  name="${field.page_field_name}" 
                                                  placeholder=" "
                                                  rows="3"
                                                  ${dynamicValidationAttrs}
                                                  ${isRequired ? 'required' : ''}>${escapedValue}</textarea>
                                        ${dynamicLabelHtml(cleanLabel, 2)}
                                        ${infoIconHtml}
                                    </div>
                                `;
                            break;
                        case 'image':
                            {
                                const hasSavedImage = escapedValue && (escapedValue.startsWith('http') || escapedValue.includes('/') || escapedValue.includes('.'));
                                const displayValueUrl = hasSavedImage ? window.formatProfilePictureUrl(escapedValue) : '';
                                const isReqAttr = isRequired && !hasSavedImage ? 'required' : '';
                                const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                let displayName = 'Picture Image';
                                if (cleanLabel) {
                                    if (cleanLabel.toLowerCase().includes('player') && (cleanLabel.toLowerCase().includes('pic') || cleanLabel.toLowerCase().includes('image'))) {
                                        displayName = 'Player Picture Image';
                                    } else if (cleanLabel.toLowerCase().endsWith('image') || cleanLabel.toLowerCase().endsWith('picture') || cleanLabel.toLowerCase().endsWith('photo')) {
                                        displayName = cleanLabel;
                                    } else {
                                        displayName = `${cleanLabel} Image`;
                                    }
                                }
                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" data-id-table="2" data-original-label="${field.label}" data-field-help="${(helpText || '').replace(/"/g, '&quot;')}">${cleanLabel} ${requiredStar} ${infoIconHtml}</label>
                                        <div class="photo-upload-group relative w-full">
                                            <input type="file" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   accept="image/*"
                                                   class="hidden profile-picture-input"
                                                   data-uploaded-url="${displayValueUrl}"
                                                   ${wasReqAttr}
                                                   onchange="handleProfilePictureUpload(this, 'new')"
                                                   ${isReqAttr}>
                                            
                                            <!-- Select Picture Box (dashed orange border) -->
                                            <div id="upload-box-${fieldId}" class="upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-[#f48120] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-orange-50 transition-colors ${hasSavedImage ? 'hidden' : ''}" onclick="document.getElementById('${fieldId}').click()">
                                                <div class="flex items-center justify-center gap-2 text-[#f48120]">
                                                    <i class="fa-solid fa-camera text-2xl"></i>
                                                    <span class="font-bold text-lg">Select Picture</span>
                                                </div>
                                            </div>

                                            <!-- Preview Box -->
                                            <div id="preview-box-${fieldId}" class="preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedImage ? '' : 'hidden'}">
                                                <div class="flex items-center gap-4">
                                                    <img id="preview-img-${fieldId}" 
                                                          src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
                                                          onload="if(this.src.startsWith('data:image/gif')){ const input = document.getElementById('${fieldId}'); const url = input ? input.getAttribute('data-uploaded-url') : ''; window.loadProfilePicture(this, url); }"
                                                          class="w-16 h-16 rounded-full object-cover border border-gray-300 cursor-pointer hover:opacity-80 transition-opacity" 
                                                          alt="${cleanLabel}" 
                                                          onclick="showImagePreviewPopup(this.src)">
                                                    <div class="flex flex-col">
                                                        <span class="font-bold text-gray-800 text-lg">${displayName}</span>
                                                        <span class="text-green-600 font-semibold flex items-center gap-1 text-sm">
                                                            <i class="fa-solid fa-circle-check"></i> Uploaded
                                                        </span>
                                                    </div>
                                                </div>
                                                <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl" onclick="deleteProfilePicture(this, '${fieldId}')">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }
                            break;
                        case 'file':
                        case 'file_upload':
                        case 'file upload':
                        case 'document':
                            {
                                const hasSavedFile = escapedValue && (escapedValue.startsWith('http') || escapedValue.includes('/') || escapedValue.includes('.') || String(escapedValue).trim().length > 0);
                                const displayFileUrl = hasSavedFile ? (escapedValue.startsWith('http') ? escapedValue : `{{ config('api.url') }}/storage/form_builder/${escapedValue}`) : '';
                                const displayFileName = hasSavedFile ? (escapedValue.split('/').pop().replace(/^\d+_[a-f0-9]+_/, '') || 'Uploaded Document') : '';
                                const isReqAttr = isRequired && !hasSavedFile ? 'required' : '';
                                const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                const fileIconHtml = window.getFileIconHtml ? window.getFileIconHtml(displayFileName || escapedValue) : '<i class="fa-solid fa-file text-blue-500 text-2xl"></i>';

                                inputHtml = `
                                    <div class="mb-4">
                                        <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" data-id-table="2" data-original-label="${field.label}" data-field-help="${(helpText || '').replace(/"/g, '&quot;')}">${cleanLabel} ${requiredStar} ${infoIconHtml}</label>
                                        <div class="generic-file-group relative w-full">
                                            <input type="file" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar"
                                                   class="hidden generic-file-input"
                                                   data-uploaded-url="${escapedValue}"
                                                   ${wasReqAttr}
                                                   onchange="handleGenericFileUpload(this, 'new', '${field.field_id}')"
                                                   ${isReqAttr}>
                                            
                                            <!-- Upload Box (dashed border) -->
                                            <div id="upload-box-${fieldId}" class="upload-box generic-upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-gray-300 hover:border-[#11315b] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-blue-50/40 transition-colors ${hasSavedFile ? 'hidden' : ''}" 
                                                 onclick="document.getElementById('${fieldId}').click()"
                                                 ondragover="event.preventDefault(); this.classList.add('border-[#11315b]', 'bg-blue-50/60');" 
                                                 ondragleave="this.classList.remove('border-[#11315b]', 'bg-blue-50/60');" 
                                                 ondrop="event.preventDefault(); this.classList.remove('border-[#11315b]', 'bg-blue-50/60'); if(event.dataTransfer && event.dataTransfer.files.length){ const inp = document.getElementById('${fieldId}'); inp.files = event.dataTransfer.files; handleGenericFileUpload(inp, 'new', '${field.field_id}'); }">
                                                <div class="flex flex-col items-center justify-center gap-2 text-gray-500">
                                                    <i class="fa-solid fa-cloud-arrow-up text-2xl text-[var(--primary-theme-color,#11315b)]"></i>
                                                    <span class="font-bold text-base text-gray-700">Choose file or drag here</span>
                                                    <span class="text-xs text-gray-400">PDF, DOC, DOCX, Images, Excel, up to 50MB</span>
                                                </div>
                                            </div>

                                            <!-- Preview Box -->
                                            <div id="preview-box-${fieldId}" class="preview-box generic-preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedFile ? '' : 'hidden'}">
                                                <div class="flex items-center gap-3 min-w-0">
                                                    <div id="file-icon-${fieldId}" class="flex-shrink-0">
                                                        ${fileIconHtml}
                                                    </div>
                                                    <div class="flex flex-col min-w-0">
                                                        <span id="file-name-${fieldId}" class="font-bold text-gray-800 text-sm truncate" title="${displayFileName}">${displayFileName}</span>
                                                        <div class="flex items-center gap-3 mt-1">
                                                            <span class="text-green-600 font-semibold flex items-center gap-1 text-xs">
                                                                <i class="fa-solid fa-circle-check"></i> Uploaded
                                                            </span>
                                                            <a id="file-link-${fieldId}" href="${displayFileUrl}" target="_blank" class="text-blue-600 hover:underline text-xs flex items-center gap-1 font-medium ${displayFileUrl ? '' : 'hidden'}">
                                                                <i class="fa-solid fa-arrow-up-right-from-square"></i> View
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl flex-shrink-0" onclick="deleteGenericFile(this, '${fieldId}')" title="Remove file">
                                                    <i class="fa-solid fa-circle-xmark"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }
                            break;
                        case 'radio':
                            let radioOptionsHtmlSelect = '';
                            let radioPlayerOpts = [];
                            if (field.options) {
                                if (Array.isArray(field.options)) {
                                    radioPlayerOpts = field.options;
                                } else if (typeof field.options === 'string') {
                                    radioPlayerOpts = field.options.split(',').map(s => {
                                        const trimmed = s.trim();
                                        return { option_value: trimmed, label: trimmed };
                                    });
                                }
                            }
                            if (radioPlayerOpts.length > 0) {
                                radioPlayerOpts.forEach((opt, idx) => {
                                    const optValue = opt.option_value || opt.value || opt;
                                    const optLabel = opt.option_value || opt.label || opt;
                                    const isChecked = (preValue !== '' && preValue !== null && preValue !== undefined) &&
                                        (String(preValue).trim().toLowerCase() === String(optValue).trim().toLowerCase()) ? 'checked' : '';
                                    const optionId = `${fieldId}-${idx}`;
                                    radioOptionsHtmlSelect += `
                                        <label class="flex items-center gap-2 text-sm text-gray-800 cursor-pointer py-1">
                                            <input type="radio" 
                                                   id="${optionId}" 
                                                   name="${field.page_field_name}" 
                                                   value="${optValue}" 
                                                   class="w-5 h-5 text-[var(--primary-theme-color,#dc2626)] border-gray-300 focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer"
                                                   style="accent-color: var(--primary-theme-color, #dc2626);"
                                                   ${isChecked}
                                                   ${isRequired ? 'required' : ''}>
                                            <span>${optLabel}</span>
                                        </label>
                                    `;
                                });
                            }
                            const radioHeader = (field.label && cleanFieldLabel(field.label)) ? `<div class="font-bold text-[#11315b] text-sm mb-1">${cleanFieldLabel(field.label)} :</div>` : '';
                            inputHtml = `
                                    <div class="mb-4">
                                        ${radioHeader}
                                        <div class="flex flex-col sm:flex-row sm:flex-wrap gap-4 mt-2">
                                            ${radioOptionsHtmlSelect}
                                        </div>
                                    </div>
                                `;
                            break;
                        default:
                            if (field.field_type) {
                                inputHtml = `
                                        <div class="material-input-group">
                                            <input type="text" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   placeholder=" "
                                                   value="${escapedValue}"
                                                   ${dynamicValidationAttrs}
                                                   ${isRequired ? 'required' : ''}>
                                            ${dynamicLabelHtml(cleanLabel, 2)}
                                            ${infoIconHtml}
                                        </div>
                                    `;
                            }
                    }
                    if (field.field_type === 'image' || field.field_type === 'radio' || field.field_type === 'file' || field.field_type === 'file_upload' || field.field_type === 'file upload' || field.field_type === 'document') {
                        return `<div class="md:col-span-2">${inputHtml}</div>`;
                    }
                    const description = field.page_field_description || field.form_field_description || field.description || '';
                    const isRichHtmlDescription = description && (/<(p|div|ul|ol|li|table|h[1-6]|span|blockquote)[^>]*>/i.test(description) || (description.includes('<') && description.includes('>')));
                    if (isRichHtmlDescription && description.trim() !== helpText.trim() && field.field_type !== 'checkbox') {
                        return `<div class="mb-2 prose max-w-none">${description}</div>${inputHtml}`;
                    }
                    return inputHtml;

                }

                // Render a page as an accordion
                // Check if the player already has an active membership
                async function checkMembershipStatus(formId, playerId) {
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const query = `
                                query CheckingMembershipActiveOrNot {
                                    checkingMembershipActiveOrNot(player_id: ${playerId ? playerId : 'null'}) {
                                        id
                                        player_id
                                        status
                                        message
                                        start_date
                                        expire_date
                                    }
                                }
                            `;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        console.log('✅ CheckingMembershipActiveOrNot API Response:', JSON.stringify(result, null, 2));

                        if (result.data && result.data.checkingMembershipActiveOrNot) {
                            const rawData = result.data.checkingMembershipActiveOrNot;
                            const memberships = Array.isArray(rawData) ? rawData : [rawData];

                            // Find the first active membership (if any)
                            const activeMembership = memberships.find(m => {
                                if (!m) return false;
                                const status = (m.status || '').toLowerCase();
                                return (status === 'active' || status === '1' || status === 'true' || status === 'yes' || status.includes('subscription active'));
                            });

                            if (activeMembership) {
                                activeMembershipData = activeMembership;
                                playerHasActiveMembership = true;
                                console.log(`✅ Membership status check — Active: true, Status: "${activeMembership.status}", Message: "${activeMembership.message || ''}", Expires: ${activeMembership.expire_date || 'N/A'}`);
                            } else {
                                // If none are active, use the first one for data but set active to false
                                activeMembershipData = memberships[0] || null;
                                playerHasActiveMembership = false;
                                console.log('ℹ️ No active membership found in API response');
                            }
                        } else {
                            playerHasActiveMembership = false;
                            activeMembershipData = null;
                            console.log('ℹ️ CheckingMembershipActiveOrNot returned no data — treating as no active membership');
                        }
                    } catch (error) {
                        console.error('❌ Error checking membership status:', error);
                        playerHasActiveMembership = false;
                        activeMembershipData = null;
                    }
                    return playerHasActiveMembership;
                }

                // Fetch membership options from FetchMembership API
                async function fetchMembershipData() {
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const query = `
                                query FetchMembership {
                                    fetchMembership {
                                        id
                                        description
                                        fee_1
                                        Membership_Fee_Group_id
                                        Membership_Fee_Code_id
                                    }
                                }
                            `;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        console.log('✅ FetchMembership API Response:', JSON.stringify(result, null, 2));

                        if (result.data && result.data.fetchMembership) {
                            membershipOptions = result.data.fetchMembership;
                            console.log(`✅ Loaded ${membershipOptions.length} membership options`);
                        } else {
                            console.warn('⚠️ FetchMembership returned no data');
                            membershipOptions = [];
                        }
                    } catch (error) {
                        console.error('❌ Error fetching membership data:', error);
                        membershipOptions = [];
                    }
                }

                // Select a membership option (radio-style single selection)
                function selectMembership(membershipId, pageId) {
                    selectedMembershipId = membershipId;

                    // Update UI: deselect all cards, select the clicked one
                    const container = document.getElementById(`membership-options-${pageId}`);
                    if (container) {
                        container.querySelectorAll('.membership-card').forEach(card => {
                            card.classList.remove('selected');
                        });
                        const selectedCard = document.getElementById(`membership-card-${membershipId}`);
                        if (selectedCard) {
                            selectedCard.classList.add('selected');
                        }
                    }

                    // Update the hidden input value
                    const hiddenInput = document.getElementById(`membership-value-${pageId}`);
                    if (hiddenInput) {
                        hiddenInput.value = membershipId;
                    }

                    console.log(`✅ Selected membership ID: ${membershipId}`);
                }

                // Render membership options as radio-style cards
                function renderMembershipCards(pageId) {
                    const container = document.getElementById(`membership-options-${pageId}`);
                    if (!container) return;

                    if (membershipOptions.length === 0) {
                        container.innerHTML = `
                                <div class="text-center py-4">
                                    <p class="text-gray-500 text-sm">No membership options available.</p>
                                </div>
                            `;
                        return;
                    }

                    let cardsHtml = '';
                    membershipOptions.forEach(membership => {
                        const fee = membership.fee_1 ? parseFloat(membership.fee_1).toFixed(2) : '0.00';
                        const isSelected = selectedMembershipId == membership.id;

                        cardsHtml += `
                                <div id="membership-card-${membership.id}" 
                                     class="membership-card ${isSelected ? 'selected' : ''}" 
                                     onclick="selectMembership(${membership.id}, ${pageId})">
                                    <div class="flex items-start gap-4">
                                        <div class="radio-circle mt-0.5">
                                            <div class="radio-dot"></div>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex justify-between items-start mb-1">
                                                <p class="membership-desc font-semibold text-gray-800">${membership.description || 'Membership Option'}</p>
                                                <span class="membership-fee">$${fee}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                    });

                    container.innerHTML = cardsHtml;
                }

                // Fetch all divisions for the Level List page using player data
                async function fetchAllDivisionsForLevelPage(pageId) {
                    console.group(`🔄 fetchAllDivisionsForLevelPage(${pageId})`);
                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        // Gather player data from collectedRegistrationData or globals
                        let formId = currentForm ? currentForm.form_id : null;
                        let grade = 0;
                        let gender = '';
                        let age = null;

                        // Function to extract relevant data from a field entry
                        const extractData = (entry, source) => {
                            if (!entry || typeof entry !== 'object') return;
                            const label = (entry.label || '').toLowerCase().trim();
                            const val = (entry.values !== undefined ? entry.values : entry.value || '').toString().toLowerCase().trim();

                            if (!val || val === 'null' || val === 'undefined') return;

                            if (label.includes('grade')) {
                                const parsed = parseInt(val);
                                if (!isNaN(parsed) && parsed > 0) {
                                    grade = parsed;
                                    console.log(`   🔸 Found Grade: ${grade} (from label: "${label}" in ${source})`);
                                }
                            }
                            if (label.includes('gender') || label.includes('sex')) {
                                const numVal = parseFloat(val);
                                if (val === '1' || val === 'male' || val.includes('male') || numVal === 1) gender = 'male';
                                else if (val === '2' || val === 'female' || val.includes('female') || numVal === 2) gender = 'female';
                                // else if (val === '3' || val === 'other' || numVal === 3) gender = 'other';
                                console.log(`   🔸 Found Gender: ${gender} (from value: "${val}", label: "${label}" in ${source})`);
                            }
                            if (['date of birth', 'dob', 'birth date', 'birthdate'].some(n => label.includes(n))) {
                                const calcAge = calculateAge(val);
                                if (calcAge !== null) {
                                    age = calcAge;
                                    console.log(`   🔸 Found Age: ${age} (from DOB: "${val}", label: "${label}" in ${source})`);
                                }
                            }
                        };

                        console.log('🔄 All collected registration data keys:', Object.keys(collectedRegistrationData));

                        // 1. Gather player data from collectedRegistrationData (priority to recent saves)
                        for (const pid in collectedRegistrationData) {
                            const pageData = collectedRegistrationData[pid];
                            if (!pageData || typeof pageData !== 'object') continue;

                            // Check if this page is a player page to log more clearly
                            const pageInfo = allPagesMap[pid.replace('page-', '')] || allPagesMap[pid];
                            const isPlayerSection = pageInfo && ['player', 'children', 'players'].some(n => (pageInfo.name || '').toLowerCase().includes(n));
                            const sourceLabel = isPlayerSection ? `Player Section (${pid})` : `Section ${pid}`;

                            for (const key in pageData) {
                                let entry = pageData[key];
                                if (!entry) continue;

                                // Handle nested structure for per-player custom pages
                                if (typeof entry === 'object' && !entry.label && !entry.values && !entry.value) {
                                    for (const fieldId in entry) {
                                        extractData(entry[fieldId], sourceLabel);
                                    }
                                } else {
                                    extractData(entry, sourceLabel);
                                }
                            }
                        }

                        // 2. Fallback to fieldValues
                        if (!grade || !gender || age === null) {
                            for (let key in fieldValues) {
                                extractData({ label: key, values: fieldValues[key] }, 'Global fieldValues');
                            }
                        }

                        // 3. Fallback to playerFieldValues
                        if (!grade || !gender || age === null) {
                            for (let key in playerFieldValues) {
                                extractData({ label: key, values: playerFieldValues[key] }, 'playerFieldValues');
                            }
                        }

                        const formIdParam = formId ? formId : 'null';
                        const gradeParam = grade ? grade : 'null';
                        const ageParam = (age !== null && age !== undefined) ? age : 'null';
                        const genderParam = gender ? `"${gender}"` : '""';

                        console.log(`🚀 API Request (League Selection) - form_id: ${formIdParam}, grade: ${gradeParam}, gender: ${genderParam}, age: ${ageParam}`);

                        const query = `
                                query FetchDivisionsForLeagueSelectionPage {
                                    fetchDivisionsForLeagueSelectionPage(
                                        form_id: ${formIdParam}
                                        gender: ${genderParam}
                                        age: ${ageParam}
                                        grade: ${gradeParam}
                                    ) {
                                        id
                                        description
                                    }
                                }
                            `;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();
                        console.log('✅ FetchDivisionsForLeagueSelectionPage Response:', JSON.stringify(result, null, 2));

                        if (result.data && result.data.fetchDivisionsForLeagueSelectionPage) {
                            // Map to standard keys used by the UI (division_id, division_name, status)
                            levelPageDivisions = result.data.fetchDivisionsForLeagueSelectionPage.map(div => ({
                                division_id: div.id,
                                division_name: div.description,
                                status: 'Eligible', // The new API only returns valid/eligible divisions
                                level_order: 0
                            }));

                            console.log(`✅ Loaded ${levelPageDivisions.length} divisions for league selection page`);
                        } else {
                            console.warn('⚠️ fetchDivisionsForLeagueSelectionPage returned no data');
                            levelPageDivisions = [];
                        }
                    } catch (error) {
                        console.error('❌ Error fetching divisions for league selection page:', error);
                        levelPageDivisions = [];
                    } finally {
                        console.groupEnd();
                    }
                }

                // Refresh all level list sections (usually called after player data is saved)
                async function refreshLevelListSections() {
                    console.log('🔄 Triggering refresh of all level list sections...');

                    // Iterate through all pages in the current form
                    if (!currentForm || !currentForm.pages) {
                        console.warn('⚠️ Cannot refresh level list: currentForm or pages not loaded');
                        return;
                    }

                    for (const page of currentForm.pages) {
                        const isLevelListPage = (page.file && (page.file.includes('levellist.php') || page.file.includes('levelist.php'))) ||
                            (page.name && (
                                page.name.toLowerCase().trim().includes('level') ||
                                page.name.toLowerCase().trim().includes('division')
                            ));

                        if (isLevelListPage) {
                            const container = document.getElementById(`level-list-dropdown-${page.page_id}`);
                            if (container) {
                                console.log(`   👉 Refreshing divisions for Level Section: "${page.name}" (ID: ${page.page_id})`);
                                await fetchAllDivisionsForLevelPage(page.page_id);
                                renderLevelListDropdown(page.page_id);
                            }
                        }
                    }
                }

                // Render the level list dropdown with fetched divisions
                function renderLevelListDropdown(pageId) {
                    const container = document.getElementById(`level-list-dropdown-${pageId}`);
                    if (!container) return;

                    if (levelPageDivisions.length === 0) {
                        container.innerHTML = `
                                <div class="text-center py-4">
                                    <p class="text-gray-500 text-sm">No divisions available. Please ensure you have completed the Player page first.</p>
                                </div>
                            `;
                        return;
                    }

                    // Get player name for label from playersList
                    let pNameForLabel = 'Player';
                    let playerDivId = selectedLevelDivisionId;
                    const currentPlayerId = currentlyEditingPlayerId || (selectedPlayerIds.size > 0 ? Array.from(selectedPlayerIds)[selectedPlayerIds.size - 1] : null);
                    if (currentPlayerId) {
                        const p = playersList.find(pl => pl.player_id == currentPlayerId);
                        if (p) {
                            pNameForLabel = `${p.first_name || ''} ${p.last_name || ''}`.trim() || 'Player';
                            if (p.division_id) {
                                playerDivId = p.division_id;
                            }
                        }
                    }

                    let optionsHtml = '<option value="" disabled selected>Select a Division</option>';
                    levelPageDivisions.forEach(div => {
                        const isEligible = (div.status || '').toLowerCase() === 'eligible';
                        const isSelected = playerDivId == div.division_id ? 'selected' : '';
                        const disabledAttr = !isEligible ? 'disabled' : '';
                        const statusLabel = !isEligible ? ` (${div.status})` : '';
                        optionsHtml += `<option value="${div.division_id}" ${isSelected} ${disabledAttr}>${div.division_name}${statusLabel}</option>`;
                    });

                    container.innerHTML = `
                            <div class="material-input-group">
                                <select id="level-select-${pageId}" 
                                        name="division_id" 
                                        class="level-page-select"
                                        onchange="onLevelDivisionChange(this, ${pageId})"
                                        required>
                                    ${optionsHtml}
                                </select>
                                <label for="level-select-${pageId}" class="label-float">${pNameForLabel} <span class="required-star">*</span></label>
                                <i class="fa-solid fa-chevron-down select-arrow"></i>
                            </div>
                        `;
                }

                // Handle division selection on level page
                // Handle division selection on level page
                function onLevelDivisionChange(selectElement, pageId) {
                    selectedLevelDivisionId = selectElement.value;
                    console.log(`✅ Level page division selected: ${selectedLevelDivisionId}`);
                    const currentPlayerId = currentlyEditingPlayerId || (selectedPlayerIds.size > 0 ? Array.from(selectedPlayerIds)[selectedPlayerIds.size - 1] : null);
                    if (currentPlayerId) {
                        const pObj = playersList.find(pl => pl.player_id == currentPlayerId);
                        if (pObj) {
                            pObj.division_id = selectedLevelDivisionId;
                            console.log(`✅ Updated division_id for player ${currentPlayerId} to ${selectedLevelDivisionId} in playersList`);
                        }
                    }
                }

                // Save level list section
                function saveLevelListSection(pageId, saveBtn) {
                    const selectEl = document.getElementById(`level-select-${pageId}`);
                    const selectedValue = selectEl ? selectEl.value : selectedLevelDivisionId;

                    if (!selectedValue) {
                        // Show error
                        const headerError = document.getElementById(`header-error-${pageId}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        showAlert('Please select a division before saving.', 'error');
                        return;
                    }

                    selectedLevelDivisionId = selectedValue;

                    // Hide error icon
                    const headerError = document.getElementById(`header-error-${pageId}`);
                    if (headerError) headerError.classList.add('hidden');

                    // Find the selected division data
                    const selectedDiv = levelPageDivisions.find(d => d.division_id == selectedLevelDivisionId);

                    // Store in collected registration data
                    collectedRegistrationData[pageId] = {
                        division_id: {
                            fieldid: 'division_id',
                            customfieldId: 0,
                            label: 'Division',
                            values: selectedDiv?.division_name || selectedLevelDivisionId // Passing Name since IDs were requested to be names
                        }
                    };

                    // Update player's division_id in playersList
                    const currentPlayerId = currentlyEditingPlayerId || (selectedPlayerIds.size > 0 ? Array.from(selectedPlayerIds)[selectedPlayerIds.size - 1] : null);
                    if (currentPlayerId) {
                        const pObj = playersList.find(pl => pl.player_id == currentPlayerId);
                        if (pObj) {
                            pObj.division_id = selectedLevelDivisionId;
                            console.log(`✅ Updated division_id for player ${currentPlayerId} to ${selectedLevelDivisionId} in playersList`);
                        }
                    }

                    console.log(`✅ Level list saved - Division ID: ${selectedLevelDivisionId}, Name: ${selectedDiv?.division_name || 'N/A'}`);

                    // Show green checkmark in header
                    const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                    if (headerCheckmark) {
                        headerCheckmark.classList.remove('hidden');
                    }

                    // Provide visual feedback
                    const originalContent = saveBtn.innerHTML;

                    saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';

                    setTimeout(() => {
                        saveBtn.innerHTML = originalContent;
                    }, 2000);

                    showAlert('Division selection saved!', 'success');

                    // Close the accordion for better multi-step flow
                    closeAccordion(pageId);
                }

                function generatePageFields(page) {
                    if (!page) return '';

                    const pageName = (page.name || '').toLowerCase().trim();
                    
                    // Check if this is a Level List page (file = ./levellist.php)
                    const isLevelListPage = (page.file && (page.file.includes('levellist.php') || page.file.includes('levelist.php'))) ||
                        (page.name && (
                            page.name.toLowerCase().trim().includes('level') ||
                            page.name.toLowerCase().trim().includes('division')
                        ));

                    const customKeywords = [
                        'conduct', 'rules', 'release', 'waiver', 'consent', 'mailing', 'returning',
                        'preference', 'pledge', 'policy', 'agreement', 'tolerance', 'volunteer',
                        'uniform', 'experience', 'medical', 'photo', 'liability', 'permission',
                        'custom', 'question', 'survey', 'emergency', 'comment'
                    ];
                    const isExplicitCustom = customKeywords.some(kw => pageName.includes(kw)) || page.type === 'custom' || page.page_type === 'custom';

                    // Check if this is a Parent page
                    const hasParentFields = page.fields && page.fields.some(f => (f.idTable || f.id_table || f.idtable) == 1);
                    const isParentPage = !isExplicitCustom && (pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account')) &&
                        !customKeywords.some(kw => pageName.includes(kw));

                    // Check if this is a Player page (Identity only - must have a First Name field)
                    const hasFirstNameField = page.fields && page.fields.some(f => (f.label || '').toLowerCase().includes('first name'));
                    const isPlayerPage = !isExplicitCustom && (pageName.includes('player') || pageName.includes('children') || pageName.includes('minor')) &&
                        hasFirstNameField &&
                        !customKeywords.some(kw => pageName.includes(kw));

                    // Check if this is the Summary page
                    const isSummaryPage = pageName === 'summary';

                    // Check if this is the Payment page
                    const isPaymentPage = pageName === 'payment' ||
                        pageName === 'payments' ||
                        (page.page_type && page.page_type === 'payment');

                    // Check if this is a custom page (not Parent, Player, Welcome, Summary, Payment)
                    const isCustomPage = !(isParentPage || isPlayerPage || isSummaryPage || isPaymentPage || pageName === 'welcome');

                    // Logic for "At Least One" validation requirement
                    const isAtLeastOnePage = page.required == 1 && isCustomPage && (page.fields || []).every(f =>
                        String(f.is_required) !== '1' && String(f.required) !== '1' && String(f.is_required).toLowerCase() !== 'true'
                    );

                    // Exclude hidden fields (display == 2, '2', or false)
                    let visibleFieldsRaw = (page.fields || []).filter(f => f.display !== 2 && f.display !== '2' && String(f.display) !== 'false');
                    let visibleFields = deduplicatePageFields(visibleFieldsRaw, isCustomPage);

                    // If it's a Level Selection page, hide fields that are redundant with our special dropdown
                    if (isLevelListPage) {
                        visibleFields = visibleFields.filter(f => {
                            const lbl = (f.label || '').toLowerCase();
                            const name = (f.page_field_name || '').toLowerCase();
                            return !lbl.includes('division') && !lbl.includes('level') && !name.includes('division') && !name.includes('level');
                        });
                    }

                    // Group fields by group_name
                    const groups = {};
                    visibleFields.forEach(field => {
                        const groupName = field.group_name || 'Other';
                        const fieldGroupSort = field.group_sort_order ?? 999;
                        if (!groups[groupName]) {
                            groups[groupName] = {
                                sort_order: fieldGroupSort,
                                priority: getGroupPriority(groupName),
                                fields: []
                            };
                        } else if (fieldGroupSort < groups[groupName].sort_order) {
                            groups[groupName].sort_order = fieldGroupSort;
                        }
                        groups[groupName].fields.push(field);
                    });

                    // Sort groups by group priority then sort_order
                    const sortedGroups = Object.entries(groups)
                        .sort((a, b) => {
                            const prioDiff = a[1].priority - b[1].priority;
                            if (prioDiff !== 0) return prioDiff;
                            const diff = a[1].sort_order - b[1].sort_order;
                            if (diff !== 0) return diff;
                            const minSortA = a[1].fields && a[1].fields.length > 0 ? Math.min(...a[1].fields.map(f => f.sort_order ?? 999)) : 999;
                            const minSortB = b[1].fields && b[1].fields.length > 0 ? Math.min(...b[1].fields.map(f => f.sort_order ?? 999)) : 999;
                            return minSortA - minSortB;
                        });

                    // Build group content
                    let groupsHtml = '';

                    // Check if this is a waiver/consent page with just one checkbox
                    const isWaiverPage = visibleFields.length === 1 &&
                        visibleFields[0].field_type === 'checkbox' &&
                        visibleFields[0].page_field_description;

                    if (isWaiverPage) {
                        // Render waiver pages without group header, full width
                        const field = visibleFields[0];
                        if (isCustomPage) {
                            const selectedPlayers = playersList.filter(p => {
                                const pid = p.player_id;
                                const isExcluded = excludedPlayerIds.has(pid) || excludedPlayerIds.has(String(pid)) || excludedPlayerIds.has(parseInt(pid));
                                if (isExcluded) return false;
                                const isAdded = updatedPlayerIds.has(pid) || updatedPlayerIds.has(String(pid)) || updatedPlayerIds.has(parseInt(pid));
                                return isAdded;
                            });
                            groupsHtml = renderFieldMultiPlayer(field, selectedPlayers, page);
                        } else {
                            groupsHtml = generateInputField(field, isParentPage, isCustomPage, false, false, isPlayerPage);
                        }
                    } else {
                        sortedGroups.forEach(([groupName, groupData]) => {
                            // Sort fields within group by sort_order
                            const sortedFields = groupData.fields.sort((a, b) => a.sort_order - b.sort_order);

                            let fieldsHtml = '';

                            if (isCustomPage) {
                                const selectedPlayers = playersList.filter(p => {
                                    const pid = p.player_id;
                                    const isExcluded = excludedPlayerIds.has(pid) || excludedPlayerIds.has(String(pid)) || excludedPlayerIds.has(parseInt(pid));
                                    if (isExcluded) return false;
                                    const isAdded = updatedPlayerIds.has(pid) || updatedPlayerIds.has(String(pid)) || updatedPlayerIds.has(parseInt(pid));
                                    return isAdded;
                                });
                                sortedFields.forEach(field => {
                                    fieldsHtml += renderFieldMultiPlayer(field, selectedPlayers, page);
                                });
                            } else if (groupName.toLowerCase() === 'phone numbers') {
                                // Organize phone fields by their number (1, 2, etc.)
                                const phoneGroups = {};
                                let otherFields = [];

                                sortedFields.forEach(field => {
                                    const labelLower = field.label.toLowerCase();
                                    const fieldName = field.page_field_name.toLowerCase();

                                    // Extract number from label or field name (1, 2, etc.)
                                    const numberMatch = labelLower.match(/(\d+)/) || fieldName.match(/(\d+)/);
                                    let phoneNumber = numberMatch ? numberMatch[1] : null;

                                    const isCode = labelLower.includes('code');
                                    const isPhone = (labelLower.includes('phone') && !labelLower.includes('ext') && !labelLower.includes('code')) ||
                                        (fieldName.includes('phone') && !fieldName.includes('ext') && !fieldName.includes('code'));
                                    const isExt = labelLower.includes('ext') || fieldName.includes('ext');

                                    if (!phoneNumber && (isCode || isPhone || isExt)) {
                                        phoneNumber = '1';
                                    }

                                    if (phoneNumber && (isCode || isPhone || isExt)) {
                                        if (!phoneGroups[phoneNumber]) {
                                            phoneGroups[phoneNumber] = { code: null, phone: null, ext: null };
                                        }
                                        if (isCode) phoneGroups[phoneNumber].code = field;
                                        else if (isPhone) phoneGroups[phoneNumber].phone = field;
                                        else if (isExt) phoneGroups[phoneNumber].ext = field;
                                    } else {
                                        otherFields.push(field);
                                    }
                                });

                                Object.keys(phoneGroups).sort().forEach(num => {
                                    const group = phoneGroups[num];

                                    const isPhoneHidden = !group.phone || group.phone.display == 0 || String(group.phone.display) === 'false' || group.phone.display == 2;

                                    if (isPhoneHidden) {
                                        if (group.code) {
                                            group.code.display = 0;
                                            fieldsHtml += generateInputField(group.code, isParentPage, isCustomPage, true, true, isPlayerPage);
                                        }
                                        if (group.phone) fieldsHtml += generateInputField(group.phone, isParentPage, isCustomPage, false, false, isPlayerPage);
                                        if (group.ext) {
                                            group.ext.display = 0;
                                            fieldsHtml += generateInputField(group.ext, isParentPage, isCustomPage, false, false, isPlayerPage);
                                        }
                                        return;
                                    }

                                    fieldsHtml += `<div class="col-span-full flex flex-wrap md:flex-nowrap gap-4 mb-4 items-end">`;

                                    if (group.code) {
                                        fieldsHtml += `<div class="w-full md:w-1/4">${generateInputField(group.code, isParentPage, isCustomPage, true, true, isPlayerPage)}</div>`;
                                    }

                                    if (group.phone) {
                                        fieldsHtml += `<div class="flex-1 min-w-[200px]">${generateInputField(group.phone, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                    }

                                    if (group.ext) {
                                        fieldsHtml += `<div class="w-full md:w-1/6">${generateInputField(group.ext, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                    }

                                    fieldsHtml += '</div>';
                                });

                                otherFields.forEach(field => {
                                    fieldsHtml += `<div class="mt-2">${generateInputField(field, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                });
                            } else if (groupName.toLowerCase().includes('emergency contact') || groupName.toLowerCase() === 'emergency contacts' || groupName.toLowerCase().includes('emergency info')) {
                                const emergencyGroups = {};
                                let currentNum = '1';

                                sortedFields.forEach(field => {
                                    const labelLower = field.label.toLowerCase();
                                    const fieldName = field.page_field_name.toLowerCase();
                                    const numberMatch = labelLower.match(/(\d+)/) || fieldName.match(/(\d+)/);

                                    if (numberMatch) {
                                        currentNum = numberMatch[1];
                                    }

                                    if (!emergencyGroups[currentNum]) {
                                        emergencyGroups[currentNum] = [];
                                    }
                                    emergencyGroups[currentNum].push(field);
                                });

                                Object.keys(emergencyGroups).sort().forEach(num => {
                                    const hasVisibleFields = emergencyGroups[num].some(field => {
                                        if (isCustomPage) return true;
                                        return field.display !== 0 && field.display !== 2 && String(field.display) !== 'false';
                                    });

                                    // Only show subheader if there are multiple contacts in this group
                                    const showSubHeader = hasVisibleFields && (Object.keys(emergencyGroups).length > 1);
                                    if (showSubHeader) {
                                        const mtClass = num === '1' ? 'mt-0' : 'mt-6';
                                        fieldsHtml += `<div class="col-span-full ${mtClass} mb-3 border-b border-gray-200 pb-1">
                                            <h4 class="font-bold text-[var(--primary-theme-color)] text-sm tracking-wide">Contact ${num}</h4>
                                        </div>`;
                                    }

                                    let nameField, relField, phoneField, codeField;
                                    let others = [];

                                    emergencyGroups[num].forEach(field => {
                                        const labelLower = field.label.toLowerCase();
                                        if (labelLower.includes('name')) nameField = field;
                                        else if (labelLower.includes('relation')) relField = field;
                                        else if (labelLower.includes('code')) codeField = field;
                                        else if (labelLower.includes('phone') && !labelLower.includes('ext')) phoneField = field;
                                        else others.push(field);
                                    });

                                    if (nameField) {
                                        fieldsHtml += `<div>${generateInputField(nameField, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                    }

                                    if (codeField || phoneField) {
                                        const isPhoneHidden = phoneField && (phoneField.display == 0 || String(phoneField.display) === 'false' || phoneField.display == 2);

                                        if (isPhoneHidden) {
                                            if (codeField) {
                                                codeField.display = 0;
                                                fieldsHtml += generateInputField(codeField, isParentPage, isCustomPage, true, true, isPlayerPage);
                                            }
                                            if (phoneField) fieldsHtml += generateInputField(phoneField, isParentPage, isCustomPage, false, false, isPlayerPage);
                                        } else {
                                            fieldsHtml += '<div class="col-span-full flex flex-wrap md:flex-nowrap gap-4 items-end mb-2">';
                                            if (!codeField) {
                                                codeField = {
                                                    field_id: 'virtual_emergencyCountryCode' + num,
                                                    label: 'Country Code',
                                                    field_type: 'text',
                                                    page_field_name: 'emergencyCountryCode' + num,
                                                    display: phoneField.display,
                                                    is_required: phoneField.is_required
                                                };
                                            } else {
                                                codeField.display = phoneField.display;
                                            }
                                            fieldsHtml += `<div class="w-full md:w-1/4">${generateInputField(codeField, isParentPage, isCustomPage, true, true, isPlayerPage)}</div>`;
                                            if (phoneField) {
                                                fieldsHtml += `<div class="flex-1 min-w-[200px]">${generateInputField(phoneField, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                            }
                                            fieldsHtml += '</div>';
                                        }
                                    }

                                    if (relField) {
                                        fieldsHtml += `<div>${generateInputField(relField, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                    }

                                    others.forEach(field => {
                                        fieldsHtml += `<div class="col-span-full">${generateInputField(field, isParentPage, isCustomPage, false, false, isPlayerPage)}</div>`;
                                    });
                                });
                            } else {
                                sortedFields.forEach(field => {
                                    fieldsHtml += generateInputField(field, isParentPage, isCustomPage, false, false, isPlayerPage);
                                });
                            }

                            if (fieldsHtml) {
                                const hasDisplayedFields = sortedFields.some(f => {
                                    if (isCustomPage) return true;
                                    return f.display !== 0 && f.display !== 2;
                                });

                                const showGroupHeader = hasDisplayedFields && 
                                    !(isCustomPage && (groupName.toLowerCase() === 'other' || groupName.toLowerCase() === 'additional information' || groupName.toLowerCase().trim() === pageName.toLowerCase().trim())) &&
                                    !(groupName === 'Additional Information' && sortedGroups.length === 1);

                                const groupHeaderHtml = showGroupHeader ? `
                                        <div class="bg-gray-100 py-2 mb-4">
                                            <h3 class="text-sm font-bold text-[var(--primary-theme-color)] tracking-wide">${groupName}</h3>
                                            <div class="border-b-2 border-dashed border-[var(--primary-theme-color)] mt-2"></div>
                                        </div>
                                    ` : '';

                                const isPhoneGroup = groupName.toLowerCase() === 'phone numbers';
                                const isOneByOne = isPhoneGroup || isCustomPage;
                                const gridClass = isOneByOne ? 'space-y-4' : 'grid grid-cols-1 md:grid-cols-2 gap-4';

                                if (hasDisplayedFields || isCustomPage) {
                                    groupsHtml += `
                                            <div class="mb-6">
                                                ${groupHeaderHtml}
                                                <div class="${gridClass}">
                                                    ${fieldsHtml}
                                                </div>
                                            </div>
                                        `;
                                } else {
                                    groupsHtml += fieldsHtml;
                                }
                            }
                        });
                    }

                    if (!groupsHtml && (page.fields || []).length > 0) {
                        const descField = (page.fields || []).find(f => f.page_field_description && (f.display == 0 || f.display == 1 || f.display == 2 || f.display === true || f.display === false));
                        if (descField && descField.page_field_description) {
                            groupsHtml = `<div class="prose max-w-none">${descField.page_field_description}</div>`;
                        }
                    }

                    if (isLevelListPage) {
                        const dropdownHtml = `
                                <div class="mt-6 pt-4 border-t border-gray-100">
                                    <p class="text-sm text-gray-600 mb-4">Please select your division below:</p>
                                    <div id="level-list-dropdown-${page.page_id}">
                                        <div class="membership-loading">
                                            <div class="spinner"></div>
                                            <p class="text-sm text-gray-500">Loading divisions...</p>
                                        </div>
                                    </div>
                                </div>
                            `;

                        groupsHtml += dropdownHtml;
                    }

                    if (isAtLeastOnePage) {
                        const atLeastOneMsg = `
                            <div class="mb-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 text-sm flex items-center gap-2">
                                <span><span class="font-bold text-red-600">*</span> Please fill out at least one field.</span>
                            </div>
                        `;
                        groupsHtml = atLeastOneMsg + groupsHtml;
                    }

                    // Add Save Button (Welcome, Summary and Payment exclusions)
                    if (!isSummaryPage && !isPaymentPage) {
                        const buttonText = isPlayerPage ? 'Save Player' : (isCustomPage ? 'Save' : `Save ${page.name}`);
                        let onclickHandler;

                        if (isLevelListPage) {
                            onclickHandler = `saveLevelListSection(${page.page_id})`;
                        } else if (isCustomPage) {
                            onclickHandler = `saveDynamicSectionMultiPlayer(${page.page_id})`;
                        } else {
                            onclickHandler = isPlayerPage ? `saveNewPlayer(${page.page_id})` : `saveSection(${page.page_id})`;
                        }

                        if (isCustomPage) {
                            groupsHtml += `
                                    <div class="mt-6">
                                        <button type="button" 
                                                onclick="${onclickHandler.replace(')', ', this)')}"
                                                class="w-full py-3 bg-[var(--primary-theme-color)] text-white rounded-lg font-bold shadow hover:bg-blue-900 transition text-center transform hover:scale-[1.02]">
                                            Save
                                        </button>
                                    </div>
                                `;
                        } else {
                            groupsHtml += `
                                    <div class="mt-6">
                                        <button type="button" 
                                                onclick="${onclickHandler.replace(')', ', this)')}"
                                                class="w-full py-3 bg-[var(--primary-theme-color)] text-white rounded-lg font-bold shadow hover:bg-blue-900 transition text-center transform hover:scale-[1.02]">
                                            ${buttonText}
                                        </button>
                                    </div>
                                `;
                        }
                    }

                    return groupsHtml;
                }

                function refreshCustomPagesFields() {
                    if (isRegistrationSet) return;
                    Object.values(allPagesMap).forEach(page => {
                        const pageName = (page.name || '').toLowerCase().trim();
                        const isParentPage = (pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account')) &&
                            !pageName.includes('preference') &&
                            !pageName.includes('waiver') &&
                            !pageName.includes('conduct') &&
                            !pageName.includes('rules') &&
                            !pageName.includes('comment') &&
                            !pageName.includes('selection') &&
                            !pageName.includes('returning') &&
                            !pageName.includes('contact') &&
                            !pageName.includes('pledge') &&
                            !pageName.includes('policy') &&
                            !pageName.includes('agreement');

                        const hasFirstNameField = page.fields && page.fields.some(f => (f.label || '').toLowerCase().includes('first name'));
                        const isPlayerPage = (pageName.includes('player') || pageName.includes('children') || pageName.includes('minor')) &&
                            hasFirstNameField &&
                            !pageName.includes('preference') &&
                            !pageName.includes('waiver') &&
                            !pageName.includes('conduct') &&
                            !pageName.includes('comment') &&
                            !pageName.includes('selection') &&
                            !pageName.includes('level');

                        const isSummaryPage = pageName === 'summary';
                        const isPaymentPage = pageName === 'payment' || pageName === 'payments' || (page.page_type && page.page_type === 'payment');

                        const isCustomPage = !(isParentPage || isPlayerPage || isSummaryPage || isPaymentPage || pageName === 'welcome');
                        
                        if (isCustomPage) {
                            const container = document.getElementById(`custom-fields-container-${page.page_id}`);
                            if (container) {
                                container.innerHTML = generatePageFields(page);
                            }
                        }
                    });
                    if (typeof refreshAllLabels === 'function') {
                        refreshAllLabels();
                    }
                }

                function normalizePageTitle(name) {
                    if (!name) return '';
                    const lowerName = name.toLowerCase().trim();
                    if (lowerName === 'children' || lowerName === 'player' || lowerName === 'players') return 'Player';
                    if (lowerName === 'parent' || lowerName === 'parents') return 'Parent';
                    if (lowerName === 'welcome') return 'Welcome';
                    if (lowerName === 'summary') return 'Summary';
                    if (lowerName === 'payment' || lowerName === 'payments') return 'Payment';
                    if (/^[a-z]/.test(name)) return name.charAt(0).toUpperCase() + name.slice(1);
                    return name;
                }

                function renderPage(page, index) {
                    // Check if page itself is hidden (display === 2 means hidden for PAGES)
                    if (page.display == 2) {
                        return '';
                    }

                    if (page.name) {
                        page.name = normalizePageTitle(page.name);
                    }

                    const pageId = `page-${page.page_id}`;
                    const pageName = page.name.toLowerCase().trim();

                    // Check if this is the Welcome page - only show description
                    const isWelcomePage = pageName === 'welcome';

                    if (isWelcomePage) {
                        let descriptionHtml = '';
                        if (page.fields && page.fields.length > 0) {
                            const descField = page.fields.find(f => f.page_field_description);
                            if (descField && descField.page_field_description) {
                                descriptionHtml = `<div class="prose max-w-none">${descField.page_field_description}</div>`;
                            }
                        }

                        const pageTitle = page.form_name ? `${page.name} - ${page.form_name}` : page.name;

                        return `
                                <div class="bg-white rounded-lg border-2 border-[var(--primary-theme-color)] overflow-hidden shadow-md">
                                    <div class="bg-[var(--primary-theme-color)] text-white p-3 px-5 flex justify-between items-center cursor-pointer hover:bg-[#000060] transition-colors" onclick="toggleSection('${pageId}', this)">
                                        <h2 class="font-bold tracking-wide text-sm">${pageTitle}</h2>
                                        <i class="fa-solid fa-chevron-up accordion-icon"></i>
                                    </div>
                                    <div id="${pageId}" class="px-5 accordion-content accordion-open">
                                        ${descriptionHtml}
                                    </div>
                                </div>
                            `;
                    }

                    // Check if this is a Membership page (file = ./MembershipStep.php)
                    const isMembershipPage = (page.file && page.file.includes('MembershipStep.php')) ||
                        page.name.toLowerCase().trim().includes('membership');

                    if (isMembershipPage) {
                        const pageTitle = page.form_name ? `${page.name} - ${page.form_name}` : page.name;

                        let descriptionHtml = '';
                        if (page.fields && page.fields.length > 0) {
                            const descField = page.fields.find(f => f.page_field_description);
                            if (descField && descField.page_field_description) {
                                descriptionHtml = `<div class="prose max-w-none mb-4">${descField.page_field_description}</div>`;
                            }
                        }

                        allPagesMap[page.page_id] = page;

                        setTimeout(async () => {
                            const checkFormId = currentForm ? currentForm.form_id : null;
                            const checkPlayerId = currentlyEditingPlayerId
                                || (selectedPlayerIds.size > 0 ? Array.from(selectedPlayerIds)[0] : null)
                                || localStorage.getItem('player_id')
                                || null;

                            await checkMembershipStatus(checkFormId, checkPlayerId);

                            const membershipWrapper = document.getElementById(`section-wrapper-${page.page_id}`);
                            const membershipContent = document.getElementById(`membership-content-${page.page_id}`);
                            const membershipActiveMsg = document.getElementById(`membership-active-msg-${page.page_id}`);

                            if (playerHasActiveMembership) {
                                console.log(`✅ Player already has active membership — hiding membership selection for page ${page.page_id}`);

                                if (membershipWrapper) {
                                    membershipWrapper.classList.add('hidden');
                                    membershipWrapper.setAttribute('data-saved', 'true');
                                }

                                if (membershipContent) membershipContent.classList.add('hidden');
                                if (membershipActiveMsg) {
                                    membershipActiveMsg.classList.remove('hidden');
                                    const expireDate = activeMembershipData && activeMembershipData.expire_date
                                        ? new Date(activeMembershipData.expire_date).toLocaleDateString()
                                        : 'N/A';
                                    const statusMsg = activeMembershipData && activeMembershipData.message
                                        ? activeMembershipData.message
                                        : 'You already have an active membership.';
                                    document.getElementById(`membership-active-text-${page.page_id}`).textContent = statusMsg;
                                    document.getElementById(`membership-expire-date-${page.page_id}`).textContent = `Expires: ${expireDate}`;
                                }

                                const headerCheckmark = document.getElementById(`header-checkmark-${page.page_id}`);
                                if (headerCheckmark) headerCheckmark.classList.remove('hidden');

                                if (membershipWrapper) membershipWrapper.setAttribute('data-saved', 'true');
                            } else {
                                if (membershipContent) membershipContent.classList.remove('hidden');
                                if (membershipActiveMsg) membershipActiveMsg.classList.add('hidden');

                                if (membershipOptions.length === 0) {
                                    await fetchMembershipData();
                                }
                                renderMembershipCards(page.page_id);
                            }
                        }, 200);

                        return `
                                <div id="section-wrapper-${page.page_id}" class="bg-white rounded-lg border-2 border-[var(--primary-theme-color)] overflow-hidden shadow-md">
                                    <div class="bg-[var(--primary-theme-color)] text-white p-3 px-5 flex justify-between items-center cursor-pointer hover:bg-[#000060] transition-colors" onclick="toggleSection('${pageId}', this)">
                                        <div class="flex items-center gap-3">
                                            <h2 id="header-title-${page.page_id}" class="font-bold tracking-wide text-sm">${pageTitle}</h2>
                                            <i id="header-checkmark-${page.page_id}" class="fa-solid fa-circle-check text-green-500 hidden"></i>
                                            <i id="header-error-${page.page_id}" class="fa-solid fa-circle-exclamation text-red-500 hidden"></i>
                                        </div>
                                        <i class="fa-solid fa-chevron-up accordion-icon"></i>
                                    </div>
                                    <div id="${pageId}" class="px-5 accordion-content">
                                        ${descriptionHtml}
                                        
                                        <!-- Active membership message (hidden by default, shown when player has active membership) -->
                                        <div id="membership-active-msg-${page.page_id}" class="hidden">
                                            <div class="flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg mb-4">
                                                <i class="fa-solid fa-circle-check text-green-500 text-2xl"></i>
                                                <div>
                                                    <p id="membership-active-text-${page.page_id}" class="font-semibold text-green-800">You already have an active membership.</p>
                                                    <p id="membership-expire-date-${page.page_id}" class="text-sm text-green-600 mt-1"></p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Membership selection content (shown when player does NOT have active membership) -->
                                        <div id="membership-content-${page.page_id}">
                                            <p class="text-sm text-gray-600 mb-4">Please select one membership option below:</p>
                                            
                                            <!-- Hidden input holds the selected membership ID -->
                                            <input type="hidden" id="membership-value-${page.page_id}" name="membership_id" value="">
                                            
                                            <!-- Membership options container -->
                                            <div id="membership-options-${page.page_id}" class="space-y-3">
                                                <div class="membership-loading">
                                                    <div class="spinner"></div>
                                                    <p class="text-sm text-gray-500">Checking membership status...</p>
                                                </div>
                                            </div>
                                            
                                            <!-- Save button -->
                                            <div class="mt-6 pt-4 border-t border-gray-200 flex justify-end">
                                                <button type="button" 
                                                        onclick="saveMembershipSection(${page.page_id}, this)"
                                                        class="bg-[var(--primary-theme-color)] text-white px-6 py-2 rounded-lg font-bold shadow hover:bg-blue-900 transition flex items-center gap-2 transform hover:scale-105">
                                                    <i class="fa-solid fa-save"></i> Save Membership
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                    }

                    // Check if this is a Level List page (file = ./levellist.php)
                    const isLevelListPage = (page.file && (page.file.includes('levellist.php') || page.file.includes('levelist.php'))) ||
                        (page.name && (
                            page.name.toLowerCase().trim().includes('level') ||
                            page.name.toLowerCase().trim().includes('division')
                        ));

                    const customKeywords = [
                        'conduct', 'rules', 'release', 'waiver', 'consent', 'mailing', 'returning',
                        'preference', 'pledge', 'policy', 'agreement', 'tolerance', 'volunteer',
                        'uniform', 'experience', 'medical', 'photo', 'liability', 'permission',
                        'custom', 'question', 'survey', 'emergency', 'comment'
                    ];
                    const isExplicitCustom = customKeywords.some(kw => pageName.includes(kw)) || page.type === 'custom' || page.page_type === 'custom';

                    // Check if this is a Parent page
                    const hasParentFields = page.fields && page.fields.some(f => (f.idTable || f.id_table || f.idtable) == 1);
                    const isParentPage = !isExplicitCustom && (pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account')) &&
                        !customKeywords.some(kw => pageName.includes(kw));

                    // Check if this is a Player page (Identity only - must have a First Name field)
                    const hasFirstNameField = page.fields && page.fields.some(f => (f.label || '').toLowerCase().includes('first name'));
                    const isPlayerPage = !isExplicitCustom && (pageName.includes('player') || pageName.includes('children') || pageName.includes('minor')) &&
                        hasFirstNameField &&
                        !customKeywords.some(kw => pageName.includes(kw));

                    // Check if this is the Summary page
                    const isSummaryPage = pageName === 'summary';

                    // Check if this is the Payment page
                    const isPaymentPage = pageName === 'payment' ||
                        pageName === 'payments' ||
                        (page.page_type && page.page_type === 'payment');

                    // Check if this is a custom page (not Parent, Player, Welcome, Summary, Payment)
                    const isCustomPage = !(isParentPage || isPlayerPage || isSummaryPage || isPaymentPage || pageName === 'welcome');

                    if (isCustomPage && isPageEffectivelyEmpty(page)) {
                        return '';
                    }

                    if (isLevelListPage) {
                        setTimeout(async () => {
                            await fetchAllDivisionsForLevelPage(page.page_id);
                            renderLevelListDropdown(page.page_id);
                        }, 300);
                    }

                    const playerSelectionHtml = getPlayerSelectionHtml(page);

                    if (isPlayerPage) {
                        playerPages[page.page_id] = page;
                    }

                    // Call the helper to generate page fields
                    let groupsHtml = generatePageFields(page);

                    if (isCustomPage && (!groupsHtml || groupsHtml.trim() === '')) {
                        return '';
                    }

                    // Wrap player fields in a container for re-rendering
                    let fieldsContainerId = '';
                    if (isPlayerPage) {
                        fieldsContainerId = `player-fields-container-${page.page_id}`;
                    } else if (isCustomPage) {
                        fieldsContainerId = `custom-fields-container-${page.page_id}`;
                    }
                    
                    const fieldsContainerWrapper = fieldsContainerId ?
                        `<div id="${fieldsContainerId}">${groupsHtml}</div>` :
                        groupsHtml;

                    const pageTitle = page.form_name ? `${page.name} - ${page.form_name}` : page.name;

                    if (isSummaryPage) {
                        return `
                                <div id="section-wrapper-${page.page_id}" class="bg-white rounded-lg border-2 border-[var(--primary-theme-color)] overflow-hidden shadow-md">
                                    <div class="bg-[var(--primary-theme-color)] text-white p-3 px-5 flex justify-between items-center cursor-pointer hover:bg-[#000060] transition-colors" 
                                         onclick="toggleSection('${pageId}', this); if(document.getElementById('${pageId}').classList.contains('accordion-open')) { loadSummaryFees('${pageId}-fee-container'); }">
                                        <h2 class="font-bold tracking-wide text-sm">${pageTitle}</h2>
                                        <i class="fa-solid fa-chevron-up accordion-icon"></i>
                                    </div>
                                    <div id="${pageId}" class="px-5 accordion-content">
                                        <div id="${pageId}-fee-container">
                                            <!-- Fee summary will be rendered here -->
                                        </div>
                                        <div class="mt-4">${groupsHtml}</div>
                                    </div>
                                </div>
                            `;
                    }

                    if (isPaymentPage) {
                        setTimeout(() => {
                            const grandTotal = window.lastCalculatedGrandTotal || 0;
                            const todayDate = new Date().toISOString().split('T')[0];
                            const autoAuthNum = 'CC-REG-' + Math.floor(Date.now() / 1000);

                            const paymentAutoFillMap = {
                                'amount': grandTotal,
                                'payment date': todayDate,
                                'status': 'Success',
                                'payment method': '2',
                                'total fee': grandTotal,
                                'payment id': '0',
                                'auth number': autoAuthNum,
                                'reference number': autoAuthNum,
                                'payment type': '2',
                                'applied amount': grandTotal
                            };

                            const sectionData = {};
                            page.fields.forEach(f => {
                                const label = (f.label || '').toLowerCase().trim();
                                const fieldid = f.fieldid || f.field_id;
                                const customFieldid = f.customFieldid || f.custom_field_id;
                                const value = paymentAutoFillMap.hasOwnProperty(label)
                                    ? String(paymentAutoFillMap[label])
                                    : '';

                                sectionData[fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    label: f.label || '',
                                    values: value
                                };
                            });

                            collectedRegistrationData[page.page_id] = sectionData;
                            console.log('💳 Payment page auto-saved (hidden from UI):', sectionData);
                        }, 600);

                        return `<div id="section-wrapper-${page.page_id}" style="display:none;" data-saved="true"></div>`;
                    }

                    return `
                            <div id="section-wrapper-${page.page_id}" class="bg-white rounded-lg border-2 border-[var(--primary-theme-color)] overflow-hidden shadow-md">
                                <div class="bg-[var(--primary-theme-color)] text-white p-3 px-5 flex justify-between items-center cursor-pointer hover:bg-[#000060] transition-colors" onclick="toggleSection('${pageId}', this)">
                                    <div class="flex items-center gap-3">
                                        <h2 id="header-title-${page.page_id}" class="font-bold tracking-wide text-sm">${pageTitle}</h2>
                                        <i id="header-checkmark-${page.page_id}" class="fa-solid fa-circle-check text-green-500 ${isPlayerPage && updatedPlayerIds.size >= 1 ? '' : 'hidden'}"></i>
                                        <i id="header-error-${page.page_id}" class="fa-solid fa-circle-exclamation text-red-500 hidden"></i>
                                    </div>
                                    <i class="fa-solid fa-chevron-up accordion-icon"></i>
                                </div>
                                <div id="${pageId}" class="px-5 accordion-content">
                                    ${isParentPage ? getParentSwitcherHtml(page.page_id) : ''}
                                    ${playerSelectionHtml}
                                    <div id="page-content-${page.page_id}">
                                        ${fieldsContainerWrapper}
                                    </div>
                                </div>
                            </div>
                        `;
                }

                // Helper to generate player selection UI (Autofill and Ready sections)
                function getPlayerSelectionHtml(page) {
                    const pageName = page.name.toLowerCase().trim();
                    const isPlayerPage = pageName === 'player' || pageName === 'children' || pageName === 'players';
                    if (!isPlayerPage) return '';

                    // Check if user logged in directly as a player (has player_id from login)
                    const hasDirectPlayerId = !!localStorage.getItem('player_id');

                    const containerId = `player-selection-container-${page.page_id}`;
                    if (playersList.length === 0 && !isAdultLeaguePlayer && !hasDirectPlayerId) {
                        return `
                                <div id="${containerId}" class="mb-6">
                                    <div class="border-2 border-dashed border-[var(--primary-theme-color,#8b0000)] rounded-xl p-3.5 flex items-center gap-3 cursor-pointer text-[var(--primary-theme-color,#8b0000)] font-semibold hover:bg-red-50/50 transition-colors ${currentlyEditingPlayerId === 'new' ? 'bg-red-50/70 border-solid' : ''}"
                                         onclick="addNewPlayerClick()">
                                        <div class="w-6 h-6 rounded-full border-2 border-[var(--primary-theme-color,#8b0000)] flex items-center justify-center shrink-0">
                                            <i class="fa-solid fa-plus text-xs"></i>
                                        </div>
                                        <span>Add New Child</span>
                                    </div>
                                </div>
                            `;
                    }

                    // If user is directly a player, skip the selection UI entirely
                    // BUT for registration sets or multiple players, ALWAYS show it
                    if (hasDirectPlayerId && !isRegistrationSet && playersList.length <= 1) {
                        return `<div id="${containerId}"></div>`;
                    }

                    // Autofill section: Players NOT yet updated/saved
                    const autofillPlayers = playersList.filter(p => !updatedPlayerIds.has(p.player_id));
                    let autofillHtml = '';
                    if (autofillPlayers.length > 0 && (!isAdultLeaguePlayer || isRegistrationSet) && (!hasDirectPlayerId || isRegistrationSet)) {
                        // Auto-select first player if none is currently selected
                        if (!currentlyEditingPlayerId && autofillPlayers.length > 0) {
                            currentlyEditingPlayerId = autofillPlayers[0].player_id;
                        }
                        autofillHtml = `
                                <div class="mb-6">
                                    <h3 class="text-xs font-semibold text-gray-400 mb-3 tracking-wider">Autofill from Profile:</h3>
                                    <div class="flex flex-col gap-3">
                                        ${autofillPlayers.map(player => {
                            const isChecked = currentlyEditingPlayerId == player.player_id;
                            return `
                                                <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-gray-50 transition-colors">
                                                    <div class="relative flex items-center justify-center">
                                                        <input type="checkbox" 
                                                               name="player-autofill-${player.player_id}" 
                                                               ${isChecked ? 'checked' : ''}
                                                               class="appearance-none w-6 h-6 border-2 border-[var(--primary-theme-color,#8b0000)] rounded-full checked:bg-white transition-all cursor-pointer"
                                                               onchange="onPlayerSelect(${player.player_id}, '${(player.first_name + ' ' + player.last_name).replace(/'/g, "\\'")}', this.checked)">
                                                        <div class="absolute w-3 h-3 rounded-full bg-[var(--primary-theme-color,#8b0000)] transform scale-0 group-has-[:checked]:scale-100 transition-transform"></div>
                                                    </div>
                                                    <span class="text-base font-medium text-gray-700 group-hover:text-[var(--primary-theme-color,#8b0000)] transition-colors">${player.first_name} ${player.last_name}</span>
                                                </label>
                                            `;
                        }).join('')}
                                    </div>
                                </div>
                            `;
                    }

                    // Ready for Registration section: Players who have been updated/saved
                    const readyPlayers = playersList.filter(p => updatedPlayerIds.has(p.player_id));
                    let readyHtml = `
                        <div class="mb-6">
                            ${readyPlayers.length > 0 ? `
                                <h3 class="text-sm font-semibold text-gray-700 mb-3">Added Players (${readyPlayers.length}):</h3>
                                <div class="flex flex-col gap-3 mb-3">
                                    ${readyPlayers.map(player => {
                                        const eligibleForms = playerEligibilityMap[player.player_id] || [];
                                        const hasEligibility = isRegistrationSet && eligibleForms.length > 0;
                                        const currentPlayerData = playersList.find(p => p.player_id === player.player_id);
                                        const selectedFormIds = currentPlayerData?.selected_form_ids || [];

                                        let formSelectionHtml = '';
                                        if (hasEligibility) {
                                            formSelectionHtml = `
                                                <div class="mt-3 pt-3 border-t border-gray-200" onclick="event.stopPropagation()">
                                                    <p class="text-xs text-gray-500 mb-2 font-medium">Select league(s) for this player:</p>
                                                    <div class="flex flex-col gap-2">
                                                        ${eligibleForms.map(form => {
                                                            const status = form.status || 'Eligible';
                                                            const isEligible = status.toLowerCase() === 'eligible';
                                                            const isDisabled = !isEligible;
                                                            const statusText = isDisabled ? ` (${status})` : '';
                                                            return `
                                                                <label class="flex items-center gap-3 ${isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'} group p-2 rounded-lg ${isDisabled ? 'bg-gray-100' : 'hover:bg-gray-50'} transition-colors">
                                                                    <input type="checkbox" 
                                                                           name="player-form-${player.player_id}-${form.form_id}" 
                                                                           value="${form.form_id}"
                                                                           ${selectedFormIds.includes(form.form_id) && isEligible ? 'checked' : ''}
                                                                           ${isDisabled ? 'disabled' : ''}
                                                                           class="w-5 h-5 text-[var(--primary-theme-color,#8b0000)] border-gray-300 rounded focus:ring-[var(--primary-theme-color,#8b0000)] ${isDisabled ? 'cursor-not-allowed bg-gray-200' : 'cursor-pointer'}"
                                                                           style="accent-color: var(--primary-theme-color, #8b0000);"
                                                                           onchange="onPlayerFormToggle(${player.player_id}, ${form.form_id}, '${form.form_name.replace(/'/g, "\\'")}', this.checked)">
                                                                    <span class="text-sm font-medium ${isDisabled ? 'text-gray-500' : 'text-gray-800 group-hover:text-[var(--primary-theme-color,#8b0000)]'}">${form.form_name}${statusText}</span>
                                                                </label>
                                                            `;
                                                        }).join('')}
                                                    </div>
                                                </div>
                                            `;
                                        }

                                        const isActive = currentlyEditingPlayerId == player.player_id;
                                        const pName = (player.first_name + ' ' + player.last_name).replace(/'/g, "\\'");
                                        const isExcluded = excludedPlayerIds.has(player.player_id) || excludedPlayerIds.has(parseInt(player.player_id));
                                        const isChecked = !isExcluded;
                                        return `
                                            <div class="rounded-xl p-3.5 transition-all ${isActive ? 'bg-white border-2 border-[var(--primary-theme-color,#8b0000)] shadow-sm' : 'bg-white border border-gray-200 hover:border-gray-300'} ${isExcluded ? 'opacity-60' : ''}">
                                                <div class="flex items-center gap-3">
                                                    <div class="w-7 h-7 ${isChecked ? 'bg-[var(--primary-theme-color,#8b0000)] text-white' : 'bg-white border-2 border-gray-300'} rounded-md flex items-center justify-center shrink-0 shadow-sm transition-colors cursor-pointer"
                                                         onclick="togglePlayerCheckbox(event, ${player.player_id}, '${pName}')">
                                                        ${isChecked ? '<i class="fa-solid fa-check text-xs font-bold"></i>' : ''}
                                                    </div>
                                                    <span class="text-base font-semibold ${isExcluded ? 'text-gray-400 line-through' : 'text-gray-800'} cursor-pointer"
                                                          onclick="onPlayerNameClick(${player.player_id}, '${pName}')">${player.first_name} ${player.last_name}</span>
                                                    ${isExcluded ? '<span class="text-xs text-gray-400 ml-auto">(not registering)</span>' : ''}
                                                </div>
                                                ${isChecked ? formSelectionHtml : ''}
                                            </div>
                                        `;
                                    }).join('')}
                                </div>
                            ` : ''}

                            <!-- Add New Child Button -->
                            <div class="border-2 border-dashed border-[var(--primary-theme-color,#8b0000)] rounded-xl p-3.5 flex items-center gap-3 cursor-pointer text-[var(--primary-theme-color,#8b0000)] font-semibold hover:bg-red-50/50 transition-colors ${currentlyEditingPlayerId === 'new' ? 'bg-red-50/70 border-solid' : ''}"
                                 onclick="addNewPlayerClick()">
                                <div class="w-6 h-6 rounded-full border-2 border-[var(--primary-theme-color,#8b0000)] flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-plus text-xs"></i>
                                </div>
                                <span>Add New Child</span>
                            </div>
                        </div>
                    `;

                    return `
                            <div id="${containerId}" class="mb-6">
                                ${autofillHtml}
                                ${readyHtml}
                            </div>
                        `;
                }

                // Helper to update player list UI across all player pages
                function updatePlayerSelectionUI() {
                    Object.values(playerPages).forEach(page => {
                        const container = document.getElementById(`player-selection-container-${page.page_id}`);
                        if (container) {
                            // Full replacement of the container content
                            const parent = container.parentElement;
                            const newHtml = getPlayerSelectionHtml(page);
                            container.outerHTML = newHtml;
                        }
                    });

                    // Ensure all labels reflect the current selection and names
                    refreshAllLabels();

                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }
                }
                // Handle form toggle for a player (registration sets only - multiple selections allowed)
                function onPlayerFormToggle(playerId, formId, formName, isChecked) {
                    // Find the player in the list
                    const playerIndex = playersList.findIndex(p => p.player_id === playerId);
                    if (playerIndex !== -1) {
                        // Initialize selected_form_ids array if not exists
                        if (!playersList[playerIndex].selected_form_ids) {
                            playersList[playerIndex].selected_form_ids = [];
                        }

                        if (isChecked) {
                            // Add form to selected list if not already there
                            if (!playersList[playerIndex].selected_form_ids.includes(formId)) {
                                playersList[playerIndex].selected_form_ids.push(formId);
                            }
                        } else {
                            // Remove form from selected list
                            playersList[playerIndex].selected_form_ids = playersList[playerIndex].selected_form_ids.filter(id => id !== formId);
                        }

                        // Update global playerFormSelections for dynamic page rendering
                        playerFormSelections[playerId] = playersList[playerIndex].selected_form_ids;
                    }

                    // Update UI to reflect the selection (but don't re-render checkboxes to avoid losing focus)
                    // Just update the display text
                    const eligibleForms = playerEligibilityMap[playerId] || [];
                    const selectedFormIds = playersList[playerIndex]?.selected_form_ids || [];
                    const selectedFormsText = selectedFormIds.length > 0
                        ? selectedFormIds.map(fid => eligibleForms.find(f => f.form_id == fid)?.form_name).filter(Boolean).join(', ')
                        : 'No league selected';

                    // Update the display text without full UI refresh
                    const playerCard = document.querySelector(`[name="player-ready-${playerId}"]`)?.closest('.bg-gray-100');
                    if (playerCard) {
                        const textEl = playerCard.querySelector('.text-xs.text-gray-500.font-medium');
                        if (textEl) {
                            textEl.textContent = `Leagues: ${selectedFormsText}`;
                        }
                    }



                    // Update dynamic custom pages based on all player selections
                    updateDynamicCustomPages();
                    refreshAllLabels();
                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }
                }

                // Update all dynamic labels in the DOM to reflect latest parent/player names


                // Update dynamic custom pages based on which forms players have selected
                function updateDynamicCustomPages() {
                    const container = document.getElementById('dynamic-custom-pages-container');
                    if (!container) return;

                    // Collect all unique form IDs that have been selected by any player
                    const selectedFormIds = new Set();
                    const playersByFormId = {}; // Map form_id -> array of player info

                    playersList.forEach(player => {
                        const pid = player.player_id;
                        // Skip players excluded from registration or not yet saved/added
                        if (excludedPlayerIds.has(pid) || excludedPlayerIds.has(String(pid)) || excludedPlayerIds.has(parseInt(pid))) return;
                        const isAdded = updatedPlayerIds.has(pid) || updatedPlayerIds.has(String(pid)) || updatedPlayerIds.has(parseInt(pid));
                        if (!isAdded) return;

                        const forms = player.selected_form_ids || [];
                        forms.forEach(formId => {
                            selectedFormIds.add(formId);
                            if (!playersByFormId[formId]) {
                                playersByFormId[formId] = [];
                            }
                            playersByFormId[formId].push({
                                player_id: player.player_id,
                                name: `${player.first_name} ${player.last_name}`,
                                first_name: player.first_name,
                                last_name: player.last_name
                            });
                        });
                    });




                    // Build HTML for custom pages
                    let dynamicPagesHtml = '';

                    // Track which global pages have already been rendered (by page name)
                    const renderedGlobalPages = new Set();

                    // Collect all unique players across all selected forms (for global pages)
                    const allSelectedPlayers = [];
                    const seenPlayerIds = new Set();
                    Object.values(playersByFormId).forEach(players => {
                        players.forEach(player => {
                            if (!seenPlayerIds.has(player.player_id)) {
                                seenPlayerIds.add(player.player_id);
                                allSelectedPlayers.push(player);
                            }
                        });
                    });

                    const pagesToRender = [];
                    const globalPagesToRender = [];

                    // Handle global_page from registration set data (render each global page as its own section)
                    if (selectedFormIds.size > 0 && window.currentRegistrationSet && (window.currentRegistrationSet.global_page || window.globalPageData)) {
                        let globalPageData = window.globalPageData || window.currentRegistrationSet.global_page;
                        if (typeof globalPageData === 'string') {
                            try { globalPageData = JSON.parse(globalPageData); } catch (e) { globalPageData = []; }
                        }

                        if (Array.isArray(globalPageData) && globalPageData.length > 0) {
                            globalPageData.forEach(page => {
                                const pagesToProcess = (page.pages && Array.isArray(page.pages)) ? page.pages : [page];

                                pagesToProcess.forEach(p => {
                                    if (isPageEffectivelyEmpty(p)) return;

                                    const globalKey = (p.name || '').toLowerCase().trim();
                                    if (!renderedGlobalPages.has(globalKey)) {
                                        renderedGlobalPages.add(globalKey);
                                        globalPagesToRender.push({
                                            page: p,
                                            formId: 'global',
                                            formName: null,
                                            playersToShow: allSelectedPlayers,
                                            isGlobalPage: true
                                        });
                                    }
                                });
                            });
                        }
                    }

                    selectedFormIds.forEach(formId => {
                        const customPages = customPagesByFormId[formId] || [];
                        const playersForForm = playersByFormId[formId] || [];

                        if (customPages.length === 0 || playersForForm.length === 0) return;

                        // Get form name for header
                        const eligibleForms = Object.values(playerEligibilityMap).flat();
                        const formInfo = eligibleForms.find(f => f.form_id == formId);
                        const formName = formInfo ? formInfo.form_name : `Form ${formId}`;

                        // Collect pages
                        customPages.forEach((page) => {
                            // Skip empty or placeholder pages
                            if (isPageEffectivelyEmpty(page)) return;

                            const isGlobalPage = page.type === 'global' || page.season_type === -99 || page.is_global || (page.form_id === 0);

                            if (isGlobalPage) {
                                const globalKey = (page.name || '').toLowerCase().trim();
                                if (!renderedGlobalPages.has(globalKey)) {
                                    renderedGlobalPages.add(globalKey);
                                    globalPagesToRender.push({
                                        page,
                                        formId: 'global',
                                        formName: null,
                                        playersToShow: allSelectedPlayers,
                                        isGlobalPage: true
                                    });
                                }
                            } else {
                                pagesToRender.push({
                                    page,
                                    formId,
                                    formName,
                                    playersToShow: playersForForm,
                                    isGlobalPage: false
                                });
                            }
                        });
                    });

                    // Combine: custom pages first, then global pages
                    const finalPagesList = [...pagesToRender, ...globalPagesToRender];

                    finalPagesList.forEach((item, itemIdx) => {
                        const { page, formId, formName, playersToShow, isGlobalPage } = item;

                        // Use unique ID per instance to ensure duplicate custom pages in a form don't clash or overwrite
                        const pageIdentifier = page.page_id ? `${page.page_id}_${itemIdx}` : `idx_${itemIdx}`;
                        const uniquePageId = isGlobalPage
                            ? `dynamic-global-${page.page_id ? page.page_id : itemIdx}`
                            : `dynamic-${formId}-${pageIdentifier}`;

                        // Store page in allPagesMap
                        const dynamicPage = {
                            ...page,
                            page_id: uniquePageId,
                            original_page_id: page.page_id,
                            form_id: formId,
                            form_name: formName,
                            is_global: isGlobalPage,
                            players: playersToShow
                        };
                        allPagesMap[uniquePageId] = dynamicPage;

                        // For global pages, don't pass formName (will show simple title)
                        // For custom pages, pass formName (will show "Page (FormName) - Players")
                        dynamicPagesHtml += renderDynamicCustomPageMultiPlayer(
                            dynamicPage,
                            playersToShow,
                            isGlobalPage ? null : formName
                        );
                    });

                    container.innerHTML = dynamicPagesHtml;
                    if (dynamicPagesHtml && dynamicPagesHtml.trim()) {
                        container.classList.remove('hidden');
                    } else {
                        container.classList.add('hidden');
                    }

                    // Initialize newly added accordions as closed
                    setTimeout(() => {
                        container.querySelectorAll('.accordion-content').forEach(acc => {
                            acc.classList.remove('accordion-open');
                        });
                        container.querySelectorAll('.accordion-icon').forEach(icon => {
                            icon.classList.add('rotated');
                        });
                    }, 50);

                    // Re-calculate all labels to ensure correct parent/player names are shown
                    refreshAllLabels();
                }

                // Re-renders all custom pages (both static in #pages-container and dynamic in #dynamic-custom-pages-container)
                function refreshCustomPages() {
                    // 1. Re-render static custom pages in #pages-container (for single forms)
                    Object.values(allPagesMap || {}).forEach(page => {
                        if (!page || !page.page_id) return;
                        const pageName = (page.name || '').toLowerCase().trim();
                        const customKeywords = [
                            'conduct', 'rules', 'release', 'waiver', 'consent', 'mailing', 'returning',
                            'preference', 'pledge', 'policy', 'agreement', 'tolerance', 'volunteer',
                            'uniform', 'experience', 'medical', 'photo', 'liability', 'permission',
                            'custom', 'question', 'survey', 'emergency', 'comment'
                        ];
                        const isExplicitCustom = customKeywords.some(kw => pageName.includes(kw)) || page.type === 'custom' || page.page_type === 'custom';

                        const isParentPage = !isExplicitCustom && (pageName.includes('parent') || pageName.includes('guardian') || pageName.includes('adult') || pageName.includes('account')) &&
                            !customKeywords.some(kw => pageName.includes(kw));
                        const isPlayerPage = !isExplicitCustom && (pageName.includes('player') || pageName.includes('children') || pageName.includes('minor')) &&
                            !customKeywords.some(kw => pageName.includes(kw));
                        const isSummaryPage = pageName === 'summary';
                        const isPaymentPage = pageName === 'payment' || pageName === 'payments';
                        const isCustomPage = !(isParentPage || isPlayerPage || isSummaryPage || isPaymentPage || pageName === 'welcome');

                        if (isCustomPage) {
                            const container = document.getElementById(`custom-fields-container-${page.page_id}`);
                            if (container && typeof generatePageFields === 'function') {
                                container.innerHTML = generatePageFields(page);
                            }
                        }
                    });

                    // 2. Re-render dynamic custom pages (for registration sets)
                    if (typeof updateDynamicCustomPages === 'function') {
                        updateDynamicCustomPages();
                    }

                    // 3. Refresh dynamic labels
                    if (typeof refreshAllLabels === 'function') {
                        refreshAllLabels();
                    }
                }

                // Fetch and render fees for the summary page
                async function loadSummaryFees(containerId) {
                    const container = document.getElementById(containerId);
                    if (!container) return;

                    // Clean ID if it contains 'page-' prefix
                    const pageId = containerId.replace('-fee-container', '').replace('page-', '');

                    container.innerHTML = `
                            <div class="flex flex-col items-center justify-center py-10 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">
                                <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-[var(--primary-theme-color)] mb-4"></div>
                                <p class="text-gray-600 font-medium animate-pulse">Calculating registration fees...</p>
                            </div>
                        `;
                    // Prepare players data - only those with selected forms
                    const selectedPlayersForFees = [];
                    playersList.forEach(player => {
                        const pId = player.player_id;
                        // Use string-based check to be robust against type mismatch (int vs string)
                        const isSelected = selectedPlayerIds.has(pId) || selectedPlayerIds.has(String(pId)) || selectedPlayerIds.has(parseInt(pId));

                        if (isSelected) {
                            if (isRegistrationSet) {
                                // Registration set: use the form IDs selected via checkboxes
                                const formIds = (player.selected_form_ids || []).map(Number);
                                if (formIds.length > 0) {
                                    selectedPlayersForFees.push({
                                        player_id: pId,
                                        form_ids: formIds
                                    });
                                }
                            } else {
                                // Single registration form: use currentForm's form_id for all selected players
                                if (currentForm && currentForm.form_id) {
                                    selectedPlayersForFees.push({
                                        player_id: pId,
                                        form_ids: [parseInt(currentForm.form_id)]
                                    });
                                }
                            }
                        }
                    });

                    if (selectedPlayersForFees.length === 0) {
                        container.innerHTML = `
                                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4 rounded-r-lg">
                                    <div class="flex items-center">
                                        <i class="fa-solid fa-info-circle text-blue-500 mr-3 text-xl"></i>
                                        <p class="text-blue-700 font-medium">No players or leagues selected yet. Please go back and select at least one player and league.</p>
                                    </div>
                                </div>
                            `;
                        return;
                    }

                    try {
                        // Construct the players array string for GraphQL literal to avoid PlayerFeeInput type errors
                        const playersGql = selectedPlayersForFees.map(p =>
                            `{ player_id: ${p.player_id}, form_ids: [${p.form_ids.join(', ')}] }`
                        ).join(', ');

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchPlayerFeeDetails {
                                        fetchPlayerFeeDetails(players: [${playersGql}]) {
                                            player_id
                                            registration_counter {
                                                form_id
                                                registration_counter
                                                reg_start_date
                                                reg_end_date
                                                early_bird_1
                                                late_fee_date
                                            }
                                            fee_groups {
                                                Fee_Group_id
                                                Fee_Group_name
                                                entities
                                                fee_codes {
                                                    Fee_Code_id
                                                    Fee_Code_name
                                                    entities
                                                }
                                                form_ids
                                            }
                                            membership_fee_groups {
                                                Fee_Group_id
                                                Fee_Group_name
                                                entities
                                                fee_codes {
                                                    Fee_Code_id
                                                    Fee_Code_name
                                                    entities
                                                }
                                                form_ids
                                            }
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        if (result.data && result.data.fetchPlayerFeeDetails) {
                            console.log(`================== 💳 FETCHED FEE CODES API RESPONSE ==================`);
                            console.log(`📥 Fetched fee details for ${result.data.fetchPlayerFeeDetails.length} player(s):`, result.data.fetchPlayerFeeDetails);
                            result.data.fetchPlayerFeeDetails.forEach(pr => {
                                const regGroups = (pr.fee_groups || []).map(g => `"${g.Fee_Group_name}" (${(g.fee_codes || []).length} codes)`).join(', ');
                                const memGroups = (pr.membership_fee_groups || []).map(g => `"${g.Fee_Group_name}" (${(g.fee_codes || []).length} codes)`).join(', ');
                                console.log(`  👤 Player ID ${pr.player_id}:`);
                                console.log(`     - Regular Fee Groups: ${regGroups || 'None'}`);
                                console.log(`     - Membership Fee Groups: ${memGroups || 'None'}`);
                            });
                            await renderFeeSummary(container, result.data.fetchPlayerFeeDetails);
                        } else {
                            container.innerHTML = '<div class="bg-red-50 text-red-700 p-4 rounded-lg border border-red-200"><i class="fa-solid fa-triangle-exclamation mr-2"></i> Error calculating fees. Please refresh and try again.</div>';
                        }
                    } catch (error) {
                        console.error('Error fetching fees:', error);
                        container.innerHTML = '<div class="bg-red-50 text-red-700 p-4 rounded-lg border border-red-200"><i class="fa-solid fa-plug-circle-exclamation mr-2"></i> Error connecting to fee service.</div>';
                    }
                }

                // Helper to get player's gender (0 = unknown/both, 1 = male, 2 = female)
                function getPlayerGender(playerId) {
                    const parseGenderVal = (v) => {
                        if (v === undefined || v === null) return 0;
                        const s = String(v).toLowerCase().trim();
                        if (s === '1' || s === '1.00' || s === '1.0' || s === 'male' || s === 'm' || s.includes('male') || s === 'boy' || s.includes('boys')) return 1;
                        if (s === '2' || s === '2.00' || s === '2.0' || s === 'female' || s === 'f' || s.includes('female') || s === 'girl' || s.includes('girls')) return 2;
                        const num = parseFloat(s);
                        if (num === 1 || num === 1.0) return 1;
                        if (num === 2 || num === 2.0) return 2;
                        return 0;
                    };

                    // 1. Check window.draftPlayerFieldValues
                    if (window.draftPlayerFieldValues && window.draftPlayerFieldValues[playerId]) {
                        const dMap = window.draftPlayerFieldValues[playerId];
                        for (const k in dMap) {
                            const kLower = k.toLowerCase();
                            if (kLower === 'gender' || kLower === 'sex' || kLower.includes('gender') || kLower.includes('sex')) {
                                const parsed = parseGenderVal(dMap[k]);
                                if (parsed !== 0) return parsed;
                            }
                        }
                    }

                    // 2. Check window.activeDraftRows
                    if (window.activeDraftRows && Array.isArray(window.activeDraftRows)) {
                        const draftRow = window.activeDraftRows.find(r => r.player_id == playerId);
                        if (draftRow && Array.isArray(draftRow.data)) {
                            for (const d of draftRow.data) {
                                const isParentNumMatch = (d.parent_number === 0 || d.parent_number === '0' || d.parent_number === null || d.parent_number === undefined);
                                if (isParentNumMatch && d.value) {
                                    const meta = typeof fieldMetadataMap !== 'undefined' ? fieldMetadataMap[d.field_id] : null;
                                    const metaLabel = meta ? (meta.label || '').toLowerCase().trim() : '';
                                    if (metaLabel === 'gender' || metaLabel === 'sex' || metaLabel.includes('gender') || metaLabel.includes('sex')) {
                                        const parsed = parseGenderVal(d.value);
                                        if (parsed !== 0) return parsed;
                                    }
                                }
                            }
                        }
                    }

                    // 3. Check collectedRegistrationData (multi-player or single-player structure)
                    for (const pageId in collectedRegistrationData) {
                        const entry = collectedRegistrationData[pageId];
                        if (!entry) continue;
                        const playerData = (entry[playerId] && typeof entry[playerId] === 'object') ? entry[playerId] : entry;
                        if (playerData && typeof playerData === 'object') {
                            for (const fId in playerData) {
                                const fieldObj = playerData[fId];
                                if (!fieldObj) continue;
                                const label = (typeof fieldObj === 'object' ? (fieldObj.label || '') : '').toLowerCase();
                                if (label.includes('gender') || label.includes('sex')) {
                                    const val = typeof fieldObj === 'object' ? (fieldObj.values !== undefined ? fieldObj.values : fieldObj.value) : fieldObj;
                                    const parsed = parseGenderVal(val);
                                    if (parsed !== 0) return parsed;
                                }
                            }
                        }
                    }

                    // 4. Check playersList
                    const player = playersList.find(p => p.player_id == playerId);
                    if (player) {
                        if (player.gender !== undefined && player.gender !== null) {
                            const parsed = parseGenderVal(player.gender);
                            if (parsed !== 0) return parsed;
                        }
                        if (player.fields && Array.isArray(player.fields)) {
                            const genderField = player.fields.find(f => {
                                const l = (f.label || '').toLowerCase();
                                return l.includes('gender') || l.includes('sex');
                            });
                            if (genderField && genderField.value) {
                                const parsed = parseGenderVal(genderField.value);
                                if (parsed !== 0) return parsed;
                            }
                        }
                    }

                    // 5. Check playerFieldValues & fieldValues
                    if (typeof playerFieldValues !== 'undefined') {
                        if (playerFieldValues['gender']) {
                            const parsed = parseGenderVal(playerFieldValues['gender']);
                            if (parsed !== 0) return parsed;
                        }
                        if (playerFieldValues['player - gender']) {
                            const parsed = parseGenderVal(playerFieldValues['player - gender']);
                            if (parsed !== 0) return parsed;
                        }
                    }
                    if (typeof fieldValues !== 'undefined') {
                        if (fieldValues['gender']) {
                            const parsed = parseGenderVal(fieldValues['gender']);
                            if (parsed !== 0) return parsed;
                        }
                        if (fieldValues['player - gender']) {
                            const parsed = parseGenderVal(fieldValues['player - gender']);
                            if (parsed !== 0) return parsed;
                        }
                    }

                    // 6. DOM check
                    const genderSelect = document.querySelector(`.gender-select[data-player-id="${playerId}"], select[name*="gender"], input[name*="gender"]:checked`);
                    if (genderSelect && genderSelect.value) {
                        const parsed = parseGenderVal(genderSelect.value);
                        if (parsed !== 0) return parsed;
                    }

                    return 0;
                }

                // Helper to check if player is on a team
                function isPlayerOnTeam(playerId) {
                    const player = playersList.find(p => p.player_id == playerId);
                    return player?.team_id || player?.is_on_team || false;
                }

                // Helper to get player's residency status
                function getPlayerResident(playerId) {
                    // Check collected form data
                    for (const pageId in collectedRegistrationData) {
                        const playerData = collectedRegistrationData[pageId][playerId];
                        if (playerData) {
                            for (const fieldId in playerData) {
                                const label = (playerData[fieldId].label || '').toLowerCase();
                                if (label.includes('resident') || label.includes('residency')) {
                                    return playerData[fieldId].values ? 1 : 0;
                                }
                            }
                        }
                    }
                    return fieldValues['resident'] || fieldValues['is_resident'] || 0;
                }

                // Helper to get player's skill level
                function getPlayerLevel(playerId) {
                    // Check collected form data
                    for (const pageId in collectedRegistrationData) {
                        const playerData = collectedRegistrationData[pageId][playerId];
                        if (playerData) {
                            for (const fieldId in playerData) {
                                const label = (playerData[fieldId].label || '').toLowerCase();
                                if (label.includes('level') || label.includes('skill')) {
                                    return parseInt(playerData[fieldId].values) || 0;
                                }
                            }
                        }
                    }
                    return parseInt(fieldValues['level'] || fieldValues['skill_level']) || 0;
                }

                // Helper to get player's affiliation
                function getPlayerAffiliation(playerId) {
                    // Check collected form data
                    for (const pageId in collectedRegistrationData) {
                        const playerData = collectedRegistrationData[pageId][playerId];
                        if (playerData) {
                            for (const fieldId in playerData) {
                                const label = (playerData[fieldId].label || '').toLowerCase();
                                if (label.includes('affiliation')) {
                                    return parseInt(playerData[fieldId].values) || 0;
                                }
                            }
                        }
                    }
                    return parseInt(fieldValues['affiliation'] || fieldValues['affiliation_id']) || 0;
                }

                // Helper to check membership status
                function isMember(playerId) {
                    const player = playersList.find(p => p.player_id == playerId);
                    if (player?.is_member) return true;
                    return fieldValues['is_member'] || fieldValues['member'] || false;
                }

                // Helper: Count players registering for a specific form
                function countPlayersForForm(formId) {
                    let count = 0;
                    playersList.forEach(player => {
                        if (isRegistrationSet) {
                            const selectedForms = player.selected_form_ids || [];
                            if (selectedForms.includes(formId) || selectedForms.includes(String(formId)) || selectedForms.includes(Number(formId))) {
                                count++;
                            }
                        } else {
                            // Single form: all selected players are registering for this form
                            if (selectedPlayerIds.has(player.player_id) && currentForm &&
                                (currentForm.form_id == formId || String(currentForm.form_id) == String(formId))) {
                                count++;
                            }
                        }
                    });
                    return count;
                }

                // Helper: Check if custom field or custom page is answered for a player
                function isCustomFieldAnswered(playerId, customFieldId) {
                    if (!customFieldId || customFieldId === 0 || customFieldId === '0') return true;

                    const targetStr = String(customFieldId).trim().toLowerCase();

                    const isValueAnswered = (val) => {
                        if (val === null || val === undefined) return false;
                        if (val === true || val === 1 || val === "1") return true;
                        if (typeof val === 'string' && val.trim() !== "" && val.trim() !== "0") return true;
                        if (Array.isArray(val) && val.length > 0) return true;
                        if (typeof val === 'object' && Object.keys(val).length > 0) return true;
                        return false;
                    };

                    const checkDataObjHasAnswers = (dataObj) => {
                        if (!dataObj || typeof dataObj !== 'object') return false;
                        for (const key in dataObj) {
                            const fData = dataObj[key];
                            if (!fData) continue;
                            if (typeof fData === 'object' && (fData.values !== undefined || fData.value !== undefined)) {
                                if (isValueAnswered(fData.values ?? fData.value)) return true;
                            } else if (isValueAnswered(fData)) {
                                return true;
                            }
                        }
                        return false;
                    };

                    // 1. Gather all potential page IDs and names from all available page sources
                    const matchedPageIds = new Set();
                    matchedPageIds.add(targetStr);

                    const allSourcesOfPages = [
                        ...Object.values(allPagesMap || {}),
                        ...(typeof allPagesIncludingHidden !== 'undefined' ? allPagesIncludingHidden : []),
                        ...(typeof customPagesByFormId !== 'undefined' ? Object.values(customPagesByFormId).flat() : []),
                        ...(typeof customPages !== 'undefined' && Array.isArray(customPages) ? customPages : []),
                        ...(typeof window.customPages !== 'undefined' && Array.isArray(window.customPages) ? window.customPages : [])
                    ];

                    allSourcesOfPages.forEach(page => {
                        if (!page) return;
                        const pId = String(page.page_id || page.id || '').trim().toLowerCase();
                        const origId = String(page.original_page_id || '').trim().toLowerCase();
                        const pName = String(page.name || page.page_name || '').trim().toLowerCase();

                        if (pId === targetStr || origId === targetStr || pName === targetStr) {
                            if (pId) matchedPageIds.add(pId);
                            if (origId) matchedPageIds.add(origId);
                            if (pName) matchedPageIds.add(pName);
                        }
                    });

                    // 2. Check collectedRegistrationData for any key matching our gathered page IDs / names
                    for (const pKey in collectedRegistrationData) {
                        const pKeyLower = String(pKey).trim().toLowerCase();
                        if (matchedPageIds.has(pKeyLower)) {
                            const pageEntry = collectedRegistrationData[pKey];
                            if (!pageEntry) continue;
                            const playerData = pageEntry[playerId] || pageEntry;
                            if (checkDataObjHasAnswers(playerData)) {
                                return true;
                            }
                        }
                    }

                    // 3. Search in collectedRegistrationData for matching fieldId, customFieldId or label
                    for (const pageId in collectedRegistrationData) {
                        const pageEntry = collectedRegistrationData[pageId];
                        const playerData = (pageEntry && pageEntry[playerId]) ? pageEntry[playerId] : pageEntry;
                        if (playerData && typeof playerData === 'object') {
                            for (const fieldId in playerData) {
                                const fieldData = playerData[fieldId];
                                if (!fieldData) continue;
                                const fieldLabel = String(fieldData.label || '').trim().toLowerCase();
                                if (fieldData.customFieldId == customFieldId || fieldData.customfieldId == customFieldId || fieldId == customFieldId || fieldData.field_id == customFieldId || fieldLabel === targetStr) {
                                    const val = fieldData.values ?? fieldData.value ?? fieldData;
                                    if (isValueAnswered(val)) {
                                        return true;
                                    }
                                }
                            }
                        }
                    }

                    // 4. Fallback check for field label match across allSourcesOfPages
                    let targetLabel = '';
                    for (const page of allSourcesOfPages) {
                        if (page && page.fields) {
                            const field = page.fields.find(f => (f.field_id || f.fieldid || f.custom_field_id || f.customFieldId) == customFieldId);
                            if (field) {
                                targetLabel = (field.label || field.page_field_name || field.form_field_name || '').toLowerCase().trim();
                                break;
                            }
                        }
                    }

                    if (targetLabel) {
                        for (const pageId in collectedRegistrationData) {
                            const pageEntry = collectedRegistrationData[pageId];
                            const playerData = (pageEntry && pageEntry[playerId]) ? pageEntry[playerId] : pageEntry;
                            if (playerData && typeof playerData === 'object') {
                                for (const fieldId in playerData) {
                                    const fieldData = playerData[fieldId];
                                    if (!fieldData) continue;
                                    const fieldLabel = (fieldData.label || '').toLowerCase().trim();
                                    if (fieldLabel && fieldLabel === targetLabel) {
                                        const val = fieldData.values ?? fieldData.value ?? fieldData;
                                        if (isValueAnswered(val)) {
                                            return true;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    return isCustomFieldApplicable(playerId, customFieldId);
                }

                // Logic to process and render fee details
                // Helper to fetch and cache divisions for fee calculation
                const feeDivisionCache = {};
                async function getDivisionsWithOrder(formId) {
                    if (feeDivisionCache[formId]) return feeDivisionCache[formId];

                    try {
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';
                        const query = `
                                query FetchAllDivisions {
                                    fetchAllDivisions(form_id: ${formId || 'null'}, grade: 0, gender: "", age: 0) {
                                        criteria
                                        all_divisions {
                                            division_id
                                            division_name
                                            level_order
                                            start
                                            end
                                            gender
                                        }
                                    }
                                }
                            `;
                        const resp = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-Organisation': organisation, 'X-Token': token },
                            body: JSON.stringify({ query })
                        });
                        const result = await resp.json();
                        if (result.data && result.data.fetchAllDivisions) {
                            feeDivisionCache[formId] = result.data.fetchAllDivisions;
                            return feeDivisionCache[formId];
                        }
                    } catch (e) {
                        // Silent fail
                    }
                    return { criteria: null, all_divisions: [] };
                }

                const getEntityValue = (entities, name) => {
                    if (!entities || typeof entities !== 'object') return null;
                    return entities[name];
                };

                const parseValue = (val) => {
                    if (val === null || val === undefined || val === 'NULL') return null;
                    if (val === 'true') return 1;
                    if (val === 'false') return 0;
                    const num = parseFloat(val);
                    if (!isNaN(num) && String(val).match(/^-?\d*\.?\d+$/)) return num;
                    return val;
                };

                // Helper to evaluate fee code level suitability using criteria and level order
                async function isFeeLevelApplicable(playerId, entities, checkFormId) {
                    const startLevelId = parseValue(getEntityValue(entities, 'start_level')) || 0;
                    const endLevelId = parseValue(getEntityValue(entities, 'end_level')) || 0;
                    const feeHasLevelCheck = (startLevelId > 0 || endLevelId > 0);

                    if (!feeHasLevelCheck) {
                        return true;
                    }

                    if (!checkFormId) return false;

                    const divisionData = await getDivisionsWithOrder(checkFormId);
                    const rawDivs = (divisionData && Array.isArray(divisionData.all_divisions)) ? divisionData.all_divisions : (Array.isArray(divisionData) ? divisionData : []);
                    const criteria = (divisionData && divisionData.criteria ? divisionData.criteria : 'grade').toLowerCase().trim();

                    if (rawDivs.length === 0) return false;

                    // Sort divisions by level_order (ascending), fallback to array index if level_order is null
                    const sortedDivs = [...rawDivs].sort((a, b) => {
                        const orderA = (a.level_order !== null && a.level_order !== undefined) ? parseFloat(a.level_order) : Infinity;
                        const orderB = (b.level_order !== null && b.level_order !== undefined) ? parseFloat(b.level_order) : Infinity;
                        if (orderA !== Infinity || orderB !== Infinity) return orderA - orderB;
                        return 0;
                    });

                    // Helper to check gender compatibility (1 = Male, 2 = Female, 0 = Both/Coed)
                    const isGenderCompatible = (pGenNum, dGen) => {
                        let dGenNum = 0;
                        if (dGen !== null && dGen !== undefined && dGen !== '') {
                            const s = String(dGen).toLowerCase().trim();
                            if (s === '1' || s === 'male' || s === 'm' || s.includes('boy')) dGenNum = 1;
                            else if (s === '2' || s === 'female' || s === 'f' || s.includes('girl')) dGenNum = 2;
                        }

                        // Division gender 0 means Co-ed / Both / Any -> matches all
                        if (dGenNum === 0) return true;

                        // If player's gender is unknown (0), allow match
                        if (pGenNum === 0) return true;

                        // Strict match between player gender and division gender
                        return pGenNum === dGenNum;
                    };

                    const playerGenderNum = getPlayerGender(playerId);

                    // 1. Get player's division ID if explicitly selected
                    let playerDivisionId = parseInt(getPlayerDivisionId(playerId)) || 0;
                    let playerDivisionObj = null;

                    if (playerDivisionId > 0) {
                        playerDivisionObj = sortedDivs.find(d => d.division_id == playerDivisionId);
                    }

                    // 2. If division was not explicitly selected, match by criteria (grade or age) + gender against division start, end, and gender
                    if (!playerDivisionObj) {
                        if (criteria.includes('grade') || criteria === '') {
                            const pGrade = getPlayerGrade(playerId);
                            if (pGrade !== null && pGrade !== undefined) {
                                playerDivisionObj = sortedDivs.find(d => {
                                    const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                    const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                    const gradeMatches = pGrade >= startVal && pGrade <= endVal;
                                    const genderMatches = isGenderCompatible(playerGenderNum, d.gender);
                                    return gradeMatches && genderMatches;
                                });
                                // Fallback matching ONLY if player gender is unknown (0)
                                if (!playerDivisionObj && playerGenderNum === 0) {
                                    playerDivisionObj = sortedDivs.find(d => {
                                        const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                        const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                        return pGrade >= startVal && pGrade <= endVal;
                                    });
                                }
                            }
                        }
                        if (!playerDivisionObj && (criteria.includes('age') || criteria === '')) {
                            const pAge = getPlayerAge(playerId);
                            if (pAge !== null && pAge !== undefined) {
                                playerDivisionObj = sortedDivs.find(d => {
                                    const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                    const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                    const ageMatches = pAge >= startVal && pAge <= endVal;
                                    const genderMatches = isGenderCompatible(playerGenderNum, d.gender);
                                    return ageMatches && genderMatches;
                                });
                                if (!playerDivisionObj && playerGenderNum === 0) {
                                    playerDivisionObj = sortedDivs.find(d => {
                                        const startVal = (d.start !== null && d.start !== undefined && d.start !== '') ? parseInt(d.start) : -Infinity;
                                        const endVal = (d.end !== null && d.end !== undefined && d.end !== '') ? parseInt(d.end) : Infinity;
                                        return pAge >= startVal && pAge <= endVal;
                                    });
                                }
                            }
                        }
                    }

                    if (playerDivisionObj) {
                        playerDivisionId = parseInt(playerDivisionObj.division_id) || 0;
                    }

                    let result = false;
                    let eligibleDivIds = [];

                    let startIndex = startLevelId > 0 ? sortedDivs.findIndex(d => d.division_id == startLevelId) : -1;
                    let endIndex = endLevelId > 0 ? sortedDivs.findIndex(d => d.division_id == endLevelId) : -1;

                    let lowerBound, upperBound;

                    if (playerDivisionId > 0 && (playerDivisionId === startLevelId || playerDivisionId === endLevelId)) {
                        result = true;
                    } else if (startIndex !== -1 && endIndex !== -1) {
                        lowerBound = Math.min(startIndex, endIndex);
                        upperBound = Math.max(startIndex, endIndex);
                    } else if (startIndex !== -1) {
                        lowerBound = startIndex;
                        upperBound = sortedDivs.length - 1;
                    } else if (endIndex !== -1) {
                        lowerBound = 0;
                        upperBound = endIndex;
                    }

                    if (!result && lowerBound !== undefined && playerDivisionId > 0) {
                        const playerIndex = sortedDivs.findIndex(d => d.division_id == playerDivisionId);
                        const eligibleDivisions = sortedDivs.slice(lowerBound, upperBound + 1);
                        eligibleDivIds = eligibleDivisions.map(d => parseInt(d.division_id));
                        result = eligibleDivIds.includes(playerDivisionId);
                    }

                    return result;
                }

                // Logic to process and render fee details
                window.lastCalculatedGrandTotal = 0; // Global to store total for payment
                window.playerFeeAmounts = {}; // Global to store per-player fee amounts for per-player payment submission
                window.lastFeeSummaryContainer = null;
                window.lastPlayerFeeResults = null;

                async function renderFeeSummary(container, playerFeeResults) {
                    window.lastFeeSummaryContainer = container;
                    window.lastPlayerFeeResults = playerFeeResults;
                    if (!hasLoadedDiscountCodes && typeof window.loadDiscountCodes === 'function') {
                        await window.loadDiscountCodes();
                    }
                    const playerApplicableCodes = {}; // Map playerId -> Array of {code, formId, etc.}
                    const feeCodeCountsByForm = {}; // Map formId -> { codeId -> count }

                    const calculateFeeForPosition = (position, baseFee, fee1, fee2, fee3, qBreak1, qBreak2, qBreak3) => {
                        // Position 1 (or any position below the first break) always uses the base fee
                        if (position <= 1) return baseFee;

                        // Identify the highest active quantity break that is less than or equal to our current position
                        let activeBreakCost = null;
                        let maxConfiguredBreak = 0;

                        if (qBreak1 > 0) {
                            maxConfiguredBreak = Math.max(maxConfiguredBreak, qBreak1);
                            if (position >= qBreak1) activeBreakCost = fee1;
                        }
                        if (qBreak2 > 0) {
                            maxConfiguredBreak = Math.max(maxConfiguredBreak, qBreak2);
                            if (position >= qBreak2) activeBreakCost = fee2;
                        }
                        if (qBreak3 > 0) {
                            maxConfiguredBreak = Math.max(maxConfiguredBreak, qBreak3);
                            if (position >= qBreak3) activeBreakCost = fee3;
                        }

                        // Rule: If position is ABOVE the highest configured break, and there's no greater break value, we apply 0 directly
                        // Otherwise, we apply the last applicable break cost
                        if (position > maxConfiguredBreak && maxConfiguredBreak > 0 && activeBreakCost === null) {
                            return 0;
                        }

                        return activeBreakCost !== null ? activeBreakCost : baseFee;
                    };

                    // Helper to parse date string
                    const parseDateStr = (str) => {
                        if (!str) return null;
                        const d = new Date(str);
                        return isNaN(d.getTime()) ? null : d;
                    };

                    // Helper to check if a date is within a range
                    const isBetweenDates = (current, startStr, endStr) => {
                        const start = parseDateStr(startStr);
                        const end = parseDateStr(endStr);
                        if (!start || !end) return false;
                        const s = new Date(start);
                        s.setHours(0, 0, 0, 0);
                        const e = new Date(end);
                        e.setHours(23, 59, 59, 999);
                        return current >= s && current <= e;
                    };

                    // First pass: Identify all qualified fee codes for each player
                    for (const playerResult of playerFeeResults) {
                        const playerId = playerResult.player_id;
                        const results = [];
                        const formsAlreadyCharged = new Set(); // Track forms with applied fees for this player to apply 'hierarchy' rule

                        // Identify all forms this player is actually registering for
                        let playerRegisteringFormIds = (playerResult.registration_counter || []).map(rc => String(rc.form_id));
                        if (playerRegisteringFormIds.length === 0) {
                            const p = playersList.find(pl => pl.player_id == playerId);
                            playerRegisteringFormIds = isRegistrationSet ? (p?.selected_form_ids || []).map(String) : [String(currentForm?.form_id)].filter(id => id !== 'undefined' && id !== 'null');
                        }

                        // Process regular fee groups
                        for (const group of (playerResult.fee_groups || [])) {
                            let groupEntities = group.entities || {};
                            if (typeof groupEntities === 'string') {
                                try { groupEntities = JSON.parse(groupEntities); } catch (e) { groupEntities = {}; }
                            }

                            let applicableFormIds = group.form_ids || [];
                            if (applicableFormIds.length === 0) {
                                if (groupEntities.form_id) applicableFormIds.push(groupEntities.form_id);
                                else if (playerResult.registration_counter && playerResult.registration_counter.length > 0) {
                                    applicableFormIds = playerResult.registration_counter.map(rc => rc.form_id);
                                }
                            }

                            for (const code of (group.fee_codes || [])) {
                                if (!code || !code.Fee_Code_id || code.Fee_Code_id == 0 || code.Fee_Code_id === '0' || !code.Fee_Code_name || String(code.Fee_Code_name).trim() === '') {
                                    continue;
                                }

                                let entities = code.entities || {};
                                if (typeof entities === 'string') {
                                    try { entities = JSON.parse(entities); } catch (e) { entities = {}; }
                                }

                                let isApplicable = true;
                                const skipReasons = [];

                                // 1. Check custom field or attached custom page
                                const customFieldId = getEntityValue(entities, 'newCustomfieldId') || getEntityValue(entities, 'custom_page_id') || getEntityValue(entities, 'custom_page') || getEntityValue(entities, 'id_custom_field') || 0;
                                const customFieldStatus = (customFieldId && customFieldId !== 0 && customFieldId !== '0') ? isCustomFieldAnswered(playerId, customFieldId) : true;
                                if (!customFieldStatus) {
                                    isApplicable = false;
                                    skipReasons.push(`Required Custom Page/Field (ID: ${customFieldId}) was not answered by Player ${playerId}`);
                                }

                                // 2. Check age
                                const startAge = parseValue(getEntityValue(entities, 'start_age')) ?? -99;
                                const endAge = parseValue(getEntityValue(entities, 'end_age')) ?? 999;
                                const ageNotSet = (startAge === -99 && endAge === 999);
                                const playerAge = getPlayerAge(playerId);
                                const ageStatus = ageNotSet || (playerAge !== null && playerAge >= startAge && playerAge <= endAge);
                                if (!ageStatus) {
                                    isApplicable = false;
                                    skipReasons.push(`Player age (${playerAge ?? 'N/A'}) is outside required age range [${startAge} to ${endAge}]`);
                                }

                                // 3. Check level (using Division Order Range as requested)
                                const relevantFormIds = applicableFormIds.filter(fid => playerRegisteringFormIds.includes(String(fid)));
                                const checkFormId = relevantFormIds.length > 0 ? relevantFormIds[0] : (playerRegisteringFormIds.length > 0 ? playerRegisteringFormIds[0] : null);
                                const levelMatch = await isFeeLevelApplicable(playerId, entities, checkFormId);
                                if (!levelMatch) {
                                    isApplicable = false;
                                    skipReasons.push(`Player level/division is not eligible for fee level range [Start Level: ${getEntityValue(entities, 'start_level') || 'None'}, End Level: ${getEntityValue(entities, 'end_level') || 'None'}]`);
                                }

                                console.log(`💳 [Fee Code Check] Player: ${playerId}, Code: "${code.Fee_Code_name}" (ID: ${code.Fee_Code_id}), Group: "${group.Fee_Group_name}"`);
                                console.log(`   - Attached Custom Page/Field ("${customFieldId || 'None'}"): ${customFieldStatus ? 'PASSED ✅' : 'FAILED ❌'}`);
                                console.log(`   - Age Range [${startAge} to ${endAge}] (Player Age: ${playerAge ?? 'N/A'}): ${ageStatus ? 'PASSED ✅' : 'FAILED ❌'}`);
                                console.log(`   - Level/Division Range: ${levelMatch ? 'PASSED ✅' : 'FAILED ❌'}`);

                                if (!isApplicable) {
                                    console.log(`   🔴 OUTCOME: SKIPPED | Reason: ${skipReasons.join(' | ')}`);
                                    continue;
                                }

                                console.log(`   🟢 OUTCOME: QUALIFIED (Eligible to apply)`);

                                // Qualification passed! Apply hierarchy rule: only one code match per form for this player.
                                const effectiveFormIds = relevantFormIds.length > 0 ? relevantFormIds : (playerRegisteringFormIds.length > 0 ? [playerRegisteringFormIds[0]] : []);

                                effectiveFormIds.forEach(fId => {
                                    const fIdStr = String(fId);
                                    if (!formsAlreadyCharged.has(fIdStr)) {
                                        results.push({
                                            id: code.Fee_Code_id,
                                            name: code.Fee_Code_name,
                                            entities: entities,
                                            groupId: group.Fee_Group_id,
                                            groupName: group.Fee_Group_name,
                                            groupEntities: groupEntities,
                                            formId: fIdStr
                                        });

                                        if (!feeCodeCountsByForm[fIdStr]) {
                                            feeCodeCountsByForm[fIdStr] = {};
                                        }
                                        feeCodeCountsByForm[fIdStr][code.Fee_Code_id] =
                                            (feeCodeCountsByForm[fIdStr][code.Fee_Code_id] || 0) + 1;

                                        formsAlreadyCharged.add(fIdStr);
                                        console.log(`   ✅ APPLIED TO FORM ${fIdStr}: Code "${code.Fee_Code_name}" (ID: ${code.Fee_Code_id})`);
                                    } else {
                                        console.log(`   🔴 SKIPPED FOR FORM ${fIdStr}: Form already charged by a higher-priority fee code in group hierarchy.`);
                                    }
                                });
                            }

                            // If all forms for this player already have an associated fee from this hierarchy, stop processing further groups
                            if (playerRegisteringFormIds.length > 0 && formsAlreadyCharged.size >= playerRegisteringFormIds.length) {
                                break;
                            }
                        }

                        // Process membership fee groups (independent of regular fee groups hierarchy)
                        const membershipFormsAlreadyCharged = new Set();
                        for (const group of (playerResult.membership_fee_groups || [])) {
                            let groupEntities = group.entities || {};
                            if (typeof groupEntities === 'string') {
                                try { groupEntities = JSON.parse(groupEntities); } catch (e) { groupEntities = {}; }
                            }

                            let applicableFormIds = group.form_ids || [];
                            if (applicableFormIds.length === 0) {
                                if (groupEntities.form_id) applicableFormIds.push(groupEntities.form_id);
                                else if (playerResult.registration_counter && playerResult.registration_counter.length > 0) {
                                    applicableFormIds = playerResult.registration_counter.map(rc => rc.form_id);
                                }
                            }

                            for (const code of (group.fee_codes || [])) {
                                if (!code || !code.Fee_Code_id || code.Fee_Code_id == 0 || code.Fee_Code_id === '0' || !code.Fee_Code_name || String(code.Fee_Code_name).trim() === '') {
                                    continue;
                                }

                                let entities = code.entities || {};
                                if (typeof entities === 'string') {
                                    try { entities = JSON.parse(entities); } catch (e) { entities = {}; }
                                }

                                let isApplicable = true;
                                const memSkipReasons = [];

                                // 1. Check custom field or attached custom page
                                const customFieldId = getEntityValue(entities, 'newCustomfieldId') || getEntityValue(entities, 'custom_page_id') || getEntityValue(entities, 'custom_page') || getEntityValue(entities, 'id_custom_field') || 0;
                                const customFieldStatus = (customFieldId && customFieldId !== 0 && customFieldId !== '0') ? isCustomFieldAnswered(playerId, customFieldId) : true;
                                if (!customFieldStatus) {
                                    isApplicable = false;
                                    memSkipReasons.push(`Required Custom Page/Field (ID: ${customFieldId}) was not answered by Player ${playerId}`);
                                }

                                // 2. Check age
                                const startAge = parseValue(getEntityValue(entities, 'start_age')) ?? -99;
                                const endAge = parseValue(getEntityValue(entities, 'end_age')) ?? 999;
                                const ageNotSet = (startAge === -99 && endAge === 999);
                                const playerAge = getPlayerAge(playerId);
                                const ageStatus = ageNotSet || (playerAge !== null && playerAge >= startAge && playerAge <= endAge);
                                if (!ageStatus) {
                                    isApplicable = false;
                                    memSkipReasons.push(`Player age (${playerAge ?? 'N/A'}) is outside required age range [${startAge} to ${endAge}]`);
                                }

                                // 3. Check level
                                const relevantFormIds = applicableFormIds.filter(fid => playerRegisteringFormIds.includes(String(fid)));
                                const checkFormId = relevantFormIds.length > 0 ? relevantFormIds[0] : (playerRegisteringFormIds.length > 0 ? playerRegisteringFormIds[0] : null);
                                const levelMatch = await isFeeLevelApplicable(playerId, entities, checkFormId);
                                if (!levelMatch) {
                                    isApplicable = false;
                                    memSkipReasons.push(`Player level/division is not eligible for fee level range [Start Level: ${getEntityValue(entities, 'start_level') || 'None'}, End Level: ${getEntityValue(entities, 'end_level') || 'None'}]`);
                                }

                                console.log(`💳 [Membership Fee Code Check] Player: ${playerId}, Code: "${code.Fee_Code_name}" (ID: ${code.Fee_Code_id}), Group: "${group.Fee_Group_name}"`);
                                console.log(`   - Attached Custom Page/Field ("${customFieldId || 'None'}"): ${customFieldStatus ? 'PASSED ✅' : 'FAILED ❌'}`);
                                console.log(`   - Age Range [${startAge} to ${endAge}] (Player Age: ${playerAge ?? 'N/A'}): ${ageStatus ? 'PASSED ✅' : 'FAILED ❌'}`);
                                console.log(`   - Level/Division Range: ${levelMatch ? 'PASSED ✅' : 'FAILED ❌'}`);

                                if (!isApplicable) {
                                    console.log(`   🔴 OUTCOME: SKIPPED | Reason: ${memSkipReasons.join(' | ')}`);
                                    continue;
                                }

                                console.log(`   🟢 OUTCOME: QUALIFIED (Eligible to apply)`);

                                const effectiveFormIds = relevantFormIds.length > 0 ? relevantFormIds : (playerRegisteringFormIds.length > 0 ? [playerRegisteringFormIds[0]] : []);

                                effectiveFormIds.forEach(fId => {
                                    const fIdStr = String(fId);
                                    if (!membershipFormsAlreadyCharged.has(fIdStr)) {
                                        results.push({
                                            id: code.Fee_Code_id,
                                            name: code.Fee_Code_name,
                                            entities: entities,
                                            groupId: group.Fee_Group_id,
                                            groupName: group.Fee_Group_name,
                                            groupEntities: groupEntities,
                                            formId: fIdStr,
                                            isMembership: true
                                        });

                                        membershipFormsAlreadyCharged.add(fIdStr);
                                        console.log(`   ✅ APPLIED MEMBERSHIP FEE TO FORM ${fIdStr}: Code "${code.Fee_Code_name}" (ID: ${code.Fee_Code_id})`);
                                    } else {
                                        console.log(`   🔴 SKIPPED MEMBERSHIP FEE FOR FORM ${fIdStr}: Form already charged by a higher-priority membership fee code.`);
                                    }
                                });
                            }

                            if (playerRegisteringFormIds.length > 0 && membershipFormsAlreadyCharged.size >= playerRegisteringFormIds.length) {
                                break;
                            }
                        }

                        playerApplicableCodes[playerId] = results;
                    }

                    // Define IDs of players we are attempting to register in this session
                    const currentAttemptingPlayerIds = playerFeeResults.map(pr => String(pr.player_id));

                    // 1. Initialize registration counters (Map: form_id -> base_count)
                    const formBaseCounts = {};
                    const formDates = {};
                    playerFeeResults.forEach(pResult => {
                        if (pResult.registration_counter) {
                            pResult.registration_counter.forEach(rc => {
                                formBaseCounts[rc.form_id] = parseInt(rc.registration_counter) || 0;
                                formDates[rc.form_id] = {
                                    reg_start_date: rc.reg_start_date,
                                    reg_end_date: rc.reg_end_date,
                                    early_bird_1: rc.early_bird_1,
                                    late_fee_date: rc.late_fee_date
                                };
                            });
                        }
                    });

                    // 2. Track how many players have been processed for each form in THIS session
                    const formSessionCounts = {}; // Map: form_id -> increment



                    // Double-pass: Calculate fees and render
                    let summaryHtml = '<div class="space-y-6 mt-4">';
                    let grandTotal = 0;
                    let hasEarlyBirdApplied = false;
                    window.playerFeeAmounts = {}; // Per-player total (across all forms)
                    window.playerFormFeeAmounts = {}; // Per-player-per-form breakdown

                    // Sort players by player_id (ascending) to ensure consistent ordering
                    // Filter players to show ONLY actively saved/added players (updatedPlayerIds) in summary UI
                    // Also exclude any players the user has unchecked (excludedPlayerIds)
                    const sortedPlayers = [...playersList].filter(p => {
                        const pid = p.player_id;
                        const isExcluded = excludedPlayerIds.has(pid) || excludedPlayerIds.has(String(pid)) || excludedPlayerIds.has(parseInt(pid));
                        if (isExcluded) return false;
                        const isAdded = updatedPlayerIds.has(pid) || updatedPlayerIds.has(String(pid)) || updatedPlayerIds.has(parseInt(pid));
                        return isAdded;
                    }).sort((a, b) => parseInt(a.player_id) - parseInt(b.player_id));

                    const feeGroupStates = {}; // Map: groupId -> { total: 0, simulated: false }

                    sortedPlayers.forEach(player => {
                        const codes = playerApplicableCodes[player.player_id] || [];
                        // Don't return early if codes is empty - we want to show the player anyway as requested

                        // Identify which forms this player is registering for (based on eligible/selected forms)
                        // We use the fee codes to identify the form_ids involved for THIS player.
                        const playerFormIds = new Set();
                        codes.forEach(code => {
                            if (code.formId) playerFormIds.add(String(code.formId));
                        });

                        // FALLBACK: If API returned no codes, we use the UI selections as the source of truth for the summary
                        if (playerFormIds.size === 0) {
                            if (isRegistrationSet && player.selected_form_ids && player.selected_form_ids.length > 0) {
                                player.selected_form_ids.forEach(fid => playerFormIds.add(String(fid)));
                            } else if (currentForm && currentForm.form_id) {
                                playerFormIds.add(String(currentForm.form_id));
                            }
                        }

                        // Calculate positions for this player in each relevant form
                        const playerPositions = {}; // Map: form_id -> position (1-based)

                        playerFormIds.forEach(fid => {
                            const base = formBaseCounts[fid] || 0;
                            const sessionAdded = formSessionCounts[fid] || 0;

                            // Position is Base + SessionAdded + 1
                            // e.g. Base=2 (A,B registered). SessionAdded=0. This is 3rd player (C). Position=3.
                            playerPositions[fid] = base + sessionAdded + 1;

                            // Increment session count for this form for the NEXT player
                            formSessionCounts[fid] = sessionAdded + 1;
                        });

                        let playerSubtotal = 0;
                        let playerFeesHtml = '';

                        codes.forEach(code => {
                            const entities = code.entities;
                            const codeId = code.id;
                            const formId = code.formId;

                            // Get position used for calculation
                            const currentPosition = playerPositions[formId] || 1; // Default to 1 if something wrong

                            // Extract fee values
                            const baseFeeValue = getEntityValue(entities, 'fee');
                            const baseFee = parseFloat(baseFeeValue !== null && baseFeeValue !== undefined ? baseFeeValue : 0);

                            const qBreak1 = parseInt(getEntityValue(entities, 'quantity_break_1') || 0);
                            const qBreak2 = parseInt(getEntityValue(entities, 'quantity_break_2') || 0);
                            const qBreak3 = parseInt(getEntityValue(entities, 'quantity_break_3') || 0);

                            // Helper to get discounted fee. If value is 0, null, or missing, fall back to base fee
                            const getDiscountedFee = (name) => {
                                const val = getEntityValue(entities, name);
                                if (val === null || val === undefined || val === 'NULL' || val === '') return baseFee;
                                return parseFloat(val);
                            };

                            const fee1 = getDiscountedFee('fee_1');
                            const fee2 = getDiscountedFee('fee_2');
                            const fee3 = getDiscountedFee('fee_3');

                            // Retrieve form dates
                            const dates = formDates[formId] || {};
                            const regStart = dates.reg_start_date;
                            const regEnd = dates.reg_end_date;
                            const earlyBird1 = dates.early_bird_1;
                            const lateFeeDate = dates.late_fee_date;

                            const now = new Date();

                            // Check Early Bird Period
                            let isEarlyBird = false;
                            if (regStart && earlyBird1) {
                                const start = parseDateStr(regStart);
                                const eb = parseDateStr(earlyBird1);
                                if (start && eb) {
                                    const s = new Date(start);
                                    s.setHours(0, 0, 0, 0);
                                    const e = new Date(eb);
                                    e.setHours(23, 59, 59, 999);
                                    isEarlyBird = (now >= s && now <= e);
                                }
                            }

                            // Check Late Fee Period
                            let isLateFee = false;
                            if (lateFeeDate && regEnd) {
                                const late = parseDateStr(lateFeeDate);
                                const end = parseDateStr(regEnd);
                                if (late && end) {
                                    const l = new Date(late);
                                    l.setHours(0, 0, 0, 0);
                                    const e = new Date(end);
                                    e.setHours(23, 59, 59, 999);
                                    isLateFee = (now >= l && now <= e);
                                }
                            }

                            const getEarlyBirdFeeVal = (feeName) => {
                                const val = getEntityValue(entities, feeName);
                                if (val === null || val === undefined || val === 'NULL' || val === '') {
                                    return null;
                                }
                                return parseFloat(val);
                            };

                            const getLateFeeVal = (feeName) => {
                                const val = getEntityValue(entities, feeName);
                                if (val === null || val === undefined || val === 'NULL' || val === '') {
                                    return 0;
                                }
                                return parseFloat(val);
                            };

                            const getFeeForPosition = (position, isEB, isLF) => {
                                let c = baseFee;
                                if (isEB) {
                                    const singleEbFee = getEarlyBirdFeeVal('early_bird_fee');
                                    if (singleEbFee !== null && singleEbFee > 0) {
                                        c = singleEbFee;
                                    } else {
                                        const ebBreak1 = parseInt(getEntityValue(entities, 'early_bird_break_1') || 0);
                                        const ebBreak2 = parseInt(getEntityValue(entities, 'early_bird_break_2') || 0);
                                        const ebBreak3 = parseInt(getEntityValue(entities, 'early_bird_break_3') || 0);
                                        const ebBreak4 = parseInt(getEntityValue(entities, 'early_bird_break_4') || 0);

                                        const ebFee1 = getEarlyBirdFeeVal('early_bird_fee_1');
                                        const ebFee2 = getEarlyBirdFeeVal('early_bird_fee_2');
                                        const ebFee3 = getEarlyBirdFeeVal('early_bird_fee_3');
                                        const ebFee4 = getEarlyBirdFeeVal('early_bird_fee_4');

                                        let activeEbCost = null;
                                        if (ebFee1 !== null && (ebBreak1 === 0 || position >= ebBreak1)) activeEbCost = ebFee1;
                                        if (ebBreak2 > 0 && position >= ebBreak2 && ebFee2 !== null) activeEbCost = ebFee2;
                                        if (ebBreak3 > 0 && position >= ebBreak3 && ebFee3 !== null) activeEbCost = ebFee3;
                                        if (ebBreak4 > 0 && position >= ebBreak4 && ebFee4 !== null) activeEbCost = ebFee4;

                                        if (activeEbCost !== null) {
                                            c = activeEbCost;
                                        } else {
                                            c = calculateFeeForPosition(position, baseFee, fee1, fee2, fee3, qBreak1, qBreak2, qBreak3);
                                        }
                                    }
                                } else {
                                    c = calculateFeeForPosition(position, baseFee, fee1, fee2, fee3, qBreak1, qBreak2, qBreak3);
                                }

                                if (isLF) {
                                    const singleLfFee = getLateFeeVal('late_fee');
                                    if (singleLfFee > 0) {
                                        c += singleLfFee;
                                    } else {
                                        const lfBreak1 = parseInt(getEntityValue(entities, 'late_fee_break_1') || 0);
                                        const lfBreak2 = parseInt(getEntityValue(entities, 'late_fee_break_2') || 0);
                                        const lfBreak3 = parseInt(getEntityValue(entities, 'late_fee_break_3') || 0);
                                        const lfBreak4 = parseInt(getEntityValue(entities, 'late_fee_break_4') || 0);

                                        const lfFee1 = getLateFeeVal('late_fee_1');
                                        const lfFee2 = getLateFeeVal('late_fee_2');
                                        const lfFee3 = getLateFeeVal('late_fee_3');
                                        const lfFee4 = getLateFeeVal('late_fee_4');

                                        let activeLfCost = 0;
                                        if (lfFee1 > 0 && (lfBreak1 === 0 || position >= lfBreak1)) activeLfCost = lfFee1;
                                        if (lfBreak2 > 0 && position >= lfBreak2) activeLfCost = lfFee2;
                                        if (lfBreak3 > 0 && position >= lfBreak3) activeLfCost = lfFee3;
                                        if (lfBreak4 > 0 && position >= lfBreak4) activeLfCost = lfFee4;

                                        c += activeLfCost;
                                    }
                                }

                                return c;
                            };

                            let cost = getFeeForPosition(currentPosition, isEarlyBird, isLateFee);

                            console.log(`💰 [Fee Calculation Details] Player ID: ${player.player_id} (${player.first_name || ''} ${player.last_name || ''}), Form ID: ${formId}, Fee Code: "${code.name}" (ID: ${codeId})`);
                            console.log(`   - Base Fee: $${baseFee.toFixed(2)} | Quantity Position: ${currentPosition}`);
                            console.log(`   - Early Bird Period: ${isEarlyBird ? 'ACTIVE 🐦' : 'Inactive'} | Late Fee Period: ${isLateFee ? 'ACTIVE ⏰' : 'Inactive'}`);
                            console.log(`   - Calculated Fee Amount: $${cost.toFixed(2)}`);

                            if (cost === 0) {
                                let zeroReason = '';
                                if (baseFee === 0) {
                                    zeroReason = 'Base fee is configured as $0.00 in fee code settings.';
                                } else if (currentPosition > 1) {
                                    zeroReason = `Quantity position (${currentPosition}) exceeds max configured quantity break threshold (break1: ${qBreak1}, break2: ${qBreak2}, break3: ${qBreak3}) or position break fee is $0.00.`;
                                } else {
                                    zeroReason = 'Calculated fee returned $0.00.';
                                }
                                console.log(`   ⚠️ REASON FOR $0.00 FEE: ${zeroReason}`);
                            }

                            let discountLabel = '';

                            if (isEarlyBird) {
                                const singleEbFee = getEarlyBirdFeeVal('early_bird_fee');
                                const ebFee1 = getEarlyBirdFeeVal('early_bird_fee_1');
                                if (singleEbFee !== null || ebFee1 !== null) {
                                    hasEarlyBirdApplied = true;
                                    discountLabel = `<span class="text-[10px] bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Early Bird Applied</span>`;
                                }
                            } else {
                                if (cost < baseFee) {
                                    if (qBreak3 > 0 && currentPosition >= qBreak3) {
                                        discountLabel = `<span class="text-[10px] bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Max Family Discount</span>`;
                                    } else if (qBreak2 > 0 && currentPosition >= qBreak2) {
                                        discountLabel = `<span class="text-[10px] bg-green-100 text-green-700 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Family Discount</span>`;
                                    } else if (qBreak1 > 0 && currentPosition >= qBreak1) {
                                        discountLabel = `<span class="text-[10px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Multi-Player Discount</span>`;
                                    }
                                }
                            }

                            if (isLateFee) {
                                const singleLfFee = getLateFeeVal('late_fee');
                                const lfFee1 = getLateFeeVal('late_fee_1');
                                const activeLf = singleLfFee > 0 ? singleLfFee : (lfFee1 > 0 ? lfFee1 : 0);

                                if (activeLf > 0) {
                                    discountLabel += `<span class="text-[10px] bg-red-100 text-red-800 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Late Fee (+$${activeLf.toFixed(2)})</span>`;
                                }
                            }

                            // Calculate final cost
                            let finalCost = cost;
                            let appliedFamilyMax = false;

                            // Apply Family Max Logic
                            const groupEntities = code.groupEntities || {};
                            const familyMaxVal = getEntityValue(groupEntities, 'family_max');
                            const familyMax = familyMaxVal !== null ? parseFloat(familyMaxVal) : 0;
                            const groupId = code.groupId;

                            if (familyMax > 0 && groupId) {
                                if (!feeGroupStates[groupId]) {
                                    feeGroupStates[groupId] = { total: 0, simulated: false };
                                }

                                if (!feeGroupStates[groupId].simulated) {
                                    const baseCount = formBaseCounts[formId] || 0;
                                    let priorTotal = 0;
                                    for (let i = 1; i <= baseCount; i++) {
                                        priorTotal += getFeeForPosition(i, isEarlyBird, isLateFee);
                                    }
                                    feeGroupStates[groupId].total = Math.min(priorTotal, familyMax);
                                    feeGroupStates[groupId].simulated = true;
                                }

                                const currentAccumulated = feeGroupStates[groupId].total;
                                let allowed = Math.max(0, familyMax - currentAccumulated);

                                if (cost > allowed) {
                                    finalCost = allowed;
                                    appliedFamilyMax = true;
                                    discountLabel = currentAccumulated >= familyMax
                                        ? `<span class="text-[10px] bg-gray-100 text-gray-700 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Family Max Reached</span>`
                                        : `<span class="text-[10px] bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded ml-2 font-bold uppercase tracking-tighter">Family Max Applied</span>`;
                                }
                                feeGroupStates[groupId].total += finalCost;
                            }

                            // LOG FOR DEBUGGING
                            console.log(`[Summary Calculation] Player: ${player.first_name || 'N/A'}, Code: ${code.name} (ID: ${code.id})`);
                            console.log(`  - Config: Base: ${baseFee}, QB1: ${qBreak1}=${fee1}, QB2: ${qBreak2}=${fee2}, QB3: ${qBreak3}=${fee3}`);
                            console.log(`  - Form: ${formId}, Position in Form: ${currentPosition}`);
                            console.log(`  - Result: $${finalCost.toFixed(2)}${discountLabel ? ' (' + discountLabel.replace(/<[^>]*>?/gm, '') + ')' : ''}`);

                            // Only include fees that have an actual cost or specific discount applied (Family Max)
                            if (finalCost > 0 || appliedFamilyMax || discountLabel.length > 0) {
                                playerSubtotal += finalCost;

                                // Store per-player-per-form fee for submission
                                if (!window.playerFormFeeAmounts[player.player_id]) {
                                    window.playerFormFeeAmounts[player.player_id] = {};
                                }
                                window.playerFormFeeAmounts[player.player_id][formId] = (window.playerFormFeeAmounts[player.player_id][formId] || 0) + finalCost;

                                // Show original price if discounted
                                const priceDisplay = finalCost < baseFee
                                    ? `<span class="line-through text-gray-400 text-xs mr-1">$${baseFee.toFixed(2)}</span><span class="font-bold text-[var(--primary-theme-color)]">$${finalCost.toFixed(2)}</span>`
                                    : `<span class="font-bold text-[var(--primary-theme-color)]">$${finalCost.toFixed(2)}</span>`;

                                playerFeesHtml += `
                                    <div class="flex justify-between items-center py-2 border-b border-gray-50 last:border-0 text-sm">
                                        <div class="flex flex-col">
                                            <span class="text-gray-700 font-medium">${code.name} ${discountLabel}</span>
                                        </div>
                                        ${priceDisplay}
                                    </div>  
                                `;
                            } else {
                                console.log(`  - ⏩ Hiding 0$ ghost fee from summary UI`);
                            }
                        });

                        // Fallback message if no codes found
                        if (playerFeesHtml === '') {
                            playerFeesHtml = '';
                        }

                        grandTotal += playerSubtotal;
                        window.playerFeeAmounts[player.player_id] = playerSubtotal;

                        // Calculate form names for display
                        let pFormNames = '';
                        if (isRegistrationSet) {
                            const pFormIds = player.selected_form_ids || [];
                            const pEligible = playerEligibilityMap[player.player_id] || [];
                            pFormNames = pFormIds.map(fid => pEligible.find(f => f.form_id == fid)?.form_name).filter(Boolean).join(', ');

                            // FALLBACK: If a set, but no forms selected, show "No league selected" or the intended forms from available list
                            if (!pFormNames && pFormIds.length === 0) {
                                pFormNames = '<span class="text-red-400">No league selected yet</span>';
                            }
                        } else if (currentForm && currentForm.form_name) {
                            pFormNames = currentForm.form_name;
                        }

                        summaryHtml += `
                                <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100 shadow-sm transition-all hover:bg-white hover:shadow-md">
                                    <div class="flex justify-between items-center mb-4 pb-2 border-b-2 border-[var(--primary-theme-color)]/10">
                                        <div class="flex items-center gap-3">
                                            <div class="w-10 h-10 rounded-full bg-[var(--primary-theme-color)] text-white flex items-center justify-center text-sm font-black flex-shrink-0 shadow-sm">
                                                ${(player.first_name || 'P')[0]}${(player.last_name || '')[0] || ''}
                                            </div>
                                            <div class="flex flex-col">
                                                <h3 class="text-base font-bold text-[var(--primary-theme-color)] leading-tight flex items-center gap-2">
                                                    ${player.first_name} ${player.last_name}
                                                    ${Object.values(playerPositions).length > 0 ? `<span class="bg-indigo-50 text-indigo-700 text-[9px] uppercase font-black px-1.5 py-0.5 rounded shadow-sm border border-indigo-100">#${Math.max(...Object.values(playerPositions))} Player</span>` : ''}
                                                </h3>
                                                ${pFormNames ? `<span class="text-xs font-semibold text-gray-500 mt-0.5">${pFormNames}</span>` : ''}
                                            </div>
                                        </div>
                                        <div class="flex flex-col items-end">
                                            <span class="text-lg font-black text-[var(--primary-theme-color)]">$${playerSubtotal.toFixed(2)}</span>
                                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter">Subtotal</span>
                                        </div>
                                    </div>
                                    <div class="px-2 space-y-1">
                                        ${playerFeesHtml}
                                    </div>
                                </div>
                            `;
                    });

                    // Add Membership fee if selected
                    const membershipData = collectedRegistrationData['membership'];
                    if (membershipData && membershipData.fee) {
                        const membershipFee = parseFloat(membershipData.fee);
                        if (!isNaN(membershipFee) && membershipFee > 0) {
                            grandTotal += membershipFee;

                            // CRITICAL: We need to include the membership fee in the actual PAYMENT amount
                            // Since we submit payments per-player, we add the membership fee to the FIRST player's total.
                            const firstPlayer = sortedPlayers[0];
                            if (firstPlayer && window.playerFeeAmounts[firstPlayer.player_id] !== undefined) {
                                window.playerFeeAmounts[firstPlayer.player_id] += membershipFee;
                                console.log(`[Membership] Added $${membershipFee.toFixed(2)} to Player ${firstPlayer.player_id} (${firstPlayer.first_name}) for payment submission.`);
                            }

                            summaryHtml += `
                                    <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100 shadow-sm transition-all hover:bg-white hover:shadow-md mb-4 mt-4">
                                        <div class="flex justify-between items-center pb-2 border-b-2 border-[var(--primary-theme-color)]/10">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 rounded-full bg-[var(--primary-theme-color)]/10 text-[var(--primary-theme-color)] flex items-center justify-center text-lg shadow-sm">
                                                    <i class="fa-solid fa-id-card"></i>
                                                </div>
                                                <div class="flex flex-col">
                                                    <h3 class="text-base font-bold text-[var(--primary-theme-color)] leading-tight">
                                                        Membership Fee
                                                    </h3>
                                                    ${membershipData.description ? `<span class="text-xs font-medium text-gray-500 mt-1">${membershipData.description}</span>` : ''}
                                                </div>
                                            </div>
                                            <span class="text-xl font-black text-[var(--primary-theme-color)]">$${membershipFee.toFixed(2)}</span>
                                        </div>
                                    </div>
                                `;
                        }
                    }

                    window.hasEarlyBirdApplied = hasEarlyBirdApplied;

                    // If Early Bird is active, disallow any applied Late Fee discount codes
                    if (hasEarlyBirdApplied && window.appliedDiscountCode) {
                        const codeStr = (window.appliedDiscountCode.code || window.appliedDiscountCode.name || window.appliedDiscountCode.fee_grps || '').toLowerCase();
                        if (codeStr.includes('late')) {
                            window.appliedDiscountCode = null;
                            window.discountFeedbackType = 'error';
                            window.discountFeedbackMsg = 'Late Fee discount code cannot be applied when Early Bird discount is active.';
                        }
                    }

                    let discount = 0;
                    if (window.appliedDiscountCode) {
                        const matched = window.appliedDiscountCode;
                        const discountType = (matched.type || '').toLowerCase();
                        const discountVal = parseFloat(matched.amount) || 0;
                        if (discountType.includes('percent') || discountType === '%' || (discountType !== 'amount' && discountType !== 'flat' && discountType !== 'fixed' && discountVal < 1)) {
                            const pct = discountVal > 1 ? discountVal : discountVal * 100;
                            discount = grandTotal * (pct / 100);
                        } else {
                            discount = discountVal;
                        }
                    }

                    if (discount > grandTotal) {
                        discount = grandTotal;
                    }
                    const finalGrandTotal = grandTotal - discount;

                    if (discount > 0 && window.appliedDiscountCode) {
                        summaryHtml += `
                            <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-200 mt-4 flex justify-between items-center text-sm shadow-sm">
                                <span class="text-emerald-800 font-bold flex items-center gap-2">
                                    <i class="fa-solid fa-tags text-emerald-600"></i>
                                    Discount Applied (${(window.appliedDiscountCode.name || window.appliedDiscountCode.code).toUpperCase()})
                                </span>
                                <span class="text-emerald-800 font-extrabold text-base">-$${discount.toFixed(2)}</span>
                            </div>
                        `;
                    }

                    // Add discount input or applied status section
                    if (window.appliedDiscountCode) {
                        const matched = window.appliedDiscountCode;
                        const discountType = (matched.type || '').toLowerCase();
                        const discountVal = parseFloat(matched.amount) || 0;
                        let label = '';
                        if (discountType.includes('percent') || discountType === '%' || (discountType !== 'amount' && discountType !== 'flat' && discountType !== 'fixed' && discountVal < 1)) {
                            const pct = discountVal > 1 ? discountVal : discountVal * 100;
                            label = `${pct}% OFF`;
                        } else {
                            label = `$${discountVal.toFixed(2)} OFF`;
                        }

                        summaryHtml += `
                            <div class="bg-emerald-50 rounded-xl p-5 border-2 border-emerald-300 mt-6 shadow-sm">
                                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full bg-emerald-500 text-white flex items-center justify-center flex-shrink-0 shadow-sm">
                                            <i class="fa-solid fa-check text-lg"></i>
                                        </div>
                                        <div>
                                            <div class="flex items-center gap-2">
                                                <span class="font-black text-emerald-900 text-base tracking-wide">${(matched.code || matched.name).toUpperCase()}</span>
                                                <span class="bg-emerald-600 text-white text-xs font-black px-2.5 py-0.5 rounded-full uppercase tracking-wider">${label}</span>
                                            </div>
                                            <p class="text-xs font-semibold text-emerald-700 mt-0.5">Discount code applied successfully! -$${discount.toFixed(2)} savings</p>
                                        </div>
                                    </div>
                                    <button type="button" onclick="removeDiscountCode()" class="px-4 py-2 bg-white text-red-600 font-bold text-xs border border-red-200 rounded-lg hover:bg-red-50 hover:border-red-300 transition-colors flex items-center gap-1.5 self-start sm:self-center shadow-sm">
                                        <i class="fa-solid fa-trash-can text-sm"></i>
                                        Remove Code
                                    </button>
                                </div>
                            </div>
                        `;
                    } else {
                        let feedbackHtml = '';
                        if (window.discountFeedbackType === 'error' && window.discountFeedbackMsg) {
                            feedbackHtml = `
                                <div class="mt-2 text-xs font-bold text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2 flex items-center gap-2">
                                    <i class="fa-solid fa-circle-xmark text-red-500 text-sm"></i>
                                    <span>${window.discountFeedbackMsg}</span>
                                </div>
                            `;
                        } else if (window.discountFeedbackType === 'success' && window.discountFeedbackMsg) {
                            feedbackHtml = `
                                <div class="mt-2 text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2 flex items-center gap-2">
                                    <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                                    <span>${window.discountFeedbackMsg}</span>
                                </div>
                            `;
                        }

                        const activeDiscountCodes = typeof window.getActiveDiscountCodes === 'function'
                            ? window.getActiveDiscountCodes()
                            : (Array.isArray(availableDiscountCodes) ? availableDiscountCodes : []);

                        if (activeDiscountCodes.length > 0) {
                            summaryHtml += `
                                <div class="bg-gray-50 rounded-xl p-5 border border-gray-200 mt-6 shadow-sm">
                                    <div class="flex flex-col gap-2">
                                        <label class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                            <i class="fa-solid fa-ticket text-[#f48120]"></i>
                                            Discount Code
                                        </label>
                                        <div class="flex gap-2">
                                            <input type="text" id="discount-code-input" 
                                                   class="w-full px-4 py-2.5 border ${window.discountFeedbackType === 'error' ? 'border-red-400 focus:ring-red-400' : 'border-gray-300 focus:ring-[#11315b]'} rounded-lg focus:outline-none focus:ring-2 font-medium" 
                                                   placeholder="Enter discount code" 
                                                   value="${window.appliedDiscountCodeText || ''}"
                                                   onkeydown="if(event.key === 'Enter'){ event.preventDefault(); applyDiscountCode(); }">
                                            <button type="button" id="apply-discount-btn" onclick="applyDiscountCode()" class="px-6 py-2.5 bg-[#f48120] text-white font-bold rounded-lg hover:bg-[#d9731b] transition-colors flex-shrink-0 flex items-center gap-1.5 shadow-sm">
                                                Apply
                                            </button>
                                        </div>
                                        ${feedbackHtml}
                                    </div>
                                </div>
                            `;
                        }
                    }

                    // Add grand total
                    summaryHtml += `
                            <div class="bg-[var(--primary-theme-color)] rounded-xl p-6 shadow-xl relative overflow-hidden mt-6">
                                <!-- Decorative background gradient -->
                                <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none"></div>
                                <div class="relative z-10 flex justify-between items-center">
                                    <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                        <i class="fa-solid fa-receipt text-blue-300"></i>
                                        Total Amount Due
                                    </h3>
                                    <span class="text-3xl font-black text-white tracking-widest">$${finalGrandTotal.toFixed(2)}</span>
                                </div>
                            </div>
                        `;

                    summaryHtml += '</div>';

                    // Store grand total for use in payment mutation
                    window.lastCalculatedGrandTotal = finalGrandTotal;

                    container.innerHTML = summaryHtml;

                }

                // Render a dynamic custom page with multiple player inputs inside
                function renderDynamicCustomPageMultiPlayer(page, players, formName) {
                    if (!page || !page.fields || page.fields.length === 0) return '';
                    if (isPageEffectivelyEmpty(page)) return '';

                    const pageId = page.page_id;

                    // Build page title without player names
                    // - For custom pages with formName: "PageName (FormName)"
                    // - For global pages or without formName: "PageName"
                    const pageTitle = formName
                        ? `${page.name} (${formName})`
                        : `${page.name}`;

                    // Check if this page has saved data to show checkmark even after re-renders
                    const originalPageId = page.original_page_id || page.page_id;
                    const regData = (typeof collectedRegistrationData !== 'undefined') ? collectedRegistrationData : (window.collectedRegistrationData || null);
                    let isPageSaved = false;
                    if (regData && regData[originalPageId]) {
                        // If it has any data under this page ID (excluding id/fee/amount fields which might be preset), consider it saved
                        const keys = Object.keys(regData[originalPageId]);
                        const realDataKeys = keys.filter(k => !['id', 'fee', 'amount', 'feeCodeID', 'feeGroupID'].includes(k));
                        if (realDataKeys.length > 0) {
                            isPageSaved = true;
                        }
                    }

                    // Render fields with multiple player inputs
                    let fieldsHtml = '';
                    // Filter visible fields (exclude explicitly disabled/hidden fields)
                    const isCustomOrGlobal = page.is_global || page.type === 'global' || page.page_type === 'custom' || page.type === 'custom';
                    const visibleFieldsRaw = (page.fields || []).filter(f => {
                        if (f.display === false || f.display === 'false' || f.display === 'hidden') return false;
                        if (isCustomOrGlobal) return true;
                        return f.display !== false && String(f.display) !== 'false';
                    });
                    const visibleFields = deduplicatePageFields(visibleFieldsRaw, true);
                    
                    // If no visible fields, do not render the page at all
                    if (visibleFields.length === 0) {
                        return '';
                    }

                    // Group fields by group_name
                    const groupedFields = {};
                    visibleFields.forEach(field => {
                        const groupName = field.group_name || 'Additional Information';
                        if (!groupedFields[groupName]) {
                            groupedFields[groupName] = [];
                        }
                        groupedFields[groupName].push(field);
                    });

                    Object.keys(groupedFields).forEach(groupName => {
                        const fields = groupedFields[groupName];

                        // Group header styling matching default pages
                        const groupHeaderHtml = `
                                <div class="bg-gray-100 py-2 mb-4">
                                    <h3 class="text-sm font-bold text-[var(--primary-theme-color)] tracking-wide">${groupName}</h3>
                                    <div class="border-b-2 border-dashed border-[var(--primary-theme-color)] mt-2"></div>
                                </div>
                            `;

                        // Render fields in 2-column grid like default pages
                        fieldsHtml += `
                                <div class="mb-6">
                                    ${groupHeaderHtml}
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        ${fields.map(field => renderFieldMultiPlayer(field, players, page)).join('')}
                                    </div>
                                </div>
                            `;
                    });

                    const checkmarkClass = (!isPageSaved) ? 'hidden' : '';
                    const saveButtonHtml = `
                            <div class="mt-6 pt-4 border-t border-gray-200 flex justify-end">
                                <button type="button" onclick="saveDynamicSectionMultiPlayer('${pageId}', this)" 
                                        class="bg-[var(--primary-theme-color)] text-white px-6 py-2 rounded-lg font-bold shadow hover:bg-blue-900 transition flex items-center gap-2 transform hover:scale-105">
                                    <i class="fa-solid fa-save"></i> Save ${page.name}
                                </button>
                            </div>
                        `;

                    return `
                            <div class="bg-white rounded-lg border-2 border-[var(--primary-theme-color)] overflow-hidden shadow-md mb-4" id="section-wrapper-${pageId}">
                                <div class="bg-[var(--primary-theme-color)] text-white p-3 px-5 flex justify-between items-center cursor-pointer hover:bg-[#000060] transition-colors"
                                     onclick="toggleSection('dynamic-content-${pageId}', this)">
                                    <div class="flex items-center gap-3">
                                        <h2 class="font-bold tracking-wide text-sm">${pageTitle}</h2>
                                        <i id="header-checkmark-${pageId}" class="fa-solid fa-circle-check text-green-500 ${checkmarkClass}"></i>
                                        <i id="header-error-${pageId}" class="fa-solid fa-circle-exclamation text-red-500 hidden"></i>
                                    </div>
                                    <i class="fa-solid fa-chevron-up accordion-icon"></i>
                                </div>
                                <div id="dynamic-content-${pageId}" class="px-5 accordion-content">
                                    <div class="py-4" id="page-${pageId}">
                                        ${fieldsHtml}
                                        ${saveButtonHtml}
                                    </div>
                                </div>
                            </div>
                        `;
                }



                // Render a single field with multiple player input boxes
                function renderFieldMultiPlayer(field, players, page) {
                    const isCustomOrGlobalField = page && (page.is_global || page.type === 'global' || page.page_type === 'custom' || page.type === 'custom');
                    const isFieldHidden = field.display === false || field.display === 'false' || field.display === 'hidden' || (!isCustomOrGlobalField && String(field.display) === 'false');
                    if (isFieldHidden) {
                        return '';
                    }

                    const today = new Date().toISOString().split('T')[0];
                    let minDate = '';
                    let maxDate = today;

                    if (typeof window.getPlayerBirthDateRange === 'function') {
                        const range = window.getPlayerBirthDateRange();
                        minDate = range.min;
                        maxDate = range.max;
                    }
                    const isRequired = field.required == 1 || field.is_required == 1 || String(field.is_required).toLowerCase() === 'true';
                    const requiredStar = isRequired ? '<span class="required-star">*</span>' : '';
                    // Use page_field_description which contains HTML content (waivers, policies, etc.)
                    const description = field.page_field_description || field.description || '';
                    const helpText = window.getFieldHelpText ? window.getFieldHelpText(field) : '';
                    const infoIconHtml = helpText ? `
                        <i class="fa-solid fa-circle-info field-info-icon" 
                           onclick="event.preventDefault(); event.stopPropagation(); if(window.showRegistrationTooltip) window.showRegistrationTooltip(this, \`${helpText.replace(/`/g, '\\`').replace(/'/g, "\\'").replace(/"/g, '&quot;')}\`)"
                           title="Click for more info"></i>
                    ` : '';

                    let playerInputsHtml = '';

                    let iterations = players;

                    // Normalize idTable property check
                    const fieldIdTable = field.idTable || field.id_table || field.idtable;
                    const isParentField = (fieldIdTable == 1 || fieldIdTable == '1');

                    // console.log("🔍 [renderFieldMultiPlayer] Field:", field.label, "idTable:", fieldIdTable, "isParentField:", isParentField, "players count:", players.length);

                    let isP1Saved = false;
                    let isP2Saved = false;

                    // If it's a parent-level field, check which parent(s) are actually saved on the parent page
                    if (isParentField) {
                        isP1Saved = (typeof savedParentKeys !== 'undefined' && (savedParentKeys.has(1) || savedParentKeys.has('parent_1') || savedParentKeys.has('parent') || (typeof parentId1 !== 'undefined' && parentId1 && savedParentKeys.has(parentId1)))) ||
                            (window.activeDraftRows && window.activeDraftRows.some(r => r.data && r.data.some(d => d.parent_number === 1 && d.value !== '')));

                        isP2Saved = (typeof savedParentKeys !== 'undefined' && (savedParentKeys.has(2) || savedParentKeys.has('parent_2') || (typeof parentId2 !== 'undefined' && parentId2 && savedParentKeys.has(parentId2)))) ||
                            (window.activeDraftRows && window.activeDraftRows.some(r => r.data && r.data.some(d => d.parent_number === 2 && d.value !== '')));

                        if (isP1Saved && isP2Saved) {
                            let iterP2Name = parent2Name || '';
                            if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1) {
                                const fcP2 = `${familyCircleParents[1].first_name || ''} ${familyCircleParents[1].last_name || ''}`.trim();
                                if (fcP2) iterP2Name = fcP2;
                            }
                            iterations = [
                                { player_id: 'parent', first_name: parent1Name || 'Parent 1' },
                                { player_id: 'parent_2', first_name: iterP2Name || 'Parent 2' }
                            ];
                        } else if (isP2Saved && !isP1Saved) {
                            let iterP2Name = parent2Name || '';
                            if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1) {
                                const fcP2 = `${familyCircleParents[1].first_name || ''} ${familyCircleParents[1].last_name || ''}`.trim();
                                if (fcP2) iterP2Name = fcP2;
                            }
                            iterations = [
                                { player_id: 'parent_2', first_name: iterP2Name || 'Parent 2' }
                            ];
                        } else if (isP1Saved) {
                            iterations = [
                                { player_id: 'parent', first_name: parent1Name || 'Parent 1' }
                            ];
                        } else {
                            iterations = [{ player_id: 'parent', first_name: parent1Name || 'Parent' }];
                        }
                    } else if (iterations.length === 0) {
                        // Fallback: If no players exist yet, render at least one empty set for a new player
                        iterations = [{ player_id: 'new', first_name: 'Player' }];
                    }

                    // Build input rows for each iteration
                    iterations.forEach(playerInfo => {
                        const playerId = playerInfo.player_id;
                        let playerName = `${playerInfo.first_name || ''} ${playerInfo.last_name || ''}`.trim();

                        // Fetch saved value from collectedRegistrationData to persist values after re-renders
                        let savedValue = '';
                        const originalPageId = page.original_page_id || page.page_id;
                        
                        // Check if collectedRegistrationData is available (checking both window and local scope)
                        const regData = (typeof collectedRegistrationData !== 'undefined') ? collectedRegistrationData : (window.collectedRegistrationData || null);
                        
                        if (regData) {
                            const pageData = regData[originalPageId] || regData[page.page_id] || (page.name ? regData[page.name] : null);
                            if (pageData) {
                                if (fieldIdTable == 1 || fieldIdTable == '1' || playerId === 'parent' || playerId === 'parent_2') {
                                    const fid = field.field_id || field.fieldid;
                                    if (playerId === 'parent_2') {
                                        const valObj = (pageData['parent_2'] ? (pageData['parent_2'][fid] || pageData['parent_2'][String(fid)] || pageData['parent_2'][parseInt(fid)]) : null)
                                            || (pageData['parent2'] ? (pageData['parent2'][fid] || pageData['parent2'][String(fid)] || pageData['parent2'][parseInt(fid)]) : null);
                                        if (valObj !== undefined && valObj !== null) {
                                            savedValue = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : (valObj.value !== undefined ? valObj.value : valObj);
                                        }
                                    } else {
                                        const hasP2 = Boolean(pageData['parent_2'] || pageData['parent2'] || isP2Saved);
                                        const valObj = (pageData['parent'] ? (pageData['parent'][fid] || pageData['parent'][String(fid)] || pageData['parent'][parseInt(fid)]) : null)
                                            || (pageData['parent_1'] ? (pageData['parent_1'][fid] || pageData['parent_1'][String(fid)]) : null)
                                            || (hasP2 ? null : (pageData[fid] || pageData[String(fid)] || pageData[parseInt(fid)]
                                                || (field.page_field_name ? pageData[field.page_field_name] : null)
                                                || (field.form_field_name ? pageData[field.form_field_name] : null)));
                                        if (valObj !== undefined && valObj !== null) {
                                            savedValue = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : (valObj.value !== undefined ? valObj.value : valObj);
                                        }
                                    }
                                } else {
                                    // Strictly per-player lookup - do not leak or fall back to other players or shared keys
                                    let pData = pageData[playerId] || pageData[String(playerId)] || pageData[parseInt(playerId)];
                                    if (pData) {
                                        const fid = field.field_id || field.fieldid;
                                        const valObj = pData[fid] || pData[String(fid)] || pData[parseInt(fid)]
                                            || (field.page_field_name ? pData[field.page_field_name] : null)
                                            || (field.form_field_name ? pData[field.form_field_name] : null);
                                        if (valObj !== undefined && valObj !== null) {
                                            savedValue = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : (valObj.value !== undefined ? valObj.value : valObj);
                                        }
                                    }
                                }
                            }
                        }

                        // Fallback for parent fields from fieldValues / parent2FieldValues / activeDraftRows
                        if ((savedValue === '' || savedValue === undefined || savedValue === null) && (fieldIdTable == 1 || fieldIdTable == '1' || playerId === 'parent' || playerId === 'parent_2')) {
                            const fid = parseInt(field.field_id || field.fieldid);
                            const normLabel = (field.label || '').toLowerCase().trim();

                            if (playerId === 'parent_2') {
                                if (typeof parent2FieldValues !== 'undefined') {
                                    if (parent2FieldValues[`id_${fid}`] !== undefined && parent2FieldValues[`id_${fid}`] !== '') {
                                        savedValue = parent2FieldValues[`id_${fid}`];
                                    } else if (normLabel && parent2FieldValues[normLabel] !== undefined && parent2FieldValues[normLabel] !== '') {
                                        savedValue = parent2FieldValues[normLabel];
                                    }
                                }
                                if ((savedValue === '' || savedValue === undefined || savedValue === null) && window.activeDraftRows && Array.isArray(window.activeDraftRows)) {
                                    for (const r of window.activeDraftRows) {
                                        if (r.data && Array.isArray(r.data)) {
                                            const dField = r.data.find(d => d.field_id == fid && d.parent_number === 2);
                                            if (dField && dField.value !== undefined && dField.value !== null && dField.value !== '') {
                                                savedValue = dField.value;
                                                break;
                                            }
                                        }
                                    }
                                }
                            } else {
                                if (typeof fieldValues !== 'undefined') {
                                    if (fieldValues[`id_${fid}`] !== undefined && fieldValues[`id_${fid}`] !== '') {
                                        savedValue = fieldValues[`id_${fid}`];
                                    } else if (normLabel && fieldValues[normLabel] !== undefined && fieldValues[normLabel] !== '') {
                                        savedValue = fieldValues[normLabel];
                                    }
                                }
                                if ((savedValue === '' || savedValue === undefined || savedValue === null) && window.activeDraftRows && Array.isArray(window.activeDraftRows)) {
                                    for (const r of window.activeDraftRows) {
                                        if (r.data && Array.isArray(r.data)) {
                                            const dField = r.data.find(d => d.field_id == fid && (d.parent_number === 1 || d.parent_number === 0));
                                            if (dField && dField.value !== undefined && dField.value !== null && dField.value !== '') {
                                                savedValue = sanitizeFieldValue(dField.value, field.label, field.field_type);
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        if (savedValue !== '') {
                            savedValue = sanitizeFieldValue(savedValue, field.label, field.field_type);
                            if (savedValue !== '') {
                                console.log(`📍 Found saved value for ${field.label} (${playerId}):`, savedValue);
                            }
                        }

                        // Force generic name if not saved yet
                        if (playerId === 'parent') {
                            let pName = parent1Name || '';
                            if (!pName && typeof fieldValues !== 'undefined') {
                                const parentFName = fieldValues['first name'] || fieldValues['firstname'] || '';
                                const parentLName = fieldValues['last name'] || fieldValues['lastname'] || '';
                                pName = (parentFName + ' ' + parentLName).trim();
                            }
                            playerName = pName || ((typeof hasTwoParents !== 'undefined' && hasTwoParents) ? 'Parent 1' : 'Parent');
                        } else if (playerId === 'parent_2') {
                            let p2Name = parent2Name || '';
                            if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1) {
                                const fcP2 = `${familyCircleParents[1].first_name || ''} ${familyCircleParents[1].last_name || ''}`.trim();
                                if (fcP2) p2Name = fcP2;
                            }
                            if (!p2Name && typeof parent2FieldValues !== 'undefined') {
                                const parent2FName = parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '';
                                const parent2LName = parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '';
                                const constructedP2 = (parent2FName + ' ' + parent2LName).trim();
                                if (constructedP2 && (!parent1Name || constructedP2.toLowerCase() !== parent1Name.toLowerCase())) {
                                    p2Name = constructedP2;
                                }
                            }
                            if (parent1Name && p2Name && p2Name.toLowerCase() === parent1Name.toLowerCase()) {
                                if (parent2Name && parent2Name.toLowerCase() !== parent1Name.toLowerCase()) {
                                    p2Name = parent2Name;
                                }
                            }
                            playerName = p2Name || 'Parent 2';
                        } else {
                            const pObj = playersList.find(p => p.player_id == playerId || String(p.player_id) === String(playerId));
                            if (pObj) {
                                const resolvedName = `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim();
                                if (resolvedName) playerName = resolvedName;
                            }
                        }

                        const fieldId = `dynamic-field-${page.page_id}-${field.field_id}-${playerId}`;
                        const fieldName = `${page.page_id}_${field.page_field_name}_${playerId}`;
                        const inputLabel = playerName;
                        const labelDataAttrs = `data-id-table="${fieldIdTable || ''}" data-original-label="${field.label}" data-player-id="${playerId}" data-field-help="${(helpText || '').replace(/"/g, '&quot;')}"`;

                        let dynamicValidationAttrs = '';
                        let hasCustomPhoneValidation = false;
                        if (field.validation) {
                            if (field.validation.type === 'pattern' && field.validation.regex) {
                                dynamicValidationAttrs = `pattern="${field.validation.regex.replace(/"/g, '&quot;')}" title="${(field.validation.error_message || '').replace(/"/g, '&quot;')}"`;
                                hasCustomPhoneValidation = true;
                            } else if (field.validation.type === 'length' && field.validation.rule_json) {
                                try {
                                    const rules = typeof field.validation.rule_json === 'string' ? JSON.parse(field.validation.rule_json) : field.validation.rule_json;
                                    if (rules.min) dynamicValidationAttrs += ` minlength="${rules.min}"`;
                                    if (rules.max) dynamicValidationAttrs += ` maxlength="${rules.max}"`;
                                    if (rules.equal) dynamicValidationAttrs += ` minlength="${rules.equal}" maxlength="${rules.equal}"`;
                                    if (field.validation.error_message) dynamicValidationAttrs += ` title="${field.validation.error_message.replace(/"/g, '&quot;')}"`;
                                    hasCustomPhoneValidation = true;
                                } catch(e) { console.error("Invalid rule_json", e); }
                            }
                        }

                        // Support for new validation_rules structure (from validation_rules or comment)
                        const isValRulesJsonMulti = (str) => {
                            if (!str || typeof str !== 'string') return false;
                            const trimmed = str.trim();
                            if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) return false;
                            try {
                                const parsed = JSON.parse(trimmed);
                                return typeof parsed === 'object' && parsed !== null && (
                                    parsed.input_mode !== undefined ||
                                    parsed.min_length !== undefined ||
                                    parsed.max_length !== undefined ||
                                    parsed.rules !== undefined
                                );
                            } catch(e) { return false; }
                        };
                        const resolvedRulesMulti = field.validation_rules || (isValRulesJsonMulti(field.comment) ? field.comment : null);
                        if (resolvedRulesMulti) {
                            try {
                                const rules = typeof resolvedRulesMulti === 'string' ? JSON.parse(resolvedRulesMulti) : resolvedRulesMulti;
                                if (rules && (rules.input_mode || rules.min_length || rules.max_length)) {
                                    let pattern = '.*';
                                    let errorMessage = "Invalid input";
                                    let replaceRegex = '';

                                    if (rules.input_mode === 'numeric') {
                                        pattern = '[0-9]*';
                                        errorMessage = "Please enter only numbers";
                                        replaceRegex = '/[^0-9]/g';
                                    } else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') {
                                        pattern = '[a-zA-Z]*';
                                        errorMessage = "Please enter only alphabets";
                                        replaceRegex = '/[^a-zA-Z]/g';
                                    } else if (rules.input_mode === 'alphanumeric') {
                                        pattern = '(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+';
                                        errorMessage = "Please enter both letters and numbers";
                                        replaceRegex = '/[^a-zA-Z0-9]/g';
                                    }

                                    if (rules.min_length && rules.max_length) {
                                        if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},${rules.max_length}}`; }
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},${rules.max_length}}`; }
                                        else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},${rules.max_length}}`; }
                                        else { pattern = `.{${rules.min_length},${rules.max_length}}`; }
                                        
                                        if (rules.input_mode === 'numeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} numbers`;
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} alphabets`;
                                        else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} letters and numbers (must include both)`;
                                        else errorMessage = `Please enter between ${rules.min_length} and ${rules.max_length} characters`;
                                    } else if (rules.min_length) {
                                        if (rules.input_mode === 'numeric') { pattern = `[0-9]{${rules.min_length},}`; }
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{${rules.min_length},}`; }
                                        else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{${rules.min_length},}`; }
                                        else { pattern = `.{${rules.min_length},}`; }
                                        
                                        if (rules.input_mode === 'numeric') errorMessage = `Please enter at least ${rules.min_length} numbers`;
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at least ${rules.min_length} alphabets`;
                                        else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at least ${rules.min_length} letters and numbers (must include both)`;
                                        else errorMessage = `Please enter at least ${rules.min_length} characters`;
                                    } else if (rules.max_length) {
                                        if (rules.input_mode === 'numeric') { pattern = `[0-9]{0,${rules.max_length}}`; }
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') { pattern = `[a-zA-Z]{0,${rules.max_length}}`; }
                                        else if (rules.input_mode === 'alphanumeric') { pattern = `(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{0,${rules.max_length}}`; }
                                        else { pattern = `.{0,${rules.max_length}}`; }
                                        
                                        if (rules.input_mode === 'numeric') errorMessage = `Please enter at most ${rules.max_length} numbers`;
                                        else if (rules.input_mode === 'alphabetic' || rules.input_mode === 'alphabet') errorMessage = `Please enter at most ${rules.max_length} alphabets`;
                                        else if (rules.input_mode === 'alphanumeric') errorMessage = `Please enter at most ${rules.max_length} letters and numbers (must include both)`;
                                        else errorMessage = `Please enter at most ${rules.max_length} characters`;
                                    }

                                    if (replaceRegex) {
                                        dynamicValidationAttrs += ` pattern="${pattern}" oninput="this.value = this.value.replace(${replaceRegex}, '')" title="${errorMessage}"`;
                                        hasCustomPhoneValidation = true;
                                    } else if (pattern !== '.*') {
                                        dynamicValidationAttrs += ` pattern="${pattern}" title="${errorMessage}"`;
                                    }
                                    
                                    if (rules.input_mode === 'numeric') {
                                        dynamicValidationAttrs += ` inputmode="numeric"`;
                                    }

                                    if (rules.min_length) dynamicValidationAttrs += ` minlength="${rules.min_length}"`;
                                    if (rules.max_length) dynamicValidationAttrs += ` maxlength="${rules.max_length}"`;
                                }
                            } catch(e) { console.error("Invalid validation_rules", e); }
                        }

                        const cleanLabel = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').trim();
                        const labelLowerClean = cleanLabel.toLowerCase().trim();
                        const isCity = labelLowerClean === 'city';
                        const isState = labelLowerClean === 'state';
                        const isZip = labelLowerClean === 'zip' || labelLowerClean === 'zip code' || labelLowerClean === 'postal code' || labelLowerClean === 'zipcode' || labelLowerClean === 'zip/postal code';
                        const isAddressLine1 = labelLowerClean === 'address' || labelLowerClean === 'address 1' || labelLowerClean.includes('address line 1') || labelLowerClean === 'street address';
                        const isPlayerCam = labelLowerClean === 'cam no' || labelLowerClean === 'cam no.' || labelLowerClean === 'cam number';
                        const isCamNumber = labelLowerClean === 'season cam number' || isPlayerCam;
                        const validationClass = isCity ? 'city-input' : (isState ? 'state-input' : (isZip ? 'zip-input' : (isAddressLine1 ? 'address-input' : (isPlayerCam ? 'player-cam-input' : (isCamNumber ? 'cam-number-input' : '')))));

                        let isNumericOnly = (field.label || '').toLowerCase().includes('number') || isCamNumber;
                        if (dynamicValidationAttrs && dynamicValidationAttrs.includes('oninput')) {
                            isNumericOnly = false;
                        }
                        const camOnInput = isCamNumber ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\').substring(0,7)"' : '';
                        const numericOnInput = isCamNumber ? camOnInput : (isNumericOnly ? 'oninput="this.value = this.value.replace(/[^0-9]/g, \'\')"' : '');
                        const numericInputMode = isNumericOnly ? 'inputmode="numeric"' : '';

                        let maxLengthAttr = isState ? 'minlength="2" maxlength="2" pattern="[a-zA-Z]{2}" title="State must be exactly 2 characters"' : (isZip ? 'minlength="5" maxlength="9" pattern="[0-9]{5,9}" title="Zip code must be between 5 and 9 digits"' : (isCity ? 'minlength="3" uppercase' : (isAddressLine1 ? 'minlength="5"' : (isPlayerCam ? 'maxlength="7" pattern="[0-9]{1,7}" title="CAM number must be up to 7 digits"' : (isCamNumber ? 'minlength="7" maxlength="7" pattern="[0-9]{7}" title="CAM number must be exactly 7 digits"' : '')))));
                        if (dynamicValidationAttrs) maxLengthAttr = dynamicValidationAttrs;
                        const stateStyle = isState ? 'style="text-transform: uppercase;"' : '';

                        let inputHtml = '';

                        // Handle different field types
                        switch (field.field_type) {
                                case 'text':
                                case 'phone':
                                case 'number':
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full">
                                                        <input type="${isCamNumber ? 'text' : (hasCustomPhoneValidation ? (field.field_type === 'phone' ? 'tel' : 'text') : (field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'))}" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}" 
                                                               ${numericOnInput}
                                                               ${numericInputMode}
                                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow ${(!hasCustomPhoneValidation && (field.field_type === 'phone' || (field.label || '').toLowerCase().includes('phone'))) ? 'phone-input' : ''} ${validationClass}"
                                                               placeholder="Enter ${field.label}"
                                                               data-player-id="${playerId}"
                                                               data-field-id="${field.field_id}"
                                                               value="${savedValue || ''}"
                                                               ${maxLengthAttr}
                                                               ${stateStyle}
                                                               ${isRequired ? 'required' : ''}>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                case 'image':
                                    {
                                        const hasSavedImage = savedValue && (savedValue.startsWith('http') || savedValue.includes('/') || savedValue.includes('.'));
                                        const displayValueUrl = hasSavedImage ? window.formatProfilePictureUrl(savedValue) : '';
                                        const isReqAttr = isRequired && !hasSavedImage ? 'required' : '';
                                        const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                        let displayName = 'Picture Image';
                                        if (inputLabel) {
                                            if (inputLabel.toLowerCase().includes('player') && (inputLabel.toLowerCase().includes('pic') || inputLabel.toLowerCase().includes('image'))) {
                                                displayName = 'Player Picture Image';
                                            } else if (inputLabel.toLowerCase().endsWith('image') || inputLabel.toLowerCase().endsWith('picture') || inputLabel.toLowerCase().endsWith('photo')) {
                                                displayName = inputLabel;
                                            } else {
                                                displayName = `${inputLabel} Image`;
                                            }
                                        }
                                        const uploadLabel = (iterations && iterations.length > 1) ? `${inputLabel} - ${field.label || cleanFieldLabel(field.label)}` : (field.label || cleanFieldLabel(field.label) || inputLabel);
                                        inputHtml = `
                                                <div class="mb-4 w-full">
                                                    <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" ${labelDataAttrs}>${uploadLabel} ${requiredStar} ${infoIconHtml}</label>
                                                    <div class="photo-upload-group relative w-full">
                                                        <input type="file" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}" 
                                                               accept="image/*" 
                                                               class="hidden profile-picture-input"
                                                               data-uploaded-url="${displayValueUrl}"
                                                               data-player-id="${playerId}"
                                                               ${wasReqAttr}
                                                               onchange="handleProfilePictureUpload(this, '${playerId}')"
                                                               ${isReqAttr}>
                                                        
                                                        <!-- Select Picture Box (dashed orange border) -->
                                                        <div id="upload-box-${fieldId}" class="upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-[#f48120] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-orange-50 transition-colors ${hasSavedImage ? 'hidden' : ''}" onclick="document.getElementById('${fieldId}').click()">
                                                            <div class="flex items-center justify-center gap-2 text-[#f48120]">
                                                                <i class="fa-solid fa-camera text-2xl"></i>
                                                                <span class="font-bold text-lg">Select Picture</span>
                                                            </div>
                                                        </div>

                                                        <!-- Preview Box -->
                                                        <div id="preview-box-${fieldId}" class="preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedImage ? '' : 'hidden'}">
                                                            <div class="flex items-center gap-4">
                                                                <img id="preview-img-${fieldId}" 
                                                                     src="${displayValueUrl || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}" 
                                                                     onload="if(this.src.startsWith('data:image/gif')){ const input = document.getElementById('${fieldId}'); const url = input ? input.getAttribute('data-uploaded-url') : ''; if(url) window.loadProfilePicture(this, url); }"
                                                                     class="w-16 h-16 rounded-full object-cover border border-gray-300 cursor-pointer hover:opacity-80 transition-opacity" 
                                                                     alt="${inputLabel}" 
                                                                     onclick="showImagePreviewPopup(this.src)">
                                                                <div class="flex flex-col">
                                                                    <span class="font-bold text-gray-800 text-lg">${displayName}</span>
                                                                    <span class="text-green-600 font-semibold flex items-center gap-1 text-sm">
                                                                        <i class="fa-solid fa-circle-check"></i> Uploaded
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl" onclick="deleteProfilePicture(this, '${fieldId}')">
                                                                <i class="fa-solid fa-circle-xmark"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            `;
                                    }
                                    break;
                                case 'file':
                                case 'file_upload':
                                case 'file upload':
                                case 'document':
                                    {
                                        const hasSavedFile = savedValue && (savedValue.startsWith('http') || savedValue.includes('/') || savedValue.includes('.') || String(savedValue).trim().length > 0);
                                        const displayFileUrl = hasSavedFile ? (savedValue.startsWith('http') ? savedValue : `{{ config('api.url') }}/storage/form_builder/${savedValue}`) : '';
                                        const displayFileName = hasSavedFile ? (savedValue.split('/').pop().replace(/^\d+_[a-f0-9]+_/, '') || 'Uploaded Document') : '';
                                        const isReqAttr = isRequired && !hasSavedFile ? 'required' : '';
                                        const wasReqAttr = isRequired ? 'data-was-required="true"' : '';
                                        const fileIconHtml = window.getFileIconHtml ? window.getFileIconHtml(displayFileName || savedValue) : '<i class="fa-solid fa-file text-blue-500 text-2xl"></i>';

                                        const uploadLabel = (iterations && iterations.length > 1) ? `${inputLabel} - ${field.label || cleanFieldLabel(field.label)}` : (field.label || cleanFieldLabel(field.label) || inputLabel);
                                        inputHtml = `
                                                <div class="mb-4 w-full">
                                                    <label for="${fieldId}" class="block text-sm font-bold text-gray-800 mb-2 dynamic-label" ${labelDataAttrs}>${uploadLabel} ${requiredStar} ${infoIconHtml}</label>
                                                    <div class="generic-file-group relative w-full">
                                                        <input type="file" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}" 
                                                               accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar"
                                                               class="hidden generic-file-input"
                                                               data-uploaded-url="${savedValue || ''}"
                                                               data-player-id="${playerId}"
                                                               ${wasReqAttr}
                                                               onchange="handleGenericFileUpload(this, '${playerId}', '${field.field_id}')"
                                                               ${isReqAttr}>
                                                        
                                                        <!-- Upload Box (dashed border) -->
                                                        <div id="upload-box-${fieldId}" class="upload-box generic-upload-box w-full flex flex-col items-center justify-center border-2 border-dashed border-gray-300 hover:border-[#11315b] rounded-xl p-6 cursor-pointer bg-[#fafafa] hover:bg-blue-50/40 transition-colors ${hasSavedFile ? 'hidden' : ''}" 
                                                             onclick="document.getElementById('${fieldId}').click()"
                                                             ondragover="event.preventDefault(); this.classList.add('border-[#11315b]', 'bg-blue-50/60');" 
                                                             ondragleave="this.classList.remove('border-[#11315b]', 'bg-blue-50/60');" 
                                                             ondrop="event.preventDefault(); this.classList.remove('border-[#11315b]', 'bg-blue-50/60'); if(event.dataTransfer && event.dataTransfer.files.length){ const inp = document.getElementById('${fieldId}'); inp.files = event.dataTransfer.files; handleGenericFileUpload(inp, '${playerId}', '${field.field_id}'); }">
                                                            <div class="flex flex-col items-center justify-center gap-2 text-gray-500">
                                                                <i class="fa-solid fa-cloud-arrow-up text-2xl text-[var(--primary-theme-color,#11315b)]"></i>
                                                                <span class="font-bold text-base text-gray-700">Choose file or drag here</span>
                                                                <span class="text-xs text-gray-400">PDF, DOC, DOCX, Images, Excel, up to 50MB</span>
                                                            </div>
                                                        </div>

                                                        <!-- Preview Box -->
                                                        <div id="preview-box-${fieldId}" class="preview-box generic-preview-box w-full border border-gray-200 rounded-xl p-4 bg-[#f8fafc] flex items-center justify-between ${hasSavedFile ? '' : 'hidden'}">
                                                            <div class="flex items-center gap-3 min-w-0">
                                                                <div id="file-icon-${fieldId}" class="flex-shrink-0">
                                                                    ${fileIconHtml}
                                                                </div>
                                                                <div class="flex flex-col min-w-0">
                                                                    <span id="file-name-${fieldId}" class="font-bold text-gray-800 text-sm truncate" title="${displayFileName}">${displayFileName}</span>
                                                                    <div class="flex items-center gap-3 mt-1">
                                                                        <span class="text-green-600 font-semibold flex items-center gap-1 text-xs">
                                                                            <i class="fa-solid fa-circle-check"></i> Uploaded
                                                                        </span>
                                                                        <a id="file-link-${fieldId}" href="${displayFileUrl}" target="_blank" class="text-blue-600 hover:underline text-xs flex items-center gap-1 font-medium ${displayFileUrl ? '' : 'hidden'}">
                                                                            <i class="fa-solid fa-arrow-up-right-from-square"></i> View
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="text-red-500 hover:text-red-700 transition-colors p-2 text-2xl flex-shrink-0" onclick="deleteGenericFile(this, '${fieldId}')" title="Remove file">
                                                                <i class="fa-solid fa-circle-xmark"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            `;
                                    }
                                    break;
                                case 'email':
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full">
                                                        <input type="email" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}" 
                                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow email-input"
                                                               placeholder="Enter ${field.label}"
                                                               data-player-id="${playerId}"
                                                               data-field-id="${field.field_id}"
                                                               value="${savedValue || ''}"
                                                               ${dynamicValidationAttrs}
                                                               ${isRequired ? 'required' : ''}>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                case 'date':
                                    const isDOBField = (field.label || '').toLowerCase().includes('birth') || (field.label || '').toLowerCase().includes('dob') || (field.page_field_name || '').toLowerCase().includes('birth') || (field.page_field_name || '').toLowerCase().includes('dob');
                                    const dateRangeAttrs = isDOBField ? `${minDate ? `min="${minDate}"` : ''} ${maxDate ? `max="${maxDate}"` : ''}` : '';
                                    const isValidPreloadedDOB = isDOBField && savedValue && isValidDateString(savedValue) && !String(savedValue).startsWith('0000') && savedValue !== '00/00/0000' && savedValue !== '00-00-0000';
                                    const isDisabledDOB = isValidPreloadedDOB;
                                    const disabledAttr = isDisabledDOB ? 'disabled readonly style="background-color: #f3f4f6; cursor: not-allowed; color: #374151;"' : '';
                                    const dateInputType = isDisabledDOB ? 'text' : 'date';
                                    const dateInputValue = isDisabledDOB ? formatToMMDDYYYY(savedValue) : formatDateToYYYYMMDD(savedValue || '');
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full">
                                                        <input type="${dateInputType}" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}"
                                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow date-input"
                                                               ${!isDisabledDOB ? 'onclick="try { this.showPicker(); } catch(e) {}"' : ''}
                                                               data-player-id="${playerId}"
                                                               data-field-id="${field.field_id}"
                                                               value="${dateInputValue}"
                                                               ${dateRangeAttrs}
                                                               ${dynamicValidationAttrs}
                                                               ${isRequired ? 'required' : ''}
                                                               ${disabledAttr}>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                case 'textarea':
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 sm:mt-2 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full">
                                                        <textarea id="${fieldId}" 
                                                                  name="${fieldName}" 
                                                                  rows="3" 
                                                                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow"
                                                                  placeholder="Enter ${field.label}"
                                                                  data-player-id="${playerId}"
                                                                  data-field-id="${field.field_id}"
                                                                  ${dynamicValidationAttrs}
                                                                  ${isRequired ? 'required' : ''}>${savedValue || ''}</textarea>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                case 'select':
                                case 'dropdown':
                                    const hasSelectedOption = field.options && Array.isArray(field.options) && field.options.some(opt => {
                                        const optVal = opt.option_value || opt.value || opt.label;
                                        return String(optVal).trim() === String(savedValue).trim();
                                    });
                                    let optionsHtml = `<option value="" disabled ${hasSelectedOption ? '' : 'selected'}></option>`;
                                    if (field.options && Array.isArray(field.options)) {
                                        field.options.forEach(opt => {
                                            const optVal = opt.option_value || opt.value || opt.label;
                                            const isSelected = String(optVal).trim() === String(savedValue).trim();
                                            optionsHtml += `<option value="${optVal}" ${isSelected ? 'selected' : ''}>${opt.option_value || opt.label}</option>`;
                                        });
                                    }
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 relative w-full">
                                                        <select id="${fieldId}" name="${fieldName}" data-player-id="${playerId}" data-field-id="${field.field_id}" onchange="if(typeof refreshDivisions === 'function') refreshDivisions(this)"
                                                                class="w-full px-4 py-2 border border-gray-300 rounded-lg appearance-none bg-white focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow"
                                                                ${isRequired ? 'required' : ''}>
                                                            ${optionsHtml}
                                                        </select>
                                                        <i class="fa-solid fa-chevron-down absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                case 'checkbox':
                                    inputHtml = `
                                                <div class="flex items-center gap-3 py-3 border-b border-gray-100 last:border-b-0">
                                                    <input type="checkbox" 
                                                           id="${fieldId}" 
                                                           name="${fieldName}"
                                                           data-player-id="${playerId}"
                                                           data-field-id="${field.field_id}"
                                                           class="w-5 h-5 text-[var(--primary-theme-color)] border-2 border-[var(--primary-theme-color)] rounded focus:ring-[var(--primary-theme-color)] cursor-pointer flex-shrink-0"
                                                           style="accent-color: var(--primary-theme-color, #dc2626);"
                                                           ${(savedValue === true || savedValue === 'true' || savedValue === 'on' || savedValue === '1' || savedValue === 1) ? 'checked' : ''}
                                                           ${isRequired ? 'required' : ''}>
                                                    <label for="${fieldId}" class="text-base font-bold text-gray-800 dynamic-label cursor-pointer flex-grow" ${labelDataAttrs}>
                                                        ${inputLabel} ${requiredStar}
                                                    </label>
                                                    ${infoIconHtml}
                                                </div>
                                            `;
                                    break;
                                case 'radio':
                                    let radioOptionsHtml = '';
                                    let radioMultiOpts = [];
                                    if (field.options) {
                                        if (Array.isArray(field.options)) {
                                            radioMultiOpts = field.options;
                                        } else if (typeof field.options === 'string') {
                                            radioMultiOpts = field.options.split(',').map(s => {
                                                const trimmed = s.trim();
                                                return { option_value: trimmed, label: trimmed };
                                            });
                                        }
                                    }
                                    if (radioMultiOpts.length > 0) {
                                        radioMultiOpts.forEach((opt, idx) => {
                                            const optVal = opt.option_value || opt.value || opt;
                                            const optLabel = opt.option_value || opt.label || opt;
                                            const isChecked = (savedValue !== '' && savedValue !== null && savedValue !== undefined) &&
                                                (String(savedValue).trim().toLowerCase() === String(optVal).trim().toLowerCase()) ? 'checked' : '';
                                            const optionId = `${fieldId}-${idx}`;
                                            radioOptionsHtml += `
                                                <label class="flex items-center gap-2 text-sm text-gray-800 cursor-pointer py-1">
                                                    <input type="radio" 
                                                           id="${optionId}" 
                                                           name="${fieldName}" 
                                                           value="${optVal}" 
                                                           data-player-id="${playerId}"
                                                           data-field-id="${field.field_id}"
                                                           class="w-5 h-5 text-[var(--primary-theme-color,#dc2626)] border-gray-300 focus:ring-[var(--primary-theme-color,#dc2626)] cursor-pointer"
                                                           style="accent-color: var(--primary-theme-color, #dc2626);"
                                                           ${isChecked}
                                                           ${isRequired ? 'required' : ''}>
                                                    <span>${optLabel}</span>
                                                </label>
                                            `;
                                        });
                                    }
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-start gap-4 mb-4">
                                                    <label class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label sm:mt-1" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full flex flex-col sm:flex-row sm:flex-wrap gap-4">
                                                        ${radioOptionsHtml}
                                                    </div>
                                                </div>
                                            `;
                                    break;
                                default:
                                    inputHtml = `
                                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
                                                    <label for="${fieldId}" class="sm:w-1/3 text-sm font-bold text-gray-800 dynamic-label" ${labelDataAttrs}>${inputLabel} ${requiredStar}</label>
                                                    <div class="sm:w-2/3 w-full">
                                                        <input type="text" 
                                                               id="${fieldId}" 
                                                               name="${fieldName}" 
                                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#11315b] transition-shadow"
                                                               placeholder="Enter ${field.label}"
                                                               data-player-id="${playerId}"
                                                               data-field-id="${field.field_id}"
                                                               value="${savedValue || ''}"
                                                               ${dynamicValidationAttrs}
                                                               ${isRequired ? 'required' : ''}>
                                                    </div>
                                                </div>
                                            `;
                                    break;
                        }

                        playerInputsHtml += inputHtml;
                    });

                    // Render description as HTML content (it may contain HTML tags like h1, p, a, etc.)
                    let fieldLabelText = field.label;
                    let displayDescription = description;

                    // If it is a checkbox field and has a short text description, promote the description to the label
                    // to avoid rendering a redundant generic label like "Player" and an ugly gray box.
                    if (field.field_type === 'checkbox' && description && description.length < 150 && !description.includes('<')) {
                        fieldLabelText = description;
                        displayDescription = '';
                    }

                    if (displayDescription) {
                        if (displayDescription.trim() === helpText.trim() && !displayDescription.includes('<')) {
                            displayDescription = '';
                        } else {
                            const cleanDesc = displayDescription.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').trim();
                            if (cleanDesc === '') {
                                const lowerDesc = displayDescription.toLowerCase();
                                if (!lowerDesc.includes('<img') && !lowerDesc.includes('<iframe') && !lowerDesc.includes('<video')) {
                                    displayDescription = '';
                                }
                            }
                        }
                    }

                    const descriptionHtml = displayDescription ? `
                            <div class="mb-4 prose max-w-none overflow-auto max-h-64 border border-gray-200 rounded-lg p-4 bg-gray-50">
                                ${displayDescription}
                            </div>
                        ` : '';

                    let hideGroupLabel = (field.field_type === 'checkbox' || field.field_type === 'image' || field.field_type === 'file' || field.field_type === 'file_upload' || field.field_type === 'document');

                    let wrapperClass = 'col-span-1';
                    if (field.field_type === 'textarea' || field.field_type === 'checkbox' || field.field_type === 'radio' || field.field_type === 'image' || field.field_type === 'file' || field.field_type === 'file_upload' || field.field_type === 'file upload' || field.field_type === 'document' || descriptionHtml) {
                        wrapperClass = 'col-span-1 md:col-span-2';
                    }

                    return `
                            <div class="${wrapperClass} mb-4">
                                ${descriptionHtml}
                                <div class="checkbox-group w-full">
                                    ${!hideGroupLabel ? `<div class="${field.field_type === 'checkbox' ? 'text-gray-500 text-sm font-medium mb-3' : 'text-sm font-bold text-[var(--primary-theme-color)] mb-3'}">${fieldLabelText} ${infoIconHtml}${field.field_type === 'checkbox' ? '' : ':'}</div>` : ''}
                                    <div class="space-y-2">
                                        ${playerInputsHtml}
                                    </div>
                                </div>
                            </div>
                        `;
                }




                // Save dynamic section data for multiple players
                function saveDynamicSectionMultiPlayer(pageId, saveBtn) {
                    const pageContainer = document.getElementById(`page-${pageId}`);
                    if (!pageContainer) return;

                    const page = allPagesMap[pageId];
                    if (!page) return;

                    // Validation: check required fields and custom patterns/lengths
                    const allInputsForVal = pageContainer.querySelectorAll('input, select, textarea');
                    let allValid = true;
                    let firstInvalid = null;

                    allInputsForVal.forEach(input => {
                        if (input.type === "hidden") return;
                        if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                            const uploadGroup = input.closest('.photo-upload-group, .generic-file-group');
                            if (uploadGroup && uploadGroup.offsetParent === null) return;
                        } else {
                            if (input.offsetParent === null) return;
                        }
                        
                        // Use native checkValidity to support pattern, minlength, maxlength, and required
                        if (!input.checkValidity()) {
                            allValid = false;
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.add('border-red-500');
                                    uploadBox.classList.remove('border-[#f48120]', 'border-gray-300');
                                }
                            } else {
                                input.classList.add('border-red-500');
                            }
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.remove('border-red-500');
                                    uploadBox.classList.add(input.classList.contains('profile-picture-input') ? 'border-[#f48120]' : 'border-gray-300');
                                }
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        }
                    });

                    // At-least-one validation for custom pages with page.required == 1 but no field-level requirements
                    const pageNameLowerMulti = page ? (page.name || '').toLowerCase().trim() : '';
                    const hasParentFieldsMulti = page && page.fields && page.fields.some(f => (f.idTable || f.id_table || f.idtable) == 1);
                    const isParentPageMulti = ['parent', 'parents', 'parent info', 'parent information'].includes(pageNameLowerMulti) || (hasParentFieldsMulti && !['player', 'children'].includes(pageNameLowerMulti));
                    const isSystemicPageMulti = isParentPageMulti || ['player', 'children', 'players', 'summary', 'payment', 'payments', 'welcome'].includes(pageNameLowerMulti);

                    if (allValid && page && page.required == 1 && !isSystemicPageMulti) {
                        const allFieldsAreOptional = (page.fields || []).every(f =>
                            String(f.is_required) !== '1' && String(f.required) !== '1' && String(f.is_required).toLowerCase() !== 'true'
                        );

                        if (allFieldsAreOptional) {
                            const allInputs = pageContainer.querySelectorAll('input:not([type="button"]):not([type="hidden"]), select, textarea');
                            let atLeastOneFilled = false;

                            allInputs.forEach(input => {
                                if (input.type === 'checkbox' || input.type === 'radio') {
                                    if (input.checked) atLeastOneFilled = true;
                                } else if (input.value && input.value.trim() !== '') {
                                    atLeastOneFilled = true;
                                }
                            });

                            if (!atLeastOneFilled) {
                                allValid = false;
                                showAlert('Please select at least one field in this section.', 'error');

                                const headerError = document.getElementById(`header-error-${pageId}`);
                                if (headerError) headerError.classList.remove('hidden');

                                const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                                if (headerCheck) headerCheck.classList.add('hidden');

                                return;
                            }
                        }
                    }

                    if (!allValid) {
                        const headerError = document.getElementById(`header-error-${pageId}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        if (firstInvalid) {
                            firstInvalid.focus();
                            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            // Trigger native browser tooltip if possible
                            if (typeof firstInvalid.reportValidity === 'function') {
                                firstInvalid.reportValidity();
                            }

                            // Try to get a human-readable label for the error message
                            const labelEl = firstInvalid.labels?.[0] ||
                                document.querySelector(`label[for="${firstInvalid.id}"]`) ||
                                { innerText: firstInvalid.placeholder || firstInvalid.name || firstInvalid.id };
                            const labelText = labelEl.innerText.replace('*', '').trim();
                            
                            let errorMsg = `Please check the field: "${labelText}"`;
                            if (firstInvalid.validity.valueMissing) {
                                errorMsg = `Please fill in the required field: "${labelText}"`;
                            } else if (firstInvalid.title) {
                                // If we have a custom error message from validation_master, use it
                                errorMsg = firstInvalid.title;
                            } else if (firstInvalid.validity.patternMismatch) {
                                errorMsg = `Invalid format for "${labelText}"`;
                            } else if (firstInvalid.validity.tooShort) {
                                errorMsg = `"${labelText}" is too short`;
                            } else if (firstInvalid.validity.tooLong) {
                                errorMsg = `"${labelText}" is too long`;
                            }

                            showAlert(errorMsg, 'error');
                        } else {
                            showAlert('Please fill in all required fields.', 'error');
                        }
                        return;
                    }

                    // Phone validation
                    const phoneInputs = pageContainer.querySelectorAll('.phone-input');
                    let phoneValid = true;
                    phoneInputs.forEach(input => {
                        const digits = input.value.replace(/\D/g, '');
                        if (digits.length > 0 && digits.length < 10) {
                            phoneValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!phoneValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Please enter a valid 10-digit phone number.', 'error');
                        return;
                    }

                    // Zip validation
                    const zipInputs = pageContainer.querySelectorAll('.zip-input');
                    let zipValid = true;
                    zipInputs.forEach(input => {
                        const val = input.value.replace(/\D/g, '');
                        if (val.length > 0 && val.length < 5) {
                            zipValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (val.length >= 5) {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!zipValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Zip code must be at least 5 digits.', 'error');
                        return;
                    }

                    // CAM Number validation
                    const camInputs = pageContainer.querySelectorAll('.cam-number-input');
                    let camValid = true;
                    camInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length !== 7 || rawVal !== val)) {
                            camValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!camValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Season CAM Number must be exactly 7 digits.', 'error');
                        return;
                    }

                    // Player CAM Number validation
                    const playerCamInputs = pageContainer.querySelectorAll('.player-cam-input');
                    let playerCamValid = true;
                    playerCamInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length > 7 || rawVal !== val)) {
                            playerCamValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!playerCamValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('CAM number must be up to 7 digits.', 'error');
                        return;
                    }

                    // Email validation (@ check, valid domain, letters only in TLD, and confirmation match)
                    const emailInputsList = pageContainer.querySelectorAll('input[type="email"], .email-input, input[name*="email" i], input[data-field-name*="email" i]');
                    let emailValid = true;
                    let emailValues = {}; // label -> {value, input}
                    let emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only.';

                    emailInputsList.forEach(input => {
                        // Skip hidden, checkbox, radio, button, submit, disabled, or non-visible elements
                        if (input.type === 'hidden' || input.type === 'checkbox' || input.type === 'radio' || input.type === 'button' || input.type === 'submit') return;
                        if (input.disabled || input.classList.contains('hidden') || input.offsetParent === null) return;

                        const val = input.value.trim();
                        const isReq = input.hasAttribute('required') || input.required;

                        // 1. Proper email format check
                        if (!val) {
                            if (isReq) {
                                emailValid = false;
                                emailErrorMsg = 'Please fill in the required email field.';
                                input.classList.add('border-red-500');
                                if (!firstInvalid) firstInvalid = input;
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        } else if (val.toLowerCase() === 'test-data@example.com') {
                            emailValid = false;
                            emailErrorMsg = 'This email address is not permitted.';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (!isValidEmail(val)) {
                            emailValid = false;
                            emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only (e.g. .com, not .c0m).';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }

                        // 2. Collect for confirmation check
                        if (page && page.fields) {
                            const fieldId = input.getAttribute('data-field-id');
                            const field = page.fields.find(f => f.field_id == fieldId || f.page_field_name === input.name);
                            if (field) {
                                emailValues[field.label.toLowerCase()] = { value: val, input: input };
                            }
                        }
                    });

                    if (!emailValid) {
                        if (firstInvalid) {
                            firstInvalid.focus();
                            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                        showAlert(emailErrorMsg, 'error');
                        return;
                    }

                    // 3. Confirmation match check
                    for (let label in emailValues) {
                        if (label.includes('confirm') || label.includes('verify')) {
                            const baseLabel = label.replace('confirm', '').replace('verify', '').replace(/\s+/g, ' ').trim();
                            let original = emailValues[baseLabel];
                            if (!original) {
                                for (let l in emailValues) {
                                    if (l !== label && l.includes('email') && !l.includes('confirm') && !l.includes('verify')) {
                                        original = emailValues[l];
                                        break;
                                    }
                                }
                            }
                            if (original) {
                                const val1 = (original.value || '').trim();
                                const val2 = (emailValues[label].value || '').trim();
                                if (val1 !== '' || val2 !== '') {
                                    if (val1 !== val2) {
                                        emailValues[label].input.classList.add('border-red-500');
                                        original.input.classList.add('border-red-500');
                                        emailValues[label].input.focus();
                                        showAlert('Email and Confirm Email must match.', 'error');
                                        return;
                                    }
                                }
                            }
                        }
                    }



                    // Collect field values for each player
                    const originalPageId = page.original_page_id || page.page_id;
                    const pageName = page.name || page.page_name || '';
                    const formId = page.form_id;

                    if (!collectedRegistrationData[originalPageId]) {
                        collectedRegistrationData[originalPageId] = {};
                    }
                    if (page.page_id && !collectedRegistrationData[page.page_id]) {
                        collectedRegistrationData[page.page_id] = {};
                    }
                    if (pageName && !collectedRegistrationData[pageName]) {
                        collectedRegistrationData[pageName] = {};
                    }

                    const inputs = pageContainer.querySelectorAll('input, select, textarea');
                    inputs.forEach(input => {
                        if (input.name && input.type !== 'button') {
                            const playerId = input.getAttribute('data-player-id');
                            const fieldId = input.getAttribute('data-field-id');

                            if (playerId && fieldId) {
                                const field = page.fields?.find(f => f.field_id == fieldId);
                                if (field) {
                                    if (input.type === 'radio' && !input.checked) return;
                                    let value = input.type === 'checkbox' ? input.checked : (input.type === 'file' ? (input.getAttribute('data-uploaded-url') || (input.files && input.files[0] ? input.files[0].name : '')) : input.value);

                                    const fieldDataObj = {
                                        customfieldId: field.custom_field_id || 0,
                                        field_id: field.field_id || fieldId || 0,
                                        label: field.label || '',
                                        values: value
                                    };

                                    if (playerId === 'parent' || playerId === 'parent_1') {
                                        // Save as parent 1 field
                                        collectedRegistrationData[originalPageId][fieldId] = fieldDataObj;
                                        if (!collectedRegistrationData[originalPageId]['parent']) collectedRegistrationData[originalPageId]['parent'] = {};
                                        collectedRegistrationData[originalPageId]['parent'][fieldId] = fieldDataObj;

                                        if (page.page_id) {
                                            collectedRegistrationData[page.page_id][fieldId] = fieldDataObj;
                                            if (!collectedRegistrationData[page.page_id]['parent']) collectedRegistrationData[page.page_id]['parent'] = {};
                                            collectedRegistrationData[page.page_id]['parent'][fieldId] = fieldDataObj;
                                        }
                                        if (pageName) {
                                            collectedRegistrationData[pageName][fieldId] = fieldDataObj;
                                            if (!collectedRegistrationData[pageName]['parent']) collectedRegistrationData[pageName]['parent'] = {};
                                            collectedRegistrationData[pageName]['parent'][fieldId] = fieldDataObj;
                                        }
                                    } else if (playerId === 'parent_2' || playerId === 'parent2') {
                                        // Save as parent 2 field
                                        if (!collectedRegistrationData[originalPageId]['parent_2']) collectedRegistrationData[originalPageId]['parent_2'] = {};
                                        collectedRegistrationData[originalPageId]['parent_2'][fieldId] = fieldDataObj;

                                        if (page.page_id) {
                                            if (!collectedRegistrationData[page.page_id]['parent_2']) collectedRegistrationData[page.page_id]['parent_2'] = {};
                                            collectedRegistrationData[page.page_id]['parent_2'][fieldId] = fieldDataObj;
                                        }
                                        if (pageName) {
                                            if (!collectedRegistrationData[pageName]['parent_2']) collectedRegistrationData[pageName]['parent_2'] = {};
                                            collectedRegistrationData[pageName]['parent_2'][fieldId] = fieldDataObj;
                                        }
                                    } else {
                                        if (!collectedRegistrationData[originalPageId][playerId]) {
                                            collectedRegistrationData[originalPageId][playerId] = {};
                                        }
                                        collectedRegistrationData[originalPageId][playerId][fieldId] = fieldDataObj;

                                        if (page.page_id) {
                                            if (!collectedRegistrationData[page.page_id][playerId]) collectedRegistrationData[page.page_id][playerId] = {};
                                            collectedRegistrationData[page.page_id][playerId][fieldId] = fieldDataObj;
                                        }
                                        if (pageName) {
                                            if (!collectedRegistrationData[pageName][playerId]) collectedRegistrationData[pageName][playerId] = {};
                                            collectedRegistrationData[pageName][playerId][fieldId] = fieldDataObj;
                                        }
                                    }

                                    // ALSO update global fieldValues/playersList if this is a name field
                                    const labelLower = (field.label || '').toLowerCase().trim();
                                    if (labelLower.includes('first name') || labelLower.includes('last name')) {
                                        if (playerId === 'parent') {
                                            fieldValues[labelLower] = value;
                                        } else {
                                            // Update player name in playersList
                                            const pIndex = playersList.findIndex(p => p.player_id == playerId);
                                            if (pIndex !== -1) {
                                                if (labelLower.includes('first name')) playersList[pIndex].first_name = value;
                                                if (labelLower.includes('last name')) playersList[pIndex].last_name = value;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    });

                    // Update fee summary dynamically when custom field values change
                    if (typeof window.updateFeeSummary === 'function') {
                        window.updateFeeSummary();
                    }

                    // Refresh labels in the DOM after updating internal state
                    refreshAllLabels();

                    // Show success
                    const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                    if (headerCheck) headerCheck.classList.remove('hidden');

                    const headerError = document.getElementById(`header-error-${pageId}`);
                    if (headerError) headerError.classList.add('hidden');

                    // Update button
                    const originalText = saveBtn.innerHTML;
                    saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';

                    // Mark this specific dynamic page as saved to enable submission
                    const sectionWrapper = document.getElementById(`section-wrapper-${pageId}`);
                    if (sectionWrapper) {
                        sectionWrapper.setAttribute('data-saved', 'true');
                    }

                    setTimeout(() => {
                        saveBtn.innerHTML = originalText;
                    }, 2000);

                    // Scroll back to the top of the accordion
                    const accordionContainer = pageContainer.closest('.bg-white.rounded-lg.border-2');
                    if (accordionContainer) {
                        accordionContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }

                    // Refresh custom pages to update labels (especially if idTable=1 fields were modified)
                    if (typeof updateDynamicCustomPages === 'function') {
                        updateDynamicCustomPages();
                        refreshAllLabels();
                    }

                    // Close the accordion for better multi-step flow
                    closeAccordion(pageId);
                }

                // Save new player data and update list
                function saveNewPlayer(pageId, saveBtn) {
                    const page = playerPages[pageId];
                    if (!page) return;

                    const pageContainer = document.getElementById(`page-${page.page_id}`);
                    if (!pageContainer) return;

                    const inputs = pageContainer.querySelectorAll('input, select, textarea');

                    // Validation: check required fields and custom patterns/lengths
                    const allInputsForVal = pageContainer.querySelectorAll('input, select, textarea');
                    let allValid = true;
                    let firstInvalid = null;

                    allInputsForVal.forEach(input => {
                        if (input.type === "hidden") return;
                        if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                            const uploadGroup = input.closest('.photo-upload-group, .generic-file-group');
                            if (uploadGroup && uploadGroup.offsetParent === null) return;
                        } else {
                            if (input.offsetParent === null) return;
                        }
                        
                        // Use native checkValidity to support pattern, minlength, maxlength, and required
                        if (!input.checkValidity()) {
                            allValid = false;
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.add('border-red-500');
                                    uploadBox.classList.remove('border-[#f48120]', 'border-gray-300');
                                }
                            } else {
                                input.classList.add('border-red-500');
                            }
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.remove('border-red-500');
                                    uploadBox.classList.add(input.classList.contains('profile-picture-input') ? 'border-[#f48120]' : 'border-gray-300');
                                }
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        }
                    });

                    if (!allValid) {
                        // Show error icon
                        const headerError = document.getElementById(`header-error-${page.page_id}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${page.page_id}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        if (firstInvalid) {
                            firstInvalid.focus();
                            // Trigger native browser tooltip if possible
                            if (typeof firstInvalid.reportValidity === 'function') {
                                firstInvalid.reportValidity();
                            }
                            
                            // Try to get a human-readable label for the error message
                            const labelEl = firstInvalid.labels?.[0] ||
                                document.querySelector(`label[for="${firstInvalid.id}"]`) ||
                                { innerText: firstInvalid.placeholder || firstInvalid.name || firstInvalid.id };
                            const labelText = labelEl.innerText.replace('*', '').trim();
                            
                            let errorMsg = `Please check the field: "${labelText}"`;
                            if (firstInvalid.validity.valueMissing) {
                                errorMsg = `Please fill in the required field: "${labelText}"`;
                            } else if (firstInvalid.title) {
                                // If we have a custom error message from validation_master, use it
                                errorMsg = firstInvalid.title;
                            } else if (firstInvalid.validity.patternMismatch) {
                                errorMsg = `Invalid format for "${labelText}"`;
                            } else if (firstInvalid.validity.tooShort) {
                                errorMsg = `"${labelText}" is too short`;
                            } else if (firstInvalid.validity.tooLong) {
                                errorMsg = `"${labelText}" is too long`;
                            }
                            
                            showAlert(errorMsg, 'error');
                        } else {
                            showAlert('Please fill in all required fields to save a player.', 'error');
                        }
                        return;
                    }

                    // Phone validation
                    const phoneInputs = pageContainer.querySelectorAll('.phone-input');
                    let phoneValid = true;
                    phoneInputs.forEach(input => {
                        const digits = input.value.replace(/\D/g, '');
                        if (digits.length > 0 && digits.length < 10) {
                            phoneValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!phoneValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Please enter a valid 10-digit phone number.', 'error');
                        return;
                    }

                    // Zip validation
                    const zipInputs = pageContainer.querySelectorAll('.zip-input');
                    let zipValid = true;
                    zipInputs.forEach(input => {
                        const val = input.value.replace(/\D/g, '');
                        if (val.length > 0 && val.length < 5) {
                            zipValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (val.length >= 5) {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!zipValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Zip code must be at least 5 digits.', 'error');
                        return;
                    }

                    // Address Line 1 and City character length validation
                    const addrInputs = pageContainer.querySelectorAll('.address-input');
                    let addressValid = true;
                    addrInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length < 5) {
                            addressValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!addressValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Address Line 1 must be at least 5 characters.', 'error');
                        return;
                    }

                    const cityInputs = pageContainer.querySelectorAll('.city-input');
                    let cityValid = true;
                    cityInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length < 3) {
                            cityValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!cityValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('City must be at least 3 characters.', 'error');
                        return;
                    }

                    const stateInputs = pageContainer.querySelectorAll('.state-input');
                    let stateValid = true;
                    stateInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length !== 2) {
                            stateValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!stateValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('State must be exactly 2 characters.', 'error');
                        return;
                    }

                    // CAM Number validation
                    const camInputs = pageContainer.querySelectorAll('.cam-number-input');
                    let camValid = true;
                    camInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length !== 7 || rawVal !== val)) {
                            camValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!camValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Season CAM Number must be exactly 7 digits.', 'error');
                        return;
                    }

                    // Player CAM Number validation
                    const playerCamInputs = pageContainer.querySelectorAll('.player-cam-input');
                    let playerCamValid = true;
                    playerCamInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length > 7 || rawVal !== val)) {
                            playerCamValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!playerCamValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('CAM number must be up to 7 digits.', 'error');
                        return;
                    }

                    // Email validation (@ check, valid domain, letters only in TLD, and confirmation match)
                    const emailInputsList = pageContainer.querySelectorAll('input[type="email"], .email-input, input[name*="email" i], input[data-field-name*="email" i]');
                    let emailValid = true;
                    let emailValues = {}; // label -> {value, input}
                    let emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only.';

                    emailInputsList.forEach(input => {
                        // Skip hidden, checkbox, radio, button, submit, disabled, or non-visible elements
                        if (input.type === 'hidden' || input.type === 'checkbox' || input.type === 'radio' || input.type === 'button' || input.type === 'submit') return;
                        if (input.disabled || input.classList.contains('hidden') || input.offsetParent === null) return;

                        const val = input.value.trim();
                        const isReq = input.hasAttribute('required') || input.required;

                        // 1. Proper email format check
                        if (!val) {
                            if (isReq) {
                                emailValid = false;
                                emailErrorMsg = 'Please fill in the required email field.';
                                input.classList.add('border-red-500');
                                if (!firstInvalid) firstInvalid = input;
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        } else if (val.toLowerCase() === 'test-data@example.com') {
                            emailValid = false;
                            emailErrorMsg = 'This email address is not permitted.';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (!isValidEmail(val)) {
                            emailValid = false;
                            emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only (e.g. .com, not .c0m).';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }

                        // 2. Collect for confirmation check
                        if (page && page.fields) {
                            const field = page.fields.find(f => f.page_field_name === input.name);
                            if (field) {
                                emailValues[field.label.toLowerCase()] = { value: val, input: input };
                            }
                        }
                    });

                    if (!emailValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert(emailErrorMsg, 'error');
                        return;
                    }

                    // 3. Confirmation match check
                    for (let label in emailValues) {
                        if (label.includes('confirm') || label.includes('verify')) {
                            const baseLabel = label.replace('confirm', '').replace('verify', '').replace(/\s+/g, ' ').trim();
                            let original = emailValues[baseLabel];
                            if (!original) {
                                for (let l in emailValues) {
                                    if (l !== label && l.includes('email') && !l.includes('confirm') && !l.includes('verify')) {
                                        original = emailValues[l];
                                        break;
                                    }
                                }
                            }
                            if (original) {
                                const val1 = (original.value || '').trim();
                                const val2 = (emailValues[label].value || '').trim();
                                if (val1 !== '' || val2 !== '') {
                                    if (val1 !== val2) {
                                        emailValues[label].input.classList.add('border-red-500');
                                        original.input.classList.add('border-red-500');
                                        emailValues[label].input.focus();
                                        showAlert('Email and Confirm Email must match.', 'error');
                                        return;
                                    }
                                }
                            }
                        }
                    }



                    const allInputs = pageContainer.querySelectorAll('input, select, textarea');
                    let fieldsArray = [];
                    let firstName = '';
                    let lastName = '';
                    let playerDivisionId = 0;
                    const playerResultData = {};

                    allInputs.forEach(input => {
                        if (input.name && input.type !== 'button') {
                            const field = page.fields.find(f => f.page_field_name === input.name);
                            if (!field) return;

                            let value;
                            if (input.type === 'checkbox') {
                                value = input.checked ? "1" : "0";
                            } else if (input.type === 'file') {
                                value = input.getAttribute('data-uploaded-url') || (input.files[0] ? input.files[0].name : '');
                            } else if (input.type === 'radio') {
                                const checkedRadio = pageContainer.querySelector(`input[name="${input.name}"]:checked`);
                                value = checkedRadio ? checkedRadio.value : '';
                            } else {
                                value = input.value;
                            }

                            const fieldid = field.fieldid || field.field_id;
                            const customFieldid = field.customFieldid || field.custom_field_id || 0;
                            const label = field.label || '';
                            const labelKey = label.toLowerCase().trim();
                            const isDOBFieldVal = labelKey.includes('birth') || labelKey.includes('dob') || (field.page_field_name || '').toLowerCase().includes('birth') || (field.page_field_name || '').toLowerCase().includes('dob');
                            if (isDOBFieldVal && value) {
                                value = formatDateToYYYYMMDD(value);
                            }

                            if (labelKey.includes('first name') || labelKey === 'firstname') {
                                if (value && value.trim()) firstName = value.trim();
                            }
                            if (labelKey.includes('last name') || labelKey === 'lastname') {
                                if (value && value.trim()) lastName = value.trim();
                            }
                            if (labelKey.includes('division') || (field.page_field_name || '').toLowerCase() === 'division' || (field.form_field_name || '').toLowerCase() === 'division') {
                                if (value) playerDivisionId = parseInt(value) || 0;
                            }

                            fieldsArray.push({
                                field_id: fieldid,
                                label: label,
                                value: value
                            });

                            // Player page is systemic - use object format for all to ensure label is available
                            playerResultData[fieldid] = {
                                fieldid: fieldid,
                                customfieldId: customFieldid || 0,
                                label: label,
                                values: value
                            };
                        }
                    });

                    if (!firstName || !lastName) {
                        // Show error icon in header
                        const headerError = document.getElementById(`header-error-${page.page_id}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${page.page_id}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        showAlert('Please enter at least First Name and Last Name to save a player.', 'error');
                        return;
                    }

                    // Hide error icon if present
                    const headerError = document.getElementById(`header-error-${page.page_id}`);
                    if (headerError) headerError.classList.add('hidden');


                    let rawEditingId = currentlyEditingPlayerId;
                    let isNewPlayer = !rawEditingId || rawEditingId === 'new' || rawEditingId === 0 || rawEditingId === '0';
                    let effectivePlayerId = isNewPlayer ? 0 : rawEditingId;

                    if (isNewPlayer) {
                        // Use a 32-bit compatible integer for temporary IDs to avoid GraphQL "Int cannot represent non-integer value" error
                        effectivePlayerId = Math.floor(Date.now() / 1000);
                        // Safety: ensure uniqueness within the current session
                        while (playersList.some(p => p.player_id == effectivePlayerId)) {
                            effectivePlayerId++;
                        }
                    }

                    const playerData = {
                        player_id: effectivePlayerId,
                        first_name: firstName,
                        last_name: lastName,
                        division_id: playerDivisionId,
                        is_local: true,
                        fields: fieldsArray
                    };

                    if (!collectedRegistrationData[page.page_id]) collectedRegistrationData[page.page_id] = {};
                    collectedRegistrationData[page.page_id][effectivePlayerId] = playerResultData;

                    if (isNewPlayer) {
                        playersList.push(playerData);
                    } else {
                        // Update existing player in the list
                        const index = playersList.findIndex(p => p.player_id == effectivePlayerId);
                        if (index !== -1) {
                            playersList[index] = { ...playersList[index], ...playerData };
                        } else {
                            playersList.push(playerData);
                        }
                    }

                    // Sync updated values to window.draftPlayerFieldValues and playerFieldValues for effectivePlayerId
                    if (!window.draftPlayerFieldValues) window.draftPlayerFieldValues = {};
                    if (!window.draftPlayerFieldValues[effectivePlayerId]) window.draftPlayerFieldValues[effectivePlayerId] = {};

                    fieldsArray.forEach(f => {
                        const normLabel = (f.label || '').toLowerCase().trim();
                        const cleanLabel = (f.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                        if (normLabel) {
                            playerFieldValues[normLabel] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId][normLabel] = f.value;
                        }
                        if (cleanLabel) {
                            playerFieldValues[cleanLabel] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId][cleanLabel] = f.value;
                        }
                        if (cleanLabel === 'gender' || cleanLabel === 'sex' || cleanLabel.includes('gender') || normLabel.includes('gender')) {
                            playerData.gender = f.value;
                            playerFieldValues['gender'] = f.value;
                            playerFieldValues['player - gender'] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId]['gender'] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId]['player - gender'] = f.value;
                        }
                        if (f.field_id) {
                            playerFieldValues[`id_${f.field_id}`] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId][`id_${f.field_id}`] = f.value;
                        }
                        if (normLabel.includes('division') || normLabel === 'division') {
                            playerFieldValues['division'] = f.value;
                            window.draftPlayerFieldValues[effectivePlayerId]['division'] = f.value;
                        }
                    });

                    // Update window.activeDraftRows if this player was loaded from draft
                    if (window.activeDraftRows && Array.isArray(window.activeDraftRows)) {
                        const draftRow = window.activeDraftRows.find(r => r.player_id == effectivePlayerId);
                        if (draftRow) {
                            if (!draftRow.data) draftRow.data = [];
                            fieldsArray.forEach(f => {
                                const fid = f.field_id;
                                if (!fid) return;
                                const existingField = draftRow.data.find(d => d.field_id == fid);
                                if (existingField) {
                                    existingField.value = f.value;
                                } else {
                                    draftRow.data.push({
                                        field_id: fid,
                                        value: f.value,
                                        parent_number: 0
                                    });
                                }
                            });
                        }
                    }

                    // Mark as updated/saved
                    updatedPlayerIds.add(effectivePlayerId);

                    // Mark as selected
                    selectedPlayerIds.add(effectivePlayerId);

                    // Check if this is a direct-player scenario (user IS the player, no selection UI)
                    const hasDirectPlayer = isAdultLeaguePlayer || !!localStorage.getItem('player_id');
                    const isSinglePlayerSave = (hasDirectPlayer && updatedPlayerIds.size === 1 && playersList.length === 1 && !isNewPlayer);

                    if (isSinglePlayerSave) {
                        // SINGLE PLAYER: Keep form data filled, collapse accordion, show name in header
                        // Don't clear currentlyEditingPlayerId so re-editing works
                        currentlyEditingPlayerId = effectivePlayerId;

                        // Don't clear playerFieldValues — keep the data
                        // Don't re-render fields — keep user input intact

                        // Update UI (player selection list)
                        updatePlayerSelectionUI();

                        Object.values(playerPages).forEach(page => {
                            // Update header: show page name, show checkmark
                            const headerCheckmark = document.getElementById(`header-checkmark-${page.page_id}`);
                            const headerTitle = document.getElementById(`header-title-${page.page_id}`);
                            const headerError = document.getElementById(`header-error-${page.page_id}`);

                            // Mark as saved via data attribute on wrapper (for submit validation)
                            const sectionWrapper = document.getElementById(`section-wrapper-${page.page_id}`);
                            if (sectionWrapper) {
                                sectionWrapper.setAttribute('data-saved', 'true');
                            }

                            if (headerTitle) {
                                headerTitle.textContent = normalizePageTitle(page.name);
                            }
                            if (headerCheckmark) {
                                headerCheckmark.classList.remove('hidden');
                            }
                            if (headerError) {
                                headerError.classList.add('hidden');
                            }

                            // Collapse the accordion
                            const accordionContent = document.getElementById(`page-${page.page_id}`);
                            if (accordionContent) {
                                accordionContent.classList.remove('accordion-open');
                            }

                            // Rotate the chevron icon to indicate collapsed state
                            const wrapperEl = document.getElementById(`section-wrapper-${page.page_id}`);
                            if (wrapperEl) {
                                const chevronIcon = wrapperEl.querySelector('.accordion-icon');
                                if (chevronIcon) {
                                    chevronIcon.classList.add('rotated');
                                }
                            }
                        });

                        showAlert('Player saved successfully!', 'success');

                    } else {
                        // MULTIPLE PLAYERS: Original flow — clear form, show checkmark
                        currentlyEditingPlayerId = null;
                        playerFieldValues = {};

                        // Re-render UI: Checkboxes (new one checked)
                        updatePlayerSelectionUI();

                        // Re-render Fields: For adult league, hide form entirely (only 1 player allowed)
                        // For normal flow, clear fields to allow adding another player
                        Object.values(playerPages).forEach(page => {
                            const container = document.getElementById(`player-fields-container-${page.page_id}`);
                            if (container) {
                                if (isAdultLeaguePlayer) {
                                    container.innerHTML = '';
                                } else {
                                    // Refresh custom pages and all dynamic labels
                                    if (typeof updateDynamicCustomPages === 'function') {
                                        updateDynamicCustomPages();
                                        refreshAllLabels();
                                    }
                                    container.innerHTML = generatePlayerFields(page, true);
                                }
                            }

                            // Show green checkmark in header
                            const headerCheckmark = document.getElementById(`header-checkmark-${page.page_id}`);
                            const headerTitle = document.getElementById(`header-title-${page.page_id}`);
                            const headerError = document.getElementById(`header-error-${page.page_id}`);

                            // Mark as saved
                            const sectionWrapper = document.getElementById(`section-wrapper-${page.page_id}`);
                            if (sectionWrapper) {
                                sectionWrapper.setAttribute('data-saved', 'true');
                            }

                            if (headerTitle) {
                                headerTitle.textContent = normalizePageTitle(page.name);
                            }
                            if (headerCheckmark) {
                                headerCheckmark.classList.remove('hidden');
                            }
                            if (headerError) {
                                headerError.classList.add('hidden');
                            }
                        });
                    }

                    // Refresh custom pages to update labels with the newly saved/updated player name
                    if (typeof updateDynamicCustomPages === 'function') {
                        updateDynamicCustomPages();
                    }
                    if (typeof refreshCustomPagesFields === 'function') {
                        refreshCustomPagesFields();
                    }
                    refreshAllLabels();

                    // Provide visual feedback
                    if (saveBtn) {
                        const originalContent = saveBtn.innerHTML;
                        saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';

                        setTimeout(() => {
                            saveBtn.innerHTML = originalContent;
                        }, 2000);
                    }

                    // Refresh level list sections after saving player data so the new gender/age/grade are picked up
                    refreshLevelListSections();

                    // For registration sets, call verifyPlayerEligibility API
                    if (isRegistrationSet && availableFormIds.length > 0) {
                        // Extract gender, grade, and calculate age from player data
                        let playerGender = null;
                        let playerGrade = null;
                        let playerAge = null;

                        fieldsArray.forEach(f => {
                            const labelKey = f.label.toLowerCase().trim();
                            if (labelKey === 'gender') {
                                playerGender = f.value || null;
                            }
                            if (labelKey === 'grade') {
                                playerGrade = f.value || null;
                            }
                            if (labelKey === 'date of birth' || labelKey === 'dob' || labelKey === 'birth date' || labelKey === 'birthdate') {
                                // Calculate age from DOB
                                const dob = new Date(f.value);
                                if (!isNaN(dob.getTime())) {
                                    const today = new Date();
                                    let age = today.getFullYear() - dob.getFullYear();
                                    const monthDiff = today.getMonth() - dob.getMonth();
                                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
                                        age--;
                                    }
                                    playerAge = age;
                                }
                            }
                        });

                        // Call eligibility API
                        verifyPlayerEligibility(effectivePlayerId, availableFormIds, playerGender, playerGrade, playerAge);
                        showAlert('Player saved successfully! Form cleared for next entry.', 'success');
                    }

                    // Scroll back to the top of the accordion
                    if (pageContainer) {
                        const accordionContainer = pageContainer.closest('.bg-white.rounded-lg.border-2');
                        if (accordionContainer) {
                            accordionContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                    }

                    // Close the accordion for better multi-step flow
                    closeAccordion(pageId);

                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }
                    if (typeof window.showSaveDraftBtn === 'function') {
                        window.showSaveDraftBtn();
                    }
                }

                // Verify player eligibility for registration set forms
                async function verifyPlayerEligibility(playerId, formIds, gender, grade, age, isSilent = false) {
                    try {
                        const formIdsArray = `[${formIds.join(', ')}]`;

                        const parsedGender = parseInt(gender, 10);
                        const genderArg = (gender !== null && gender !== '' && !isNaN(parsedGender)) ? parsedGender : 'null';
                        const gradeArg = grade !== null ? (isNaN(parseFloat(grade)) ? `"${grade}"` : grade) : 'null';
                        const ageArg = age !== null ? parseInt(age, 10) : 'null';

                        const query = `query VerifyPlayerEligibility {
                                verifyPlayerEligibility(player_id: ${playerId}, form_ids: ${formIdsArray}, gender: ${genderArg}, grade: ${gradeArg}, age: ${ageArg}) {
                                    form_id
                                    form_name
                                    league_id
                                    level_id
                                    level_description
                                    status
                                }
                            }`;

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({ query })
                        });

                        const result = await response.json();


                        if (result.data && result.data.verifyPlayerEligibility) {
                            // Store eligible forms for this player
                            playerEligibilityMap[playerId] = result.data.verifyPlayerEligibility;

                            // Update UI to show form selection
                            updatePlayerSelectionUI();

                            if (!isSilent) {
                                showAlert('Player saved! Please select a form for this player below.', 'success');
                            }
                        } else {
                            console.warn('No eligibility data returned');
                            if (!isSilent) {
                                showAlert('Player saved successfully! Form cleared for next entry.', 'success');
                            }
                        }
                    } catch (error) {
                        console.error('Error verifying player eligibility:', error);
                        if (!isSilent) {
                            showAlert('Player saved successfully! Form cleared for next entry.', 'success');
                        }
                    }
                }

                // Save a generic section
                function saveSection(pageId, saveBtn) {
                    const pageContainer = document.getElementById(`page-${pageId}`);
                    if (!pageContainer) return;

                    // Validation: check required fields and custom patterns/lengths
                    const allInputsForVal = pageContainer.querySelectorAll('input, select, textarea');
                    let allValid = true;
                    let firstInvalid = null;

                    allInputsForVal.forEach(input => {
                        if (input.type === "hidden") return;
                        if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                            const uploadGroup = input.closest('.photo-upload-group, .generic-file-group');
                            if (uploadGroup && uploadGroup.offsetParent === null) return;
                        } else {
                            if (input.offsetParent === null) return;
                        }
                        
                        // Use native checkValidity to support pattern, minlength, maxlength, and required
                        if (!input.checkValidity()) {
                            allValid = false;
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.add('border-red-500');
                                    uploadBox.classList.remove('border-[#f48120]', 'border-gray-300');
                                }
                            } else {
                                input.classList.add('border-red-500');
                            }
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            if (input.classList.contains('profile-picture-input') || input.classList.contains('generic-file-input')) {
                                const uploadBox = document.getElementById(`upload-box-${input.id}`);
                                if (uploadBox) {
                                    uploadBox.classList.remove('border-red-500');
                                    uploadBox.classList.add(input.classList.contains('profile-picture-input') ? 'border-[#f48120]' : 'border-gray-300');
                                }
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        }
                    });

                    // At-least-one validation for custom pages with page.required == 1 but no field-level requirements
                    const pageForVal = allPagesMap[pageId];
                    const pageNameLower = pageForVal ? (pageForVal.name || '').toLowerCase().trim() : '';
                    const hasParentFieldsForVal = pageForVal && pageForVal.fields && pageForVal.fields.some(f => (f.idTable || f.id_table || f.idtable) == 1);
                    const isParentPageForVal = ['parent', 'parents', 'parent info', 'parent information'].includes(pageNameLower) || (hasParentFieldsForVal && !['player', 'children'].includes(pageNameLower));
                    const isSystemicPageForVal = isParentPageForVal || ['player', 'children', 'players', 'summary', 'payment', 'payments', 'welcome'].includes(pageNameLower);

                    if (allValid && pageForVal && pageForVal.required == 1 && !isSystemicPageForVal) {
                        const allFieldsAreOptional = (pageForVal.fields || []).every(f =>
                            String(f.is_required) !== '1' && String(f.required) !== '1' && String(f.is_required).toLowerCase() !== 'true'
                        );

                        if (allFieldsAreOptional) {
                            const allInputs = pageContainer.querySelectorAll('input:not([type="button"]):not([type="hidden"]), select, textarea');
                            let atLeastOneFilled = false;

                            allInputs.forEach(input => {
                                if (input.type === 'checkbox' || input.type === 'radio') {
                                    if (input.checked) atLeastOneFilled = true;
                                } else if (input.value && input.value.trim() !== '') {
                                    atLeastOneFilled = true;
                                }
                            });

                            if (!atLeastOneFilled) {
                                allValid = false;
                                showAlert('Please select at least one field in this section.', 'error');

                                const headerError = document.getElementById(`header-error-${pageId}`);
                                if (headerError) headerError.classList.remove('hidden');

                                const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                                if (headerCheck) headerCheck.classList.add('hidden');

                                return;
                            }
                        }
                    }

                    if (!allValid) {
                        // Show error icon
                        const headerError = document.getElementById(`header-error-${pageId}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        if (firstInvalid) {
                            firstInvalid.focus();
                            // Trigger native browser tooltip if possible
                            if (typeof firstInvalid.reportValidity === 'function') {
                                firstInvalid.reportValidity();
                            }

                            // Try to get a human-readable label for the error message
                            let labelEl = firstInvalid.labels?.[0] ||
                                document.querySelector(`label[for="${firstInvalid.id}"]`) ||
                                { innerText: firstInvalid.placeholder || firstInvalid.name || firstInvalid.id };
                            const labelText = labelEl.innerText.replace('*', '').trim();
                            
                            let errorMsg = `Please check the field: "${labelText}"`;
                            if (firstInvalid.validity.valueMissing) {
                                errorMsg = `Please fill in the required field: "${labelText}"`;
                            } else if (firstInvalid.title) {
                                // If we have a custom error message from validation_master, use it
                                errorMsg = firstInvalid.title;
                            } else if (firstInvalid.validity.patternMismatch) {
                                errorMsg = `Invalid format for "${labelText}"`;
                            } else if (firstInvalid.validity.tooShort) {
                                errorMsg = `"${labelText}" is too short`;
                            } else if (firstInvalid.validity.tooLong) {
                                errorMsg = `"${labelText}" is too long`;
                            }

                            showAlert(errorMsg, 'error');
                        } else {
                            showAlert('Please fill in all required fields in this section.', 'error');
                        }
                        return;
                    }

                    // Phone validation
                    const phoneInputs = pageContainer.querySelectorAll('.phone-input');
                    let phoneValid = true;
                    phoneInputs.forEach(input => {
                        const digits = input.value.replace(/\D/g, '');
                        if (digits.length > 0 && digits.length < 10) {
                            phoneValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!phoneValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Please enter a valid 10-digit phone number.', 'error');
                        return;
                    }

                    // Zip validation
                    const zipInputs = pageContainer.querySelectorAll('.zip-input');
                    let zipValid = true;
                    zipInputs.forEach(input => {
                        const val = input.value.replace(/\D/g, '');
                        if (val.length > 0 && val.length < 5) {
                            zipValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (val.length >= 5) {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!zipValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Zip code must be at least 5 digits.', 'error');
                        return;
                    }

                    // Address Line 1 and City character length validation
                    const addrInputs = pageContainer.querySelectorAll('.address-input');
                    let addressValid = true;
                    addrInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length < 5) {
                            addressValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!addressValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Address Line 1 must be at least 5 characters.', 'error');
                        return;
                    }

                    const cityInputs = pageContainer.querySelectorAll('.city-input');
                    let cityValid = true;
                    cityInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length < 3) {
                            cityValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!cityValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('City must be at least 3 characters.', 'error');
                        return;
                    }

                    const stateInputs = pageContainer.querySelectorAll('.state-input');
                    let stateValid = true;
                    stateInputs.forEach(input => {
                        const val = input.value.trim();
                        if (val.length > 0 && val.length !== 2) {
                            stateValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!stateValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('State must be exactly 2 characters.', 'error');
                        return;
                    }

                    // CAM Number validation
                    const camInputs = pageContainer.querySelectorAll('.cam-number-input');
                    let camValid = true;
                    camInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length !== 7 || rawVal !== val)) {
                            camValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!camValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('Season CAM Number must be exactly 7 digits.', 'error');
                        return;
                    }

                    // Player CAM Number validation
                    const playerCamInputs = pageContainer.querySelectorAll('.player-cam-input');
                    let playerCamValid = true;
                    playerCamInputs.forEach(input => {
                        const rawVal = input.value;
                        const val = rawVal.replace(/\D/g, '');
                        if (rawVal.length > 0 && (rawVal.length > 7 || rawVal !== val)) {
                            playerCamValid = false;
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }
                    });

                    if (!playerCamValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert('CAM number must be up to 7 digits.', 'error');
                        return;
                    }

                    // Email validation (@ check, valid domain, letters only in TLD, and confirmation match)
                    const emailInputsList = pageContainer.querySelectorAll('input[type="email"], .email-input, input[name*="email" i], input[data-field-name*="email" i]');
                    let emailValid = true;
                    let emailValues = {}; // label -> {value, input}
                    let emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only.';

                    emailInputsList.forEach(input => {
                        // Skip hidden, checkbox, radio, button, submit, disabled, or non-visible elements
                        if (input.type === 'hidden' || input.type === 'checkbox' || input.type === 'radio' || input.type === 'button' || input.type === 'submit') return;
                        if (input.disabled || input.classList.contains('hidden') || input.offsetParent === null) return;

                        const val = input.value.trim();
                        const isReq = input.hasAttribute('required') || input.required;

                        // 1. Proper email format check
                        if (!val) {
                            if (isReq) {
                                emailValid = false;
                                emailErrorMsg = 'Please fill in the required email field.';
                                input.classList.add('border-red-500');
                                if (!firstInvalid) firstInvalid = input;
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        } else if (val.toLowerCase() === 'test-data@example.com') {
                            emailValid = false;
                            emailErrorMsg = 'This email address is not permitted.';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else if (!isValidEmail(val)) {
                            emailValid = false;
                            emailErrorMsg = 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only (e.g. .com, not .c0m).';
                            input.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = input;
                        } else {
                            input.classList.remove('border-red-500');
                        }

                        // 2. Collect for confirmation check
                        const page = allPagesMap[pageId];
                        if (page && page.fields) {
                            let field = page.fields.find(f => f.page_field_name === input.name);
                            if (!field) {
                                const dataFieldId = input.getAttribute('data-field-id');
                                if (dataFieldId) {
                                    field = page.fields.find(f => f.field_id == dataFieldId || f.fieldid == dataFieldId);
                                }
                            }
                            if (field) {
                                emailValues[field.label.toLowerCase()] = { value: val, input: input };
                            }
                        }
                    });

                    if (!emailValid) {
                        if (firstInvalid) firstInvalid.focus();
                        showAlert(emailErrorMsg, 'error');
                        return;
                    }

                    // 3. Confirmation match check
                    for (let label in emailValues) {
                        if (label.includes('confirm') || label.includes('verify')) {
                            const baseLabel = label.replace('confirm', '').replace('verify', '').replace(/\s+/g, ' ').trim();
                            let original = emailValues[baseLabel];
                            if (!original) {
                                for (let l in emailValues) {
                                    if (l !== label && l.includes('email') && !l.includes('confirm') && !l.includes('verify')) {
                                        original = emailValues[l];
                                        break;
                                    }
                                }
                            }
                            if (original) {
                                const val1 = (original.value || '').trim();
                                const val2 = (emailValues[label].value || '').trim();
                                if (val1 !== '' || val2 !== '') {
                                    if (val1 !== val2) {
                                        emailValues[label].input.classList.add('border-red-500');
                                        original.input.classList.add('border-red-500');
                                        emailValues[label].input.focus();
                                        showAlert('Email and Confirm Email must match.', 'error');
                                        return;
                                    }
                                }
                            }
                        }
                    }



                    // Hide error icon
                    const headerError = document.getElementById(`header-error-${pageId}`);
                    if (headerError) headerError.classList.add('hidden');


                    // Collect all data from this section
                    const inputs = pageContainer.querySelectorAll('input, select, textarea');
                    const sectionData = {};
                    const page = allPagesMap[pageId];
                    const pageName = page ? page.name.toLowerCase().trim() : '';
                    // More robust parent page detection: check name OR if any field is idTable=1
                    // Systemic parent/player page detection
                    const isSystemicParentPage = ['parent', 'parents', 'parent info', 'parent information', 'guardian'].includes(pageName) || (page && (page.step_type === 'Parent' || page.step_type === 'parent'));
                    const isSystemicPlayerPage = ['player', 'children', 'players'].includes(pageName) || (page && (page.step_type === 'Player' || page.step_type === 'player'));
                    const isSystemicPage = isSystemicParentPage || isSystemicPlayerPage;

                    // Check if this page has player-isolated or parent-isolated inputs
                    const hasPlayerIdInputs = pageContainer.querySelector('[data-player-id]') !== null;
                    const isPerPlayerCustomPage = !isSystemicPage && hasPlayerIdInputs;

                    console.log(`%c📝 saveSection: Page "${page ? page.name : pageId}" (ID: ${pageId}) | isSystemic=${isSystemicPage} | isPerPlayerCustom=${isPerPlayerCustomPage} | per_member=${page?.per_member}`, 'color: #2563eb; font-weight: bold;');
                    console.log(`   📊 Page has ${page?.fields?.length || 0} fields, container has ${inputs.length} inputs`);
                    console.log(`   📊 Page fields:`, page?.fields?.map(f => `${f.field_id}:${f.page_field_name}(type=${f.field_type},display=${f.display})`));
                    console.log(`   📊 DOM inputs:`, Array.from(inputs).map(i => `name="${i.name}" tag=${i.tagName} type=${i.type}`));

                    inputs.forEach(input => {
                        if (input.type !== 'button') {
                            // PRIORITIZE matching field by data-field-id attribute first, then fall back to page_field_name
                            const dataFieldId = input.getAttribute('data-field-id');
                            let field = null;
                            let matchedBy = 'none';

                            if (dataFieldId) {
                                field = page.fields.find(f => f.field_id == dataFieldId || f.fieldid == dataFieldId);
                                if (field) matchedBy = 'data-field-id';
                            }

                            if (!field && input.name) {
                                field = page.fields.find(f => f.page_field_name === input.name);
                                if (field) matchedBy = 'page_field_name';
                            }

                            if (!field) {
                                console.warn(`   ⚠️ SKIPPED input "${input.name}" (tag=${input.tagName}, data-field-id=${dataFieldId}) — no matching field found in page.fields`);
                                return;
                            }

                            let value;
                            if (input.type === 'checkbox') {
                                value = input.checked ? "1" : "0";
                            } else if (input.type === 'file') {
                                value = input.getAttribute('data-uploaded-url') || (input.files[0] ? input.files[0].name : '');
                            } else if (input.type === 'radio') {
                                if (!input.checked) return;
                                value = input.value;
                            } else {
                                value = input.value;
                            }

                            const fieldLabel = (field.label || '').toLowerCase().trim();
                            const isDateField = field.field_type === 'date' || fieldLabel.includes('birth') || fieldLabel.includes('dob') || (field.page_field_name || '').toLowerCase().includes('birth') || (field.page_field_name || '').toLowerCase().includes('dob');
                            if (isDateField && value) {
                                value = formatDateToYYYYMMDD(value);
                            }

                            const fieldid = field.fieldid || field.field_id;
                            const customFieldid = field.customFieldid || field.custom_field_id;
                            const playerId = input.getAttribute('data-player-id');

                            console.log(`   ✅ Field ${fieldid} (CID: ${customFieldid || 0}) "${field.label}" = "${value}" [matched by: ${matchedBy}] [player: ${playerId || 'none'}]`);

                            if (isSystemicParentPage) {
                                if (activeParentNumber === 2) {
                                    if (!sectionData['parent_2']) {
                                        sectionData['parent_2'] = {};
                                    }
                                    sectionData['parent_2'][fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid || 0,
                                        custom_field_id: customFieldid || 0,
                                        label: field.label || '',
                                        values: value
                                    };
                                    sectionData[fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid || 0,
                                        label: field.label || '',
                                        values: value
                                    };
                                    if (field.label) {
                                        parent2FieldValues[field.label.toLowerCase().trim()] = value;
                                        if (field.field_id) parent2FieldValues[`id_${field.field_id}`] = value;
                                    }
                                } else {
                                    if (!sectionData['parent']) {
                                        sectionData['parent'] = {};
                                    }
                                    sectionData['parent'][fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid || 0,
                                        custom_field_id: customFieldid || 0,
                                        label: field.label || '',
                                        values: value
                                    };
                                    sectionData[fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid || 0,
                                        label: field.label || '',
                                        values: value
                                    };
                                    if (field.label) {
                                        fieldValues[field.label.toLowerCase().trim()] = value;
                                        if (field.field_id) fieldValues[`id_${field.field_id}`] = value;
                                    }
                                }
                            } else if (playerId === 'parent' || playerId === 'parent_1') {
                                if (!sectionData['parent']) {
                                    sectionData['parent'] = {};
                                }
                                sectionData['parent'][fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    custom_field_id: customFieldid || 0,
                                    label: field.label || '',
                                    values: value
                                };
                                sectionData[fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    label: field.label || '',
                                    values: value
                                };
                            } else if (playerId === 'parent_2') {
                                if (!sectionData['parent_2']) {
                                    sectionData['parent_2'] = {};
                                }
                                sectionData['parent_2'][fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    custom_field_id: customFieldid || 0,
                                    label: field.label || '',
                                    values: value
                                };
                            } else if (isPerPlayerCustomPage && playerId) {
                                if (!sectionData[playerId]) {
                                    sectionData[playerId] = {};
                                }
                                sectionData[playerId][fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    custom_field_id: customFieldid || 0,
                                    label: field.label || '',
                                    values: value
                                };
                            } else {
                                // Use fieldid as the primary key
                                sectionData[fieldid] = {
                                    fieldid: fieldid,
                                    customfieldId: customFieldid || 0,
                                    label: field.label || '',
                                    values: value
                                };
                            }
                        }
                    });

                    const actualPageName = page ? page.name : `Page ${pageId}`;
                    console.log(`   📦 Saved data for page ${pageId}:`, JSON.parse(JSON.stringify(sectionData)));

                    // Mark as saved globally for Parent
                    if (isSystemicParentPage) {
                        isParentSaved = true;

                        let currentParentKey = 1;
                        if (typeof familyCircleParents !== 'undefined' && familyCircleParents && familyCircleParents.length > 0) {
                            currentParentKey = activeParentId || (familyCircleParents[0] ? familyCircleParents[0].parent_id : 1);
                        } else if (typeof hasTwoParents !== 'undefined' && hasTwoParents) {
                            currentParentKey = activeParentNumber || 1;
                        }
                        savedParentKeys.add(currentParentKey);

                        if (!collectedRegistrationData[pageId]) {
                            collectedRegistrationData[pageId] = {};
                        }

                        if (activeParentNumber === 2) {
                            collectedRegistrationData[pageId]['parent_2'] = sectionData;
                            const p2F = parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '';
                            const p2L = parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '';
                            if (p2F || p2L) parent2Name = `${p2F} ${p2L}`.trim();
                        } else {
                            collectedRegistrationData[pageId]['parent'] = sectionData;
                            Object.assign(collectedRegistrationData[pageId], sectionData);
                            const p1F = fieldValues['first name'] || fieldValues['firstname'] || '';
                            const p1L = fieldValues['last name'] || fieldValues['lastname'] || '';
                            if (p1F || p1L) parent1Name = `${p1F} ${p1L}`.trim();
                        }

                        if (typeof updateParentHeaderCheckmark === 'function') {
                            updateParentHeaderCheckmark(pageId);
                        }

                        console.log(`✅ Parent ${activeParentNumber} (Key: ${currentParentKey}) information marked as SAVED. Total saved parents: ${savedParentKeys.size}`);
                        if (typeof refreshCustomPages === 'function') {
                            refreshCustomPages();
                        } else if (typeof updateDynamicCustomPages === 'function') {
                            updateDynamicCustomPages();
                            refreshAllLabels();
                        }
                    } else {
                        collectedRegistrationData[pageId] = sectionData;
                    }

                    // Identify player pages to trigger division refresh
                    const isPlayerPageMatch = ['player', 'children', 'players'].some(n => pageName.includes(n));
                    if (isPlayerPageMatch) {
                        console.log('✅ Player/Child information saved. Refreshing divisions for Level Selection.');
                        refreshLevelListSections();
                    }

                    // Show checkmark in header (Green if all parents saved, Yellow if 1 parent saved)
                    if (isSystemicParentPage) {
                        updateParentHeaderCheckmark(pageId);
                    } else {
                        const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheckmark) {
                            headerCheckmark.classList.remove('hidden');
                        }

                        // Mark as saved via data attribute on wrapper
                        const sectionWrapper = document.getElementById(`section-wrapper-${pageId}`);
                        if (sectionWrapper) {
                            sectionWrapper.setAttribute('data-saved', 'true');
                        }
                    }

                    // Ensure error icon is hidden
                    if (headerError) {
                        headerError.classList.add('hidden');
                    }

                    // Provide visual feedback
                    const originalContent = saveBtn.innerHTML;

                    saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';

                    setTimeout(() => {
                        saveBtn.innerHTML = originalContent;
                    }, 2000);

                    showAlert('Section saved successfully!', 'success');

                    // Close the accordion for better multi-step flow
                    closeAccordion(pageId);

                    // Scroll back to the top of the accordion
                    const accordionContainer = pageContainer.closest('.bg-white.rounded-lg.border-2');
                    if (accordionContainer) {
                        accordionContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }

                    // Always refresh labels after saving any section
                    refreshAllLabels();
                    if (typeof window.showSaveDraftBtn === 'function') {
                        window.showSaveDraftBtn();
                    }
                }

                // Save membership section - validates that one membership is selected
                function saveMembershipSection(pageId, saveBtn) {
                    if (!selectedMembershipId) {
                        // Show error icon
                        const headerError = document.getElementById(`header-error-${pageId}`);
                        if (headerError) headerError.classList.remove('hidden');

                        const headerCheck = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheck) headerCheck.classList.add('hidden');

                        showAlert('Please select a membership option before saving.', 'error');
                        return;
                    }

                    // Hide error icon
                    const headerError = document.getElementById(`header-error-${pageId}`);
                    if (headerError) headerError.classList.add('hidden');

                    // Find the selected membership data
                    const selectedMembership = membershipOptions.find(m => m.id == selectedMembershipId);

                    // Store in collected registration data
                    collectedRegistrationData[pageId] = {
                        membership_id: {
                            fieldid: 'membership_id',
                            customfieldId: 0,
                            label: 'Membership',
                            values: selectedMembershipId
                        }
                    };

                    // Also store membership info globally for fee calculations
                    collectedRegistrationData['membership'] = {
                        id: selectedMembershipId,
                        description: selectedMembership ? selectedMembership.description : '',
                        fee: selectedMembership ? selectedMembership.fee_1 : 0,
                        feeCodeID: selectedMembership ? selectedMembership.Membership_Fee_Code_id : null,
                        feeGroupID: selectedMembership ? selectedMembership.Membership_Fee_Group_id : null
                    };

                    console.log(`✅ Membership saved - ID: ${selectedMembershipId}, Description: ${selectedMembership?.description || 'N/A'}, Fee: ${selectedMembership?.fee_1 || 0}`);

                    // Show green checkmark in header
                    const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                    if (headerCheckmark) {
                        headerCheckmark.classList.remove('hidden');
                    }

                    // Provide visual feedback
                    const originalContent = saveBtn.innerHTML;

                    saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';

                    setTimeout(() => {
                        saveBtn.innerHTML = originalContent;
                    }, 2000);

                    showAlert('Membership selection saved!', 'success');

                    // Close the accordion for better multi-step flow
                    closeAccordion(pageId);
                }

                // Fetch and render registration form
                async function loadRegistrationForm() {
                    try {
                        // Get authentication data from localStorage
                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        // Set global auth tokens
                        authOrganisation = organisation;
                        authToken = token;

                        // Load discount codes
                        loadDiscountCodes();

                        // 
                        // 

                        // Get form_id from URL query parameter
                        const urlParams = new URLSearchParams(window.location.search);
                        let formId = urlParams.get('form_id');

                        // If no form_id in URL, fetch available forms and use the first one
                        if (!formId) {
                            // 
                            const formsResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': organisation,
                                    'X-Token': token,
                                },
                                body: JSON.stringify({
                                    query: `query FetchRegistrationMobileApp {
                                            fetchRegistrationMobileApp {
                                                forms
                                            }
                                        }`
                                })
                            });

                            const formsResult = await formsResponse.json();
                            // 

                            if (formsResult.data && formsResult.data.fetchRegistrationMobileApp &&
                                formsResult.data.fetchRegistrationMobileApp.forms) {
                                // Parse forms - it might be a JSON string or already an array
                                let formsData = formsResult.data.fetchRegistrationMobileApp.forms;
                                if (typeof formsData === 'string') {
                                    formsData = JSON.parse(formsData);
                                }

                                if (formsData.length > 0 && formsData[0].form) {
                                    // Use the first form as default
                                    formId = formsData[0].form.form_id;
                                    // 
                                } else {
                                    throw new Error('No registration forms available');
                                }
                            } else {
                                throw new Error('No registration forms available');
                            }
                        }

                        // 

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({
                                query: `query FetchRegisteredMobileAppUser {
                                        fetchRegistrationMobileApp(form_id: ${formId}) {
                                            form
                                            pages
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        // 

                        // Access form and pages from the response
                        const responseData = result.data.fetchRegistrationMobileApp;
                        // 
                        // 
                        // 

                        const data = {
                            form: typeof responseData.form === 'string' ? JSON.parse(responseData.form) : responseData.form,
                            pages: typeof responseData.pages === 'string' ? JSON.parse(responseData.pages) : responseData.pages
                        };

                        console.log('Registration Form:', data);
                        // 

                        // Fetch parent data to pre-populate form fields
                        // Parent is identified via X-Token and X-Organisation headers
                        // 

                        const parentDataResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({
                                query: `query FetchParentData {
                                        fetchParentData(form_id: ${formId ? formId : null}) {
                                            form_id
                                            page_id
                                            players {
                                                player_id
                                                registration_id
                                                form_id
                                                first_name
                                                last_name
                                            }
                                            registration_id
                                            has_two_parents
                                            parent1_name
                                            parent2_name
                                            parent_id1
                                            parent_id2
                                            fields {
                                                field_id
                                                label
                                                value
                                            }
                                            parent1_fields {
                                                field_id
                                                label
                                                value
                                            }
                                            parent2_fields {
                                                field_id
                                                label
                                                value
                                            }
                                        }
                                    }`
                            })
                        });

                        const parentResult = await parentDataResponse.json();
                        // 

                        // Populate fieldValues map from parent data - MAP BY LABEL
                        if (parentResult.data && parentResult.data.fetchParentData) {
                            const parentData = parentResult.data.fetchParentData;
                            // 

                            // Store dual-parent state
                            hasTwoParents = parentData.has_two_parents || false;
                            parent1Name = parentData.parent1_name || null;
                            parent2Name = parentData.parent2_name || null;
                            parentId1 = parentData.parent_id1 || null;
                            parentId2 = parentData.parent_id2 || null;
                            parent1FieldsRaw = parentData.parent1_fields || [];
                            parent2FieldsRaw = parentData.parent2_fields || [];
                            activeParentNumber = 1;

                            // Handle both array and single object responses
                            const registrations = Array.isArray(parentData) ? parentData : [parentData];
                            // 

                            // Iterate through all registrations and map LABEL to value
                            registrations.forEach((registration, regIndex) => {
                                if (registration.parent_id) {
                                    globalParentId = registration.parent_id;
                                }
                                // 

                                // Extract players list
                                if (registration.players && Array.isArray(registration.players)) {
                                    // 
                                    registration.players.forEach(player => {
                                        // Check if player already exists in list (by player_id)
                                        if (!playersList.some(p => p.player_id === player.player_id)) {
                                            playersList.push(player);
                                            // Mark pre-existing players as saved
                                            updatedPlayerIds.add(player.player_id);
                                        }
                                    });
                                } else {
                                    // 
                                }

                                // Use parent1_fields if available, otherwise fall back to fields
                                const fieldsToUse = (registration.parent1_fields && registration.parent1_fields.length > 0) ? registration.parent1_fields : (registration.fields || []);
                                if (fieldsToUse && Array.isArray(fieldsToUse)) {
                                    fieldsToUse.forEach(field => {
                                        if (field.label && field.value !== null && field.value !== undefined) {
                                            const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                            if (cleanVal !== '') {
                                                // Store value by LABEL (normalized to lowercase for matching)
                                                const normalizedLabel = field.label.toLowerCase().trim();
                                                fieldValues[normalizedLabel] = cleanVal;
                                                if (field.field_id) {
                                                    fieldValues[`id_${field.field_id}`] = cleanVal;
                                                }
                                            }
                                        }
                                    });
                                }

                                // Store parent2 field values separately
                                if (registration.parent2_fields && Array.isArray(registration.parent2_fields)) {
                                    registration.parent2_fields.forEach(field => {
                                        if (field.value !== null && field.value !== undefined) {
                                            const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                            if (cleanVal !== '') {
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    parent2FieldValues[normalizedLabel] = cleanVal;
                                                }
                                                if (field.field_id) {
                                                    parent2FieldValues[`id_${field.field_id}`] = cleanVal;
                                                }
                                            }
                                        }
                                    });
                                }
                            });

                            // Fallback: If no parent field values were found for current formId, retrieve parent field values from previous registration or generic parent data
                            if (Object.keys(fieldValues).length === 0) {
                                let fallbackFormId = null;
                                if (typeof playersList !== 'undefined' && playersList.length > 0) {
                                    const prevPlayer = playersList.find(p => p.form_id && p.form_id != formId);
                                    if (prevPlayer) {
                                        fallbackFormId = prevPlayer.form_id;
                                    }
                                }
                                try {
                                    const fetchOrg = typeof organisation !== 'undefined' ? organisation : (typeof authOrganisation !== 'undefined' ? authOrganisation : '');
                                    const fetchTok = typeof token !== 'undefined' ? token : (typeof authToken !== 'undefined' ? authToken : '');
                                    
                                    let fbResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-Organisation': fetchOrg,
                                            'X-Token': fetchTok,
                                        },
                                        body: JSON.stringify({
                                            query: `query FetchParentDataFallback {
                                                    fetchParentData(form_id: ${fallbackFormId ? fallbackFormId : null}) {
                                                        fields { field_id label value }
                                                        parent1_fields { field_id label value }
                                                        parent2_fields { field_id label value }
                                                    }
                                                }`
                                        })
                                    });
                                    let fbResult = await fbResponse.json();
                                    
                                    if ((!fbResult.data || !fbResult.data.fetchParentData || 
                                         ((!fbResult.data.fetchParentData.parent1_fields || fbResult.data.fetchParentData.parent1_fields.length === 0) &&
                                          (!fbResult.data.fetchParentData.fields || fbResult.data.fetchParentData.fields.length === 0))) &&
                                        fallbackFormId !== null) {
                                        fbResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-Organisation': fetchOrg,
                                                'X-Token': fetchTok,
                                            },
                                            body: JSON.stringify({
                                                query: `query FetchParentDataFallbackNull {
                                                        fetchParentData(form_id: null) {
                                                            fields { field_id label value }
                                                            parent1_fields { field_id label value }
                                                            parent2_fields { field_id label value }
                                                        }
                                                    }`
                                            })
                                        });
                                        fbResult = await fbResponse.json();
                                    }

                                    if (fbResult.data && fbResult.data.fetchParentData) {
                                        const fbData = fbResult.data.fetchParentData;
                                        if (fbData.parent1_fields && fbData.parent1_fields.length > 0) {
                                            parent1FieldsRaw = fbData.parent1_fields;
                                        }
                                        if (fbData.parent2_fields && fbData.parent2_fields.length > 0) {
                                            parent2FieldsRaw = fbData.parent2_fields;
                                        }
                                        const fbFieldsToUse = (fbData.parent1_fields && fbData.parent1_fields.length > 0) ? fbData.parent1_fields : (fbData.fields || []);
                                        if (fbFieldsToUse && Array.isArray(fbFieldsToUse)) {
                                            fbFieldsToUse.forEach(field => {
                                                if (field.label && field.value !== null && field.value !== undefined) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    fieldValues[normalizedLabel] = field.value;
                                                    if (field.field_id) {
                                                        fieldValues[`id_${field.field_id}`] = field.value;
                                                    }
                                                }
                                            });
                                        }
                                        if (fbData.parent2_fields && Array.isArray(fbData.parent2_fields)) {
                                            fbData.parent2_fields.forEach(field => {
                                                if (field.value !== null && field.value !== undefined) {
                                                    if (field.label) {
                                                        const normalizedLabel = field.label.toLowerCase().trim();
                                                        parent2FieldValues[normalizedLabel] = field.value;
                                                    }
                                                    if (field.field_id) {
                                                        parent2FieldValues[`id_${field.field_id}`] = field.value;
                                                    }
                                                }
                                            });
                                        }
                                    }
                                } catch (fbErr) {
                                    console.error('Error fetching fallback parent data:', fbErr);
                                }
                            }

                            // Fallback: construct parent1Name from fieldValues if API didn't provide it
                            if (!parent1Name && Object.keys(fieldValues).length > 0) {
                                const pFirstName = (fieldValues['first name'] || fieldValues['firstname'] || '').trim();
                                const pLastName = (fieldValues['last name'] || fieldValues['lastname'] || '').trim();
                                if (pFirstName || pLastName) {
                                    parent1Name = `${pFirstName} ${pLastName}`.trim();
                                    console.log(`📛 Constructed parent1Name from fieldValues: "${parent1Name}"`);
                                }
                            }

                            if (Object.keys(parent2FieldValues).length > 0 || (parent2FieldsRaw && parent2FieldsRaw.length > 0)) {
                                hasTwoParents = true;
                            }

                            // Fallback: construct parent2Name from parent2FieldValues if API didn't provide it
                            if (!parent2Name && Object.keys(parent2FieldValues).length > 0) {
                                const p2FirstName = (parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '').trim();
                                const p2LastName = (parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '').trim();
                                if (p2FirstName || p2LastName) {
                                    parent2Name = `${p2FirstName} ${p2LastName}`.trim();
                                    hasTwoParents = true;
                                    console.log(`📛 Constructed parent2Name from parent2FieldValues: "${parent2Name}"`);
                                }
                            }

                            if (hasTwoParents) {
                                console.log(`👨‍👩‍👧 Two parents detected (initial load): "${parent1Name}" & "${parent2Name}"`);
                            }
                            // 
                            // 
                        }

                        // Local players storage logic has been removed as per requirement


                        // Update form title
                        if (data.form && data.form.form_name) {
                            document.getElementById('form-title').textContent = `Welcome to ${data.form.form_name} Registration`;
                            updateFormHeaderLeagueSeasonInfo(data.form);
                        }

                        // Sort pages by sort_order, but move Summary and Payment to the end
                        // Filter visible pages (display = 0 or 1 means show, 2 or anything else means hidden)
                        // Also deduplicate pages by name to prevent duplicates (like Payment appearing twice)
                        const seenPageNames = new Set();
                        const sortedPages = data.pages
                            .filter(p => {
                                const pName = (p.name || '').toLowerCase().trim();
                                // FORCE Summary and Payment/Payments pages to show regardless of display status
                                if (pName === 'summary' || pName === 'payment' || pName === 'payments') return true;
                                return p.display == 0 || p.display == 1 || p.display === true || p.display === false;
                            })
                            .filter(p => {
                                // For Welcome pages, skip those without description when there are multiple
                                // Welcome page renderer only shows page_field_description, so filter by that
                                const pageName = (p.name || '').toLowerCase().trim();
                                if (pageName === 'welcome') {
                                    const allWelcomePages = data.pages.filter(wp => (wp.name || '').toLowerCase().trim() === 'welcome' && (wp.display == 0 || wp.display == 1 || wp.display === true || wp.display === false));
                                    if (allWelcomePages.length > 1 && !doesWelcomePageHaveDescription(p)) {
                                        return false; // Skip welcome pages without page_field_description/form_field_description when multiple exist
                                    }
                                    if (allWelcomePages.length === 1 && !doesWelcomePageHaveContent(p)) {
                                        return false; // Skip single welcome page with no content
                                    }
                                }

                                const isDefaultPage = defaultPageNames.includes(pageName);
                                // Skip empty or placeholder pages (or custom pages where all fields have display == 0)
                                if (!isDefaultPage && isPageEffectivelyEmpty(p)) {
                                    return false;
                                }

                                // Deduplicate default pages by normalized page key/type to prevent duplicates (e.g. parent vs Parents)
                                const pageKey = getPageDedupKey(p);
                                if (pageKey) {
                                    if (seenPageNames.has(pageKey)) {
                                        return false;
                                    }
                                    seenPageNames.add(pageKey);
                                }
                                return true;
                            })
                            .sort((a, b) => {
                                // Move Summary and Payment pages to the very end
                                const aLower = (a.name || '').toLowerCase();
                                const bLower = (b.name || '').toLowerCase();
                                const aIsSummary = aLower === 'summary';
                                const bIsSummary = bLower === 'summary';
                                const aIsPayment = aLower === 'payment';
                                const bIsPayment = bLower === 'payment';

                                if (aIsPayment && !bIsPayment) return 1;
                                if (!aIsPayment && bIsPayment) return -1;
                                if (aIsSummary && !bIsSummary) {
                                    return bIsPayment ? -1 : 1;
                                }
                                if (!aIsSummary && bIsSummary) {
                                    return aIsPayment ? 1 : -1;
                                }

                                // Welcome pages with description should appear at the very top (first position)
                                const aIsWelcome = aLower === 'welcome';
                                const bIsWelcome = bLower === 'welcome';
                                if (aIsWelcome && !bIsWelcome) return -1;  // Welcome goes before non-welcome
                                if (!aIsWelcome && bIsWelcome) return 1;   // Non-welcome goes after welcome
                                if (aIsWelcome && bIsWelcome) {
                                    // Among multiple welcome pages, prioritize the one with description
                                    const aHasDesc = doesWelcomePageHaveDescription(a);
                                    const bHasDesc = doesWelcomePageHaveDescription(b);
                                    if (aHasDesc && !bHasDesc) return -1;
                                    if (!aHasDesc && bHasDesc) return 1;
                                }

                                // Move global pages (type === 'global' or season_type === -99) to the bottom (but before Summary/Payment)
                                const aIsGlobal = a.type === 'global' || a.season_type === -99;
                                const bIsGlobal = b.type === 'global' || b.season_type === -99;

                                if (aIsGlobal && !bIsGlobal) return 1;
                                if (!aIsGlobal && bIsGlobal) return -1;

                                // Otherwise sort by sort_order
                                return (a.sort_order || 0) - (b.sort_order || 0);
                            });

                        // Render pages
                        let pagesHtml = '';
                        sortedPages.forEach((page, index) => {
                            // Store in global map
                            allPagesMap[page.page_id] = page;

                            // Normalize page name (e.g. "parent" -> "Parent", "player" -> "Player", "children" -> "Player")
                            if (page.name) {
                                page.name = normalizePageTitle(page.name);
                            }
                            pagesHtml += renderPage(page, index);
                        });

                        // ENSURE Summary page is always shown even if not in data
                        if (!sortedPages.some(p => (p.name || '').toLowerCase().trim() === 'summary')) {
                            pagesHtml += renderPage({
                                page_id: 'virtual-summary',
                                name: 'Summary',
                                display: 1,
                                fields: [],
                                sort_order: 9999
                            }, sortedPages.length);
                        }

                        // Hide loading, show content
                        document.getElementById('loading-state').classList.add('hidden');
                        document.getElementById('pages-container').innerHTML = pagesHtml;
                        document.getElementById('pages-container').classList.remove('hidden');
                        document.getElementById('submit-container').classList.remove('hidden');
                        if (typeof checkSubmitButtonState === 'function') {
                            checkSubmitButtonState();
                        }

                        if (window.activeDraftRows) {
                            await applyDraftData();
                        }

                        // Initialize first accordion as open, others closed
                        setTimeout(() => {
                            const accordions = document.querySelectorAll('.accordion-content');
                            const icons = document.querySelectorAll('.accordion-icon');

                            accordions.forEach((accordion, idx) => {
                                if (idx === 0) {
                                    accordion.classList.add('accordion-open');
                                    if (icons[idx]) icons[idx].classList.remove('rotated');
                                } else {
                                    accordion.classList.remove('accordion-open');
                                    if (icons[idx]) icons[idx].classList.add('rotated');
                                }
                            });

                            // Initialize all dynamic labels based on loaded data
                            if (typeof refreshAllLabels === 'function') {
                                refreshAllLabels();
                            }
                            updateParentHeaderCheckmark();
                        }, 500);

                    } catch (error) {
                        console.error('Error loading registration form:', error);
                        document.getElementById('loading-state').innerHTML = `
                                <div class="text-red-600">
                                    <i class="fa-solid fa-exclamation-triangle text-4xl mb-4"></i>
                                    <p class="font-semibold">Error loading registration form</p>
                                    <p class="text-sm mt-2">Please try again later</p>
                                </div>
                            `;
                    }
                }

                // Load form on page load
                document.addEventListener('DOMContentLoaded', loadAvailableForms);

                // Store all available forms data globally
                let allFormsData = [];

                // Fetch available forms and populate dropdown
                async function loadAvailableForms() {
                    try {
                        // Check registration form compulsory parameter & auth guard
                        if (typeof checkRegistrationFormAuthGuard === 'function') {
                            const canProceed = checkRegistrationFormAuthGuard();
                            if (!canProceed) {
                                return; // Stop loading form if form_id is missing or inline login/signup UI is displayed
                            }
                        }

                        const organisation = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        // Set global auth tokens
                        authOrganisation = organisation;
                        authToken = token;

                        // Load discount codes early
                        if (typeof window.loadDiscountCodes === 'function') {
                            window.loadDiscountCodes();
                        }

                        if (organisation) {
                            globalParentId = organisation;
                        }

                        // Fetch league colors and settings directly from league_colors table before loading form
                        await fetchLeagueSettings();

                        // Check if registration_set_id or form_id is in URL
                        const urlParams = new URLSearchParams(window.location.search);
                        const urlRegSetId = urlParams.get('registration_set_id');
                        const urlFormId = urlParams.get('form_id');
                        const urlLeagueType = urlParams.get('league_type');
                        const urlDraftId = urlParams.get('draft_id');

                        if (urlDraftId) {
                            await resumeDraft(parseInt(urlDraftId));
                        }

                        // Set adult league flag based on league_type from URL
                        if (urlLeagueType === 'adult') {
                            const loggedInPlayerId = localStorage.getItem('player_id');
                            if (loggedInPlayerId) {
                                isAdultLeaguePlayer = true;
                                console.log('🏈 Adult league detected with player_id:', loggedInPlayerId);
                            }
                        }

                        if (urlRegSetId) {
                            // New format: registration_set_id is in URL
                            await loadFormByRegistrationSetId(urlRegSetId);
                            if (!urlDraftId) {
                                await checkAndPromptResumeDraft(null, urlRegSetId);
                            }
                            return;
                        }

                        if (urlFormId) {
                            // Old format: form_id is in URL (when registration_set_id is null)
                            await loadFormById(urlFormId);
                            if (!urlDraftId) {
                                await checkAndPromptResumeDraft(urlFormId, null);
                            }
                            return;
                        }

                        // Otherwise, fetch available forms and show dropdown
                        // 

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': organisation,
                                'X-Token': token,
                            },
                            body: JSON.stringify({
                                query: `query FetchLiveRegistrations {
                                        fetchLiveRegistrations {
                                            registration_type
                                            registrations {
                                                id
                                                name
                                                type
                                                league_type
                                            }
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        // 

                        // Hide loading
                        document.getElementById('form-selection-loading').classList.add('hidden');

                        if (result.data && result.data.fetchLiveRegistrations && result.data.fetchLiveRegistrations.registrations) {
                            const liveFormsData = result.data.fetchLiveRegistrations.registrations;

                            // 

                            if (liveFormsData.length > 0) {
                                // Populate dropdown
                                const select = document.getElementById('registration-form-select');
                                liveFormsData.forEach(reg => {
                                    const id = reg.id;
                                    const name = reg.name;
                                    const type = reg.type; // 'registration_set' or 'single'
                                    const leagueType = reg.league_type || ''; // 'adult' or 'youth'

                                    if (id && name) {
                                        const option = document.createElement('option');
                                        // Store id, type, and league_type in value as JSON
                                        option.value = JSON.stringify({ id: id, type: type, league_type: leagueType });
                                        option.textContent = name;
                                        select.appendChild(option);
                                    }
                                });

                                // Show dropdown container
                                document.getElementById('form-selection-container').classList.remove('hidden');

                                // Add change event listener
                                select.addEventListener('change', handleFormSelection);
                            } else {
                                document.getElementById('no-forms-message').classList.remove('hidden');
                            }
                        } else {
                            document.getElementById('no-forms-message').classList.remove('hidden');
                        }

                    } catch (error) {
                        console.error('Error loading available forms:', error);
                        document.getElementById('form-selection-loading').innerHTML = `
                                <div class="text-red-600 text-center">
                                    <i class="fa-solid fa-exclamation-triangle text-4xl mb-4"></i>
                                    <p class="font-semibold">Error loading forms</p>
                                    <p class="text-sm mt-2">Please try again later</p>
                                </div>
                            `;
                    }
                }

                // Fetch field mappings for all forms in a registration set.
                // The default_pages API response doesn't include form_id per page,
                // so we fetch each form's field structure individually to build
                // the form_field_name → field_id mapping needed for remapping at submit time.
                async function buildRegistrationSetFieldMappings() {
                    if (!isRegistrationSet || !window.availableForms || window.availableForms.length <= 1) return;
                    if (!window.fieldMappingByForm) window.fieldMappingByForm = {};

                    const sourceFormId = window.sourceFormId;

                    // Helper to add page fields to the per-page-type mapping structure
                    const addPageToMapping = (formId, page) => {
                        // Crucial: Only add the page if it belongs to this form or is a generic page
                        if (page.form_id && parseInt(page.form_id) !== parseInt(formId)) return;

                        const pageType = getPageType(page.name || page.step_type || '', page);
                        if (!window.fieldMappingByForm[formId]) {
                            window.fieldMappingByForm[formId] = {};
                        }
                        if (!window.fieldMappingByForm[formId][pageType]) {
                            window.fieldMappingByForm[formId][pageType] = {};
                        }
                        if (page.fields && Array.isArray(page.fields)) {
                            page.fields.forEach(field => {
                                const fieldId = parseInt(field.field_id || field.fieldid);
                                if (!fieldId) return;

                                // Try multiple keys for remapping robustness
                                const keys = [
                                    field.form_field_name,
                                    field.page_field_name,
                                    (field.label || '').toLowerCase().trim().replace(/[^a-z0-9]/g, '')
                                ].filter(Boolean);

                                keys.forEach(key => {
                                    if (!window.fieldMappingByForm[formId][pageType][key]) {
                                        window.fieldMappingByForm[formId][pageType][key] = fieldId;
                                    }
                                });
                            });
                        }
                    };

                    // 1. Build source form mapping from already-loaded pages
                    if (sourceFormId) {
                        const allLoadedPages = [...Object.values(allPagesMap), ...allPagesIncludingHidden];
                        console.log(`🗺️ Using ${allLoadedPages.length} loaded pages to build source mapping for form ${sourceFormId}`);
                        allLoadedPages.forEach(page => {
                            addPageToMapping(sourceFormId, page);
                        });

                        const sourceMapping = window.fieldMappingByForm[sourceFormId];
                        const totalFields = sourceMapping ? Object.values(sourceMapping).reduce((sum, m) => sum + Object.keys(m).length, 0) : 0;
                        const pageTypes = sourceMapping ? Object.keys(sourceMapping).join(', ') : 'none';
                        console.log(`✅ Source mapping for form ${sourceFormId} built: ${totalFields} fields across [${pageTypes}]`);
                    }

                    // 2. Fetch field data for each additional form via FetchRegistrationMobileApp
                    const formsToFetch = window.availableForms.filter(f => {
                        const fid = parseInt(f.form_id);
                        return fid !== sourceFormId;
                    });

                    if (formsToFetch.length === 0) {
                        console.log('🗺️ All form field mappings already loaded.');
                        return;
                    }

                    console.log(`🗺️ Fetching field mappings for ${formsToFetch.length} additional form(s): ${formsToFetch.map(f => f.form_id).join(', ')}`);

                    const fetchPromises = formsToFetch.map(async (form) => {
                        try {
                            const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': authOrganisation,
                                    'X-Token': authToken,
                                },
                                body: JSON.stringify({
                                    query: `query FetchRegistrationMobileApp {
                                        fetchRegistrationMobileApp(form_id: ${form.form_id}) {
                                            current_registration
                                        }
                                    }`
                                })
                            });

                            const result = await response.json();

                            if (result.data && result.data.fetchRegistrationMobileApp) {
                                const payload = result.data.fetchRegistrationMobileApp;

                                // Merge data sources into a structure that the parser loop understands
                                let regData = [];
                                if (payload.current_registration) {
                                    const parsed = typeof payload.current_registration === 'string' ? JSON.parse(payload.current_registration) : payload.current_registration;

                                    // Inject custom_pages_by_form if retrieved, so the extraction logic processes it
                                    if (payload.custom_pages_by_form) {
                                        const parsedCustom = typeof payload.custom_pages_by_form === 'string' ? JSON.parse(payload.custom_pages_by_form) : payload.custom_pages_by_form;
                                        if (Array.isArray(parsed)) {
                                            if (parsed.length > 0) parsed[0].custom_pages_by_form = parsedCustom;
                                        } else {
                                            parsed.custom_pages_by_form = parsedCustom;
                                        }
                                    }

                                    regData = parsed;
                                }

                                // Extract form data (could be array or single object)
                                let formData = null;
                                if (Array.isArray(regData)) {
                                    formData = regData.find(r => r.form && r.form.form_id == form.form_id) || regData[0];
                                } else {
                                    formData = regData;
                                }

                                if (formData && formData.pages && Array.isArray(formData.pages)) {
                                    const fid = parseInt(form.form_id);
                                    formData.pages.forEach(page => {
                                        addPageToMapping(fid, page);
                                    });

                                    // Check for custom pages
                                    if (formData.custom_pages && Array.isArray(formData.custom_pages)) {
                                        formData.custom_pages.forEach(page => {
                                            page.page_type = 'custom';
                                            addPageToMapping(fid, page);
                                        });
                                    }
                                    if (formData.custom_pages_by_form && Array.isArray(formData.custom_pages_by_form)) {
                                        formData.custom_pages_by_form.forEach(cpf => {
                                            if (cpf.custom_pages && Array.isArray(cpf.custom_pages)) {
                                                cpf.custom_pages.forEach(page => {
                                                    page.page_type = 'custom';
                                                    addPageToMapping(cpf.form_id || fid, page);
                                                });
                                            }
                                        });
                                    }

                                    const totalFields = Object.values(window.fieldMappingByForm[fid] || {}).reduce((sum, m) => sum + Object.keys(m).length, 0);
                                    const pageTypes = Object.keys(window.fieldMappingByForm[fid] || {}).join(', ');
                                    console.log(`✅ Form ${form.form_id} (${form.form_name}) mapping loaded: ${totalFields} fields across [${pageTypes}]`);
                                }
                            }
                        } catch (error) {
                            console.error(`❌ Error fetching field mapping for form ${form.form_id}:`, error);
                        }
                    });

                    await Promise.all(fetchPromises);
                    console.log('🗺️ FINAL Registration Set Field Mappings:', JSON.parse(JSON.stringify(window.fieldMappingByForm)));
                }

                // Load registration set by ID using the new FetchRegistrationSetMobileApp API
                async function loadFormByRegistrationSetId(registrationSetId) {
                    try {
                        // 

                        // Hide the form selection section
                        document.getElementById('form-selection-section').classList.add('hidden');

                        // Show the registration form card
                        document.getElementById('registration-form-card').classList.remove('hidden');

                        // First, fetch parent data for pre-population using the FetchParentSetData query (for sets)
                        fieldValues = {}; // Clear previous values
                        playersList = []; // Clear previous players list
                        selectedPlayerIds.clear(); // Clear previous selections
                        updatedPlayerIds.clear(); // Clear previous updates
                        await fetchRegistrationSetData(registrationSetId);

                        // Fetch grades and school list for registration set (no leagueId)
                        await fetchGradeList();
                        await fetchSchoolList();

                        // Fetch registration set data using FetchRegistrationSetMobileApp with registration_set_id
                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchRegistrationSetMobileApp {
                                        fetchRegistrationSetMobileApp(registration_set_id: ${registrationSetId}) {
                                            registration_set_id
                                            first_form
                                            available_forms
                                            criteria_available_forms
                                            default_pages
                                            custom_pages_by_form
                                            form_default_pages
                                            global_page
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        // 

                        if (result.data && result.data.fetchRegistrationSetMobileApp) {
                            const regSetData = result.data.fetchRegistrationSetMobileApp;
                            console.log('Registration Set Data:', regSetData);

                            // Process the new format data
                            await processRegistrationSetNewFormat(regSetData, registrationSetId);

                            // Build field mappings for all forms in the background
                            // This fetches each form's field structure so we can remap
                            // field_ids from the source form to target forms at submit time
                            await buildRegistrationSetFieldMappings();
                        } else {
                            console.warn(`⚠️ fetchRegistrationSetMobileApp returned no data for ID ${registrationSetId}, attempting fallback to loadFormById...`);
                            await loadFormById(registrationSetId);
                        }

                    } catch (error) {
                        console.error('Error loading registration set by ID, trying loadFormById fallback:', error);
                        try {
                            await loadFormById(registrationSetId);
                        } catch (fallbackError) {
                            showFormError('Error loading registration form');
                        }
                    }
                }

                // Load form by form_id using FetchRegistrationMobileApp (for single forms)
                async function loadFormById(formId) {
                    try {
                        // 

                        // Hide the form selection section
                        document.getElementById('form-selection-section').classList.add('hidden');

                        // Show the registration form card
                        document.getElementById('registration-form-card').classList.remove('hidden');

                        // First, fetch parent data for pre-population
                        fieldValues = {}; // Clear previous values
                        playersList = []; // Clear previous players list
                        selectedPlayerIds.clear(); // Clear previous selections
                        updatedPlayerIds.clear(); // Clear previous updates
                        await fetchParentData(formId);

                        // Fetch current_registration data using FetchRegistrationMobileApp with form_id
                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchRegistrationMobileApp {
                                        fetchRegistrationMobileApp(form_id: ${formId}) {
                                            current_registration
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();
                        // 

                        if (result.data && result.data.fetchRegistrationMobileApp && result.data.fetchRegistrationMobileApp.current_registration) {
                            let currentRegData = result.data.fetchRegistrationMobileApp.current_registration;

                            // Parse if it's a string
                            if (typeof currentRegData === 'string') {
                                currentRegData = JSON.parse(currentRegData);
                            }

                            // 

                            // For single forms, the data structure should match the old format
                            // Find the form matching the selected form_id
                            let selectedForm = null;
                            if (Array.isArray(currentRegData)) {
                                selectedForm = currentRegData.find(reg =>
                                    reg.form && reg.form.form_id == formId
                                );
                            } else {
                                selectedForm = currentRegData;
                            }

                            if (selectedForm) {
                                // Fetch grades and school list for single form (pass leagueId)
                                const leagueId = selectedForm.form ? selectedForm.form.league_id : null;
                                if (leagueId) {
                                    await fetchGradeList(leagueId);
                                    await fetchSchoolList(leagueId);
                                } else {
                                    await fetchGradeList();
                                    await fetchSchoolList();
                                }
                                // Division list will be fetched dynamically when grade/gender are selected

                                console.log('Registration Form:', selectedForm);
                                await processFormData(selectedForm);
                            } else if (Array.isArray(currentRegData) && currentRegData.length > 0) {
                                console.log('Registration Form:', currentRegData[0]);
                                await processFormData(currentRegData[0]);
                            } else {
                                showFormError('Selected form not found');
                            }
                        } else {
                            if (result.errors) {
                                console.error('❌ GraphQL errors loading form:', result.errors);
                            } else {
                                console.error('❌ No registration form data received in response:', result);
                            }
                            showFormError('Unable to load registration data');
                        }

                    } catch (error) {
                        console.error('Error loading form by ID:', error);
                        showFormError('Error loading registration form');
                    }
                }

                // Process registration set data with the new structure
                async function processRegistrationSetData(regSetData) {
                    // 

                    // Build pages array from welcome_pages, parent_pages, children_pages
                    const allPages = [];

                    // Add welcome pages - only show the one(s) that have actual content
                    if (regSetData.welcome_pages && Array.isArray(regSetData.welcome_pages)) {
                        // If there are multiple welcome pages, filter to only those with content
                        let welcomePagesToAdd = regSetData.welcome_pages.map(page => {
                            // If welcome page has no fields, add a virtual field with the registration set description
                            let pageWithDescription = { ...page, page_type: 'welcome' };
                            if ((!page.fields || page.fields.length === 0) && regSetData.registration_set.description) {
                                pageWithDescription.fields = [{
                                    page_field_description: regSetData.registration_set.description
                                }];
                            }
                            return pageWithDescription;
                        });

                        // If multiple welcome pages, only keep those with page_field_description or form_field_description
                        // (welcome page renderer only shows descriptions, so pages without descriptions would appear empty)
                        if (welcomePagesToAdd.length > 1) {
                            welcomePagesToAdd = welcomePagesToAdd.filter(p => doesWelcomePageHaveDescription(p));
                        } else if (welcomePagesToAdd.length === 1 && !doesWelcomePageHaveContent(welcomePagesToAdd[0])) {
                            // Single welcome page with no content - skip it
                            welcomePagesToAdd = [];
                        }

                        // Sort welcome pages: those with page_field_description or form_field_description come first
                        welcomePagesToAdd.sort((a, b) => {
                            const aHasDesc = doesWelcomePageHaveDescription(a);
                            const bHasDesc = doesWelcomePageHaveDescription(b);
                            if (aHasDesc && !bHasDesc) return -1;
                            if (!aHasDesc && bHasDesc) return 1;
                            return 0;
                        });

                        welcomePagesToAdd.forEach(page => {
                            allPages.push(page);
                        });
                    }

                    // Add parent pages
                    if (regSetData.parent_pages && Array.isArray(regSetData.parent_pages)) {
                        regSetData.parent_pages.forEach(page => {
                            allPages.push({
                                ...page,
                                page_type: 'parent'
                            });
                        });
                    }

                    // Add children/player pages
                    if (regSetData.children_pages && Array.isArray(regSetData.children_pages)) {
                        regSetData.children_pages.forEach(page => {
                            allPages.push({
                                ...page,
                                page_type: 'children'
                            });
                        });
                    }

                    // Add custom pages from all forms
                    if (regSetData.custom_pages_by_form && Array.isArray(regSetData.custom_pages_by_form)) {
                        regSetData.custom_pages_by_form.forEach(formPages => {
                            if (formPages.pages && Array.isArray(formPages.pages)) {
                                formPages.pages.forEach(page => {
                                    // Only add if not already added (avoid duplicates by page_id)
                                    if (!allPages.some(p => p.page_id === page.page_id)) {
                                        allPages.push({
                                            ...page,
                                            page_type: 'custom',
                                            form_id: formPages.form_id,
                                            form_name: formPages.form_name,
                                            league_id: formPages.league_id,
                                            season_id: formPages.season_id,
                                            league_season_id: formPages.league_season_id
                                        });
                                    }
                                });
                            }
                        });
                    }

                    // Create a form object from registration_set data
                    const formData = {
                        form: {
                            form_id: regSetData.forms_info && regSetData.forms_info[0] ? regSetData.forms_info[0].form_id : regSetData.registration_set.id,
                            registration_set_id: regSetData.registration_set.id,
                            form_name: regSetData.registration_set.name,
                            form_description: regSetData.registration_set.description,
                            // Use first form's league_id and season_id if available
                            league_id: regSetData.forms_info && regSetData.forms_info[0] ? regSetData.forms_info[0].league_id : null,
                            season_id: regSetData.forms_info && regSetData.forms_info[0] ? regSetData.forms_info[0].season_id : null,
                            // Store all forms_info for potential multi-form handling
                            forms_info: regSetData.forms_info || []
                        },
                        pages: allPages
                    };

                    // Store registration set info globally for later use
                    window.currentRegistrationSet = regSetData;

                    // Mark this as a registration set and store available form IDs
                    isRegistrationSet = true;
                    availableFormIds = (regSetData.forms_info || []).map(f => f.form_id);

                    // Process the form data using the existing function
                    processFormData(formData);
                }

                // Process registration set data with the NEW API format (registration_set_id, first_form, available_forms, default_pages, custom_pages_by_form)
                async function processRegistrationSetNewFormat(regSetData, registrationSetId) {
                    isRegistrationSet = true; // Mark as registration set immediately
                    // 

                    // Parse JSON strings if needed
                    let firstForm = regSetData.first_form;
                    let availableForms = regSetData.available_forms;
                    let criteriaAvailableForms = regSetData.criteria_available_forms;
                    let defaultPages = regSetData.default_pages;
                    let customPagesByForm = regSetData.custom_pages_by_form;
                    let formDefaultPages = regSetData.form_default_pages;
                    let globalPageData = regSetData.global_page;

                    if (typeof firstForm === 'string') {
                        try { firstForm = JSON.parse(firstForm); } catch (e) { firstForm = null; }
                    }
                    if (typeof availableForms === 'string') {
                        try { availableForms = JSON.parse(availableForms); } catch (e) { availableForms = []; }
                    }
                    if (typeof criteriaAvailableForms === 'string') {
                        try { criteriaAvailableForms = JSON.parse(criteriaAvailableForms); } catch (e) { criteriaAvailableForms = []; }
                    }
                    window.criteriaAvailableForms = criteriaAvailableForms || [];

                    if (typeof defaultPages === 'string') {
                        try { defaultPages = JSON.parse(defaultPages); } catch (e) { defaultPages = {}; }
                    }
                    if (typeof customPagesByForm === 'string') {
                        try { customPagesByForm = JSON.parse(customPagesByForm); } catch (e) { customPagesByForm = []; }
                    }
                    if (typeof formDefaultPages === 'string') {
                        try { formDefaultPages = JSON.parse(formDefaultPages); } catch (e) { formDefaultPages = {}; }
                    }
                    if (typeof globalPageData === 'string') {
                        try { globalPageData = JSON.parse(globalPageData); } catch (e) { globalPageData = []; }
                    }
                    window.globalPageData = globalPageData;

                    // 

                    // ── Build field mapping across all forms for remapping at submit time ──
                    // Each form in the registration set has its own field_ids for the same logical fields
                    // (e.g. "first_name" might be field_id 101 in L1S1 but field_id 201 in L1S2).
                    // We map form_field_name → field_id per form so at submit time we can translate.
                    // ── Build field mapping across all forms for remapping at submit time ──
                    // Each form in the registration set has its own field_ids for the same logical fields
                    // (e.g. "first_name" might be field_id 101 in L1S1 but field_id 201 in L1S2).
                    // This mapping is now handled exclusively by buildRegistrationSetFieldMappings()
                    // which runs in the background to build the nested formId -> pageType -> fieldName -> fieldId map.

                    // Build pages array from default_pages (object with welcome_pages, parent_pages, player_pages, summary_pages, payment_pages)
                    const allPages = [];
                    const seenPageNames = new Set(); // For deduplication by page name

                    // Helper function to add default pages with deduplication by normalized key/type
                    const addPagesWithDedup = (pages, pageType) => {
                        if (pages && Array.isArray(pages)) {
                            pages.forEach(page => {
                                const pageKey = getPageDedupKey(page);
                                if (pageKey) {
                                    if (!seenPageNames.has(pageKey)) {
                                        seenPageNames.add(pageKey);
                                        allPages.push({
                                            ...page,
                                            page_type: pageType
                                        });
                                    }
                                } else {
                                    allPages.push({
                                        ...page,
                                        page_type: pageType
                                    });
                                }
                            });
                        }
                    };

                    // Add welcome pages - only show the one(s) with actual field data/description
                    if (defaultPages && defaultPages.welcome_pages) {
                        let welcomePages = defaultPages.welcome_pages;
                        if (Array.isArray(welcomePages) && welcomePages.length > 1) {
                            // Multiple welcome pages: only keep those with page_field_description or form_field_description
                            // (welcome page renderer only shows descriptions, so pages without descriptions would appear empty)
                            welcomePages = welcomePages.filter(p => doesWelcomePageHaveDescription(p));
                            // Sort: pages with page_field_description or form_field_description come first
                            welcomePages.sort((a, b) => {
                                const aHasDesc = doesWelcomePageHaveDescription(a);
                                const bHasDesc = doesWelcomePageHaveDescription(b);
                                if (aHasDesc && !bHasDesc) return -1;
                                if (!aHasDesc && bHasDesc) return 1;
                                return 0;
                            });
                        } else if (Array.isArray(welcomePages) && welcomePages.length === 1 && !doesWelcomePageHaveContent(welcomePages[0])) {
                            // Single welcome page with no content - skip it
                            welcomePages = [];
                        }
                        addPagesWithDedup(welcomePages, 'welcome');
                    }

                    // Add parent pages
                    if (defaultPages && defaultPages.parent_pages) {
                        addPagesWithDedup(defaultPages.parent_pages, 'parent');
                    }

                    // Add player/children pages
                    if (defaultPages && defaultPages.player_pages) {
                        addPagesWithDedup(defaultPages.player_pages, 'children');
                    }

                    // Add summary pages
                    if (defaultPages && defaultPages.summary_pages) {
                        addPagesWithDedup(defaultPages.summary_pages, 'summary');
                    }

                    // Add payment pages (only first one to avoid duplicates)
                    if (defaultPages && defaultPages.payment_pages) {
                        addPagesWithDedup(defaultPages.payment_pages, 'payment');
                    }

                    // Add custom pages from all forms (using custom_pages field)
                    // Do NOT eliminate or hide duplicate custom pages for forms in the set
                    if (customPagesByForm && Array.isArray(customPagesByForm)) {
                        customPagesByForm.forEach(formPages => {
                            if (formPages.custom_pages && Array.isArray(formPages.custom_pages)) {
                                formPages.custom_pages.forEach(page => {
                                    // Skip empty or placeholder pages
                                    if (isPageEffectivelyEmpty(page)) return;

                                    allPages.push({
                                        ...page,
                                        page_type: 'custom',
                                        form_id: formPages.form_id,
                                        form_name: formPages.form_name,
                                        league_id: formPages.league_id,
                                        season_id: formPages.season_id,
                                        set_sort_order: formPages.set_sort_order
                                    });
                                });
                            }
                        });
                    }

                    // Add global pages from registration set data
                    const seenGlobalPageIds = new Set();
                    if (globalPageData && Array.isArray(globalPageData)) {
                        globalPageData.forEach(page => {
                            if (isPageEffectivelyEmpty(page)) return;
                            const globalKey = page.page_id || (page.name || '').toLowerCase().trim();
                            if (!seenGlobalPageIds.has(globalKey)) {
                                seenGlobalPageIds.add(globalKey);
                                allPages.push({
                                    ...page,
                                    page_type: 'global',
                                    is_global: true,
                                    form_id: 'global'
                                });
                            }
                        });
                    }

                    // Get form info from first_form or available_forms
                    const formInfo = firstForm || (availableForms && availableForms.length > 0 ? availableForms[0] : null);

                    // Track which form's field IDs the UI is currently displaying (first form)
                    // All player/parent field data collected in the UI uses this form's field_ids
                    window.sourceFormId = formInfo ? parseInt(formInfo.form_id) : null;
                    // console.log('📌 Source Form ID (UI fields from):', window.sourceFormId);

                    // Create form object
                    const formData = {
                        form: {
                            form_id: formInfo ? formInfo.form_id : registrationSetId,
                            registration_set_id: regSetData.registration_set_id || registrationSetId,
                            form_name: formInfo ? formInfo.form_name : 'Registration',
                            form_description: formInfo ? formInfo.form_description : '',
                            league_id: formInfo ? formInfo.league_id : null,
                            season_id: formInfo ? formInfo.season_id : null,
                            // Store all available forms
                            available_forms: availableForms || []
                        },
                        pages: allPages
                    };

                    // 
                    // 

                    // Store registration set info globally for later use
                    window.currentRegistrationSet = regSetData;
                    window.availableForms = availableForms || [];

                    // Mark this as a registration set and store available form IDs
                    isRegistrationSet = true;
                    availableFormIds = (availableForms || []).map(f => f.form_id);

                    // Process the form data using the existing function
                    await processFormData(formData);

                    // Ensure dynamic pages are updated immediately
                    setTimeout(() => {
                        if (typeof updateDynamicCustomPages === 'function') {
                            updateDynamicCustomPages();
                        }
                    }, 500);
                }

                // Fetch parent data for pre-populating form fields
                async function fetchParentData(formId) {
                    try {
                        // 

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchParentData {
                                        fetchParentData(form_id: ${formId ? formId : null}) {
                                            form_id
                                            page_id
                                            players {
                                                player_id
                                                registration_id
                                                form_id
                                                first_name
                                                last_name
                                            }
                                            registration_id
                                            has_two_parents
                                            parent1_name
                                            parent2_name
                                            parent_id1
                                            parent_id2
                                            fields {
                                                field_id
                                                label
                                                value
                                            }
                                            parent1_fields {
                                                field_id
                                                label
                                                value
                                            }
                                            parent2_fields {
                                                field_id
                                                label
                                                value
                                            }
                                        }
                                    }`
                            })
                        });

                        const parentResult = await response.json();
                        // 

                        if (parentResult.data && parentResult.data.fetchParentData) {
                            const parentData = parentResult.data.fetchParentData;
                            window.globalParentRegistrationId = parentData.registration_id;

                            // Store dual-parent state
                            hasTwoParents = parentData.has_two_parents || false;
                            parent1Name = parentData.parent1_name || null;
                            parent2Name = parentData.parent2_name || null;
                            parentId1 = parentData.parent_id1 || null;
                            parentId2 = parentData.parent_id2 || null;
                            parent1FieldsRaw = parentData.parent1_fields || [];
                            parent2FieldsRaw = parentData.parent2_fields || [];
                            activeParentNumber = 1;

                            const registrations = Array.isArray(parentData) ? parentData : [parentData];

                            registrations.forEach((registration, regIndex) => {
                                if (registration.players && Array.isArray(registration.players)) {
                                    registration.players.forEach(player => {
                                        if (!playersList.some(p => p.player_id === player.player_id)) {
                                            playersList.push(player);
                                        }
                                    });
                                }

                                // Populate fieldValues from parent1_fields (default active parent)
                                const fieldsToUse = (registration.parent1_fields && registration.parent1_fields.length > 0) ? registration.parent1_fields : (registration.fields || []);
                                if (fieldsToUse && Array.isArray(fieldsToUse)) {
                                    fieldsToUse.forEach(field => {
                                        if (field.value !== null && field.value !== undefined) {
                                            const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                            if (cleanVal !== '') {
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    fieldValues[normalizedLabel] = cleanVal;
                                                }
                                                if (field.field_id) {
                                                    fieldValues[`id_${field.field_id}`] = cleanVal;
                                                }
                                            }
                                        }
                                    });
                                }

                                // Store parent2 field values separately
                                if (registration.parent2_fields && Array.isArray(registration.parent2_fields)) {
                                    registration.parent2_fields.forEach(field => {
                                        if (field.value !== null && field.value !== undefined) {
                                            const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                            if (cleanVal !== '') {
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    parent2FieldValues[normalizedLabel] = cleanVal;
                                                }
                                                if (field.field_id) {
                                                    parent2FieldValues[`id_${field.field_id}`] = cleanVal;
                                                }
                                            }
                                        }
                                    });
                                }
                            });

                            // Fallback: If no parent field values were found for current formId, retrieve parent field values from previous registration or generic parent data
                            if (Object.keys(fieldValues).length === 0) {
                                let fallbackFormId = null;
                                if (typeof playersList !== 'undefined' && playersList.length > 0) {
                                    const prevPlayer = playersList.find(p => p.form_id && p.form_id != formId);
                                    if (prevPlayer) {
                                        fallbackFormId = prevPlayer.form_id;
                                    }
                                }
                                try {
                                    const fetchOrg = typeof authOrganisation !== 'undefined' ? authOrganisation : (typeof organisation !== 'undefined' ? organisation : '');
                                    const fetchTok = typeof authToken !== 'undefined' ? authToken : (typeof token !== 'undefined' ? token : '');
                                    
                                    let fbResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-Organisation': fetchOrg,
                                            'X-Token': fetchTok,
                                        },
                                        body: JSON.stringify({
                                            query: `query FetchParentDataFallback {
                                                    fetchParentData(form_id: ${fallbackFormId ? fallbackFormId : null}) {
                                                        fields { field_id label value }
                                                        parent1_fields { field_id label value }
                                                        parent2_fields { field_id label value }
                                                    }
                                                }`
                                        })
                                    });
                                    let fbResult = await fbResponse.json();
                                    
                                    if ((!fbResult.data || !fbResult.data.fetchParentData || 
                                         ((!fbResult.data.fetchParentData.parent1_fields || fbResult.data.fetchParentData.parent1_fields.length === 0) &&
                                          (!fbResult.data.fetchParentData.fields || fbResult.data.fetchParentData.fields.length === 0))) &&
                                        fallbackFormId !== null) {
                                        fbResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-Organisation': fetchOrg,
                                                'X-Token': fetchTok,
                                            },
                                            body: JSON.stringify({
                                                query: `query FetchParentDataFallbackNull {
                                                        fetchParentData(form_id: null) {
                                                            fields { field_id label value }
                                                            parent1_fields { field_id label value }
                                                            parent2_fields { field_id label value }
                                                        }
                                                    }`
                                            })
                                        });
                                        fbResult = await fbResponse.json();
                                    }

                                    if (fbResult.data && fbResult.data.fetchParentData) {
                                        const fbData = fbResult.data.fetchParentData;
                                        if (fbData.parent1_fields && fbData.parent1_fields.length > 0) {
                                            parent1FieldsRaw = fbData.parent1_fields;
                                        }
                                        if (fbData.parent2_fields && fbData.parent2_fields.length > 0) {
                                            parent2FieldsRaw = fbData.parent2_fields;
                                        }
                                        const fbFieldsToUse = (fbData.parent1_fields && fbData.parent1_fields.length > 0) ? fbData.parent1_fields : (fbData.fields || []);
                                        if (fbFieldsToUse && Array.isArray(fbFieldsToUse)) {
                                            fbFieldsToUse.forEach(field => {
                                                if (field.label && field.value !== null && field.value !== undefined) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    fieldValues[normalizedLabel] = field.value;
                                                    if (field.field_id) {
                                                        fieldValues[`id_${field.field_id}`] = field.value;
                                                    }
                                                }
                                            });
                                        }
                                        if (fbData.parent2_fields && Array.isArray(fbData.parent2_fields)) {
                                            fbData.parent2_fields.forEach(field => {
                                                if (field.value !== null && field.value !== undefined) {
                                                    if (field.label) {
                                                        const normalizedLabel = field.label.toLowerCase().trim();
                                                        parent2FieldValues[normalizedLabel] = field.value;
                                                    }
                                                    if (field.field_id) {
                                                        parent2FieldValues[`id_${field.field_id}`] = field.value;
                                                    }
                                                }
                                            });
                                        }
                                    }
                                } catch (fbErr) {
                                    console.error('Error fetching fallback parent data:', fbErr);
                                }
                            }

                            // Fallback: construct parent1Name from fieldValues if API didn't provide it
                            if (!parent1Name && Object.keys(fieldValues).length > 0) {
                                const pFirstName = (fieldValues['first name'] || fieldValues['firstname'] || '').trim();
                                const pLastName = (fieldValues['last name'] || fieldValues['lastname'] || '').trim();
                                if (pFirstName || pLastName) {
                                    parent1Name = `${pFirstName} ${pLastName}`.trim();
                                    console.log(`📛 Constructed parent1Name from fieldValues: "${parent1Name}"`);
                                }
                            }

                            if (Object.keys(parent2FieldValues).length > 0 || (parent2FieldsRaw && parent2FieldsRaw.length > 0)) {
                                hasTwoParents = true;
                            }

                            // Fallback: construct parent2Name from parent2FieldValues if API didn't provide it
                            if (!parent2Name && Object.keys(parent2FieldValues).length > 0) {
                                const p2FirstName = (parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '').trim();
                                const p2LastName = (parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '').trim();
                                if (p2FirstName || p2LastName) {
                                    parent2Name = `${p2FirstName} ${p2LastName}`.trim();
                                    hasTwoParents = true;
                                    console.log(`📛 Constructed parent2Name from parent2FieldValues: "${parent2Name}"`);
                                }
                            }

                            if (hasTwoParents) {
                                console.log(`👨‍👩‍👧 Two parents detected: "${parent1Name}" & "${parent2Name}"`);
                            }

                            // Auto-select first player by default if players exist and none selected
                            if (!currentlyEditingPlayerId && playersList.length > 0 && !isAdultLeaguePlayer) {
                                const firstPlayer = playersList[0];
                                const firstPlayerName = `${firstPlayer.first_name || ''} ${firstPlayer.last_name || ''}`.trim() || 'Player';
                                console.log(`🔄 Auto-selecting first player ${firstPlayer.player_id} (${firstPlayerName}) on load`);
                                onPlayerSelect(firstPlayer.player_id, firstPlayerName, true);
                            }
                        }

                        // Local players storage logic has been removed as per requirement


                    } catch (error) {
                        console.error('Error fetching parent data:', error);
                    }
                }

                // Fetch registration set data for pre-populating form fields (for 'sets' type forms)
                // Now using FetchParentSetData API
                async function fetchRegistrationSetData(registrationSetId) {
                    try {


                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchParentSetData {
                                        fetchParentSetData {
                                            registration_sets {
                                                registration_set_id
                                                registration_set_name
                                                forms {
                                                    form_id
                                                    form_name
                                                }
                                                parent_registration {
                                                    registration_id
                                                    form_id
                                                    page_id
                                                    has_two_parents
                                                    parent1_name
                                                    parent2_name
                                                    parent_id1
                                                    parent_id2
                                                    fields {
                                                        field_id
                                                        label
                                                        value
                                                    }
                                                    parent1_fields {
                                                        field_id
                                                        label
                                                        value
                                                    }
                                                    parent2_fields {
                                                        field_id
                                                        label
                                                        value
                                                    }
                                                }
                                                players {
                                                    player_id
                                                    registration_id
                                                    form_id
                                                    first_name
                                                    last_name
                                                }
                                            }
                                        }
                                    }`
                            })
                        });

                        const result = await response.json();


                        if (result.data && result.data.fetchParentSetData && result.data.fetchParentSetData.registration_sets) {
                            const registrationSets = result.data.fetchParentSetData.registration_sets;


                            // Find the registration set matching the provided registrationSetId
                            const matchingSet = registrationSets.find(set => set.registration_set_id == registrationSetId);

                            if (matchingSet) {


                                // Log forms info if available
                                if (matchingSet.forms && Array.isArray(matchingSet.forms)) {

                                }

                                // Extract players list for the Player accordion
                                if (matchingSet.players && Array.isArray(matchingSet.players)) {

                                    matchingSet.players.forEach(player => {
                                        // Check if player already exists in list (by player_id)
                                        if (!playersList.some(p => p.player_id == player.player_id)) {
                                            playersList.push({
                                                player_id: parseInt(player.player_id),
                                                registration_id: player.registration_id,
                                                form_id: player.form_id,
                                                first_name: player.first_name,
                                                last_name: player.last_name
                                            });

                                        }
                                    });
                                }



                                // Extract parent registration data for pre-populating Parent accordion fields
                                if (matchingSet.parent_registration) {
                                    const parentReg = matchingSet.parent_registration;

                                    // Store dual-parent state from set data
                                    hasTwoParents = parentReg.has_two_parents || false;
                                    parent1Name = parentReg.parent1_name || null;
                                    parent2Name = parentReg.parent2_name || null;
                                    parentId1 = parentReg.parent_id1 || null;
                                    parentId2 = parentReg.parent_id2 || null;
                                    parent1FieldsRaw = parentReg.parent1_fields || [];
                                    parent2FieldsRaw = parentReg.parent2_fields || [];
                                    activeParentNumber = 1;

                                    // Use parent1_fields (or fallback to fields) for pre-population
                                    const fieldsToUse = (parentReg.parent1_fields && parentReg.parent1_fields.length > 0) ? parentReg.parent1_fields : (parentReg.fields || []);
                                    if (fieldsToUse && Array.isArray(fieldsToUse)) {
                                        fieldsToUse.forEach(field => {
                                            if (field.value !== null && field.value !== undefined) {
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    fieldValues[normalizedLabel] = field.value;
                                                }
                                                if (field.field_id) {
                                                    fieldValues[`id_${field.field_id}`] = field.value;
                                                }
                                            }
                                        });
                                    }

                                    // Store parent2 field values separately
                                    if (parentReg.parent2_fields && Array.isArray(parentReg.parent2_fields)) {
                                        parentReg.parent2_fields.forEach(field => {
                                            if (field.value !== null && field.value !== undefined) {
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    parent2FieldValues[normalizedLabel] = field.value;
                                                }
                                                if (field.field_id) {
                                                    parent2FieldValues[`id_${field.field_id}`] = field.value;
                                                }
                                            }
                                        });
                                    }

                                    // Fallback: construct parent1Name from fieldValues if API didn't provide it
                                    if (!parent1Name && Object.keys(fieldValues).length > 0) {
                                        const pFirstName = (fieldValues['first name'] || fieldValues['firstname'] || '').trim();
                                        const pLastName = (fieldValues['last name'] || fieldValues['lastname'] || '').trim();
                                        if (pFirstName || pLastName) {
                                            parent1Name = `${pFirstName} ${pLastName}`.trim();
                                            console.log(`📛 Constructed parent1Name from fieldValues: "${parent1Name}"`);
                                        }
                                    }

                                    if (Object.keys(parent2FieldValues).length > 0 || (parent2FieldsRaw && parent2FieldsRaw.length > 0)) {
                                        hasTwoParents = true;
                                    }

                                    // Fallback: construct parent2Name from parent2FieldValues if API didn't provide it
                                    if (!parent2Name && Object.keys(parent2FieldValues).length > 0) {
                                        const p2FirstName = (parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '').trim();
                                        const p2LastName = (parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '').trim();
                                        if (p2FirstName || p2LastName) {
                                            parent2Name = `${p2FirstName} ${p2LastName}`.trim();
                                            hasTwoParents = true;
                                            console.log(`📛 Constructed parent2Name from parent2FieldValues: "${parent2Name}"`);
                                        }
                                    }

                                    if (hasTwoParents) {
                                        console.log(`👨‍👩‍👧 Two parents detected in set data: "${parent1Name}" & "${parent2Name}"`);
                                    }

                                    // Auto-select first player by default if players exist and none selected
                                    if (!currentlyEditingPlayerId && playersList.length > 0 && !isAdultLeaguePlayer) {
                                        const firstPlayer = playersList[0];
                                        const firstPlayerName = `${firstPlayer.first_name || ''} ${firstPlayer.last_name || ''}`.trim() || 'Player';
                                        console.log(`🔄 Auto-selecting first player ${firstPlayer.player_id} (${firstPlayerName}) in set data load`);
                                        onPlayerSelect(firstPlayer.player_id, firstPlayerName, true);
                                    }
                                }



                            } else {

                                // Try to use the first registration set if available
                                if (registrationSets.length > 0) {
                                    const firstSet = registrationSets[0];


                                    // Extract players list
                                    if (firstSet.players && Array.isArray(firstSet.players)) {
                                        firstSet.players.forEach(player => {
                                            if (!playersList.some(p => p.player_id == player.player_id)) {
                                                playersList.push({
                                                    player_id: parseInt(player.player_id),
                                                    registration_id: player.registration_id,
                                                    form_id: player.form_id,
                                                    first_name: player.first_name,
                                                    last_name: player.last_name
                                                });
                                            }
                                        });
                                    }

                                    // Extract parent registration data for pre-population
                                    if (firstSet.parent_registration) {
                                        const parentReg = firstSet.parent_registration;
                                        if (parentReg.fields && Array.isArray(parentReg.fields)) {
                                            parentReg.fields.forEach(field => {
                                                if (field.value !== null && field.value !== undefined) {
                                                    if (field.label) {
                                                        const normalizedLabel = field.label.toLowerCase().trim();
                                                        fieldValues[normalizedLabel] = field.value;
                                                    }
                                                    if (field.field_id) {
                                                        fieldValues[`id_${field.field_id}`] = field.value;
                                                    }
                                                }
                                            });
                                        }
                                    }
                                }
                            }
                        }

                    } catch (error) {
                        console.error('Error fetching parent set data:', error);
                    }
                }

                // Show form error
                function showFormError(message) {
                    document.getElementById('loading-state').innerHTML = `
                            <div class="text-red-600">
                                <i class="fa-solid fa-exclamation-triangle text-4xl mb-4"></i>
                                <p class="font-semibold">${message}</p>
                                <p class="text-sm mt-2">Please try again later</p>
                            </div>
                        `;
                }

                // Handle form selection from dropdown
                function handleFormSelection(event) {
                    const selectedValue = event.target.value;

                    if (!selectedValue) {
                        return;
                    }

                    try {
                        const { id, type, league_type } = JSON.parse(selectedValue);

                        // Build URL with league_type parameter
                        const leagueTypeParam = league_type ? `&league_type=${league_type}` : '';

                        const targetRoute = window.location.pathname.includes('registration-form') ? 'registration-form' : 'registrations';
                        // Navigate with appropriate URL parameter based on type
                        if (type === 'single') {
                            // Single form uses form_id
                            window.location.href = `${window.APP_PREFIX || '/user-dashboard'}/${targetRoute}?form_id=${id}${leagueTypeParam}`;
                        } else {
                            // Registration set uses registration_set_id
                            window.location.href = `${window.APP_PREFIX || '/user-dashboard'}/${targetRoute}?registration_set_id=${id}${leagueTypeParam}`;
                        }
                    } catch (e) {
                        const targetRoute = window.location.pathname.includes('registration-form') ? 'registration-form' : 'registrations';
                        // Fallback: treat as registration_set_id
                        window.location.href = `${window.APP_PREFIX || '/user-dashboard'}/${targetRoute}?registration_set_id=${selectedValue}`;
                    }
                }

                async function updateFormHeaderLeagueSeasonInfo(formObj) {
                    const infoEl = document.getElementById('form-subtitle-info');
                    if (!infoEl) return;
                    if (!formObj) {
                        infoEl.classList.add('hidden');
                        return;
                    }

                    let leagueName = formObj.league_name || formObj.league_title || formObj.league || '';
                    let seasonName = formObj.season_name || formObj.season_title || formObj.season_desc || formObj.season || '';
                    let yearId = formObj.year_id || formObj.season_year_id || formObj.year || '';

                    if ((!leagueName || !seasonName) && formObj.forms_info && Array.isArray(formObj.forms_info) && formObj.forms_info.length > 0) {
                        const firstForm = formObj.forms_info[0];
                        if (!leagueName) leagueName = firstForm.league_name || firstForm.league || '';
                        if (!seasonName) seasonName = firstForm.season_name || firstForm.season_desc || firstForm.season || '';
                        if (!yearId) yearId = firstForm.year_id || firstForm.season_year_id || firstForm.year || '';
                    }

                    const leagueId = formObj.league_id || (formObj.forms_info && formObj.forms_info[0] ? formObj.forms_info[0].league_id : null);
                    const seasonId = formObj.season_id || (formObj.forms_info && formObj.forms_info[0] ? formObj.forms_info[0].season_id : null);

                    if ((!leagueName && leagueId) || (!seasonName && seasonId) || (!yearId && seasonId)) {
                        if (!window.allLeaguesData) {
                            try {
                                const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-Organisation': typeof authOrganisation !== 'undefined' ? authOrganisation : (typeof organisation !== 'undefined' ? organisation : ''),
                                        'X-Token': typeof authToken !== 'undefined' ? authToken : (typeof token !== 'undefined' ? token : ''),
                                    },
                                    body: JSON.stringify({
                                        query: `query FetchAllLeaguesAndSeasons {
                                            fetchAllLeaguesAndSeasons {
                                                leagues {
                                                    id
                                                    name
                                                    seasons {
                                                        id
                                                        season_desc
                                                        year_id
                                                    }
                                                }
                                            }
                                        }`
                                    })
                                });
                                const resJson = await response.json();
                                if (resJson.data && resJson.data.fetchAllLeaguesAndSeasons) {
                                    window.allLeaguesData = resJson.data.fetchAllLeaguesAndSeasons.leagues || [];
                                }
                            } catch (err) {
                                console.warn('Could not fetch leagues for header info:', err);
                            }
                        }

                        if (window.allLeaguesData) {
                            if (!leagueName && leagueId) {
                                const foundLeague = window.allLeaguesData.find(l => String(l.id) === String(leagueId));
                                if (foundLeague && foundLeague.name) {
                                    leagueName = foundLeague.name;
                                }
                            }
                            if (seasonId) {
                                for (const l of window.allLeaguesData) {
                                    if (l.seasons && Array.isArray(l.seasons)) {
                                        const foundSeason = l.seasons.find(s => String(s.id) === String(seasonId));
                                        if (foundSeason) {
                                            if (!seasonName) seasonName = foundSeason.season_desc || `Season ${foundSeason.id}`;
                                            if (!yearId && foundSeason.year_id) yearId = foundSeason.year_id;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    if (!leagueName && leagueId) leagueName = `League ${leagueId}`;
                    if (!seasonName && seasonId) seasonName = `Season ${seasonId}`;

                    if (yearId && seasonName && !seasonName.toString().includes(String(yearId))) {
                        seasonName = `${seasonName} ${yearId}`;
                    }

                    const parts = [];
                    if (leagueName) parts.push(`League: ${leagueName}`);
                    if (seasonName) parts.push(`Season: ${seasonName}`);

                    if (parts.length > 0) {
                        infoEl.textContent = parts.join(' | ');
                        infoEl.classList.remove('hidden');
                    } else {
                        infoEl.textContent = '';
                        infoEl.classList.add('hidden');
                    }
                }

                async function processFormData(formData) {
                    const data = {
                        form: formData.form,
                        pages: Array.isArray(formData.pages) ? [...formData.pages] : []
                    };

                    // Merge custom_pages from formData if present and not already in data.pages
                    if (formData.custom_pages && Array.isArray(formData.custom_pages)) {
                        formData.custom_pages.forEach(cp => {
                            if (!data.pages.some(p => p.page_id == cp.page_id || ((p.name || '').toLowerCase().trim() === (cp.name || '').toLowerCase().trim()))) {
                                data.pages.push(cp);
                            }
                        });
                    }

                    // Proactive check for already registered player removed

                    // Reset all global page tracking variables to prevent stale checks
                    allPagesMap = {};
                    playerPages = {};
                    parentPages = {};
                    allPagesIncludingHidden = [];

                    // Store current form globally
                    currentForm = data.form;

                    // Initialize collected data with form_id, registration_set_id, and parent_id at the top
                    collectedRegistrationData = {
                        form_id: data.form.form_id,
                        registration_set_id: data.form.registration_set_id || data.form.form_id, // New API uses registration_set_id
                        parent_id: globalParentId
                    };

                    // Update form title
                    document.getElementById('form-title').textContent = `Welcome to ${data.form.form_name} Registration`;
                    updateFormHeaderLeagueSeasonInfo(data.form);

                    // Define default page types that should always be shown
                    const defaultPageNames = ['welcome', 'parent', 'parents', 'player', 'players', 'children', 'summary', 'payment'];

                    // Deduplicate custom page fields in incoming pages to prevent duplicate fields
                    if (Array.isArray(data.pages)) {
                        data.pages.forEach(page => {
                            const pNameLower = (page.name || '').toLowerCase().trim();
                            const isDefault = defaultPageNames.includes(pNameLower) || page.type === 'welcome';
                            if (!isDefault && Array.isArray(page.fields)) {
                                page.fields = deduplicatePageFields(page.fields, true);
                            }
                        });
                    }

                    // For registration sets, separate custom pages from default pages
                    if (isRegistrationSet) {
                        // Reset custom pages storage
                        customPagesByFormId = {};
                        allPagesIncludingHidden = [];
                        playerFormSelections = {};

                        // Store all pages including hidden custom pages
                        data.pages.forEach(page => {
                            allPagesIncludingHidden.push(page);

                            // If this is a custom page (has page_type === 'custom' or form_id), store by form_id
                            if (page.page_type === 'custom' && page.form_id) {
                                // Skip empty or placeholder custom pages
                                if (isPageEffectivelyEmpty(page)) return;

                                if (!customPagesByFormId[page.form_id]) {
                                    customPagesByFormId[page.form_id] = [];
                                }
                                customPagesByFormId[page.form_id].push(page);
                            }
                        });

                    }

                    // Sort pages by sort_order, but move Summary and Payment to the end
                    // Filter visible pages (display = 0 or 1 means show, 2 or anything else means hidden)
                    // Also deduplicate pages by name to prevent duplicates (like Payment appearing twice)
                    const seenPageNames = new Set();
                    const sortedPages = data.pages
                        .filter(p => {
                            const pName = (p.name || '').toLowerCase().trim();
                            // FORCE Summary and Payment/Payments pages to show regardless of display status
                            if (pName === 'summary' || pName === 'payment' || pName === 'payments') return true;
                            return p.display !== 2 && p.display !== '2' && String(p.display) !== 'false';
                        })
                        .filter(p => {
                            const pageName = (p.name || '').toLowerCase().trim();
                            const isDefaultPage = defaultPageNames.includes(pageName);

                            // For Welcome pages: when multiple exist, only keep those with page_field_description
                            if (pageName === 'welcome') {
                                const allWelcomePages = data.pages.filter(wp => (wp.name || '').toLowerCase().trim() === 'welcome' && (wp.display !== 2 && wp.display !== '2' && String(wp.display) !== 'false'));
                                if (allWelcomePages.length > 1 && !doesWelcomePageHaveDescription(p)) {
                                    return false; // Skip welcome pages without page_field_description when multiple exist
                                }
                                if (allWelcomePages.length === 1 && !doesWelcomePageHaveContent(p)) {
                                    return false; // Skip single welcome page with no content
                                }
                            }

                            // Skip empty or placeholder pages
                            if (!isDefaultPage && isPageEffectivelyEmpty(p)) {
                                return false;
                            }

                            // For registration sets, only show default pages initially (hide custom and global pages, rendered dynamically)
                            if (isRegistrationSet && !isDefaultPage && (p.page_type === 'custom' || p.type === 'custom' || p.page_type === 'global' || p.type === 'global' || p.is_global)) {
                                return false;
                            }
                            return true;
                        })
                        .filter(p => {
                            // Deduplicate by normalized page key/type to prevent duplicate accordions (e.g. parent vs Parents)
                            const pageKey = getPageDedupKey(p);
                            if (seenPageNames.has(pageKey)) {
                                return false;
                            }
                            seenPageNames.add(pageKey);
                            return true;
                        })
                        .sort((a, b) => {
                            // Move Summary and Payment pages to the very end
                            const aLower = (a.name || '').toLowerCase();
                            const bLower = (b.name || '').toLowerCase();
                            const aIsSummary = aLower === 'summary';
                            const bIsSummary = bLower === 'summary';
                            const aIsPayment = aLower === 'payment';
                            const bIsPayment = bLower === 'payment';

                            if (aIsPayment && !bIsPayment) return 1;
                            if (!aIsPayment && bIsPayment) return -1;
                            if (aIsSummary && !bIsSummary) {
                                return bIsPayment ? -1 : 1;
                            }
                            if (!aIsSummary && bIsSummary) {
                                return aIsPayment ? 1 : -1;
                            }

                            // Welcome pages with description should appear at the very top (first position)
                            const aIsWelcome = aLower === 'welcome';
                            const bIsWelcome = bLower === 'welcome';
                            if (aIsWelcome && !bIsWelcome) return -1;  // Welcome goes before non-welcome
                            if (!aIsWelcome && bIsWelcome) return 1;   // Non-welcome goes after welcome
                            if (aIsWelcome && bIsWelcome) {
                                // Among multiple welcome pages, prioritize the one with description
                                const aHasDesc = doesWelcomePageHaveDescription(a);
                                const bHasDesc = doesWelcomePageHaveDescription(b);
                                if (aHasDesc && !bHasDesc) return -1;
                                if (!aHasDesc && bHasDesc) return 1;
                            }

                            // Move global pages (type === 'global' or season_type === -99) to the bottom (but before Summary/Payment)
                            const aIsGlobal = a.type === 'global' || a.season_type === -99;
                            const bIsGlobal = b.type === 'global' || b.season_type === -99;

                            if (aIsGlobal && !bIsGlobal) return 1;
                            if (!aIsGlobal && bIsGlobal) return -1;

                            // Otherwise sort by sort_order
                            return (a.sort_order || 0) - (b.sort_order || 0);
                        });

                    // Render pages
                    let pagesHtml = '';
                    let customPagesContainerAdded = false;
                    let virtualSummaryAdded = false;

                    const renderVirtualSummary = (index) => {
                        if (virtualSummaryAdded) return;
                        // For registration sets: insert dynamic-custom-pages-container BEFORE the virtual summary page if not yet added
                        if (isRegistrationSet && !customPagesContainerAdded) {
                            pagesHtml += '<div id="dynamic-custom-pages-container" class="hidden space-y-6"></div>';
                            customPagesContainerAdded = true;
                        }
                        pagesHtml += renderPage({
                            page_id: 'virtual-summary',
                            name: 'Summary',
                            display: 1,
                            fields: [],
                            sort_order: 9999
                        }, index);
                        virtualSummaryAdded = true;
                    };

                    sortedPages.forEach((page, index) => {
                        // Store in global map
                        allPagesMap[page.page_id] = page;

                        // Normalize page name (e.g. "parent" -> "Parent", "player" -> "Player", "children" -> "Player")
                        if (page.name) {
                            page.name = normalizePageTitle(page.name);
                        }

                        // For registration sets: Insert custom pages container BEFORE Summary/Payment
                        const pageName = (page.name || '').toLowerCase().trim();

                        // If this is the Payment page, and we need a virtual Summary page but haven't added it yet,
                        // we MUST render the virtual Summary page BEFORE the Payment page!
                        if (pageName === 'payment' && !sortedPages.some(p => (p.name || '').toLowerCase().trim() === 'summary')) {
                            renderVirtualSummary(index);
                        }

                        if (isRegistrationSet && !customPagesContainerAdded &&
                            (pageName === 'summary' || pageName === 'payment')) {
                            pagesHtml += '<div id="dynamic-custom-pages-container" class="hidden space-y-6"></div>';
                            customPagesContainerAdded = true;
                        }

                        pagesHtml += renderPage(page, index);
                    });

                    // ENSURE Summary page is always shown even if not in data
                    if (!sortedPages.some(p => (p.name || '').toLowerCase().trim() === 'summary')) {
                        renderVirtualSummary(sortedPages.length);
                    }

                    // If no Summary/Payment pages exist, add container at the end
                    if (isRegistrationSet && !customPagesContainerAdded) {
                        pagesHtml += '<div id="dynamic-custom-pages-container" class="hidden space-y-6"></div>';
                    }

                    // Hide loading, show content
                    document.getElementById('loading-state').classList.add('hidden');
                    document.getElementById('pages-container').innerHTML = pagesHtml;
                    document.getElementById('pages-container').classList.remove('hidden');
                    document.getElementById('submit-container').classList.remove('hidden');
                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }

                    if (window.activeDraftRows) {
                        await applyDraftData();
                    }

                    // Initialize first accordion as open, others closed
                    setTimeout(() => {
                        const accordions = document.querySelectorAll('.accordion-content');
                        const icons = document.querySelectorAll('.accordion-icon');

                        accordions.forEach((accordion, idx) => {
                            if (idx === 0) {
                                accordion.classList.add('accordion-open');
                                if (icons[idx]) icons[idx].classList.remove('rotated');
                            } else {
                                accordion.classList.remove('accordion-open');
                                if (icons[idx]) icons[idx].classList.add('rotated');
                            }
                        });
                    }, 100);

                    // Auto-prefill player data if player_id is available from login with role 'player'
                    const loggedInPlayerId = localStorage.getItem('player_id');
                    if (loggedInPlayerId && isAdultLeaguePlayer && Object.keys(playerPages).length > 0) {
                        // Directly call fetchPlayerData API with the player_id to prefill player page
                        setTimeout(async () => {
                            try {
                                console.log(`🔄 Auto-prefilling player data for logged-in player_id: ${loggedInPlayerId}`);

                                const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-Organisation': authOrganisation,
                                        'X-Token': authToken,
                                    },
                                    body: JSON.stringify({
                                        query: `query FetchPlayerData {
                                                 fetchPlayerData(player_id: ${loggedInPlayerId}) {
                                                     player_id
                                                     registration_id
                                                     form_id
                                                     page_id
                                                     fields {
                                                         field_id
                                                         label
                                                         value
                                                     }
                                                 }
                                             }`
                                    })
                                });

                                const result = await response.json();
                                console.log('✅ Auto-prefill player data response:', result);

                                // Populate playerFieldValues from API response
                                playerFieldValues = {};

                                if (result.data && result.data.fetchPlayerData) {
                                    const playerData = result.data.fetchPlayerData;

                                    if (playerData.fields && Array.isArray(playerData.fields)) {
                                        playerData.fields.forEach(field => {
                                            if (field.label && field.value !== null && field.value !== undefined) {
                                                const normalizedLabel = field.label.toLowerCase().trim();
                                                const cleanLabel = field.label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                                const cleanVal = sanitizeFieldValue(field.value, field.label, field.field_type);
                                                if (cleanVal !== '') {
                                                    playerFieldValues[normalizedLabel] = cleanVal;
                                                    playerFieldValues[cleanLabel] = cleanVal;
                                                    if (cleanLabel.includes('birth') || cleanLabel.includes('dob') || normalizedLabel.includes('birth') || normalizedLabel.includes('dob')) {
                                                        playerFieldValues['date of birth'] = cleanVal;
                                                        playerFieldValues['birth date'] = cleanVal;
                                                        playerFieldValues['birthdate'] = cleanVal;
                                                        playerFieldValues['dob'] = cleanVal;
                                                        playerFieldValues['player - date of birth'] = cleanVal;
                                                        playerFieldValues['player - birthdate'] = cleanVal;
                                                        playerFieldValues['player - dob'] = cleanVal;
                                                    }
                                                    if (field.field_id) {
                                                        playerFieldValues[`id_${field.field_id}`] = cleanVal;
                                                    }
                                                }
                                            }
                                        });
                                    }

                                    console.log('✅ Player field values populated:', Object.keys(playerFieldValues).length, 'fields');
                                }

                                // Mark this player as selected
                                const parsedPlayerId = parseInt(loggedInPlayerId);
                                selectedPlayerIds.add(parsedPlayerId);
                                currentlyEditingPlayerId = parsedPlayerId;

                                // Extract first/last name from fetched fields and add to playersList
                                const pFirstName = playerFieldValues['first name'] || '';
                                const pLastName = playerFieldValues['last name'] || '';
                                if (!playersList.some(p => p.player_id == parsedPlayerId)) {
                                    playersList.push({
                                        player_id: parsedPlayerId,
                                        first_name: pFirstName,
                                        last_name: pLastName,
                                        fields: Object.entries(playerFieldValues).map(([label, value]) => ({ label, value }))
                                    });
                                    console.log(`✅ Added player to playersList: ${pFirstName} ${pLastName} (ID: ${parsedPlayerId})`);
                                }

                                // Re-render ALL player page accordions with pre-populated values
                                Object.values(playerPages).forEach(page => {
                                    const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                    if (container) {
                                        container.innerHTML = generatePlayerFields(page, true);
                                    }
                                });

                                // Update player selection UI to reflect the auto-selected state
                                updatePlayerSelectionUI();

                                console.log('✅ Player page auto-prefilled successfully');
                            } catch (error) {
                                console.error('❌ Error auto-prefilling player data:', error);
                            }
                        }, 600);
                    }
                }

                // --- DRAFT REGISTRATION FUNCTIONS ---
                let currentDraftId = null;
                window.draftPlayerFieldValues = {};

                // Check for existing drafts and prompt user with Resume Registration popup
                async function checkAndPromptResumeDraft(targetFormId, targetRegSetId) {
                    try {
                        const org = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';
                        if (!org || !token) return;

                        // console.log('🔍 Checking for existing saved registration drafts...', { targetFormId, targetRegSetId });

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': org,
                                'X-Token': token,
                            },
                            body: JSON.stringify({
                                query: `query FetchRegistrationDrafts {
                                    fetchRegistrationDrafts {
                                        draft_id
                                        form_id
                                        registration_set_id
                                        selected_form_ids
                                        registration_date
                                        form_name
                                        player_id
                                    }
                                }`
                            })
                        });

                        const result = await response.json();
                        if (result.errors || !result.data?.fetchRegistrationDrafts) {
                            return;
                        }

                        const drafts = result.data.fetchRegistrationDrafts || [];
                        if (drafts.length === 0) return;

                        // Group rows by draft_id
                        const groups = {};
                        drafts.forEach(row => {
                            const dId = row.draft_id;
                            if (!dId) return;
                            if (!groups[dId]) {
                                groups[dId] = {
                                    draft_id: dId,
                                    form_id: row.form_id,
                                    registration_set_id: row.registration_set_id,
                                    selected_form_ids: row.selected_form_ids,
                                    registration_date: row.registration_date,
                                    form_name: row.form_name || 'Registration Form',
                                    player_ids: new Set()
                                };
                            }
                            if (row.player_id && row.player_id > 0) {
                                groups[dId].player_ids.add(row.player_id);
                            }
                        });

                        const groupedDrafts = Object.values(groups);

                        // Find matching drafts for the target form_id or registration_set_id
                        const matchingDrafts = groupedDrafts.filter(g => {
                            const matchesFormId = targetFormId && (
                                String(g.form_id) === String(targetFormId) ||
                                String(g.registration_set_id) === String(targetFormId)
                            );
                            const matchesRegSetId = targetRegSetId && (
                                String(g.registration_set_id) === String(targetRegSetId) ||
                                String(g.form_id) === String(targetRegSetId)
                            );

                            let matchesSelectedFormIds = false;
                            if (targetFormId && g.selected_form_ids) {
                                let ids = g.selected_form_ids;
                                if (typeof ids === 'string') {
                                    try { ids = JSON.parse(ids); } catch(e) {
                                        ids = ids.split(',').map(s => s.trim());
                                    }
                                }
                                if (Array.isArray(ids)) {
                                    matchesSelectedFormIds = ids.some(id => String(id) === String(targetFormId));
                                }
                            }

                            return Boolean(matchesFormId || matchesRegSetId || matchesSelectedFormIds);
                        });

                        if (matchingDrafts.length === 0) {
                            console.log('ℹ️ No matching existing draft found for current form.');
                            return;
                        }

                        // Sort by newest draft first
                        matchingDrafts.sort((a, b) => (parseInt(b.draft_id) || 0) - (parseInt(a.draft_id) || 0));
                        const latestDraft = matchingDrafts[0];

                        console.log('🎯 Found matching existing draft:', latestDraft);

                        // Show simplified SweetAlert popup
                        const resultModal = await Swal.fire({
                            title: 'Resume Registration?',
                            text: 'You have a saved draft for this registration. Would you like to resume your progress or start a new registration?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Resume Draft',
                            cancelButtonText: 'Start New',
                            confirmButtonColor: 'var(--primary-theme-color)',
                            cancelButtonColor: '#6b7280',
                            reverseButtons: true,
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            customClass: {
                                confirmButton: 'px-5 py-2.5 rounded-lg font-semibold text-white shadow-md',
                                cancelButton: 'px-5 py-2.5 rounded-lg font-semibold text-white shadow-md'
                            }
                        });

                        if (resultModal.isConfirmed) {
                            // Show loader
                            Swal.fire({
                                title: 'Resuming Draft...',
                                text: 'Applying your saved progress, please wait...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            try {
                                // Load the draft details
                                await resumeDraft(latestDraft.draft_id);

                                // Update URL to include draft_id without refreshing
                                const url = new URL(window.location.href);
                                url.searchParams.set('draft_id', latestDraft.draft_id);
                                window.history.replaceState({}, '', url.toString());

                                // Apply draft data to the page fields
                                await applyDraftData();

                                // Close loader and show success notification
                                Swal.fire({
                                    toast: true,
                                    position: 'top-end',
                                    icon: 'success',
                                    title: 'Draft resumed successfully',
                                    showConfirmButton: false,
                                    timer: 2500
                                });
                            } catch (resumeErr) {
                                console.error('Error applying draft data:', resumeErr);
                                Swal.fire({
                                    toast: true,
                                    position: 'top-end',
                                    icon: 'error',
                                    title: 'Error resuming draft',
                                    text: resumeErr.message || 'An error occurred while restoring draft.',
                                    showConfirmButton: false,
                                    timer: 3500
                                });
                            }
                        }
                    } catch (err) {
                        console.error('Error in checkAndPromptResumeDraft:', err);
                        Swal.close();
                    }
                }

                async function resumeDraft(draftId) {
                    try {
                        console.log(`🚀 Fetching draft details for draft_id: ${draftId}`);
                        const org = localStorage.getItem('organisation') || '';
                        const token = localStorage.getItem('authToken') || '';

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': org,
                                'X-Token': token,
                            },
                            body: JSON.stringify({
                                query: `query FetchRegistrationDrafts {
                                    fetchRegistrationDrafts(draft_id: ${draftId}) {
                                        draft_id
                                        form_id
                                        league_id
                                        season_id
                                        player_id
                                        selected_form_ids
                                        level
                                        team
                                        registration_date
                                        form_name
                                        data {
                                            field_id
                                            page_id
                                            value
                                            parent_number
                                        }
                                    }
                                }`
                            })
                        });

                        const result = await response.json();
                        if (result.errors) {
                            console.error('Error fetching draft:', result.errors);
                            return;
                        }

                        const drafts = result.data.fetchRegistrationDrafts || [];
                        if (drafts.length === 0) {
                            console.warn(`No draft found with ID ${draftId}`);
                            return;
                        }

                        window.currentDraftId = draftId;
                        console.log(`✅ Loaded draft ${draftId} with ${drafts.length} rows`);
                        window.activeDraftRows = drafts;
                    } catch (err) {
                        console.error('Error in resumeDraft:', err);
                    }
                }

                async function applyDraftData() {
                    if (!window.activeDraftRows || window.activeDraftRows.length === 0) return;
                    console.log('🔮 Applying draft data to page fields...');

                    const drafts = window.activeDraftRows;

                    // 1. Build field metadata map from allPagesMap and allPagesIncludingHidden
                    const fieldMetadataMap = {};
                    const processPageFields = (page) => {
                        if (page.fields && Array.isArray(page.fields)) {
                            page.fields.forEach(field => {
                                const fid = field.field_id || field.fieldid;
                                if (fid) {
                                    fieldMetadataMap[fid] = {
                                        label: (field.label || '').toLowerCase().trim(),
                                        customfieldId: field.custom_field_id || field.customFieldId || 0,
                                        pageId: page.original_page_id || page.page_id,
                                        page: page,
                                        field: field,
                                        idTable: field.idTable || field.id_table || field.idtable
                                    };
                                }
                            });
                        }
                    };
                    Object.values(allPagesMap).forEach(processPageFields);
                    if (typeof allPagesIncludingHidden !== 'undefined' && Array.isArray(allPagesIncludingHidden)) {
                        allPagesIncludingHidden.forEach(processPageFields);
                    }

                    // 2. Clear prefill states
                    window.draftPlayerFieldValues = {};

                    // 3. Process each draft row
                    drafts.forEach(draftRow => {
                        const playerId = parseInt(draftRow.player_id) || 0;
                        const selectedFormIds = draftRow.selected_form_ids || [];

                        // If player_id > 0, make sure they exist in playersList
                        if (playerId > 0) {
                            let fName = '';
                            let lName = '';
                            let pGenderVal = '';
                            let draftFieldsList = [];
                            if (draftRow.data) {
                                draftRow.data.forEach(d => {
                                    const meta = fieldMetadataMap[d.field_id];
                                    const isParentNumMatch = (d.parent_number === 0 || d.parent_number === '0' || d.parent_number === null || d.parent_number === undefined);
                                    if (meta && isParentNumMatch) {
                                        const cleanMeta = (meta.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                        if (cleanMeta === 'first name' || cleanMeta === 'firstname') fName = d.value || '';
                                        if (cleanMeta === 'last name' || cleanMeta === 'lastname') lName = d.value || '';
                                        if (cleanMeta === 'gender' || cleanMeta === 'sex' || cleanMeta.includes('gender')) pGenderVal = d.value || '';
                                        draftFieldsList.push({
                                            field_id: d.field_id,
                                            label: meta.label,
                                            value: d.value || ''
                                        });
                                    }
                                });
                            }

                            let playerObj = playersList.find(p => p.player_id == playerId);
                            if (!playerObj) {
                                const fullName = `${fName} ${lName}`.trim() || `Player #${playerId}`;
                                console.log(`➕ Injected missing draft player: ${fullName} (ID: ${playerId})`);
                                playerObj = {
                                    player_id: playerId,
                                    first_name: fName || 'New',
                                    last_name: lName || 'Player',
                                    is_local: true,
                                    selected_form_ids: selectedFormIds,
                                    fields: draftFieldsList
                                };
                                if (pGenderVal) playerObj.gender = pGenderVal;
                                playersList.push(playerObj);
                            } else {
                                playerObj.is_local = true;
                                if (fName && (!playerObj.first_name || playerObj.first_name === 'New')) playerObj.first_name = fName;
                                if (lName && (!playerObj.last_name || playerObj.last_name === 'Player')) playerObj.last_name = lName;
                                if (pGenderVal) playerObj.gender = pGenderVal;
                                if (selectedFormIds && selectedFormIds.length > 0) {
                                    playerObj.selected_form_ids = selectedFormIds;
                                }
                                playerObj.fields = draftFieldsList;
                            }

                            // Restore division selection if level or division data is saved in draft
                            let levelDivId = (draftRow.level && parseInt(draftRow.level) > 0) ? parseInt(draftRow.level) : 0;
                            if (!levelDivId && draftRow.data && Array.isArray(draftRow.data)) {
                                const dDiv = draftRow.data.find(d => {
                                    const meta = fieldMetadataMap[d.field_id];
                                    return meta && (meta.label === 'division' || (meta.field && (meta.field.page_field_name === 'division' || meta.field.form_field_name === 'division')));
                                });
                                if (dDiv && dDiv.value) levelDivId = parseInt(dDiv.value) || 0;
                            }

                            if (levelDivId > 0) {
                                playerObj.division_id = levelDivId;
                                selectedLevelDivisionId = levelDivId;
                                console.log(`🔮 Restored division_id ${levelDivId} from draft for player ${playerId}`);

                                if (!window.draftPlayerFieldValues[playerId]) {
                                    window.draftPlayerFieldValues[playerId] = {};
                                }
                                window.draftPlayerFieldValues[playerId]['division'] = String(levelDivId);
                                playerFieldValues['division'] = String(levelDivId);

                                // Pre-populate collectedRegistrationData & draftPlayerFieldValues for the player page
                                Object.values(allPagesMap).forEach(page => {
                                    const pType = getPageType(page.name, page);
                                    if (pType === 'player' && page.fields && Array.isArray(page.fields)) {
                                        const divField = page.fields.find(f => (f.label || '').toLowerCase().trim() === 'division' || (f.page_field_name || '').toLowerCase() === 'division' || (f.form_field_name || '').toLowerCase() === 'division');
                                        if (divField) {
                                            const fid = divField.field_id || divField.fieldid;
                                            window.draftPlayerFieldValues[playerId][`id_${fid}`] = String(levelDivId);
                                            if (!collectedRegistrationData[page.page_id]) collectedRegistrationData[page.page_id] = {};
                                            if (!collectedRegistrationData[page.page_id][playerId]) collectedRegistrationData[page.page_id][playerId] = {};
                                            collectedRegistrationData[page.page_id][playerId][fid] = {
                                                fieldid: fid,
                                                customfieldId: 0,
                                                label: 'Division',
                                                values: String(levelDivId)
                                            };
                                        }
                                    }
                                });

                                if (playerObj.fields && Array.isArray(playerObj.fields)) {
                                    const pDivField = playerObj.fields.find(f => (f.label || '').toLowerCase().trim() === 'division');
                                    if (pDivField) {
                                        pDivField.value = String(levelDivId);
                                    } else {
                                        playerObj.fields.push({
                                            field_id: 0,
                                            label: 'Division',
                                            value: String(levelDivId)
                                        });
                                    }
                                }

                                // Pre-populate collectedRegistrationData for the level selection page
                                Object.values(allPagesMap).forEach(page => {
                                    const isLevelListPage = (page.file && (page.file.includes('levellist.php') || page.file.includes('levelist.php'))) ||
                                        (page.name && (
                                            page.name.toLowerCase().trim().includes('level') ||
                                             page.name.toLowerCase().trim().includes('division')
                                        ));
                                    if (isLevelListPage) {
                                        const pageId = page.page_id;
                                        const selectedDiv = window.allFetchedDivisions ? window.allFetchedDivisions[levelDivId] : null;
                                        collectedRegistrationData[pageId] = {
                                            division_id: {
                                                fieldid: 'division_id',
                                                customfieldId: 0,
                                                label: 'Division',
                                                values: selectedDiv?.division_name || levelDivId
                                            }
                                        };
                                        console.log(`🔮 Populated collectedRegistrationData for level page ${pageId} with division ${levelDivId}`);
                                    }
                                });
                            }

                            // Mark as updated and selected so player shows as ready and checked
                            updatedPlayerIds.add(playerId);
                            selectedPlayerIds.add(playerId);

                            // Extract gender, grade, age for eligibility verification
                            let pGender = null;
                            let pGrade = null;
                            let pAge = null;
                            if (draftRow.data) {
                                draftRow.data.forEach(d => {
                                    const meta = fieldMetadataMap[d.field_id];
                                    if (meta) {
                                        const labelKey = (meta.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                        if (labelKey === 'gender' || labelKey === 'sex' || labelKey.includes('gender')) {
                                            pGender = d.value || null;
                                        }
                                        if (labelKey === 'grade' || labelKey.includes('grade')) {
                                            pGrade = d.value || null;
                                        }
                                        if (labelKey === 'date of birth' || labelKey === 'dob' || labelKey === 'birth date' || labelKey === 'birthdate' || labelKey.includes('birth')) {
                                            const dob = new Date(d.value);
                                            if (!isNaN(dob.getTime())) {
                                                const today = new Date();
                                                let age = today.getFullYear() - dob.getFullYear();
                                                const monthDiff = today.getMonth() - dob.getMonth();
                                                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
                                                    age--;
                                                }
                                                pAge = age;
                                            }
                                        }
                                    }
                                });
                            }

                            if (isRegistrationSet && availableFormIds.length > 0) {
                                verifyPlayerEligibility(playerId, availableFormIds, pGender, pGrade, pAge, true);
                            }
                        }

                        // 4. Distribute field values
                        if (draftRow.data && Array.isArray(draftRow.data)) {
                            draftRow.data.forEach(d => {
                                const fid = d.field_id;
                                const val = d.value || '';
                                const pNum = d.parent_number;
                                const meta = fieldMetadataMap[fid];

                                if (!meta) {
                                    console.warn(`⚠️ Field ID ${fid} in draft not found in form pages config.`);
                                    return;
                                }

                                const pageId = meta.pageId;
                                const label = meta.label;
                                const customfieldId = meta.customfieldId;
                                const isParentField = (meta.idTable == 1 || meta.idTable == '1');

                                // Parent 2 fields
                                if (pNum === 2) {
                                    const normLabel = (label || '').toLowerCase().trim();
                                    let actualVal = val;
                                    const isFirstName = normLabel === 'first name' || normLabel === 'firstname';

                                    if (isFirstName && val) {
                                        const p1First = (fieldValues['first name'] || fieldValues['firstname'] || (parent1Name ? parent1Name.split(' ')[0] : '')).trim();
                                        // If draft has parent 1's first name, check if parent 2 actually has a known different first name
                                        let knownP2First = '';
                                        if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1 && familyCircleParents[1].first_name) {
                                            knownP2First = familyCircleParents[1].first_name.trim();
                                        } else if (parent2FieldsRaw && Array.isArray(parent2FieldsRaw)) {
                                            const rawF = parent2FieldsRaw.find(f => (f.label || '').toLowerCase().trim() === 'first name' || (f.label || '').toLowerCase().trim() === 'firstname');
                                            if (rawF && rawF.value) knownP2First = rawF.value.trim();
                                        } else if (parent2Name && parent1Name && parent2Name.toLowerCase() !== parent1Name.toLowerCase()) {
                                            knownP2First = parent2Name.split(' ')[0].trim();
                                        }
                                        if (knownP2First && p1First && val.toLowerCase() === p1First.toLowerCase() && knownP2First.toLowerCase() !== p1First.toLowerCase()) {
                                            actualVal = knownP2First;
                                        }
                                    }

                                    parent2FieldValues[label] = actualVal;
                                    if (normLabel) parent2FieldValues[normLabel] = actualVal;
                                    parent2FieldValues[`id_${fid}`] = actualVal;
                                    hasTwoParents = true;
                                    if (actualVal) {
                                        isParentSaved = true;
                                        savedParentKeys.add(2);
                                    }

                                    // Populate collectedRegistrationData for parent and custom pages
                                    const page = meta.page;
                                    const pNamesToPopulate = [pageId];
                                    if (page && page.page_id && page.page_id !== pageId) pNamesToPopulate.push(page.page_id);
                                    if (page && page.name && page.name !== pageId) pNamesToPopulate.push(page.name);

                                    const isPerMember = page && (page.per_member == 1 || page.per_member === true);

                                    pNamesToPopulate.forEach(pKey => {
                                        if (!collectedRegistrationData[pKey]) {
                                            collectedRegistrationData[pKey] = {};
                                        }
                                        if (isPerMember && playerId > 0) {
                                            if (!collectedRegistrationData[pKey][playerId]) {
                                                collectedRegistrationData[pKey][playerId] = {};
                                            }
                                            collectedRegistrationData[pKey][playerId][fid] = {
                                                fieldid: fid,
                                                customfieldId: customfieldId,
                                                label: label,
                                                values: actualVal
                                            };
                                        } else {
                                            if (!collectedRegistrationData[pKey]['parent_2']) {
                                                collectedRegistrationData[pKey]['parent_2'] = {};
                                            }
                                            collectedRegistrationData[pKey]['parent_2'][fid] = {
                                                fieldid: fid,
                                                customfieldId: customfieldId,
                                                label: label,
                                                values: actualVal
                                            };
                                        }
                                    });
                                }
                                // Parent 1 fields
                                else if (pNum === 1 || (isParentField && (pNum === 0 || pNum === 1))) {
                                    fieldValues[label] = val;
                                    fieldValues[`id_${fid}`] = val;
                                    if (val) {
                                        isParentSaved = true;
                                        savedParentKeys.add(1);
                                    }

                                    // Populate collectedRegistrationData for parent and custom pages
                                    const page = meta.page;
                                    const pNamesToPopulate = [pageId];
                                    if (page && page.page_id && page.page_id !== pageId) pNamesToPopulate.push(page.page_id);
                                    if (page && page.name && page.name !== pageId) pNamesToPopulate.push(page.name);

                                    const isPerMember = page && (page.per_member == 1 || page.per_member === true);

                                    pNamesToPopulate.forEach(pKey => {
                                        if (!collectedRegistrationData[pKey]) {
                                            collectedRegistrationData[pKey] = {};
                                        }
                                        if (isPerMember && playerId > 0) {
                                            if (!collectedRegistrationData[pKey][playerId]) {
                                                collectedRegistrationData[pKey][playerId] = {};
                                            }
                                            collectedRegistrationData[pKey][playerId][fid] = {
                                                fieldid: fid,
                                                customfieldId: customfieldId,
                                                label: label,
                                                values: val
                                            };
                                        } else {
                                            if (!collectedRegistrationData[pKey]['parent']) {
                                                collectedRegistrationData[pKey]['parent'] = {};
                                            }
                                            collectedRegistrationData[pKey]['parent'][fid] = {
                                                fieldid: fid,
                                                customfieldId: customfieldId,
                                                label: label,
                                                values: val
                                            };
                                            if (!collectedRegistrationData[pKey][fid]) {
                                                collectedRegistrationData[pKey][fid] = {
                                                    fieldid: fid,
                                                    customfieldId: customfieldId,
                                                    label: label,
                                                    values: val
                                                };
                                            }
                                        }
                                    });
                                }
                                // Player / Custom fields
                                else {
                                    if (playerId > 0) {
                                        const page = meta.page;
                                        const pType = page ? getPageType(page.name, page) : 'custom';
                                        
                                        if (pType === 'player') {
                                            let cleanVal = val;
                                            const normLabel = (label || '').toLowerCase().trim();
                                            const cleanLabel = (label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                            const isDateField = normLabel.includes('birth') || normLabel.includes('dob');
                                            if (isDateField) {
                                                if (String(cleanVal).startsWith('0000') || cleanVal === '00/00/0000' || cleanVal === '00-00-0000') {
                                                    cleanVal = '';
                                                } else {
                                                    cleanVal = formatDateToYYYYMMDD(cleanVal);
                                                }
                                            }

                                            // Player Page field
                                            if (!window.draftPlayerFieldValues[playerId]) {
                                                window.draftPlayerFieldValues[playerId] = {};
                                            }
                                            if (cleanVal !== '') {
                                                window.draftPlayerFieldValues[playerId][label] = cleanVal;
                                                window.draftPlayerFieldValues[playerId][normLabel] = cleanVal;
                                                window.draftPlayerFieldValues[playerId][cleanLabel] = cleanVal;
                                                window.draftPlayerFieldValues[playerId][`id_${fid}`] = cleanVal;
                                                if (cleanLabel === 'gender' || cleanLabel === 'sex' || cleanLabel.includes('gender') || normLabel.includes('gender')) {
                                                    window.draftPlayerFieldValues[playerId]['gender'] = cleanVal;
                                                    window.draftPlayerFieldValues[playerId]['player - gender'] = cleanVal;
                                                }
                                            }

                                            // Also populate collectedRegistrationData directly for this player
                                            const pNamesToPopulate = [pageId];
                                            if (page && page.page_id && page.page_id !== pageId) pNamesToPopulate.push(page.page_id);
                                            if (page && page.name && page.name !== pageId) pNamesToPopulate.push(page.name);

                                            pNamesToPopulate.forEach(pKey => {
                                                if (!collectedRegistrationData[pKey]) {
                                                    collectedRegistrationData[pKey] = {};
                                                }
                                                if (!collectedRegistrationData[pKey][playerId]) {
                                                    collectedRegistrationData[pKey][playerId] = {};
                                                }
                                                collectedRegistrationData[pKey][playerId][fid] = {
                                                    fieldid: fid,
                                                    customfieldId: customfieldId,
                                                    label: label,
                                                    values: cleanVal
                                                };
                                            });
                                        } else {
                                            // Custom page field per-member/player
                                            const pNamesToPopulate = [pageId];
                                            if (page && page.page_id && page.page_id !== pageId) pNamesToPopulate.push(page.page_id);
                                            if (page && page.name && page.name !== pageId) pNamesToPopulate.push(page.name);

                                            pNamesToPopulate.forEach(pKey => {
                                                if (!collectedRegistrationData[pKey]) {
                                                    collectedRegistrationData[pKey] = {};
                                                }
                                                if (!collectedRegistrationData[pKey][playerId]) {
                                                    collectedRegistrationData[pKey][playerId] = {};
                                                }
                                                collectedRegistrationData[pKey][playerId][fid] = {
                                                    customfieldId: customfieldId,
                                                    label: label,
                                                    values: val
                                                };
                                            });
                                        }
                                    } else {
                                        // Global/Shared custom field (player_id = 0)
                                        const page = meta.page;
                                        const pNamesToPopulate = [pageId];
                                        if (page && page.page_id && page.page_id !== pageId) pNamesToPopulate.push(page.page_id);
                                        if (page && page.name && page.name !== pageId) pNamesToPopulate.push(page.name);

                                        pNamesToPopulate.forEach(pKey => {
                                            if (!collectedRegistrationData[pKey]) {
                                                collectedRegistrationData[pKey] = {};
                                            }
                                            collectedRegistrationData[pKey][fid] = {
                                                customfieldId: customfieldId,
                                                label: label,
                                                values: val
                                            };
                                        });
                                    }
                                }
                            });
                        }
                    });

                    // Fallback: construct parent1Name if not already set
                    if (!parent1Name && Object.keys(fieldValues).length > 0) {
                        const p1FirstName = (fieldValues['first name'] || fieldValues['firstname'] || '').trim();
                        const p1LastName = (fieldValues['last name'] || fieldValues['lastname'] || '').trim();
                        if (p1FirstName || p1LastName) {
                            parent1Name = `${p1FirstName} ${p1LastName}`.trim();
                        }
                    }

                    // Check if parent2 has values, and ensure hasTwoParents is true
                    if (Object.keys(parent2FieldValues).length > 0 || (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1)) {
                        hasTwoParents = true;
                        
                        let knownFcP2 = '';
                        if (typeof familyCircleParents !== 'undefined' && familyCircleParents.length > 1) {
                            knownFcP2 = `${familyCircleParents[1].first_name || ''} ${familyCircleParents[1].last_name || ''}`.trim();
                        }
                        if (knownFcP2 && (!parent2Name || (parent1Name && parent2Name.toLowerCase() === parent1Name.toLowerCase()))) {
                            parent2Name = knownFcP2;
                        }

                        // Fallback: construct parent2Name if not already set
                        if (!parent2Name || (parent1Name && parent2Name.toLowerCase() === parent1Name.toLowerCase())) {
                            const p2FirstName = (parent2FieldValues['first name'] || parent2FieldValues['firstname'] || '').trim();
                            const p2LastName = (parent2FieldValues['last name'] || parent2FieldValues['lastname'] || '').trim();
                            if (p2FirstName || p2LastName) {
                                const constructed = `${p2FirstName} ${p2LastName}`.trim();
                                if (!parent1Name || constructed.toLowerCase() !== parent1Name.toLowerCase()) {
                                    parent2Name = constructed;
                                }
                            }
                        }

                        // Re-render/insert parent switcher if not already present in DOM
                        const parentPage = Object.values(allPagesMap).find(p => getPageType(p.name, p) === 'parent');
                        if (parentPage) {
                            const pageId = parentPage.page_id;
                            const accordionContent = document.getElementById(pageId);
                            if (accordionContent && !document.getElementById(`parent-switcher-${pageId}`)) {
                                const switcherHtml = getParentSwitcherHtml(pageId);
                                const tempDiv = document.createElement('div');
                                tempDiv.innerHTML = switcherHtml;
                                const switcherEl = tempDiv.firstElementChild;
                                if (switcherEl) {
                                    accordionContent.insertBefore(switcherEl, accordionContent.firstChild);
                                }
                            }
                        }
                    }

                    // 5. Update player selections UI
                    if (typeof updatePlayerSelectionUI === 'function') {
                        updatePlayerSelectionUI();
                    }

                    // 6. Prefill the Parent fields in the DOM immediately
                    const parentPages = Object.values(allPagesMap).filter(p => getPageType(p.name, p) === 'parent');

                    parentPages.forEach(parentPage => {
                        const pageId = parentPage.page_id;
                        const pageContainer = document.getElementById(`page-content-${pageId}`);
                        if (pageContainer) {
                            const inputs = pageContainer.querySelectorAll('input, select, textarea');
                            const activeMap = activeParentNumber === 1 ? fieldValues : parent2FieldValues;
                            inputs.forEach(input => {
                                if (input.type === 'button') return;
                                const dataFieldId = input.getAttribute('data-field-id') || (input.id ? input.id.replace('field-', '') : null);
                                let field = null;
                                if (dataFieldId) {
                                    field = parentPage.fields.find(f => f.field_id == dataFieldId || f.fieldid == dataFieldId);
                                }
                                if (!field && input.name) {
                                    field = parentPage.fields.find(f => f.page_field_name === input.name);
                                }
                                if (field) {
                                    let val = fuzzyLookupValue(activeMap, field.field_id, field.label);
                                    const isCc = (field.label && (field.label.toLowerCase().includes('country code') || field.label.toLowerCase().includes('phone code') || field.label.toLowerCase().includes('code'))) ||
                                                 (input.name && (input.name.toLowerCase().includes('countrycode') || input.name.toLowerCase().includes('phonecode')));
                                    if (isCc && !val) {
                                        val = '+1';
                                    }
                                    if (val !== undefined && val !== null) {
                                        if (input.type === 'checkbox') {
                                            input.checked = (val == 1 || val === true || val === 'true');
                                        } else {
                                            window.setInputValue(input, val);
                                        }
                                    }
                                }
                            });
                        }
                    });

                    // 7. Prefill any rendered Custom page inputs in the DOM immediately
                    Object.keys(collectedRegistrationData).forEach(pageId => {
                        if (pageId === 'form_id' || pageId === 'parent_id' || pageId === 'membership' || pageId === 'registration_set_id') return;
                        const pageData = collectedRegistrationData[pageId];
                        if (!pageData) return;

                        Object.keys(pageData).forEach(key => {
                            const valObj = pageData[key];
                            if (valObj && typeof valObj === 'object' && valObj.values !== undefined) {
                                // Global custom field: key is fieldId
                                const fid = key;
                                const val = valObj.values;
                                const input = document.querySelector(`[name="field[${fid}]"], [id="field-${fid}"], [data-field-id="${fid}"], [id^="field-${fid}-"]`);
                                if (input) {
                                    if (input.type === 'checkbox') {
                                        input.checked = val == 1 || val === true || val === 'true';
                                    } else {
                                        window.setInputValue(input, val);
                                    }
                                }
                            } else if (typeof valObj === 'object' && valObj !== null) {
                                // Player-nested custom field: key is playerId
                                const pid = key;
                                Object.keys(valObj).forEach(fid => {
                                    const val = valObj[fid].values;
                                    const dynamicName = `${pageId}_field_${fid}_${pid}`;
                                    const input = document.querySelector(`[name="${dynamicName}"], [data-field-id="${fid}"][data-player-id="${pid}"], [id^="dynamic-field-${pageId}-${fid}-${pid}"]`);
                                    if (input) {
                                        if (input.type === 'checkbox') {
                                            input.checked = val == 1 || val === true || val === 'true';
                                        } else {
                                            window.setInputValue(input, val);
                                        }
                                    }
                                });
                            }
                        });
                    });

                    // 8. If we are on a registration set, pre-configure form selections for players
                    // (checkboxes will be auto-checked when updatePlayerSelectionUI renders them,
                    //  because selected_form_ids was already set on the playersList objects in step 3)
                    if (isRegistrationSet) {
                        drafts.forEach(draftRow => {
                            const playerId = parseInt(draftRow.player_id) || 0;
                            const selectedFormIds = draftRow.selected_form_ids || [];
                            if (playerId > 0 && selectedFormIds.length > 0) {
                                // Ensure playersList has the form selections stored
                                const playerObj = playersList.find(p => p.player_id == playerId);
                                if (playerObj) {
                                    playerObj.selected_form_ids = selectedFormIds;
                                    // Also update playerFormSelections map
                                    if (typeof playerFormSelections !== 'undefined') {
                                        playerFormSelections[playerId] = selectedFormIds;
                                    }
                                }
                            }
                        });
                    }

                    // 9. Do NOT auto-prefill player data — user must click on a player to load their data.
                    //    Draft field values are stored in window.draftPlayerFieldValues and will be
                    //    applied as overrides when onPlayerSelect is triggered by user click.

                    // 10. Re-trigger custom page layout building to guarantee custom pages show correctly
                    if (typeof refreshCustomPages === 'function') {
                        refreshCustomPages();
                    } else if (typeof updateDynamicCustomPages === 'function') {
                        updateDynamicCustomPages();
                    }
                    if (typeof refreshCustomPagesFields === 'function') {
                        refreshCustomPagesFields();
                    }

                    // 11. Mark completed pages as saved in the UI
                    Object.values(allPagesMap).forEach(page => {
                        const pageId = page.page_id;
                        const pageName = (page.name || '').toLowerCase().trim();
                        const pType = getPageType(pageName, page);
                        
                        let isSaved = false;
                        if (pType === 'parent') {
                            isSaved = isParentSaved === true;
                        } else if (pType === 'player') {
                            // Player page is saved if we have draft player data or players are selected in a registration set
                            isSaved = Object.keys(window.draftPlayerFieldValues || {}).length > 0;
                            if (!isSaved && typeof isRegistrationSet !== 'undefined' && isRegistrationSet) {
                                if (typeof playersList !== 'undefined' && Array.isArray(playersList)) {
                                    isSaved = playersList.some(p => p.selected_form_ids && p.selected_form_ids.length > 0);
                                }
                            }
                        } else if (pType === 'custom') {
                            const originalPageId = page.original_page_id || page.page_id;
                            if (collectedRegistrationData[originalPageId]) {
                                const keys = Object.keys(collectedRegistrationData[originalPageId]);
                                isSaved = keys.length > 0;
                            }
                        }
                        
                        if (isSaved) {
                            const sectionWrapper = document.getElementById(`section-wrapper-${pageId}`);
                            if (sectionWrapper) {
                                sectionWrapper.setAttribute('data-saved', 'true');
                            }
                            const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                            if (headerCheckmark) {
                                headerCheckmark.classList.remove('hidden');
                            }
                            const headerError = document.getElementById(`header-error-${pageId}`);
                            if (headerError) {
                                headerError.classList.add('hidden');
                            }
                        }
                    });

                    // Trigger refreshDivisions on any rendered player page selects
                    Object.values(playerPages).forEach(page => {
                        const container = document.getElementById(`player-fields-container-${page.page_id}`);
                        if (container) {
                            const gSelect = container.querySelector('.grade-select');
                            if (gSelect && gSelect.value) {
                                refreshDivisions(gSelect);
                            }
                        }
                    });

                    // 12. Ensure save draft button is ready
                    const saveDraftBtn = document.getElementById('save-draft-btn');
                    if (saveDraftBtn) {
                        saveDraftBtn.classList.remove('hidden');
                    }

                    console.log('✅ Draft data applied successfully!');
                    if (typeof checkSubmitButtonState === 'function') {
                        checkSubmitButtonState();
                    }
                }

                // Helper to show and enable the Save Draft button
                window.showSaveDraftBtn = function() {
                    const saveDraftBtn = document.getElementById('save-draft-btn');
                    if (saveDraftBtn) {
                        saveDraftBtn.classList.remove('hidden');
                        saveDraftBtn.disabled = false;
                    }
                    const submitContainer = document.getElementById('submit-container');
                    if (submitContainer) {
                        submitContainer.classList.remove('hidden');
                    }
                };

                async function saveDraft() {
                    try {
                        const saveBtn = document.getElementById('save-draft-btn');
                        if (saveBtn) {
                            saveBtn.disabled = true;
                            saveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';
                        }

                        // Helper to safely sanitize and clean field values (preventing [object HTML...] strings)
                        const cleanFieldValue = (val) => {
                            if (val === null || val === undefined) return '';
                            if (typeof val === 'boolean') return val ? "1" : "0";
                            if (typeof val === 'number') return String(val);
                            if (typeof val === 'object') {
                                if (val instanceof Element || val.nodeType || (val.tagName && typeof val.tagName === 'string')) {
                                    if (val.type === 'checkbox') return val.checked ? "1" : "0";
                                    if (val.type === 'file') return val.getAttribute('data-uploaded-url') || (val.files && val.files[0] ? val.files[0].name : '') || val.value || '';
                                    if (val.type === 'radio') {
                                        const name = val.getAttribute('name');
                                        if (name) {
                                            const checkedRadio = document.querySelector(`[name="${CSS.escape(name)}"]:checked`);
                                            return checkedRadio ? checkedRadio.value : '';
                                        }
                                        return val.checked ? val.value : '';
                                    }
                                    return val.value !== undefined && val.value !== null ? String(val.value).trim() : '';
                                }
                                const inner = val.values !== undefined ? val.values : (val.value !== undefined ? val.value : val.val);
                                if (inner !== undefined && inner !== val) {
                                    return cleanFieldValue(inner);
                                }
                                return '';
                            }
                            const str = String(val).trim();
                            if (str.startsWith('[object HTML') || str.startsWith('[object Object]')) {
                                return '';
                            }
                            return str;
                        };

                        // Helper to safely fetch DOM field value with player isolation
                        const getDOMFieldValue = (fid, pid, page, field) => {
                            const fieldIdTable = field ? (field.idTable || field.id_table || field.idtable) : null;
                            const targetPid = (fieldIdTable == 1 || fieldIdTable == '1')
                                ? ((pid === 'parent_2' || pid === 2) ? 'parent_2' : 'parent')
                                : pid;

                            const isParent2Target = (targetPid === 'parent_2' || targetPid === 2);
                            const isParent1Target = (targetPid === 'parent' || targetPid === 1);
                            const isParentFieldTarget = isParent1Target || isParent2Target;

                            const isValidInputForTarget = (cand) => {
                                if (!cand) return false;
                                const candPid = cand.getAttribute('data-player-id');
                                if (!isParentFieldTarget) {
                                    if (candPid === 'parent' || candPid === 'parent_2' || candPid === '1' || candPid === '2') {
                                        return false;
                                    }
                                    if (cand.closest && cand.closest('.parent-section-wrapper, [data-section="parent"]')) {
                                        return false;
                                    }
                                } else if (isParent1Target) {
                                    if (candPid && candPid !== 'parent' && candPid !== '1') return false;
                                } else if (isParent2Target) {
                                    if (candPid && candPid !== 'parent_2' && candPid !== '2') return false;
                                }
                                return true;
                            };

                            // If target is parent_2, the Parent page DOM inputs only match if activeParentNumber === 2
                            // If target is parent 1, the Parent page DOM inputs only match if activeParentNumber === 1
                            const isTargetCurrentlyInDOM = isParent2Target ? (activeParentNumber === 2) :
                                (isParent1Target ? (activeParentNumber === 1) :
                                ((targetPid === '0' || targetPid === 0) ||
                                 (currentlyEditingPlayerId && String(currentlyEditingPlayerId) === String(targetPid)) ||
                                 (activePlayerIds.length === 1)));

                            const queryInput = () => {
                                // 1. Try specific player-isolated data-attributes first
                                let input = document.querySelector(`[data-field-id="${fid}"][data-player-id="${targetPid}"]`);
                                if (isValidInputForTarget(input)) return input;

                                // 2. Try dynamic name multi-player format
                                if (page && field && field.page_field_name) {
                                    const dynamicNameMulti = `${page.page_id}_${field.page_field_name}_${targetPid}`;
                                    input = document.querySelector(`[name="${dynamicNameMulti}"]`);
                                    if (isValidInputForTarget(input)) return input;
                                }

                                // 3. Try standard input name with data-player-id restriction
                                input = document.querySelector(`[name="field[${fid}]"][data-player-id="${targetPid}"], [name="field[${field ? field.field_id : fid}]"][data-player-id="${targetPid}"]`);
                                if (isValidInputForTarget(input)) return input;

                                // 4. Try dynamic ID if rendered by custom page
                                if (page) {
                                    input = document.getElementById(`dynamic-field-${page.page_id}-${fid}-${targetPid}`);
                                    if (isValidInputForTarget(input)) return input;
                                }

                                // 5. Fallback only inside the player's accordion section container if targetPid is currently in DOM
                                if (!isParentFieldTarget && targetPid && targetPid !== '0' && targetPid !== 0) {
                                    const container = document.getElementById(`section-wrapper-dynamic-${page ? page.form_id : ''}-${page ? page.page_id : ''}`) || 
                                                      document.getElementById(`section-wrapper-${page ? page.page_id : ''}`);
                                    if (container && isTargetCurrentlyInDOM) {
                                        const cands = [
                                            container.querySelector(`[data-field-id="${fid}"][data-player-id="${targetPid}"]`),
                                            container.querySelector(`[data-field-id="${fid}"]`),
                                            container.querySelector(`[name="field[${fid}]"]`),
                                            container.querySelector(`[name="field[${field ? field.field_id : fid}]"]`)
                                        ].filter(Boolean);
                                        for (const cand of cands) {
                                            if (isValidInputForTarget(cand)) return cand;
                                        }
                                    }
                                }

                                // 6. Generic/fallback selectors ONLY if target is currently active in the DOM
                                if (isTargetCurrentlyInDOM) {
                                    const genericCands = [
                                        document.querySelector(`[data-field-id="${fid}"][data-player-id="${targetPid}"]`),
                                        document.querySelector(`[data-field-id="${fid}"]`),
                                        (page && field && field.page_field_name) ? document.querySelector(`[name="${page.page_id}_${field.page_field_name}"]`) : null,
                                        document.querySelector(`[name="field[${fid}]"]`),
                                        document.querySelector(`[name="field[${field ? field.field_id : fid}]"]`),
                                        (field && field.page_field_name) ? document.querySelector(`[name="${field.page_field_name}"]`) : null,
                                        document.getElementById(`field-${fid}`)
                                    ].filter(Boolean);

                                    for (const cand of genericCands) {
                                        if (isValidInputForTarget(cand)) return cand;
                                    }
                                }

                                return null;
                            };

                            const input = queryInput();
                            if (input) {
                                if (input.type === 'checkbox') {
                                    return input.checked ? "1" : "0";
                                } else if (input.type === 'file') {
                                    return input.getAttribute('data-uploaded-url') || (input.files[0] ? input.files[0].name : '');
                                } else if (input.type === 'radio') {
                                    const name = input.getAttribute('name');
                                    if (name) {
                                        const checkedRadio = document.querySelector(`[name="${name}"]:checked`);
                                        return checkedRadio ? checkedRadio.value : '';
                                    }
                                } else {
                                    return input.value;
                                }
                            }
                            return null;
                        };


                        // 1. Gather all active player IDs selected for registration
                        let activePlayerIds = Array.from(selectedPlayerIds).map(id => parseInt(id))
                            .filter(id => !excludedPlayerIds.has(id) && !excludedPlayerIds.has(parseInt(id)));
                        if (activePlayerIds.length === 0 && currentlyEditingPlayerId) {
                            const editingId = parseInt(currentlyEditingPlayerId);
                            if (!excludedPlayerIds.has(editingId)) {
                                activePlayerIds = [editingId];
                            }
                        }

                        const mainFormId = currentForm ? currentForm.form_id : collectedRegistrationData.form_id;
                        const formInfo = (window.availableForms || []).find(f => f.form_id == mainFormId) || currentForm;
                        const leagueId = formInfo ? (formInfo.league_id || 0) : 0;
                        const seasonId = formInfo ? (formInfo.season_id || 0) : 0;

                        let parent_data = [];
                        let customFieldsByFormMap = {}; // Map: formId -> [fields]
                        let perPlayerCustomFields = {}; // Map: playerId -> targetFormId -> [fields]
                        let playerEntriesMap = {}; // Map: playerId -> { data: [], forms: [] }

                        // Process all saved pages in collectedRegistrationData
                        const processedLogicalPageKeys = new Set();

                        Object.keys(collectedRegistrationData).forEach(pageId => {
                            if (pageId === 'form_id' || pageId === 'parent_id' || pageId === 'membership' || pageId === 'registration_set_id') return;

                            let page = allPagesMap[pageId] || allPagesIncludingHidden.find(p => p.page_id == pageId);
                            if (!page) {
                                const dynamicVariant = Object.values(allPagesMap).find(p => p.original_page_id == pageId);
                                if (dynamicVariant) {
                                    page = dynamicVariant;
                                }
                            }

                            const logicalKey = page ? (page.original_page_id || page.page_id) : pageId;
                            if (processedLogicalPageKeys.has(String(logicalKey))) return;
                            processedLogicalPageKeys.add(String(logicalKey));

                            // Get the most complete pageData object
                            let pageData = collectedRegistrationData[pageId] || {};
                            if (page) {
                                if (page.original_page_id && collectedRegistrationData[page.original_page_id] && Object.keys(collectedRegistrationData[page.original_page_id]).length > Object.keys(pageData).length) {
                                    pageData = collectedRegistrationData[page.original_page_id];
                                }
                                if (page.page_id && collectedRegistrationData[page.page_id] && Object.keys(collectedRegistrationData[page.page_id]).length > Object.keys(pageData).length) {
                                    pageData = collectedRegistrationData[page.page_id];
                                }
                                if (page.name && collectedRegistrationData[page.name] && Object.keys(collectedRegistrationData[page.name]).length > Object.keys(pageData).length) {
                                    pageData = collectedRegistrationData[page.name];
                                }
                            }

                            if (!page) {
                                // Raw data parser fallback
                                const sourceFormId = currentForm ? currentForm.form_id : collectedRegistrationData.form_id;
                                const allTargetFormIds = new Set();
                                allTargetFormIds.add(sourceFormId);
                                activePlayerIds.forEach(pid => {
                                    const pObj = playerEntriesMap[pid] || playersList.find(p => p.player_id == pid);
                                    if (pObj && pObj.forms) pObj.forms.forEach(f => allTargetFormIds.add(f));
                                    if (pObj && pObj.selected_form_ids) pObj.selected_form_ids.forEach(f => allTargetFormIds.add(f));
                                });

                                for (const [key, value] of Object.entries(pageData)) {
                                    if (typeof value === 'object' && value !== null) {
                                        let isPlayer = activePlayerIds.includes(parseInt(key)) || (!isNaN(parseInt(key)) && activePlayerIds.some(p => String(p) === String(key)));
                                        if (isPlayer) {
                                            const pid = key;
                                            for (const [fidStr, fieldVal] of Object.entries(value)) {
                                                const fid = parseInt(fidStr);
                                                if (isNaN(fid)) continue;

                                                let fVal = fieldVal.values !== undefined ? fieldVal.values : (fieldVal.value !== undefined ? fieldVal.value : fieldVal.val);
                                                if (typeof fVal === 'boolean') fVal = fVal ? "1" : "0";
                                                else if (fVal !== null && fVal !== undefined) fVal = String(fVal).trim();
                                                else fVal = "";

                                                const cid = parseInt(fieldVal.customfieldId || fieldVal.custom_field_id || 0) || 0;
                                                if (!perPlayerCustomFields[pid]) perPlayerCustomFields[pid] = {};

                                                allTargetFormIds.forEach(targetFid => {
                                                    if (!perPlayerCustomFields[pid][targetFid]) perPlayerCustomFields[pid][targetFid] = [];
                                                    perPlayerCustomFields[pid][targetFid].push({
                                                        field_id: fid,
                                                        customfield_id: cid,
                                                        value: fVal,
                                                        label: fieldVal.label || ''
                                                    });
                                                });
                                            }
                                        } else {
                                            const fid = parseInt(key);
                                            if (isNaN(fid)) continue;

                                            let fVal = value.values !== undefined ? value.values : (value.value !== undefined ? value.value : value.val);
                                            if (typeof fVal === 'boolean') fVal = fVal ? "1" : "0";
                                            else if (fVal !== null && fVal !== undefined) fVal = String(fVal).trim();
                                            else fVal = "";

                                            const cid = parseInt(value.customfieldId || value.custom_field_id || 0) || 0;

                                            allTargetFormIds.forEach(targetFid => {
                                                if (!customFieldsByFormMap[targetFid]) customFieldsByFormMap[targetFid] = [];
                                                customFieldsByFormMap[targetFid].push({
                                                    field_id: fid,
                                                    customfield_id: cid,
                                                    value: fVal,
                                                    label: value.label || ''
                                                });
                                            });
                                        }
                                    }
                                }
                                return;
                            }

                            const pType = getPageType(page.name, page);
                            const pageFields = page.fields || [];

                            if (pType === 'player') {
                                activePlayerIds.forEach(pid => {
                                    if (!playerEntriesMap[pid]) {
                                        const pObj = playersList.find(p => p.player_id == pid);
                                        const forms = (isRegistrationSet && pObj && pObj.selected_form_ids)
                                            ? pObj.selected_form_ids
                                            : [(currentForm ? currentForm.form_id : collectedRegistrationData.form_id)];

                                        playerEntriesMap[pid] = {
                                            player_id: pid,
                                            data: [],
                                            forms: forms.filter(f => !!f),
                                            playerName: pObj ? `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim() : `Player ${pid}`
                                        };
                                    }

                                    let playerData = pageData ? pageData[pid] : null;
                                    if (!playerData) {
                                        // Only fall back if there is strictly one player in total
                                        if (activePlayerIds.length === 1 && pageData && Object.keys(pageData).length === 1) {
                                            const singleKey = Object.keys(pageData)[0];
                                            playerData = pageData[singleKey];
                                        }
                                    }
                                    if (!playerData) playerData = {};

                                    const pObj = playersList.find(p => p.player_id == pid);
                                    const draftRow = (window.activeDraftRows || []).find(r => r.player_id == pid);
                                    const draftMap = (window.draftPlayerFieldValues && window.draftPlayerFieldValues[pid]) ? window.draftPlayerFieldValues[pid] : {};

                                    pageFields.forEach(field => {
                                        const fid = parseInt(field.field_id || field.fieldid);
                                        if (isNaN(fid) || fid <= 0) return;

                                        const normLabel = (field.label || '').toLowerCase().trim();
                                        const cleanLabel = (field.label || '').replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim();
                                        const pageFieldName = (field.page_field_name || '').toLowerCase().trim();
                                        const formFieldName = (field.form_field_name || '').toLowerCase().trim();

                                        const isDateField = field.field_type === 'date' || normLabel.includes('birth') || normLabel.includes('dob') || formFieldName.includes('dateofbirth') || formFieldName.includes('birth') || pageFieldName.includes('dateofbirth') || pageFieldName.includes('birth');
                                        const isGenderField = cleanLabel === 'gender' || cleanLabel === 'sex' || normLabel === 'gender' || normLabel === 'sex' || pageFieldName === 'gender' || formFieldName === 'gender' || normLabel.includes('gender');

                                        const valObj = playerData[fid] !== undefined ? playerData[fid] :
                                            (playerData[field.field_id] !== undefined ? playerData[field.field_id] :
                                                (playerData[field.fieldid] !== undefined ? playerData[field.fieldid] :
                                                    (playerData[field.page_field_name] !== undefined ? playerData[field.page_field_name] :
                                                        playerData[field.form_field_name])));

                                        let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                        // Ignore zero dates
                                        if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                            finalVal = '';
                                        }

                                        // Fallback 1: check draftPlayerFieldValues for this player
                                        if (finalVal === null || finalVal === undefined || finalVal === '') {
                                            if (draftMap[`id_${fid}`] !== undefined) finalVal = draftMap[`id_${fid}`];
                                            else if (normLabel && draftMap[normLabel] !== undefined) finalVal = draftMap[normLabel];
                                            else if (cleanLabel && draftMap[cleanLabel] !== undefined) finalVal = draftMap[cleanLabel];
                                            else if (pageFieldName && draftMap[pageFieldName] !== undefined) finalVal = draftMap[pageFieldName];
                                            else if (formFieldName && draftMap[formFieldName] !== undefined) finalVal = draftMap[formFieldName];
                                            else if (isGenderField && draftMap['gender'] !== undefined) finalVal = draftMap['gender'];
                                            else if (isGenderField && draftMap['player - gender'] !== undefined) finalVal = draftMap['player - gender'];

                                            if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                finalVal = '';
                                            }
                                        }

                                        // Fallback 2: check activeDraftRows for this player
                                        if ((finalVal === null || finalVal === undefined || finalVal === '') && draftRow && Array.isArray(draftRow.data)) {
                                            const dField = draftRow.data.find(d => d.field_id == fid && (d.parent_number === 0 || d.parent_number === '0' || d.parent_number === null || d.parent_number === undefined));
                                            if (dField && dField.value !== undefined && dField.value !== null) {
                                                finalVal = dField.value;
                                            }

                                            if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                finalVal = '';
                                            }
                                        }

                                        // Fallback 3: check playerObj fields or name properties
                                        if ((finalVal === null || finalVal === undefined || finalVal === '') && pObj) {
                                            if (Array.isArray(pObj.fields)) {
                                                const pField = pObj.fields.find(f => (f.field_id && f.field_id == fid) || (f.label && (f.label.toLowerCase().trim() === normLabel || f.label.replace(/^Player - /i, '').replace(/[:*]$/, '').toLowerCase().trim() === cleanLabel)));
                                                if (pField && pField.value !== undefined && pField.value !== null) {
                                                    finalVal = pField.value;
                                                }
                                            }
                                            if (finalVal === null || finalVal === undefined || finalVal === '') {
                                                if (formFieldName === 'firstname' || normLabel.includes('first name') || normLabel === 'firstname') {
                                                    if (pObj.first_name && pObj.first_name !== 'New') finalVal = pObj.first_name;
                                                } else if (formFieldName === 'lastname' || normLabel.includes('last name') || normLabel === 'lastname') {
                                                    if (pObj.last_name && pObj.last_name !== 'Player') finalVal = pObj.last_name;
                                                } else if (isGenderField && pObj.gender !== undefined && pObj.gender !== null) {
                                                    finalVal = pObj.gender;
                                                }
                                            }

                                            if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                finalVal = '';
                                            }
                                        }

                                        // Fallback 4: DOM query (only if safe/isolated)
                                        if (finalVal === null || finalVal === undefined || finalVal === '') {
                                            const domVal = getDOMFieldValue(fid, pid, page, field);
                                            if (domVal !== null && domVal !== undefined) finalVal = domVal;

                                            if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                finalVal = '';
                                            }
                                        }

                                        // Fallback 5: getPlayerGender helper if gender field
                                        if ((finalVal === null || finalVal === undefined || finalVal === '') && isGenderField && typeof getPlayerGender === 'function') {
                                            const gNum = getPlayerGender(pid);
                                            if (gNum === 1) finalVal = '1.00';
                                            else if (gNum === 2) finalVal = '2.00';
                                        }

                                        if (isDateField && finalVal) {
                                            finalVal = formatDateToYYYYMMDD(finalVal);
                                            if (String(finalVal).startsWith('0000')) finalVal = '';
                                        }

                                        if (finalVal === null || finalVal === undefined) finalVal = '';

                                        const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                        let finalCid = parseInt(customFieldId) || 0;
                                        if (!finalCid) {
                                            finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                        }

                                        playerEntriesMap[pid].data.push({
                                            field_id: fid,
                                            field_name: field.form_field_name || field.page_field_name,
                                            customfield_id: finalCid,
                                            value: String(finalVal)
                                        });
                                    });
                                });
                            } else if (pType === 'parent') {
                                // Only collect parent_data if parent section was explicitly saved by the user
                                const parentSectionWrapper = document.getElementById(`section-wrapper-${page.page_id}`);
                                const isParentExplicitlySaved = isParentSaved === true || (parentSectionWrapper && parentSectionWrapper.getAttribute('data-saved') === 'true') || (Object.keys(fieldValues).length > 0);

                                if (isParentExplicitlySaved) {
                                    pageFields.forEach(field => {
                                    const fid = parseInt(field.field_id || field.fieldid);
                                    if (isNaN(fid) || fid <= 0) return;

                                    const valObj = pageData ? (pageData[fid] || pageData[field.field_id] || pageData[field.fieldid]
                                        || pageData[field.page_field_name] || pageData[field.form_field_name]) : null;

                                    let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                    if (finalVal === undefined || finalVal === null || finalVal === '') {
                                        const normLabel = (field.label || '').toLowerCase().trim();
                                        if (fieldValues[`id_${fid}`] !== undefined) finalVal = fieldValues[`id_${fid}`];
                                        else if (normLabel && fieldValues[normLabel] !== undefined) finalVal = fieldValues[normLabel];
                                    }

                                    if (finalVal === undefined || finalVal === null || finalVal === '') {
                                        const domVal = getDOMFieldValue(fid, 'parent', page, field);
                                        if (domVal !== null) finalVal = domVal;
                                    }

                                    if (finalVal === undefined || finalVal === null || finalVal === '') {
                                        const draftRow = (window.activeDraftRows || []).find(r => r.data && r.data.some(d => d.parent_number === 1));
                                        if (draftRow && Array.isArray(draftRow.data)) {
                                            const dField = draftRow.data.find(d => d.field_id == fid && d.parent_number === 1);
                                            if (dField && dField.value !== undefined && dField.value !== null) {
                                                finalVal = dField.value;
                                            }
                                        }
                                    }

                                    if (typeof finalVal === 'boolean') finalVal = finalVal ? "1" : "0";
                                    else if (finalVal !== null && finalVal !== undefined) finalVal = String(finalVal);
                                    else finalVal = "";

                                    const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                    let finalCid = parseInt(customFieldId) || 0;
                                    if (!finalCid) {
                                        finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                    }

                                    parent_data.push({
                                        field_id: fid,
                                        field_name: field.form_field_name || field.page_field_name,
                                        customfield_id: finalCid,
                                        value: String(finalVal)
                                    });
                                });
                                }
                            } else {
                                // payment step or custom step
                                if (pType !== 'payment') {
                                    const hasPlayerDataInPageData = activePlayerIds.some(pid => pageData && (pageData[pid] || pageData[String(pid)] || pageData[parseInt(pid)]));
                                    let isPerPlayer = page.per_member == 1 || page.per_member === true || hasPlayerDataInPageData;
                                    if (isPerPlayer) {
                                        activePlayerIds.forEach(pid => {
                                            let pData = (pageData ? (pageData[pid] || pageData[String(pid)] || pageData[parseInt(pid)]) : null) || {};
                                            let playerCustomData = [];

                                            pageFields.forEach(field => {
                                                const fid = parseInt(field.field_id || field.fieldid);
                                                if (isNaN(fid) || fid <= 0) return;

                                                const valObj = pData[fid] || pData[field.field_id] || pData[field.fieldid]
                                                    || pData[field.page_field_name] || pData[field.form_field_name];

                                                let finalVal = null;
                                                if (valObj !== undefined && valObj !== null) {
                                                    if (typeof valObj === 'object') {
                                                        finalVal = valObj.values !== undefined ? valObj.values :
                                                            (valObj.value !== undefined ? valObj.value :
                                                                (valObj.val !== undefined ? valObj.val :
                                                                    (valObj.response !== undefined ? valObj.response : null)));
                                                    } else {
                                                        finalVal = valObj;
                                                    }
                                                }

                                                if (finalVal === undefined || finalVal === null || finalVal === '') {
                                                    const domVal = getDOMFieldValue(fid, pid, page, field);
                                                    if (domVal !== null && domVal !== undefined) finalVal = domVal;
                                                }

                                                if (typeof finalVal === 'boolean') finalVal = finalVal ? "1" : "0";
                                                else if (finalVal !== null && finalVal !== undefined) finalVal = String(finalVal).trim();
                                                else finalVal = "";

                                                const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                                let finalCid = parseInt(customFieldId) || 0;
                                                if (!finalCid) {
                                                    finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                                }

                                                const fieldIdTable = field.idTable || field.id_table || field.idtable;
                                                if (fieldIdTable == 1) {
                                                    parent_data.push({
                                                        field_id: fid,
                                                        field_name: field.form_field_name || field.page_field_name,
                                                        customfield_id: finalCid,
                                                        value: String(finalVal)
                                                    });
                                                } else {
                                                    playerCustomData.push({
                                                        field_id: fid,
                                                        customfield_id: finalCid,
                                                        label: field.label || '',
                                                        value: String(finalVal)
                                                    });
                                                }
                                            });

                                            const pObj = playerEntriesMap[pid] || playersList.find(p => p.player_id == pid);
                                            const selectedForms = (isRegistrationSet && pObj && pObj.forms)
                                                ? pObj.forms
                                                : (pObj && pObj.selected_form_ids ? pObj.selected_form_ids : [page.form_id || mainFormId]);

                                            selectedForms.forEach(targetFid => {
                                                if (!perPlayerCustomFields[pid]) perPlayerCustomFields[pid] = {};
                                                if (!perPlayerCustomFields[pid][targetFid]) perPlayerCustomFields[pid][targetFid] = [];
                                                perPlayerCustomFields[pid][targetFid] = perPlayerCustomFields[pid][targetFid].concat(playerCustomData);
                                            });
                                        });
                                    } else {
                                        // Shared Custom page (truly single-input shared fields)
                                        pageFields.forEach(field => {
                                            const fid = parseInt(field.field_id || field.fieldid);
                                            if (isNaN(fid) || fid <= 0) return;

                                            const valObj = pageData[fid] || pageData[field.field_id] || pageData[field.fieldid]
                                                || pageData[field.page_field_name] || pageData[field.form_field_name];

                                            let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                            if (finalVal === undefined || finalVal === null || finalVal === '') {
                                                const domVal = getDOMFieldValue(fid, 'parent', page, field);
                                                if (domVal !== null) finalVal = domVal;
                                            }

                                            if (typeof finalVal === 'boolean') finalVal = finalVal ? "1" : "0";
                                            else if (finalVal !== null && finalVal !== undefined) finalVal = String(finalVal);
                                            else finalVal = "";

                                            const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                            let finalCid = parseInt(customFieldId) || 0;
                                            if (!finalCid) {
                                                finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                            }

                                            const fieldIdTable = field.idTable || field.id_table || field.idtable;
                                            const formIdToMap = page.form_id || window.sourceFormId || mainFormId;

                                            if (fieldIdTable == 1) {
                                                let p1Val = (pageData && pageData['parent']) ? (pageData['parent'][fid]?.values || pageData['parent'][fid]?.value || pageData['parent'][fid]) : null;
                                                if (p1Val === undefined || p1Val === null || p1Val === '') {
                                                    p1Val = finalVal;
                                                }
                                                parent_data.push({
                                                    field_id: fid,
                                                    field_name: field.form_field_name || field.page_field_name,
                                                    customfield_id: finalCid,
                                                    value: String(p1Val || '')
                                                });
                                            } else {
                                                if (!customFieldsByFormMap[formIdToMap]) customFieldsByFormMap[formIdToMap] = [];
                                                customFieldsByFormMap[formIdToMap].push({
                                                    field_id: fid,
                                                    customfield_id: finalCid,
                                                    value: String(finalVal)
                                                });
                                            }
                                        });
                                    }
                                }
                            }
                        });



                        // Initialize playersEntriesMap for all active players if they weren't in player page loop
                        activePlayerIds.forEach(pid => {
                            if (!playerEntriesMap[pid]) {
                                const pObj = playersList.find(p => p.player_id == pid);
                                const forms = (isRegistrationSet && pObj && pObj.selected_form_ids)
                                    ? pObj.selected_form_ids
                                    : [mainFormId];
                                playerEntriesMap[pid] = {
                                    player_id: pid,
                                    data: [],
                                    forms: forms.filter(f => !!f),
                                    playerName: pObj ? `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim() : `Player ${pid}`
                                };
                            }
                        });

                        // Fallback: If parent_data is empty but parent is saved, gather from allPagesMap parent pages
                        if (parent_data.length === 0) {
                            const parentPages = Object.values(allPagesMap).filter(p => getPageType(p.name, p) === 'parent');
                            parentPages.forEach(pPage => {
                                const pSectionWrapper = document.getElementById(`section-wrapper-${pPage.page_id}`);
                                const isSaved = isParentSaved === true || (pSectionWrapper && pSectionWrapper.getAttribute('data-saved') === 'true') || (Object.keys(fieldValues).length > 0);
                                if (isSaved && pPage.fields && Array.isArray(pPage.fields)) {
                                    pPage.fields.forEach(field => {
                                        const fid = parseInt(field.field_id || field.fieldid);
                                        if (isNaN(fid) || fid <= 0) return;
                                        const normLabel = (field.label || '').toLowerCase().trim();
                                        let finalVal = fieldValues[`id_${fid}`] !== undefined ? fieldValues[`id_${fid}`] :
                                            (normLabel && fieldValues[normLabel] !== undefined ? fieldValues[normLabel] : '');

                                        if (!finalVal) {
                                            const domVal = getDOMFieldValue(fid, 'parent', pPage, field);
                                            if (domVal !== null) finalVal = domVal;
                                        }

                                        if (!finalVal) {
                                            const draftRow = (window.activeDraftRows || []).find(r => r.data && r.data.some(d => d.parent_number === 1));
                                            if (draftRow && Array.isArray(draftRow.data)) {
                                                const dField = draftRow.data.find(d => d.field_id == fid && d.parent_number === 1);
                                                if (dField && dField.value !== undefined && dField.value !== null) finalVal = dField.value;
                                            }
                                        }

                                        const customFieldId = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                        parent_data.push({
                                            field_id: fid,
                                            field_name: field.form_field_name || field.page_field_name,
                                            customfield_id: customFieldId,
                                            value: String(finalVal || '')
                                        });
                                    });
                                }
                            });
                        }

                        // Deduplicate parent_data
                        const parentFieldMap = new Map();
                        parent_data.forEach(f => {
                            if (f.field_id > 0 && (!parentFieldMap.has(f.field_id) || (f.value !== '' && parentFieldMap.get(f.field_id).value === ''))) {
                                parentFieldMap.set(f.field_id, f);
                            }
                        });
                        const finalParentData = Array.from(parentFieldMap.values());

                        // Build parent2_data if two parents exist
                        let finalParent2Data = [];
                        if (hasTwoParents) {
                            finalParent2Data = finalParentData.map(f => {
                                const normalizedLabel = (f.field_name || '').toLowerCase().trim();
                                let p2Value = '';

                                // 1. Check if saved in custom pages under parent_2 / parent2
                                Object.values(collectedRegistrationData).forEach(pData => {
                                    if (pData && (pData['parent_2'] || pData['parent2'])) {
                                        const p2Data = pData['parent_2'] || pData['parent2'];
                                        const valObj = p2Data[f.field_id] || p2Data[String(f.field_id)] || (f.field_name ? p2Data[f.field_name] : null);
                                        if (valObj !== undefined && valObj !== null) {
                                            p2Value = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : (valObj.value !== undefined ? valObj.value : valObj);
                                        }
                                    }
                                });

                                // 2. Check DOM for parent_2
                                if (!p2Value) {
                                    const domVal = getDOMFieldValue(f.field_id, 'parent_2', null, null);
                                    if (domVal !== null && domVal !== undefined) p2Value = domVal;
                                }

                                // 3. Check parent2FieldValues
                                if (!p2Value) {
                                    p2Value = parent2FieldValues[`id_${f.field_id}`]
                                        || parent2FieldValues[normalizedLabel]
                                        || fuzzyLookupValue(parent2FieldValues, f.field_id, f.field_name)
                                        || '';
                                }

                                // 4. Check activeDraftRows for parent_number === 2
                                if (!p2Value && window.activeDraftRows && Array.isArray(window.activeDraftRows)) {
                                    for (const r of window.activeDraftRows) {
                                        if (r.data && Array.isArray(r.data)) {
                                            const dField = r.data.find(d => d.field_id == f.field_id && d.parent_number === 2);
                                            if (dField && dField.value !== undefined && dField.value !== null && dField.value !== '') {
                                                p2Value = dField.value;
                                                break;
                                            }
                                        }
                                    }
                                }

                                return {
                                    field_id: f.field_id,
                                    customfield_id: f.customfield_id || 0,
                                    value: String(p2Value).trim()
                                };
                            });
                        }

                        // Build registration_fields (custom fields by form)
                        let baseCustomFields = [];
                        Object.keys(customFieldsByFormMap).forEach(formId => {
                            baseCustomFields = baseCustomFields.concat(customFieldsByFormMap[formId] || []);
                        });
                        const fieldIdMap = new Map();
                        baseCustomFields.forEach(f => {
                            if (f.field_id > 0 && (!fieldIdMap.has(f.field_id) || (f.value !== '' && fieldIdMap.get(f.field_id).value === ''))) {
                                fieldIdMap.set(f.field_id, f);
                            }
                        });
                        // Filter out parent-level fields so they are not duplicated under parent_number = 0
                        const finalRegFields = Array.from(fieldIdMap.values()).filter(f => !parentFieldMap.has(f.field_id));

                        // Build draftPlayers array (new format with field_name, level, team)
                        const draftPlayersList = Object.values(playerEntriesMap).map(pEntry => {
                            const playerFieldMap = new Map();
                            pEntry.data.forEach(f => {
                                if (f.field_id > 0 && (!playerFieldMap.has(f.field_id) || (f.value !== '' && playerFieldMap.get(f.field_id).value === ''))) {
                                    playerFieldMap.set(f.field_id, f);
                                }
                            });

                            if (perPlayerCustomFields[pEntry.player_id]) {
                                Object.keys(perPlayerCustomFields[pEntry.player_id]).forEach(formId => {
                                    const fields = perPlayerCustomFields[pEntry.player_id][formId] || [];
                                    fields.forEach(f => {
                                        if (f.field_id > 0 && (!playerFieldMap.has(f.field_id) || (f.value !== '' && playerFieldMap.get(f.field_id).value === ''))) {
                                            playerFieldMap.set(f.field_id, f);
                                        }
                                    });
                                });
                            }

                            const dedupedPlayerData = Array.from(playerFieldMap.values());

                            // Determine level (division ID) from division selection or player data
                            let playerLevel = 0;
                            const pObj = playersList.find(p => p.player_id == pEntry.player_id);
                            if (pObj && pObj.division_id) {
                                playerLevel = parseInt(pObj.division_id) || 0;
                            }
                            if (!playerLevel && typeof getPlayerDivisionId === 'function') {
                                playerLevel = parseInt(getPlayerDivisionId(pEntry.player_id)) || 0;
                            }
                            if (!playerLevel && selectedLevelDivisionId) {
                                playerLevel = parseInt(selectedLevelDivisionId) || 0;
                            }
                            // Fallback: check collected division data
                            if (!playerLevel) {
                                const divField = dedupedPlayerData.find(f => (f.field_name || '').toLowerCase() === 'division' || (f.label || '').toLowerCase() === 'division');
                                if (divField && divField.value) {
                                    playerLevel = parseInt(divField.value) || 0;
                                }
                            }
                            if (!playerLevel) {
                                const domSelect = document.querySelector(`.division-select[data-player-id="${pEntry.player_id}"], .division-select[name*="${pEntry.player_id}"], .division-select`);
                                if (domSelect && domSelect.value) {
                                    playerLevel = parseInt(domSelect.value) || 0;
                                }
                            }
                            if (playerLevel > 0 && pObj) {
                                pObj.division_id = playerLevel;
                            }

                            // Team is typically 0 at draft time (not yet assigned)
                            const playerTeam = (pObj && pObj.team_id) ? parseInt(pObj.team_id) : 0;

                            return {
                                player_id: parseInt(pEntry.player_id),
                                selected_form_ids: pEntry.forms.map(f => parseInt(f)),
                                level: playerLevel,
                                team: playerTeam,
                                data: dedupedPlayerData.map(f => ({
                                    field_id: f.field_id,
                                    field_name: f.field_name || '',
                                    value: f.value !== undefined ? String(f.value).trim() : ''
                                }))
                            };
                        });

                        const submitOrg = localStorage.getItem('organisation') || '';
                        const submitToken = localStorage.getItem('authToken') || '';
                        const toGraphQLArgs = (obj) => JSON.stringify(obj).replace(/"([^"]+)":/g, '$1:');

                        // Build parent_data with field_name included
                        const formattedParentData = finalParentData.map(f => ({
                            field_id: f.field_id,
                            field_name: f.field_name || '',
                            value: f.value !== undefined ? String(f.value).trim() : ''
                        }));

                        // Build parent2_data (null if not applicable)
                        let formattedParent2Data = null;
                        if (hasTwoParents && finalParent2Data.length > 0) {
                            formattedParent2Data = finalParent2Data.map(f => ({
                                field_id: f.field_id,
                                field_name: f.field_name || '',
                                value: f.value !== undefined ? String(f.value).trim() : ''
                            }));
                        }

                        // Build formatted registration fields
                        const formattedRegFields = finalRegFields.map(f => ({
                            field_id: f.field_id,
                            field_name: f.field_name || '',
                            value: f.value !== undefined ? String(f.value).trim() : ''
                        }));

                        const draftPlayersStr = toGraphQLArgs(draftPlayersList);
                        const parentStr = toGraphQLArgs(formattedParentData);
                        const parent2Str = formattedParent2Data ? toGraphQLArgs(formattedParent2Data) : 'null';
                        const regFieldsStr = toGraphQLArgs(formattedRegFields);

                        const mutation = `mutation SaveRegistrationDraft {
                            saveRegistrationDraft(
                                form_id: ${parseInt(mainFormId)}
                                league_id: ${parseInt(leagueId)}
                                season_id: ${parseInt(seasonId)}
                                players: null
                                draftPlayers: ${draftPlayersStr}
                                parent_data: ${parentStr}
                                registration_fields: ${regFieldsStr}
                                parent2_data: ${parent2Str}
                            ) {
                                success
                                message
                                drafts {
                                    draft_id
                                    player_id
                                }
                            }
                        }`;

                        const draftPayloadSent = {
                            form_id: parseInt(mainFormId),
                            league_id: parseInt(leagueId),
                            season_id: parseInt(seasonId),
                            draftPlayers: draftPlayersList,
                            parent_data: formattedParentData,
                            parent2_data: formattedParent2Data,
                            registration_fields: formattedRegFields,
                            mutation: mutation
                        };
                        window.lastSavedDraftPayload = draftPayloadSent;

                        console.log('📤 Sending Draft Data to Server:', draftPayloadSent);

                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': submitOrg,
                                'X-Token': submitToken,
                            },
                            body: JSON.stringify({ query: mutation })
                        });

                        const result = await response.json();
                        if (result.errors) {
                            throw new Error(result.errors.map(e => e.message).join(', '));
                        }

                        if (result.data && result.data.saveRegistrationDraft) {
                            const res = result.data.saveRegistrationDraft;
                            if (res.success) {
                                window.lastSavedDraftResponse = res;

                                // Log detailed sent data in console after saving draft
                                console.group('💾 [Draft Saved Successfully] Data Sent from Frontend');
                                console.log('📋 Response Drafts:', res.drafts);
                                console.log('📦 Complete Sent Payload Object:', draftPayloadSent);
                                console.log('👥 Draft Players (draftPlayers):', draftPlayersList);
                                console.log('👨‍👩‍👧 Parent 1 Data (parent_data):', formattedParentData);
                                if (formattedParent2Data) {
                                    console.log('👨‍👩‍👦 Parent 2 Data (parent2_data):', formattedParent2Data);
                                }
                                console.log('📝 Registration / Custom Fields (registration_fields):', formattedRegFields);
                                console.log('🔗 GraphQL Mutation String:\n' + mutation);
                                console.log('ℹ️ You can also access this anytime in console via: window.lastSavedDraftPayload');
                                console.groupEnd();

                                const returnedDraftId = res.drafts && res.drafts[0] ? res.drafts[0].draft_id : null;
                                if (returnedDraftId) {
                                    window.currentDraftId = returnedDraftId;
                                    const url = new URL(window.location.href);
                                    if (url.searchParams.get('draft_id') !== String(returnedDraftId)) {
                                        url.searchParams.set('draft_id', returnedDraftId);
                                        window.history.replaceState({}, '', url.toString());
                                    }
                                }

                                if (saveBtn) {
                                    saveBtn.disabled = false;
                                }

                                Swal.fire({
                                    title: 'Draft Saved!',
                                    text: 'Your registration progress has been saved. You can resume this draft at any time.',
                                    icon: 'success',
                                    confirmButtonText: 'Continue',
                                    confirmButtonColor: 'var(--primary-theme-color)'
                                });
                            } else {
                                throw new Error(res.message || 'Failed to save draft');
                            }
                        } else {
                            throw new Error('Invalid response structure');
                        }

                    } catch (error) {
                        console.error('Error saving draft:', error);
                        Swal.fire({
                            title: 'Error Saving Draft',
                            text: error.message || 'Something went wrong while saving the draft.',
                            icon: 'error',
                            confirmButtonText: 'OK',
                            confirmButtonColor: 'var(--primary-theme-color)'
                        });
                    } finally {
                        const saveBtn = document.getElementById('save-draft-btn');
                        if (saveBtn) {
                            saveBtn.disabled = false;
                            saveBtn.innerHTML = 'Save Draft';
                        }
                    }
                }

                // Add Submit Button Handler & Reset Helper
                const submitBtn = document.getElementById('submit-registration-btn');

                window.resetSubmitRegistrationButton = function() {
                    const btn = document.getElementById('submit-registration-btn');
                    if (btn) {
                        btn.innerHTML = 'Submit Registration';
                        btn.disabled = false;
                        btn.classList.remove('opacity-75', 'cursor-not-allowed');
                    }
                    if (typeof window.checkSubmitButtonState === 'function') {
                        window.checkSubmitButtonState();
                    }
                };

                // Function to open payment modal
                function openPaymentModal(amount) {
                    const modal = document.getElementById('payment-modal');
                    const iframe = document.getElementById('payment-iframe');
                    const loading = document.getElementById('payment-loading');

                    const org = localStorage.getItem('organisation') || '';
                    const token = localStorage.getItem('authToken') || '';
                    // Construct payment URL with params
                    const paymentUrl = `${window.APP_PREFIX || '/user-dashboard'}/payment-registration-frame?amount=${amount}&org=${org}&token=${token}&source=user-dashboard&gPayCred=${encodeURIComponent(globalPayCred)}&gPayTest=${globalPayTesting}`;

                    iframe.src = paymentUrl;
                    modal.style.display = 'block';
                    loading.classList.remove('hidden');
                    iframe.onload = () => loading.classList.add('hidden');
                }

                window.closePaymentModal = (skipButtonReset = false) => {
                    const modal = document.getElementById('payment-modal');
                    if (modal) modal.style.display = 'none';
                    const iframe = document.getElementById('payment-iframe');
                    if (iframe) iframe.src = '';
                    const loading = document.getElementById('payment-loading');
                    if (loading) loading.classList.remove('hidden');
                    if (!skipButtonReset) {
                        window.resetSubmitRegistrationButton();
                    }
                };

                window.addEventListener('message', (e) => {
                    // Check if message is from our current origin or the hardcoded gateway domain
                    if (e.origin !== window.location.origin && e.origin !== '{{ config('api.url') }}' && e.origin !== 'http://localhost' && e.origin !== 'https://myldev.computersosinc.com') return;
                    if (e.data && e.data.status === 'success') {
                        // Keep loader visible if already shown, or show it now
                        const loader = document.getElementById('full-page-loader');
                        if (loader) loader.classList.remove('hidden');

                        // Small delay to let the iframe show its success state briefly if desired
                        setTimeout(() => {
                            window.closePaymentModal(true);
                            if (window.submitCallbackAfterPayment) window.submitCallbackAfterPayment(e.data.auth_num);
                        }, 1500);
                    } else if (e.data && (e.data.status === 'cancel' || e.data.status === 'close' || e.data.status === 'back')) {
                        const loader = document.getElementById('full-page-loader');
                        if (loader) loader.classList.add('hidden');
                        window.closePaymentModal();
                        if (e.data.status === 'cancel') {
                            showAlert('Payment cancelled.', 'error');
                        }
                    } else if (e.data && e.data.status === 'error') {
                        const loader = document.getElementById('full-page-loader');
                        if (loader) loader.classList.add('hidden');
                        window.closePaymentModal();
                        showAlert(e.data.message || 'Payment failed.', 'error');
                    }
                });

                // Backdrop click listener to close modal and reset button
                document.addEventListener('click', function(e) {
                    const modal = document.getElementById('payment-modal');
                    if (modal && modal.style.display === 'block' && e.target === modal) {
                        window.closePaymentModal();
                    }
                });

                // Escape key listener to close modal and reset button
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' || e.key === 'Esc') {
                        const modal = document.getElementById('payment-modal');
                        if (modal && modal.style.display === 'block') {
                            window.closePaymentModal();
                        }
                    }
                });

                // Handle browser Back / Forward (bfcache and popstate) navigation
                window.addEventListener('pageshow', function(e) {
                    const loader = document.getElementById('full-page-loader');
                    if (loader) loader.classList.add('hidden');
                    const modal = document.getElementById('payment-modal');
                    if (modal && modal.style.display === 'block') {
                        modal.style.display = 'none';
                        const iframe = document.getElementById('payment-iframe');
                        if (iframe) iframe.src = '';
                    }
                    window.resetSubmitRegistrationButton();
                });

                window.addEventListener('popstate', function() {
                    const loader = document.getElementById('full-page-loader');
                    if (loader) loader.classList.add('hidden');
                    const modal = document.getElementById('payment-modal');
                    if (modal && modal.style.display === 'block') {
                        modal.style.display = 'none';
                        const iframe = document.getElementById('payment-iframe');
                        if (iframe) iframe.src = '';
                    }
                    window.resetSubmitRegistrationButton();
                });

                if (submitBtn) {
                    submitBtn.addEventListener('click', async function () {
                        // Fail-safe validation for league selection in registration sets
                        if (typeof window.checkSubmitButtonState === 'function' && !window.checkSubmitButtonState()) {
                            return;
                        }

                        // Capturing this in a global-ish callback
                        // ── 1. Validate sections (Consolidated) ──
                        let missingSections = [];
                        Object.values(allPagesMap).forEach(page => {
                            const pName = (page.name || '').toLowerCase().trim();
                            if (pName === 'welcome' || pName === 'summary' || pName === 'payment' || pName === 'payments') return;

                            const headerCheck = document.getElementById(`header-checkmark-${page.page_id}`);
                            const sectionWrapper = document.getElementById(`section-wrapper-${page.page_id}`);

                            // Only validate sections that are actually rendered in the DOM AND are not hidden
                            if (!headerCheck || !sectionWrapper || sectionWrapper.classList.contains('hidden')) return;

                            const isCheckmarkVisible = !headerCheck.classList.contains('hidden');
                            const isDataSaved = sectionWrapper.getAttribute('data-saved') === 'true';

                            if (!isCheckmarkVisible && !isDataSaved) {
                                missingSections.push(page.name);
                            }
                        });

                        if (missingSections.length > 0) {
                            showAlert(`Please save the following sections before registering:\n- ${missingSections.join('\n- ')}`, 'error');
                            return;
                        }

                        // Define the sequence to be triggered after payment (or immediately if no fee)
                        window.submitCallbackAfterPayment = async (paymentAuthCode = null) => {
                            try {
                                const queryDOMInput = (fid, pid, page, field) => {
                                    const fieldIdTable = field ? (field.idTable || field.id_table || field.idtable) : null;
                                    const targetPid = (fieldIdTable == 1 || fieldIdTable == '1') ? 'parent' : pid;
                                    const actualFieldId = (field && field.field_id) ? field.field_id : fid;

                                    // 1. Try specific player-isolated data-attributes first
                                    let input = document.querySelector(`[data-field-id="${fid}"][data-player-id="${targetPid}"]`);
                                    if (input) return input;

                                    // 2. Try dynamic name multi-player format
                                    if (page && field && field.page_field_name) {
                                        const dynamicNameMulti = `${page.page_id}_${field.page_field_name}_${targetPid}`;
                                        input = document.querySelector(`[name="${dynamicNameMulti}"]`);
                                        if (input) return input;
                                    }

                                    // 3. Try standard input name with data-player-id restriction
                                    input = document.querySelector(`[name="field[${fid}]"][data-player-id="${targetPid}"], [name="field[${actualFieldId}]"][data-player-id="${targetPid}"]`);
                                    if (input) return input;

                                    // 4. Try dynamic ID if rendered by custom page
                                    if (page) {
                                        input = document.getElementById(`dynamic-field-${page.page_id}-${fid}-${targetPid}`);
                                        if (input) return input;
                                    }

                                    // 5. Fallback only inside the player's accordion section container if pid is a real player ID
                                    if (targetPid && targetPid !== 'parent' && targetPid !== '0' && targetPid !== 0) {
                                        const container = document.getElementById(`section-wrapper-dynamic-${page ? page.form_id : ''}-${page ? page.page_id : ''}`) || 
                                                          document.getElementById(`section-wrapper-${page ? page.page_id : ''}`);
                                        if (container) {
                                            input = container.querySelector(`[data-field-id="${fid}"]`) || 
                                                    container.querySelector(`[name="field[${fid}]"]`) ||
                                                    container.querySelector(`[name="field[${actualFieldId}]"]`);
                                            if (input) return input;
                                        }
                                    }

                                    // 6. Generic/fallback selectors (only fallback to these if target is parent or global, OR as last resort)
                                    if (targetPid === 'parent' || targetPid === '0' || targetPid === 0) {
                                        input = document.querySelector(`[data-field-id="${fid}"][data-player-id="parent"]`);
                                        if (input) return input;

                                        input = document.querySelector(`[data-field-id="${fid}"]`);
                                        if (input) return input;

                                        if (page && field && field.page_field_name) {
                                            const dynamicNameSingle = `${page.page_id}_${field.page_field_name}`;
                                            input = document.querySelector(`[name="${dynamicNameSingle}"]`);
                                            if (input) return input;
                                        }

                                        input = document.querySelector(`[name="field[${fid}]"], [name="field[${actualFieldId}]"]`);
                                        if (input) return input;

                                        if (field && field.page_field_name) {
                                            input = document.querySelector(`[name="${field.page_field_name}"]`);
                                            if (input) return input;
                                        }
                                    }

                                    return document.getElementById(`field-${fid}`);
                                };

                                let paymentPageInfo = null;
                                // ── 2. Collect parent_data, custom fields, and player entries ──

                                // ── 3. Collect parent_data, custom fields (per-form), and player entries (per-player-per-form) ──
                                let parent_data = [];
                                let customFieldsByFormMap = {}; // Map: formId -> [fields]
                                let perPlayerCustomFields = {}; // Map: playerId -> targetFormId -> [fields]

                                // Use a map to collect all data for each player across all pages
                                let playerEntriesMap = {}; // Map: playerId -> { data: [], forms: [] }

                                // Determine which players we are actually registering
                                 let activePlayerIds = [];
                                 if (typeof isRegistrationSet !== 'undefined' && isRegistrationSet) {
                                     activePlayerIds = Array.from(updatedPlayerIds).map(id => parseInt(id))
                                         .filter(id => !excludedPlayerIds.has(id) && !excludedPlayerIds.has(parseInt(id)));
                                 } else if (selectedPlayerIds.size > 0) {
                                     activePlayerIds = Array.from(selectedPlayerIds).map(id => parseInt(id))
                                         .filter(id => !excludedPlayerIds.has(id) && !excludedPlayerIds.has(parseInt(id)));
                                 } else {
                                     const pid = parseInt(currentlyEditingPlayerId || localStorage.getItem('player_id') || 0);
                                     if (!excludedPlayerIds.has(pid)) {
                                         activePlayerIds = [pid];
                                     }
                                 }
                                console.log('🎯 Active Player IDs for submission:', activePlayerIds);

                                // Initialize playerEntriesMap for all active players immediately
                                activePlayerIds.forEach(pid => {
                                    const pObj = playersList.find(p => p.player_id == pid);
                                    const forms = (isRegistrationSet && pObj && pObj.forms)
                                        ? pObj.forms
                                        : (pObj && pObj.selected_form_ids ? pObj.selected_form_ids : [(currentForm ? currentForm.form_id : collectedRegistrationData.form_id)]);

                                     playerEntriesMap[pid] = {
                                         player_id: pid,
                                         data: [],
                                         forms: forms.filter(f => !!f),
                                         playerName: pObj ? `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim() : `Player ${pid}`
                                     };
                                 });

                                // Find payment page info regardless of whether it's in collectedRegistrationData
                                // This ensures hidden payment pages are still processed for fields like "Amount", "Status", etc.
                                const allAvailablePages = [...Object.values(allPagesMap), ...allPagesIncludingHidden];
                                const potentialPaymentPage = allAvailablePages.find(p => getPageType(p.name, p) === 'payment');
                                if (potentialPaymentPage) {
                                    paymentPageInfo = {
                                        pageId: potentialPaymentPage.page_id,
                                        page: potentialPaymentPage,
                                        data: collectedRegistrationData[potentialPaymentPage.page_id] || {}
                                    };
                                    console.log('💳 Payment page discovered:', potentialPaymentPage.name, '(ID:', potentialPaymentPage.page_id, ')');
                                }

                                // Track processed pages to avoid duplicates in second pass
                                const processedPageIds = new Set();
                                Object.keys(collectedRegistrationData).forEach(id => {
                                    processedPageIds.add(String(id));
                                    // Also add original_page_id if this is a dynamic page
                                    const page = allPagesMap[id];
                                    if (page && page.original_page_id) {
                                        processedPageIds.add(String(page.original_page_id));
                                    }
                                });

                                Object.keys(collectedRegistrationData).forEach(pageId => {
                                    if (pageId === 'form_id' || pageId === 'parent_id' || pageId === 'membership' || pageId === 'registration_set_id') return;

                                    const pageData = collectedRegistrationData[pageId];
                                    // Try to find page: first in allPagesMap directly, then in allPagesIncludingHidden,
                                    // then try finding a dynamic variant (e.g., dynamic-{formId}-{pageId}) in allPagesMap
                                    let page = allPagesMap[pageId] || allPagesIncludingHidden.find(p => p.page_id == pageId);
                                    if (!page) {
                                        // Try to find a dynamic page variant that has this original_page_id
                                        const dynamicVariant = Object.values(allPagesMap).find(p => p.original_page_id == pageId);
                                        if (dynamicVariant) {
                                            page = dynamicVariant;
                                            console.log(`🔗 Found dynamic variant for page ${pageId}: ${dynamicVariant.page_id} (form ${dynamicVariant.form_id})`);
                                        }
                                    }

                                    if (!page) {
                                        // RAW DATA PARSER: If the page metadata is missing (because we switched forms), 
                                        // still extract the data directly from the saved JSON structure.
                                        // Store under ALL target form IDs so data is found during per-player submission
                                        const sourceFormId = currentForm ? currentForm.form_id : collectedRegistrationData.form_id;
                                        const allTargetFormIds = new Set();
                                        allTargetFormIds.add(sourceFormId);
                                        // Also add all form IDs that players are registering for
                                        activePlayerIds.forEach(pid => {
                                            const pObj = playerEntriesMap[pid] || playersList.find(p => p.player_id == pid);
                                            if (pObj && pObj.forms) pObj.forms.forEach(f => allTargetFormIds.add(f));
                                            if (pObj && pObj.selected_form_ids) pObj.selected_form_ids.forEach(f => allTargetFormIds.add(f));
                                        });

                                        for (const [key, value] of Object.entries(pageData)) {
                                            if (typeof value === 'object' && value !== null) {
                                                let isPlayer = activePlayerIds.includes(parseInt(key)) || (!isNaN(parseInt(key)) && activePlayerIds.some(p => String(p) === String(key)));

                                                if (isPlayer) {
                                                    const pid = key;
                                                    for (const [fidStr, fieldVal] of Object.entries(value)) {
                                                        const fid = parseInt(fidStr);
                                                        if (isNaN(fid)) continue;

                                                        let fVal = fieldVal.values !== undefined ? fieldVal.values : (fieldVal.value !== undefined ? fieldVal.value : fieldVal.val);
                                                        if (typeof fVal === 'boolean') fVal = fVal ? "1" : "0";
                                                        else if (fVal !== null && fVal !== undefined) fVal = String(fVal).trim();
                                                        else fVal = "";

                                                        const cid = parseInt(fieldVal.customfieldId || fieldVal.custom_field_id || 0) || 0;
                                                        if (!perPlayerCustomFields[pid]) perPlayerCustomFields[pid] = {};

                                                        // Store under ALL target form IDs so data is always found
                                                        allTargetFormIds.forEach(targetFid => {
                                                            if (!perPlayerCustomFields[pid][targetFid]) perPlayerCustomFields[pid][targetFid] = [];
                                                            perPlayerCustomFields[pid][targetFid].push({
                                                                field_id: fid,
                                                                customfield_id: cid,
                                                                value: fVal,
                                                                label: fieldVal.label || ''
                                                            });
                                                        });
                                                    }
                                                } else {
                                                    const fid = parseInt(key);
                                                    if (isNaN(fid)) continue;

                                                    let fVal = value.values !== undefined ? value.values : (value.value !== undefined ? value.value : value.val);
                                                    if (typeof fVal === 'boolean') fVal = fVal ? "1" : "0";
                                                    else if (fVal !== null && fVal !== undefined) fVal = String(fVal).trim();
                                                    else fVal = "";

                                                    const cid = parseInt(value.customfieldId || value.custom_field_id || 0) || 0;

                                                    allTargetFormIds.forEach(targetFid => {
                                                        if (!customFieldsByFormMap[targetFid]) customFieldsByFormMap[targetFid] = [];
                                                        customFieldsByFormMap[targetFid].push({
                                                            field_id: fid,
                                                            customfield_id: cid,
                                                            value: fVal,
                                                            label: value.label || ''
                                                        });
                                                    });
                                                }
                                            }
                                        }
                                        return;
                                    }

                                    const pType = getPageType(page.name, page);
                                    const pageFields = page.fields || [];

                                    if (pType === 'player') {
                                        // Player Page - collect every single field from this page for each active player
                                        activePlayerIds.forEach(pid => {
                                            if (!playerEntriesMap[pid]) {
                                                const pObj = playersList.find(p => p.player_id == pid);
                                                const forms = (isRegistrationSet && pObj && pObj.selected_form_ids)
                                                    ? pObj.selected_form_ids
                                                    : [(currentForm ? currentForm.form_id : collectedRegistrationData.form_id)];

                                                playerEntriesMap[pid] = {
                                                    player_id: pid,
                                                    data: [],
                                                    forms: forms.filter(f => !!f),
                                                    playerName: pObj ? `${pObj.first_name || ''} ${pObj.last_name || ''}`.trim() : `Player ${pid}`
                                                };
                                            }

                                            let playerData = pageData ? pageData[pid] : null;
                                            if (!playerData) {
                                                // Only fall back if there is strictly one player in total
                                                if (activePlayerIds.length === 1 && pageData && Object.keys(pageData).length === 1) {
                                                    const singleKey = Object.keys(pageData)[0];
                                                    playerData = pageData[singleKey];
                                                }
                                            }
                                            if (!playerData) playerData = {};

                                            const pObj = playersList.find(p => p.player_id == pid);
                                            const draftRow = (window.activeDraftRows || []).find(r => r.player_id == pid);
                                            const draftMap = (window.draftPlayerFieldValues && window.draftPlayerFieldValues[pid]) ? window.draftPlayerFieldValues[pid] : {};

                                            pageFields.forEach(field => {
                                                const fid = parseInt(field.field_id || field.fieldid);
                                                if (isNaN(fid) || fid <= 0) return;

                                                const normLabel = (field.label || '').toLowerCase().trim();
                                                const pageFieldName = (field.page_field_name || '').toLowerCase().trim();
                                                const formFieldName = (field.form_field_name || '').toLowerCase().trim();

                                                const isDateField = field.field_type === 'date' || normLabel.includes('birth') || normLabel.includes('dob') || formFieldName.includes('dateofbirth') || formFieldName.includes('birth') || pageFieldName.includes('dateofbirth') || pageFieldName.includes('birth');

                                                const valObj = playerData[fid] !== undefined ? playerData[fid] :
                                                    (playerData[field.field_id] !== undefined ? playerData[field.field_id] :
                                                        (playerData[field.fieldid] !== undefined ? playerData[field.fieldid] :
                                                            (playerData[field.page_field_name] !== undefined ? playerData[field.page_field_name] :
                                                                playerData[field.form_field_name])));

                                                let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                                // Ignore zero dates
                                                if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                    finalVal = '';
                                                }

                                                // Fallback 1: check draftPlayerFieldValues for this player
                                                if (finalVal === null || finalVal === undefined || finalVal === '') {
                                                    if (draftMap[`id_${fid}`] !== undefined) finalVal = draftMap[`id_${fid}`];
                                                    else if (normLabel && draftMap[normLabel] !== undefined) finalVal = draftMap[normLabel];
                                                    else if (pageFieldName && draftMap[pageFieldName] !== undefined) finalVal = draftMap[pageFieldName];
                                                    else if (formFieldName && draftMap[formFieldName] !== undefined) finalVal = draftMap[formFieldName];

                                                    if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                        finalVal = '';
                                                    }
                                                }

                                                // Fallback 2: check activeDraftRows for this player
                                                if ((finalVal === null || finalVal === undefined || finalVal === '') && draftRow && Array.isArray(draftRow.data)) {
                                                    const dField = draftRow.data.find(d => d.field_id == fid);
                                                    if (dField && dField.value !== undefined && dField.value !== null) {
                                                        finalVal = dField.value;
                                                    }

                                                    if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                        finalVal = '';
                                                    }
                                                }

                                                // Fallback 3: check playerObj fields or name properties
                                                if ((finalVal === null || finalVal === undefined || finalVal === '') && pObj) {
                                                    if (Array.isArray(pObj.fields)) {
                                                        const pField = pObj.fields.find(f => (f.field_id && f.field_id == fid) || (f.label && f.label.toLowerCase().trim() === normLabel));
                                                        if (pField && pField.value !== undefined && pField.value !== null) {
                                                            finalVal = pField.value;
                                                        }
                                                    }
                                                    if (finalVal === null || finalVal === undefined || finalVal === '') {
                                                        if (formFieldName === 'firstname' || normLabel.includes('first name') || normLabel === 'firstname') {
                                                            if (pObj.first_name && pObj.first_name !== 'New') finalVal = pObj.first_name;
                                                        } else if (formFieldName === 'lastname' || normLabel.includes('last name') || normLabel === 'lastname') {
                                                            if (pObj.last_name && pObj.last_name !== 'Player') finalVal = pObj.last_name;
                                                        }
                                                    }

                                                    if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                        finalVal = '';
                                                    }
                                                }

                                                // Fallback 4: DOM query (only if safe/isolated)
                                                if (finalVal === null || finalVal === undefined || finalVal === '') {
                                                    const domVal = queryDOMInput(fid, pid, page, field);
                                                    if (domVal !== null && domVal !== undefined) finalVal = cleanFieldValue(domVal);

                                                    if (isDateField && (String(finalVal).startsWith('0000') || finalVal === '00/00/0000' || finalVal === '00-00-0000')) {
                                                        finalVal = '';
                                                    }
                                                }

                                                if (isDateField && finalVal) {
                                                    finalVal = formatDateToYYYYMMDD(finalVal);
                                                    if (String(finalVal).startsWith('0000')) finalVal = '';
                                                }

                                                const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                                let finalCid = parseInt(customFieldId) || 0;
                                                if (!finalCid) {
                                                    finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                                }

                                                if (field.form_field_name === 'division') return;

                                                playerEntriesMap[pid].data.push({
                                                    field_id: fid,
                                                    field_name: field.form_field_name || field.page_field_name,
                                                    customfield_id: finalCid,
                                                    value: cleanFieldValue(finalVal)
                                                });
                                            });
                                        });

                                    } else if (pType === 'parent') {
                                        // Parent Page - ensure each predefined field is sent, defaulting to "" if empty
                                        pageFields.forEach(field => {
                                            const fid = parseInt(field.field_id || field.fieldid);
                                            if (isNaN(fid) || fid <= 0) return;

                                            const valObj = pageData[fid] || pageData[field.field_id] || pageData[field.fieldid]
                                                || pageData[field.page_field_name] || pageData[field.form_field_name];

                                            let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                            if (finalVal === undefined || finalVal === null || finalVal === '') {
                                                const input = queryDOMInput(fid, 'parent', page, field);
                                                if (input) {
                                                    finalVal = cleanFieldValue(input);
                                                }
                                            }

                                            const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                            let finalCid = parseInt(customFieldId) || 0;
                                            if (!finalCid) {
                                                finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                            }

                                            parent_data.push({
                                                field_id: fid,
                                                field_name: field.form_field_name || field.page_field_name,
                                                customfield_id: finalCid,
                                                value: cleanFieldValue(finalVal)
                                            });
                                        });

                                    } else {
                                        const isPaymentPageSubmit = pType === 'payment';

                                        if (isPaymentPageSubmit) {
                                            paymentPageInfo = { pageId, page, data: pageData };
                                        } else {
                                            const hasPlayerDataInPageData = activePlayerIds.some(pid => pageData && (pageData[pid] || pageData[String(pid)] || pageData[parseInt(pid)]));
                                            let isPerPlayer = page.per_member == 1 || page.per_member === true || hasPlayerDataInPageData;

                                            if (isPerPlayer) {
                                                activePlayerIds.forEach(pid => {
                                                    let pData = (pageData ? (pageData[pid] || pageData[String(pid)] || pageData[parseInt(pid)]) : null) || {};
                                                    let playerCustomData = [];

                                                    pageFields.forEach(field => {
                                                        const fid = parseInt(field.field_id || field.fieldid);
                                                        if (isNaN(fid) || fid <= 0) return;

                                                        const valObj = pData[fid] || pData[field.field_id] || pData[field.fieldid]
                                                            || pData[field.page_field_name] || pData[field.form_field_name];

                                                        let finalVal = null;
                                                        if (valObj !== undefined && valObj !== null) {
                                                            if (typeof valObj === 'object') {
                                                                finalVal = valObj.values !== undefined ? valObj.values :
                                                                    (valObj.value !== undefined ? valObj.value :
                                                                        (valObj.val !== undefined ? valObj.val :
                                                                            (valObj.response !== undefined ? valObj.response : null)));
                                                            } else {
                                                                finalVal = valObj;
                                                            }
                                                        }

                                                        if (finalVal === undefined || finalVal === null) {
                                                            const input = queryDOMInput(fid, pid, page, field);
                                                            if (input) {
                                                                if (input.type === 'checkbox') {
                                                                    finalVal = input.checked ? "1" : "0";
                                                                } else {
                                                                    finalVal = input.value;
                                                                }
                                                            }
                                                        }

                                                        if (typeof finalVal === 'boolean') finalVal = finalVal ? "1" : "0";
                                                        else if (finalVal !== null && finalVal !== undefined) finalVal = String(finalVal).trim();
                                                        else finalVal = "";

                                                        const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                                        let finalCid = parseInt(customFieldId) || 0;
                                                        if (!finalCid) {
                                                            finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                                        }

                                                        const fieldIdTable = field.idTable || field.id_table || field.idtable;
                                                        if (fieldIdTable == 1) {
                                                            parent_data.push({
                                                                field_id: fid,
                                                                field_name: field.form_field_name || field.page_field_name,
                                                                customfield_id: finalCid,
                                                                value: String(finalVal)
                                                            });
                                                        } else {
                                                            const fieldLabel = field.label || '';
                                                            playerCustomData.push({
                                                                field_id: fid,
                                                                customfield_id: finalCid,
                                                                label: fieldLabel,
                                                                value: String(finalVal)
                                                            });
                                                        }
                                                    });

                                                    const pObj = playerEntriesMap[pid] || playersList.find(p => p.player_id == pid);
                                                    const selectedForms = (isRegistrationSet && pObj && pObj.forms)
                                                        ? pObj.forms
                                                        : (pObj && pObj.selected_form_ids ? pObj.selected_form_ids : [page.form_id || (currentForm ? currentForm.form_id : collectedRegistrationData.form_id)]);

                                                    selectedForms.forEach(targetFid => {
                                                        const remappedCustomData = [...playerCustomData];

                                                        if (!remappedCustomData) return;

                                                        if (!perPlayerCustomFields[pid]) perPlayerCustomFields[pid] = {};
                                                        if (!perPlayerCustomFields[pid][targetFid]) perPlayerCustomFields[pid][targetFid] = [];
                                                        perPlayerCustomFields[pid][targetFid] = perPlayerCustomFields[pid][targetFid].concat(remappedCustomData);
                                                    });
                                                });
                                            } else {
                                                // CUSTOM PAGE - Single shared page without per-player fields
                                                pageFields.forEach(field => {
                                                    const fid = parseInt(field.field_id || field.fieldid);
                                                    if (isNaN(fid) || fid <= 0) return;

                                                    const valObj = pageData[fid] || pageData[field.field_id] || pageData[field.fieldid]
                                                        || pageData[field.page_field_name] || pageData[field.form_field_name];

                                                    let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                                    if (finalVal === undefined || finalVal === null) {
                                                        const input = document.querySelector(`[name="field[${fid}]"], [name="field[${field.field_id}]"]`);
                                                        if (input) finalVal = input.value;
                                                    }

                                                    if (typeof finalVal === 'boolean') finalVal = finalVal ? "1" : "0";
                                                    else if (finalVal !== null && finalVal !== undefined) finalVal = String(finalVal);
                                                    else finalVal = "";

                                                    const customFieldId = (typeof valObj === 'object' && valObj !== null) ? (valObj.customfieldId || valObj.custom_field_id) : 0;
                                                    let finalCid = parseInt(customFieldId) || 0;
                                                    if (!finalCid) {
                                                        finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                                    }

                                                    const fieldIdTable = field.idTable || field.id_table || field.idtable;
                                                    const formIdToMap = page.form_id || window.sourceFormId || (currentForm ? currentForm.form_id : null);

                                                    if (fieldIdTable == 1) {
                                                        // Parent-level field even on custom page
                                                        parent_data.push({
                                                            field_id: fid,
                                                            field_name: field.form_field_name || field.page_field_name,
                                                            customfield_id: finalCid,
                                                            value: String(finalVal)
                                                        });
                                                    } else {
                                                        // Actual Registration field (StepField)
                                                        if (!customFieldsByFormMap[formIdToMap]) customFieldsByFormMap[formIdToMap] = [];
                                                        customFieldsByFormMap[formIdToMap].push({
                                                            field_id: fid,
                                                            customfield_id: finalCid,
                                                            value: String(finalVal)
                                                        });
                                                    }
                                                });
                                            }
                                        }
                                    }
                                });
                                // ── 4. Second Pass: Include sections NOT explicitly saved ──
                                // Especially important for dynamic custom pages in registration sets
                                const allKnownPages = [...Object.values(allPagesMap), ...allPagesIncludingHidden];
                                const uniqueProcessedOriginalPageIds = new Set();

                                allKnownPages.forEach(page => {
                                    const pid_key = String(page.page_id);
                                    const original_pid_key = page.original_page_id ? String(page.original_page_id) : pid_key;

                                    // Skip if already processed in main loop OR if we already handled this logical page database ID
                                    if (processedPageIds.has(pid_key) || processedPageIds.has(original_pid_key)) return;
                                    if (uniqueProcessedOriginalPageIds.has(original_pid_key)) return;

                                    uniqueProcessedOriginalPageIds.add(original_pid_key);

                                    const pType = getPageType(page.name, page);
                                    // Only process custom, player, and parent pages (skip payment, welcome, summary)
                                    if (pType !== 'custom' && pType !== 'player' && pType !== 'parent') return;

                                    const pageFields = page.fields || [];
                                    if (pageFields.length === 0) return;

                                    console.log(`%c📋 Including unsaved custom page: "${page.name}" (ID: ${page.page_id}) with ${pageFields.length} fields`, 'color: #f59e0b; font-weight: bold;');

                                    let isPerPlayerPage = page.per_member == 1 || page.per_member === true;

                                    // For unsaved pages, we iterate over active players to ensure they get the data if it's per-player or if it contains player fields
                                    activePlayerIds.forEach(pid => {
                                        pageFields.forEach(field => {
                                            const fid = parseInt(field.field_id || field.fieldid);
                                            if (isNaN(fid) || fid <= 0) return;

                                            // Try reading value from DOM. 
                                            // Pattern can be pageID_fieldName_playerID (multi) or pageID_fieldName (single)
                                            const input = queryDOMInput(fid, pid, page, field);


                                            if (!input) return; // Field likely not rendered or hidden

                                            let finalVal = '';
                                            if (input.type === 'checkbox') {
                                                finalVal = input.checked ? "1" : "0";
                                            } else {
                                                finalVal = input.value || '';
                                            }

                                            const finalCid = parseInt(field.custom_field_id || field.customFieldid || 0) || 0;
                                            const fieldIdTable = field.idTable || field.id_table || field.idtable;
                                            const srcFormId = window.sourceFormId || page.form_id || (currentForm ? currentForm.form_id : null);

                                            if (pType === 'player') {
                                                // Player Detail field (first_name, last_name, dob, etc.)
                                                playerEntriesMap[pid].data.push({
                                                    field_id: fid,
                                                    field_name: field.form_field_name || field.page_field_name,
                                                    customfield_id: finalCid,
                                                    value: String(finalVal)
                                                });
                                            } else if (fieldIdTable == 1) {
                                                // Parent field - only add for the first player to avoid duplicates in the submission
                                                if (pid === activePlayerIds[0]) {
                                                    parent_data.push({
                                                        field_id: fid,
                                                        customfield_id: finalCid,
                                                        value: String(finalVal)
                                                    });
                                                }
                                            } else if (fieldIdTable == 2 || fieldIdTable == 3 || isPerPlayerPage) {
                                                // Player field - add to current player entries
                                                const pObj = playerEntriesMap[pid] || playersList.find(p => p.player_id == pid);
                                                const selectedForms = (isRegistrationSet && pObj && pObj.forms)
                                                    ? pObj.forms
                                                    : (pObj && pObj.selected_form_ids ? pObj.selected_form_ids : [srcFormId]);

                                                selectedForms.forEach(targetFid => {
                                                    if (!perPlayerCustomFields[pid]) perPlayerCustomFields[pid] = {};
                                                    if (!perPlayerCustomFields[pid][targetFid]) perPlayerCustomFields[pid][targetFid] = [];
                                                    perPlayerCustomFields[pid][targetFid].push({
                                                        field_id: fid,
                                                        customfield_id: finalCid,
                                                        value: String(finalVal)
                                                    });
                                                });
                                            } else {
                                                // Registration/Shared field - only add for the first player reference to avoid duplicates
                                                if (pid === activePlayerIds[0]) {
                                                    if (!customFieldsByFormMap[srcFormId]) customFieldsByFormMap[srcFormId] = [];
                                                    customFieldsByFormMap[srcFormId].push({
                                                        field_id: fid,
                                                        customfield_id: finalCid,
                                                        value: String(finalVal)
                                                    });
                                                }
                                            }
                                        });
                                    });
                                });

                                console.log('📋 Custom Fields By Form (after unsaved page inclusion):', customFieldsByFormMap);
                                console.log('📋 Per-Player Custom Fields (after unsaved page inclusion):', perPlayerCustomFields);

                                // Flatten grouped player data into allPlayerEntries for sequential submission
                                let allPlayerEntries = [];
                                Object.values(playerEntriesMap).forEach(pEntry => {
                                    pEntry.forms.forEach(targetFid => {
                                        const srcFormId = window.sourceFormId || (currentForm ? currentForm.form_id : null);
                                        const remappedPlayerData = (isRegistrationSet && srcFormId && srcFormId != targetFid)
                                            ? remapFieldsForForm(pEntry.data, srcFormId, targetFid, 'player')
                                            : pEntry.data;

                                        allPlayerEntries.push({
                                            player_id: pEntry.player_id,
                                            form_id: targetFid,
                                            data: remappedPlayerData,
                                            playerName: pEntry.playerName
                                        });
                                    });
                                });

                                // ── 4. Build per-player payment field values ──
                                // We take ALL saved payment page fields from collectedRegistrationData
                                // and for each player we clone them, overriding amount/auth/applied fields

                                // Collect ALL payment page fields as saved in collectedRegistrationData
                                let paymentFieldsFromSave = []; // Array of { field_id, customfield_id, label, value }

                                // Track field IDs by their actual labels for per-player overrides
                                let amountFieldId = null;         // "Amount"
                                let paymentDateFieldId = null;    // "Payment Date"
                                let statusFieldId = null;         // "Status"
                                let paymentMethodFieldId = null;  // "Payment Method"
                                let totalFeeFieldId = null;       // "Total Fee"
                                let paymentIdFieldId = null;      // "Payment ID"
                                let authNumberFieldId = null;     // "Auth Number"
                                let referenceNumberFieldId = null; // "Reference Number"
                                let paymentTypeFieldId = null;    // "Payment Type"
                                let appliedAmountFieldId = null;  // "Applied Amount"

                                // Helper to identify and track field IDs by label
                                const trackPaymentFieldId = (label, fieldId) => {
                                    if (label === 'amount') amountFieldId = fieldId;
                                    if (label === 'payment date') paymentDateFieldId = fieldId;
                                    if (label === 'status') statusFieldId = fieldId;
                                    if (label === 'payment method') paymentMethodFieldId = fieldId;
                                    if (label === 'total fee') totalFeeFieldId = fieldId;
                                    if (label === 'payment id') paymentIdFieldId = fieldId;
                                    if (label === 'auth number') authNumberFieldId = fieldId;
                                    if (label === 'reference number') referenceNumberFieldId = fieldId;
                                    if (label === 'payment type') paymentTypeFieldId = fieldId;
                                    if (label === 'applied amount') appliedAmountFieldId = fieldId;
                                };

                                if (paymentPageInfo && paymentPageInfo.page) {
                                    const pData = paymentPageInfo.data || {};
                                    const pFields = paymentPageInfo.page.fields || [];

                                    pFields.forEach(field => {
                                        const fid = parseInt(field.field_id || field.fieldid);
                                        if (isNaN(fid) || fid <= 0) return;

                                        const valObj = pData[fid] || pData[field.field_id] || pData[field.fieldid]
                                            || pData[field.page_field_name] || pData[field.form_field_name];

                                        let label = (field.label || '').toLowerCase().trim();
                                        let customfieldId = parseInt(field.customfieldId || field.custom_field_id || 0) || 0;
                                        let finalVal = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : valObj;

                                        // If value is missing in state, try reading from DOM (crucial for hidden payment pages)
                                        if (finalVal === undefined || finalVal === null || finalVal === "") {
                                            const input = document.querySelector(`[name="field[${fid}]"], [name="${field.page_field_name}"], [name="${field.form_field_name}"]`);
                                            if (input) finalVal = input.value;
                                        }

                                        trackPaymentFieldId(label, fid);

                                        // Default values for known payment labels if still empty
                                        if (!finalVal || finalVal === "") {
                                            const autoDt = new Date().toISOString().split('T')[0];
                                            const autoAuth = 'CC-REG-' + Math.floor(Date.now() / 1000);
                                            const defaultValueMap = {
                                                'amount': '0',
                                                'payment date': autoDt,
                                                'status': 'Success',
                                                'payment method': '2',
                                                'total fee': '0',
                                                'payment id': '0',
                                                'auth number': autoAuth,
                                                'reference number': autoAuth,
                                                'payment type': '2',
                                                'applied amount': '0'
                                            };
                                            finalVal = defaultValueMap[label] || '';
                                        }

                                        paymentFieldsFromSave.push({
                                            field_id: fid,
                                            field_name: label,
                                            customfield_id: customfieldId,
                                            label: label,
                                            value: String(finalVal)
                                        });
                                    });
                                }

                                const currentDate = new Date().toISOString().split('T')[0];

                                // ── 5. Log the data ──
                                console.log('%c🚀 REGISTRATION SUBMISSION DATA (Per-Player Mode)', 'background: var(--primary-theme-color); color: white; font-weight: bold; padding: 4px 8px; border-radius: 4px;');
                                console.log('1. Raw Collected Data (State):', JSON.parse(JSON.stringify(collectedRegistrationData)));
                                console.log('2. Number of Registrations to Submit:', allPlayerEntries.length);
                                console.log('3. Parent Data:', parent_data);
                                console.log('4. Custom Fields By Form:', customFieldsByFormMap);
                                console.log('5. Per-Form Fee Breakdown:', window.playerFormFeeAmounts);
                                console.log('6. Payment Fields From Save:', paymentFieldsFromSave);
                                console.log('7. Amount Field ID:', amountFieldId, '| Auth Number Field ID:', authNumberFieldId);
                                console.log('8. Per-Player Custom Fields:', JSON.parse(JSON.stringify(perPlayerCustomFields)));
                                // Detailed page-by-page breakdown
                                Object.keys(collectedRegistrationData).forEach(pgId => {
                                    if (['form_id', 'parent_id', 'membership', 'registration_set_id'].includes(pgId)) return;
                                    const pgData = collectedRegistrationData[pgId];
                                    const pgInMap = !!allPagesMap[pgId];
                                    const pgInHidden = allPagesIncludingHidden.some(p => p.page_id == pgId);
                                    const pgDynamic = Object.values(allPagesMap).find(p => p.original_page_id == pgId);
                                    console.log(`   📄 Page ${pgId}: inMap=${pgInMap}, inHidden=${pgInHidden}, dynamicVariant=${pgDynamic ? pgDynamic.page_id : 'none'}, dataKeys=${Object.keys(pgData || {}).join(',')}`);
                                });
                                console.log('%c----------------------------------', 'color: var(--primary-theme-color); font-weight: bold;');

                                // ── 6. Show loading state ──
                                const loader = document.getElementById('full-page-loader');
                                const loaderText = document.getElementById('loader-text');
                                if (loader) loader.classList.remove('hidden');
                                if (loaderText) loaderText.textContent = 'Processing Registrations...';

                                const originalBtnText = submitBtn.innerHTML;
                                submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
                                submitBtn.disabled = true;

                                const submitOrg = localStorage.getItem('organisation') || '';
                                const submitToken = localStorage.getItem('authToken') || '';
                                const toGraphQLArgs = (obj) => JSON.stringify(obj).replace(/"([^"]+)":/g, '$1:');

                                // ── 7. Submit one-by-one for each player ──
                                const totalPlayers = allPlayerEntries.length;
                                let successCount = 0;
                                let failedPlayers = [];
                                let allResults = [];

                                // Pre-calculate total discount to distribute across players
                                let remainingDiscount = 0;
                                if (window.appliedDiscountCode) {
                                    const matched = window.appliedDiscountCode;
                                    const discountType = (matched.type || '').toLowerCase();
                                    const discountVal = parseFloat(matched.amount) || 0;
                                    let rawGrandTotal = 0;
                                    allPlayerEntries.forEach(ent => {
                                        const pAmt = (window.playerFormFeeAmounts && window.playerFormFeeAmounts[ent.player_id] && window.playerFormFeeAmounts[ent.player_id][ent.form_id]) || 0;
                                        rawGrandTotal += pAmt;
                                    });
                                    const membershipData = collectedRegistrationData['membership'];
                                    if (membershipData && membershipData.fee) {
                                        const membershipFee = parseFloat(membershipData.fee);
                                        if (!isNaN(membershipFee) && membershipFee > 0) {
                                            rawGrandTotal += membershipFee;
                                        }
                                    }

                                    if (discountType.includes('percent') || discountType === '%' || (discountType !== 'amount' && discountType !== 'flat' && discountType !== 'fixed' && discountVal < 1)) {
                                        const pct = discountVal > 1 ? discountVal : discountVal * 100;
                                        remainingDiscount = rawGrandTotal * (pct / 100);
                                    } else {
                                        remainingDiscount = discountVal;
                                    }
                                    if (remainingDiscount > rawGrandTotal) {
                                        remainingDiscount = rawGrandTotal;
                                    }
                                }

                                for (let i = 0; i < totalPlayers; i++) {
                                    const entry = allPlayerEntries[i];
                                    const playerId = entry.player_id;
                                    const currentFormId = entry.form_id;
                                    const displayName = entry.playerName;

                                    try {
                                        // Look up form specific details (league, season)
                                        const formInfo = (window.availableForms || []).find(f => f.form_id == currentFormId) || currentForm;
                                        const leagueId = formInfo ? (formInfo.league_id || 0) : 0;
                                        const seasonId = formInfo ? (formInfo.season_id || 0) : 0;
                                        const yearId = seasonId; // Default year to season

                                        // Update button with progress
                                        submitBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Submitting ${displayName} (${i + 1}/${totalPlayers})...`;
                                        if (loaderText) loaderText.textContent = `Submitting ${displayName} (${i + 1}/${totalPlayers})...`;

                                        // Get this player's fee amount for THIS SPECIFIC form
                                        let playerAmount = (window.playerFormFeeAmounts && window.playerFormFeeAmounts[playerId] && window.playerFormFeeAmounts[playerId][currentFormId])
                                            ? window.playerFormFeeAmounts[playerId][currentFormId]
                                            : 0;

                                        // Apply discount if any remaining
                                        let discountForThisPlayer = 0;
                                        if (remainingDiscount > 0) {
                                            if (playerAmount >= remainingDiscount) {
                                                discountForThisPlayer = remainingDiscount;
                                                remainingDiscount = 0;
                                            } else {
                                                discountForThisPlayer = playerAmount;
                                                remainingDiscount -= playerAmount;
                                            }
                                            playerAmount -= discountForThisPlayer;
                                        }

                                        // Use the passed paymentAuthCode if available, otherwise generate a placeholder
                                        const baseAuth = paymentAuthCode || ('CC-REG-' + Math.floor(Date.now() / 1000));
                                        const playerAuthNum = `${baseAuth}-F${currentFormId}-P${playerId}`;

                                        // Build per-registration registration_fields (custom fields for THIS form + ALL payment fields)
                                        // We gather ALL custom fields that the user interacted with across the UI forms, and remap them to currentFormId
                                        let baseCustomFields = [];
                                        if (isRegistrationSet) {
                                            Object.keys(customFieldsByFormMap).forEach(srcFormId => {
                                                const sourceCustomFields = customFieldsByFormMap[srcFormId] || [];
                                                if (sourceCustomFields.length === 0) return;

                                                if (srcFormId == currentFormId) {
                                                    baseCustomFields.push(...sourceCustomFields);
                                                } else {
                                                    const remapped = remapFieldsForForm(sourceCustomFields, srcFormId, currentFormId, 'custom');
                                                    if (remapped && remapped.length > 0) {
                                                        baseCustomFields.push(...remapped);
                                                    }
                                                }
                                            });
                                        } else {
                                            baseCustomFields = customFieldsByFormMap[currentFormId] || [];
                                        }

                                        let perPlayerRegFields = [...baseCustomFields];

                                        // Add any per-player custom fields (e.g., dynamically rendered Waivers per-member)
                                        // Search across ALL stored form IDs for this player, not just the target form
                                        if (perPlayerCustomFields[playerId]) {
                                            if (isRegistrationSet) {
                                                // For registration sets, gather from all source form IDs and remap to target
                                                Object.keys(perPlayerCustomFields[playerId]).forEach(srcFid => {
                                                    const srcFields = perPlayerCustomFields[playerId][srcFid] || [];
                                                    if (srcFields.length === 0) return;
                                                    if (srcFid == currentFormId) {
                                                        perPlayerRegFields.push(...srcFields);
                                                    } else {
                                                        const remapped = remapFieldsForForm(srcFields, srcFid, currentFormId, 'custom');
                                                        if (remapped && remapped.length > 0) {
                                                            perPlayerRegFields.push(...remapped);
                                                        }
                                                    }
                                                });
                                            } else {
                                                // For single forms, direct lookup
                                                if (perPlayerCustomFields[playerId][currentFormId]) {
                                                    perPlayerRegFields.push(...perPlayerCustomFields[playerId][currentFormId]);
                                                }
                                            }
                                        }

                                        // Clone ALL payment page fields and override per-player values
                                        const playerPaymentFields = paymentFieldsFromSave.map(pf => {
                                            const clone = {
                                                field_id: pf.field_id,
                                                customfield_id: pf.customfield_id,
                                                value: pf.value
                                            };

                                            // Amount → this player's individual fee
                                            if (pf.field_id === amountFieldId) {
                                                clone.value = String(playerAmount);
                                            }
                                            // Applied Amount → same as player's fee
                                            if (pf.field_id === appliedAmountFieldId) {
                                                clone.value = String(playerAmount);
                                            }
                                            // Total Fee → same as player's fee
                                            if (pf.field_id === totalFeeFieldId) {
                                                clone.value = String(playerAmount);
                                            }
                                            // Auth Number → unique per-player
                                            if (pf.field_id === authNumberFieldId) {
                                                clone.value = String(playerAuthNum);
                                            }
                                            // Reference Number → unique per-player
                                            if (pf.field_id === referenceNumberFieldId) {
                                                clone.value = String(playerAuthNum);
                                            }
                                            // Payment Date → auto-fill if empty
                                            if (pf.field_id === paymentDateFieldId && (!clone.value || clone.value === '')) {
                                                clone.value = currentDate;
                                            }
                                            // Status → auto-fill if empty
                                            if (pf.field_id === statusFieldId && (!clone.value || clone.value === '')) {
                                                clone.value = 'Success';
                                            }
                                            // Payment Method → auto-fill if empty
                                            if (pf.field_id === paymentMethodFieldId && (!clone.value || clone.value === '')) {
                                                clone.value = '2';
                                            }
                                            // Payment Type → auto-fill if empty
                                            if (pf.field_id === paymentTypeFieldId && (!clone.value || clone.value === '')) {
                                                clone.value = '2';
                                            }
                                            // Payment ID → auto-fill if empty
                                            if (pf.field_id === paymentIdFieldId && (!clone.value || clone.value === '')) {
                                                clone.value = '0';
                                            }
                                            return clone;
                                        });

                                        // Remap payment field IDs from source form to target form
                                        const srcFormIdForPayment = window.sourceFormId || (currentForm ? currentForm.form_id : null);
                                        const finalPaymentFields = (isRegistrationSet && srcFormIdForPayment && srcFormIdForPayment != currentFormId)
                                            ? remapFieldsForForm(playerPaymentFields, srcFormIdForPayment, currentFormId, 'payment')
                                            : playerPaymentFields;
                                        if (isRegistrationSet && srcFormIdForPayment && srcFormIdForPayment != currentFormId) {
                                            console.log(`%c🔄 Payment fields: Remapping from form ${srcFormIdForPayment} → ${currentFormId}`, 'color: #f59e0b; font-weight: bold;');
                                        }
                                        // Add all payment fields to registration_fields
                                        perPlayerRegFields.push(...finalPaymentFields);

                                        // ── SAFETY NET: Direct sweep of collectedRegistrationData ──
                                        const emptyFieldIds = new Set();
                                        perPlayerRegFields.forEach(f => {
                                            if ((!f.value || f.value === '') && f.field_id > 0) {
                                                emptyFieldIds.add(f.field_id);
                                            }
                                        });

                                        if (emptyFieldIds.size > 0) {
                                            console.log(`🔍 Safety net: ${emptyFieldIds.size} empty fields found for player ${playerId}. Sweeping collectedRegistrationData...`);
                                            const safetyNetValues = new Map(); // field_id -> { value, customfield_id }

                                            Object.keys(collectedRegistrationData).forEach(pgId => {
                                                if (['form_id', 'parent_id', 'membership', 'registration_set_id'].includes(pgId)) return;
                                                const pgData = collectedRegistrationData[pgId];
                                                if (!pgData || typeof pgData !== 'object') return;

                                                const playerDataNested = pgData[playerId] || pgData[String(playerId)];
                                                if (playerDataNested && typeof playerDataNested === 'object') {
                                                    Object.keys(playerDataNested).forEach(fidStr => {
                                                        const fid = parseInt(fidStr);
                                                        if (!emptyFieldIds.has(fid)) return;
                                                        const fieldVal = playerDataNested[fidStr];
                                                        if (!fieldVal || typeof fieldVal !== 'object') return;
                                                        let val = fieldVal.values !== undefined ? fieldVal.values
                                                            : (fieldVal.value !== undefined ? fieldVal.value : fieldVal.val);
                                                        if (typeof val === 'boolean') val = val ? '1' : '0';
                                                        if (val !== null && val !== undefined && String(val).trim() !== '') {
                                                            const cid = parseInt(fieldVal.customfieldId || fieldVal.custom_field_id || 0) || 0;
                                                            safetyNetValues.set(fid, { value: String(val).trim(), customfield_id: cid, label: fieldVal.label || '' });
                                                            console.log(`   🛡️ Safety net found: Field ${fid} = "${String(val).trim()}" (from page ${pgId}, player ${playerId})`);
                                                        }
                                                    });
                                                }

                                                Object.keys(pgData).forEach(key => {
                                                    const fid = parseInt(key);
                                                    if (isNaN(fid) || !emptyFieldIds.has(fid)) return;
                                                    const fieldVal = pgData[key];
                                                    if (!fieldVal || typeof fieldVal !== 'object') return;
                                                    if (fieldVal.values === undefined && fieldVal.value === undefined && fieldVal.val === undefined) return;
                                                    let val = fieldVal.values !== undefined ? fieldVal.values
                                                        : (fieldVal.value !== undefined ? fieldVal.value : fieldVal.val);
                                                    if (typeof val === 'boolean') val = val ? '1' : '0';
                                                    if (val !== null && val !== undefined && String(val).trim() !== '' && !safetyNetValues.has(fid)) {
                                                        const cid = parseInt(fieldVal.customfieldId || fieldVal.custom_field_id || 0) || 0;
                                                        safetyNetValues.set(fid, { value: String(val).trim(), customfield_id: cid, label: fieldVal.label || '' });
                                                        console.log(`   🛡️ Safety net found (flat): Field ${fid} = "${String(val).trim()}" (from page ${pgId})`);
                                                    }
                                                });
                                            });

                                            if (safetyNetValues.size > 0) {
                                                console.log(`   ✅ Safety net: Filling ${safetyNetValues.size} empty fields with saved values.`);
                                                perPlayerRegFields.forEach(f => {
                                                    if ((!f.value || f.value === '') && safetyNetValues.has(f.field_id)) {
                                                        const saved = safetyNetValues.get(f.field_id);
                                                        f.value = saved.value;
                                                        if (saved.customfield_id && (!f.customfield_id || f.customfield_id === 0)) {
                                                            f.customfield_id = saved.customfield_id;
                                                        }
                                                    }
                                                });
                                            } else {
                                                console.log(`   ℹ️ Safety net: No matching values found in collectedRegistrationData for empty fields.`);
                                            }
                                        }

                                        // ── Deduplicate parent_data by field_id first ──
                                        const remappedParentData = parent_data;
                                        const parentFieldMap = new Map();
                                        remappedParentData.forEach(f => {
                                            const fid = f.field_id;
                                            if (!parentFieldMap.has(fid)) {
                                                parentFieldMap.set(fid, f);
                                            } else {
                                                const existing = parentFieldMap.get(fid);
                                                const isExistingEmpty = !existing.value || existing.value === '';
                                                const isNewValPopulated = f.value !== undefined && f.value !== null && f.value !== '';
                                                if (isExistingEmpty && isNewValPopulated) {
                                                    parentFieldMap.set(fid, f);
                                                }
                                            }
                                        });
                                        const finalParentData = Array.from(parentFieldMap.values());
                                        const parentStr = toGraphQLArgs(finalParentData.map(f => ({
                                            field_id: f.field_id,
                                            customfield_id: f.customfield_id || 0,
                                            value: cleanFieldValue(f.value)
                                        })));

                                        // ── Universal Deduplication strategy for registration_fields ──
                                        const fieldIdMap = new Map();
                                        perPlayerRegFields.forEach(f => {
                                            const fid = f.field_id;
                                            if (isNaN(fid) || fid <= 0) return;

                                            if (!fieldIdMap.has(fid)) {
                                                fieldIdMap.set(fid, f);
                                            } else {
                                                const existing = fieldIdMap.get(fid);
                                                const isExistingEmpty = !existing.value || existing.value === '';
                                                const isNewValPopulated = f.value !== undefined && f.value !== null && f.value !== '';
                                                if (isExistingEmpty && isNewValPopulated) {
                                                    fieldIdMap.set(fid, f);
                                                }
                                            }
                                        });
                                        const finalRegFields = Array.from(fieldIdMap.values()).filter(f => !parentFieldMap.has(f.field_id));
                                        console.log(`✅ Final registration_fields for player ${playerId} (Form ${currentFormId}): ${finalRegFields.length} entries.`);
                                        finalRegFields.forEach(f => {
                                            if (!f.value || f.value === '') {
                                                console.log(`   ⚠️ Field ${f.field_id} (CID: ${f.customfield_id}) is empty.`);
                                            } else {
                                                console.log(`   💎 Field ${f.field_id} = "${f.value}"`);
                                            }
                                        });

                                        // Extract payment values for the payment object in mutation
                                        const pmtAmount = playerAmount;
                                        const pmtAuthNum = paymentAuthCode || playerAuthNum;
                                        const pmtType = playerPaymentFields.find(f => f.field_id === paymentTypeFieldId)?.value
                                            || playerPaymentFields.find(f => f.field_id === paymentMethodFieldId)?.value
                                            || '2';
                                        const pmtDate = playerPaymentFields.find(f => f.field_id === paymentDateFieldId)?.value || currentDate;
                                        const pmtStatus = playerPaymentFields.find(f => f.field_id === statusFieldId)?.value || 'Success';

                                        // ── Deduplicate player data by field_id ──
                                        const playerFieldMap = new Map();
                                        entry.data.forEach(f => {
                                            const fid = f.field_id;
                                            if (!playerFieldMap.has(fid)) {
                                                playerFieldMap.set(fid, f);
                                            } else {
                                                const existing = playerFieldMap.get(fid);
                                                const isExistingEmpty = !existing.value || existing.value === '';
                                                const isNewValPopulated = f.value !== undefined && f.value !== null && f.value !== '';
                                                if (isExistingEmpty && isNewValPopulated) {
                                                    playerFieldMap.set(fid, f);
                                                }
                                            }
                                        });
                                        const deduplicatedPlayerData = Array.from(playerFieldMap.values());

                                        // Build per-registration payload
                                        const singlePlayerStr = toGraphQLArgs([{
                                            player_id: playerId,
                                            data: deduplicatedPlayerData.map(f => ({
                                                field_id: f.field_id,
                                                customfield_id: f.customfield_id || 0,
                                                value: cleanFieldValue(f.value)
                                            }))
                                        }]);

                                        // Build parent2_data if two parents exist
                                        let parent2Str = '[]';
                                        if (hasTwoParents) {
                                            const parent2DataArr = finalParentData.map(f => {
                                                const normalizedLabel = (f.field_name || '').toLowerCase().trim();
                                                let p2Value = '';

                                                Object.values(collectedRegistrationData).forEach(pData => {
                                                    if (pData && (pData['parent_2'] || pData['parent2'])) {
                                                        const p2Data = pData['parent_2'] || pData['parent2'];
                                                        const valObj = p2Data[f.field_id] || p2Data[String(f.field_id)] || (f.field_name ? p2Data[f.field_name] : null);
                                                        if (valObj !== undefined && valObj !== null) {
                                                            p2Value = (typeof valObj === 'object' && valObj !== null && valObj.values !== undefined) ? valObj.values : (valObj.value !== undefined ? valObj.value : valObj);
                                                        }
                                                    }
                                                });

                                                if (!p2Value) {
                                                    const domVal = queryDOMInput(f.field_id, 'parent_2', null, null);
                                                    if (domVal) p2Value = cleanFieldValue(domVal);
                                                }

                                                if (!p2Value) {
                                                    p2Value = parent2FieldValues[`id_${f.field_id}`]
                                                        || parent2FieldValues[normalizedLabel]
                                                        || '';
                                                }

                                                return {
                                                    field_id: f.field_id,
                                                    customfield_id: f.customfield_id || 0,
                                                    value: cleanFieldValue(p2Value)
                                                };
                                            });
                                            parent2Str = toGraphQLArgs(parent2DataArr);
                                            console.log(`   👨‍👩‍👧 Parent2 data: ${parent2DataArr.length} fields`);
                                        }

                                        const regFieldStr = toGraphQLArgs(finalRegFields.map(f => ({
                                            field_id: f.field_id,
                                            customfield_id: f.customfield_id || 0,
                                            value: cleanFieldValue(f.value)
                                        })));

                                        // Build membership argument only if a membership page exists and was answered
                                        let membershipStr = '';
                                        const membershipData = collectedRegistrationData['membership'];
                                        const hasMembershipPage = Object.values(allPagesMap).some(p => p.file && p.file.includes('MembershipStep.php'));

                                        if (hasMembershipPage && membershipData && membershipData.id) {
                                            membershipStr = `
                                                membership: {
                                                    relationshipID: ${playerId}
                                                    feeCodeID: ${parseInt(membershipData.feeCodeID) || 0}
                                                    feeGroupID: ${parseInt(membershipData.feeGroupID) || 0}
                                                    amount: ${parseFloat(membershipData.fee) || 0}
                                                }
                                        `;
                                        }

                                        // Determine level_id (division ID) for this player
                                        let playerLevelId = await getResolvedPlayerDivisionId(playerId, currentFormId);

                                        const mutation = `mutation CreateRegistration {
                                          createRegistration(
                                            form_id: ${currentFormId}
                                            league_id: ${leagueId}
                                            season_id: ${seasonId}
                                            players: ${singlePlayerStr}
                                            level_id: ${playerLevelId ? playerLevelId : null}
                                            parent_data: ${parentStr}
                                            ${hasTwoParents ? `parent2_data: ${parent2Str}` : ''}
                                            registration_fields: ${regFieldStr}
                                            payment: {
                                                Amount: ${pmtAmount}
                                                AuthNum: "${pmtAuthNum}"
                                                PmtType: ${pmtType}
                                                date: "${pmtDate}"
                                                status: "${pmtStatus}"
                                            }
                                            ${membershipStr}
                                          ) {
                                            success
                                            message
                                            registrations {
                                              registration_id
                                              player_id
                                              legacy_player_id
                                              legacy_parent_id
                                            }
                                          }
                                        }`;

                                        console.log(`%c📤 Submitting Player ${i + 1}/${totalPlayers}: ${displayName} (ID: ${playerId}, Amount: $${playerAmount.toFixed(2)})`, 'background: #1e3a8a; color: white; font-weight: bold; padding: 2px 6px; border-radius: 3px;');
                                        console.log('   Mutation:', mutation);

                                        const response = await fetch('{{ config('api.url') }}/graphql/registration', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-Organisation': submitOrg,
                                                'X-Token': submitToken,
                                            },
                                            body: JSON.stringify({ query: mutation })
                                        });

                                        const result = await response.json();

                                        if (result.errors) {
                                            throw new Error(result.errors.map(e => e.message).join(', '));
                                        }

                                        if (result.data && result.data.createRegistration) {
                                            if (result.data.createRegistration.success) {
                                                successCount++;
                                                allResults.push({ playerId, playerName: displayName, amount: playerAmount, success: true, result: result.data.createRegistration });
                                                console.log(`%c  ✅ ${displayName} - Registration SUCCESS`, 'color: #22c55e; font-weight: bold;');
                                                console.log('     Response:', result.data.createRegistration);
                                            } else {
                                                throw new Error(result.data.createRegistration.message || 'Unknown error');
                                            }
                                        } else {
                                            throw new Error('Invalid response structure');
                                        }
                                    } catch (error) {
                                        console.error(`  ❌ ${displayName} - Registration FAILED:`, error.message);
                                        failedPlayers.push({ playerId, playerName: displayName, amount: playerAmount, error: error.message });
                                        allResults.push({ playerId, playerName: displayName, amount: playerAmount, success: false, error: error.message });
                                    }
                                }

                                // ── 8. Show final results ──
                                console.log('%c📊 REGISTRATION RESULTS SUMMARY', 'background: var(--primary-theme-color); color: white; font-weight: bold; padding: 4px 8px; border-radius: 4px;');
                                console.log(`   Total Players: ${totalPlayers}`);
                                console.log(`   Successful: ${successCount}`);
                                console.log(`   Failed: ${failedPlayers.length}`);
                                console.log('   Details:', allResults);

                                if (loader) loader.classList.add('hidden');

                                if (failedPlayers.length === 0) {
                                    // All successful
                                    submitBtn.innerHTML = '<i class="fa-solid fa-check"></i> All Saved!';

                                    // Discard registration draft if it exists
                                    if (window.currentDraftId) {
                                        try {
                                            const draftIdInt = parseInt(window.currentDraftId, 10);
                                            console.log(`🧹 Discarding draft ${draftIdInt} after successful registration...`);
                                            const discardMutation = `
                                                mutation DiscardRegistrationDraft {
                                                    discardRegistrationDraft(draft_id: ${draftIdInt}) {
                                                        success
                                                        message
                                                    }
                                                }
                                            `;
                                            const discardResponse = await fetch('{{ config('api.url') }}/graphql/registration', {
                                                method: 'POST',
                                                headers: {
                                                    'Content-Type': 'application/json',
                                                    'X-Organisation': submitOrg,
                                                    'X-Token': submitToken,
                                                },
                                                body: JSON.stringify({ query: discardMutation })
                                            });
                                            const discardResult = await discardResponse.json();
                                            if (discardResult.errors) {
                                                console.error('Error discarding draft:', discardResult.errors);
                                            } else {
                                                console.log('✅ Draft discarded successfully:', discardResult.data?.discardRegistrationDraft);
                                            }
                                        } catch (discardError) {
                                            console.error('Failed to discard draft:', discardError);
                                        }
                                        window.currentDraftId = null;
                                    }

                                    const formName = (currentForm && currentForm.name) ? currentForm.name :
                                        (currentForm && currentForm.form_name ? currentForm.form_name : 'Registration');
                                    const playerSummary = allResults.map(r => `${r.playerName}`).join(', ');

                                    Swal.fire({
                                        title: 'Registration Successful!',
                                        html: `Your registration for <strong>${formName}</strong> has been completed successfully for: <br><br> ${playerSummary}`,
                                        icon: 'success',
                                        confirmButtonText: 'Great!',
                                        confirmButtonColor: 'var(--primary-theme-color)',
                                        allowOutsideClick: false
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href = (window.APP_PREFIX || '/user-dashboard') + '/';
                                        }
                                    });
                                } else if (successCount > 0) {
                                    // Partial success
                                    submitBtn.innerHTML = `<i class="fa-solid fa-exclamation-triangle"></i> ${successCount}/${totalPlayers} Saved`;
                                    submitBtn.classList.remove('bg-[var(--primary-theme-color)]');
                                    submitBtn.classList.add('bg-yellow-600');

                                    const failedNames = failedPlayers.map(f => f.playerName).join(', ');

                                    Swal.fire({
                                        title: 'Partial Success',
                                        text: `${successCount} player(s) registered successfully. However, registration failed for: ${failedNames}. Please retry for them.`,
                                        icon: 'warning',
                                        confirmButtonText: 'Understood'
                                    });

                                    // Re-enable button for retry
                                    setTimeout(() => {
                                        submitBtn.innerHTML = originalBtnText;
                                        submitBtn.classList.remove('opacity-75', 'cursor-not-allowed', 'bg-yellow-600');
                                        submitBtn.classList.add('bg-[var(--primary-theme-color)]');
                                        submitBtn.disabled = false;
                                    }, 5000);
                                } else {
                                    // All failed
                                    submitBtn.innerHTML = originalBtnText;
                                    submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
                                    submitBtn.disabled = false;

                                    const errorMsg = failedPlayers.map(f => `${f.playerName}: ${f.error}`).join('\n');
                                    Swal.fire({
                                        title: 'Registration Failed',
                                        text: `All registrations failed. Please try again or contact support.\n\n${errorMsg}`,
                                        icon: 'error',
                                        confirmButtonText: 'Close'
                                    });
                                }
                                // End of original for-loop and results logic
                            } catch (criticalError) {
                                console.error('❌ Critical error during registration submission:', criticalError);
                                const loader = document.getElementById('full-page-loader');
                                if (loader) loader.classList.add('hidden');
                                const errMsg = (criticalError && criticalError.message) ? criticalError.message : String(criticalError);
                                Swal.fire({
                                    title: 'System Error',
                                    text: `A critical error occurred while submitting your registration: ${errMsg}\n\nPlease try again or contact support.`,
                                    icon: 'error'
                                });
                                window.resetSubmitRegistrationButton();
                            }
                        };


                        // Recalculate fees first to ensure total amount is accurate
                        try {
                            const summaryPage = Object.values(allPagesMap).find(p => getPageType(p.name, p) === 'summary') 
                                || (document.getElementById('page-virtual-summary') ? { page_id: 'virtual-summary', name: 'Summary' } : null);
                            if (summaryPage) {
                                const containerId = `page-${summaryPage.page_id}-fee-container`;
                                console.log(`🔄 Submit Check: Recalculating fees for Summary container: ${containerId}`);
                                await loadSummaryFees(containerId);
                            }
                        } catch (feeError) {
                            console.error('Error recalculating summary fees before payment check:', feeError);
                        }

                        // ── 2. Check for Payment ──
                        const totalAmount = window.lastCalculatedGrandTotal || 0;
                        if (totalAmount > 0) {
                            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Loading Payment...';
                            submitBtn.disabled = true;
                            openPaymentModal(totalAmount);
                        } else {
                            window.submitCallbackAfterPayment();
                        }
                    });
                }
                // Global Phone Input Formatting Listener
                document.addEventListener('input', function (e) {
                    if (e.target.classList.contains('phone-input')) {
                        const input = e.target;
                        const start = input.selectionStart;
                        const oldLength = input.value.length;

                        const formatted = formatPhoneNumber(input.value);
                        input.value = formatted;

                        // Try to keep cursor position
                        const newLength = formatted.length;
                        input.setSelectionRange(start + (newLength - oldLength), start + (newLength - oldLength));
                    }
                });

                // Global Input Validation Listeners (City, State, Zip)
                document.addEventListener('input', function (e) {
                    const target = e.target;

                    // City: Letters and spaces only
                    if (target.classList.contains('city-input')) {
                        const originalValue = target.value;
                        const filteredValue = originalValue.replace(/[^a-zA-Z\s]/g, '');
                        if (originalValue !== filteredValue) {
                            target.value = filteredValue;
                        }
                    }

                    // State: Letters only, max 2 chars, uppercase
                    if (target.classList.contains('state-input')) {
                        let val = target.value.replace(/[^a-zA-Z]/g, '');
                        if (val.length > 2) {
                            val = val.substring(0, 2);
                        }
                        target.value = val.toUpperCase();
                    }

                    // Zip Code: Numeric only, max 9 digits
                    if (target.classList.contains('zip-input')) {
                        let val = target.value.replace(/\D/g, ''); // Numbers only
                        if (val.length > 9) {
                            val = val.substring(0, 9); // Max 9 digits
                        }
                        target.value = val;
                    }

                    // Email: clear error border once valid email format is reached or when empty if not required
                    if (target && (target.type === 'email' || target.classList.contains('email-input') || (target.name && target.name.toLowerCase().includes('email')))) {
                        if (target.type === 'hidden' || target.type === 'checkbox' || target.type === 'radio') return;
                        const val = target.value.trim();
                        if (val && isValidEmail(val)) {
                            target.classList.remove('border-red-500');
                        } else if (!val && !target.hasAttribute('required') && !target.required) {
                            target.classList.remove('border-red-500');
                        }
                    }
                });

                // Global Email Input Blur Listener (Flags invalid domain / TLD containing numbers like .c0m on blur)
                document.addEventListener('blur', function (e) {
                    const target = e.target;
                    if (target && (target.type === 'email' || target.classList.contains('email-input') || (target.name && target.name.toLowerCase().includes('email')))) {
                        if (target.type === 'hidden' || target.type === 'checkbox' || target.type === 'radio' || target.disabled) return;
                        const val = target.value.trim();
                        if (val && !isValidEmail(val)) {
                            target.classList.add('border-red-500');
                        } else if (val && isValidEmail(val)) {
                            target.classList.remove('border-red-500');
                        } else if (!val && !target.hasAttribute('required') && !target.required) {
                            target.classList.remove('border-red-500');
                        }
                    }
                }, true);

                // Change tracking & Save Draft initialization
                document.addEventListener('DOMContentLoaded', () => {
                    const pagesContainer = document.getElementById('pages-container');
                    const saveDraftBtn = document.getElementById('save-draft-btn');

                    if (pagesContainer && saveDraftBtn) {
                        const showSaveBtn = () => {
                            if (typeof window.showSaveDraftBtn === 'function') {
                                window.showSaveDraftBtn();
                            } else {
                                saveDraftBtn.classList.remove('hidden');
                            }
                        };
                        pagesContainer.addEventListener('input', showSaveBtn);
                        pagesContainer.addEventListener('change', showSaveBtn);

                        saveDraftBtn.addEventListener('click', saveDraft);
                    }
                });

                // Inline Auth Event Handlers for /registration-form route
                function showInlineFlash(containerId, message, type = 'error') {
                    const container = document.getElementById(containerId);
                    if (!container) return;
                    const bgColor = type === 'error' ? 'bg-red-50 border-red-200 text-red-700' : 'bg-green-50 border-green-200 text-green-700';
                    container.innerHTML = `
                        <div class="p-3.5 rounded-xl border ${bgColor} text-xs font-medium animate-pulse">
                            ${message}
                        </div>
                    `;
                    setTimeout(() => {
                        container.innerHTML = '';
                    }, 6000);
                }

                document.addEventListener('DOMContentLoaded', () => {
                    // Password toggle for inline login
                    const inlineTogglePassword = document.getElementById('inlineTogglePassword');
                    const inlinePassword = document.getElementById('inline-password');
                    if (inlineTogglePassword && inlinePassword) {
                        inlineTogglePassword.addEventListener('click', () => {
                            const type = inlinePassword.type === 'password' ? 'text' : 'password';
                            inlinePassword.type = type;
                            inlineTogglePassword.innerHTML = type === 'password' ? '<i class="fa-regular fa-eye"></i>' : '<i class="fa-regular fa-eye-slash"></i>';
                        });
                    }

                    // Toggle between Inline Login and Signup
                    const switchToSignup = document.getElementById('switchToSignup');
                    const switchToLogin = document.getElementById('switchToLogin');
                    const inlineLoginCard = document.getElementById('inline-login-card');
                    const inlineSignupCard = document.getElementById('inline-signup-card');

                    if (switchToSignup) {
                        switchToSignup.addEventListener('click', () => {
                            inlineLoginCard?.classList.add('hidden');
                            inlineSignupCard?.classList.remove('hidden');
                        });
                    }
                    if (switchToLogin) {
                        switchToLogin.addEventListener('click', () => {
                            inlineSignupCard?.classList.add('hidden');
                            inlineLoginCard?.classList.remove('hidden');
                        });
                    }

                    // Inline Login Form Submit
                    const inlineLoginForm = document.getElementById('inlineLoginForm');
                    const inlineLoginBtn = document.getElementById('inlineLoginBtn');

                    if (inlineLoginForm) {
                        inlineLoginForm.addEventListener('submit', async (e) => {
                            e.preventDefault();
                            const email = document.getElementById('inline-email').value.trim();
                            const password = inlinePassword ? inlinePassword.value : '';
                            const urlParams = new URLSearchParams(window.location.search);
                            let rawOrg = (document.getElementById('inline-organisation')?.value || '').trim();
                            if (!rawOrg) {
                                rawOrg = (urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '').trim();
                            }
                            const orgValue = rawOrg.endsWith('_lms') ? rawOrg : `${rawOrg}_lms`;

                            if (inlineLoginBtn) {
                                inlineLoginBtn.disabled = true;
                                const btnLoader = inlineLoginBtn.querySelector('.inline-btn-loader');
                                const btnText = inlineLoginBtn.querySelector('.inline-btn-text');
                                if (btnLoader) btnLoader.classList.remove('hidden');
                                if (btnText) btnText.classList.add('hidden');
                            }

                            try {
                                const query = `
                                    mutation LoginMylUser($login: String!, $password: String!, $organisation: String!) {
                                        loginMylUser(login: $login, password: $password, organisation: $organisation) {
                                            success
                                            message
                                            debug
                                            organisations {
                                                organisation
                                                members {
                                                    id
                                                    parent_id
                                                    player_id
                                                    role
                                                    first_name
                                                    last_name
                                                    email
                                                    token
                                                }
                                            }
                                        }
                                    }
                                `;

                                const response = await fetch('{{ config('api.url') }}/graphql/authentication', {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({
                                        query,
                                        variables: {
                                            login: email,
                                            password: password,
                                            organisation: orgValue
                                        }
                                    })
                                });

                                const json = await response.json();

                                if (json.errors) {
                                    showInlineFlash('inline-login-flash', json.errors[0].message);
                                    resetInlineLoginBtn();
                                    return;
                                }

                                const result = json.data?.loginMylUser;

                                if (!result || !result.success) {
                                    showInlineFlash('inline-login-flash', result ? result.message : 'Invalid credentials or login failed');
                                    resetInlineLoginBtn();
                                    return;
                                }

                                let membersList = [];
                                if (result.organisations && result.organisations.length > 0) {
                                    for (const orgData of result.organisations) {
                                        if (orgData.members && orgData.members.length > 0) {
                                            for (const member of orgData.members) {
                                                membersList.push({
                                                    organisation: orgData.organisation,
                                                    member: member
                                                });
                                            }
                                        }
                                    }
                                }

                                if (membersList.length === 0) {
                                    showInlineFlash('inline-login-flash', 'No valid authentication token found for this user.');
                                    resetInlineLoginBtn();
                                    return;
                                }

                                const proceedWithLogin = (selectedData) => {
                                    const { organisation, member } = selectedData;
                                    localStorage.removeItem('player_id');
                                    localStorage.removeItem('parent_id');
                                    localStorage.removeItem('user_role');

                                    localStorage.setItem('authToken', member.token);
                                    if (member.parent_id) localStorage.setItem('parent_id', member.parent_id);
                                    if (member.player_id) localStorage.setItem('player_id', member.player_id);
                                    localStorage.setItem('user_role', member.role ? member.role.toLowerCase() : 'user');
                                    localStorage.setItem('user_email', email);
                                    const fullName = `${member.first_name || ''} ${member.last_name || ''}`.trim() || member.email || 'User';
                                    localStorage.setItem('username', fullName);
                                    localStorage.setItem('organisation', organisation);
                                    localStorage.setItem('last_db', organisation);

                                    showInlineFlash('inline-login-flash', 'Login successful! Loading form...', 'success');

                                    setTimeout(() => {
                                        const currentUrl = new URL(window.location.href);
                                        const cleanOrg = organisation.endsWith('_lms') ? organisation : `${organisation}_lms`;
                                        currentUrl.searchParams.set('dbname', cleanOrg);
                                        currentUrl.searchParams.set('token', member.token);
                                        window.location.href = currentUrl.toString();
                                    }, 800);
                                };

                                if (membersList.length === 1) {
                                    proceedWithLogin(membersList[0]);
                                } else {
                                    // Handle multiple member profiles
                                    const targetOrg = document.getElementById('inline-organisation').value.trim().toLowerCase();
                                    const normalizedTargetOrg = targetOrg.endsWith('_lms') ? targetOrg : `${targetOrg}_lms`;
                                    const matchingMember = membersList.find(m => {
                                        const mOrg = m.organisation.toLowerCase();
                                        return mOrg === normalizedTargetOrg || mOrg.replace('_lms', '') === targetOrg;
                                    });

                                    if (matchingMember) {
                                        proceedWithLogin(matchingMember);
                                    } else {
                                        const modal = document.getElementById('inlineUserSelectionModal');
                                        const listContainer = document.getElementById('inlineUserSelectionList');
                                        if (modal && listContainer) {
                                            listContainer.innerHTML = '';
                                            membersList.forEach((data) => {
                                                const btn = document.createElement('button');
                                                btn.type = 'button';
                                                btn.className = 'w-full flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:border-[#16467B] hover:bg-blue-50 transition-colors text-left';
                                                const memberName = `${data.member.first_name || ''} ${data.member.last_name || ''}`.trim() || data.member.email || 'User';
                                                btn.innerHTML = `
                                                    <div>
                                                        <div class="font-semibold text-gray-900">${memberName} (${data.member.role})</div>
                                                        <div class="text-xs text-gray-500 font-medium">Organisation: ${data.organisation}</div>
                                                    </div>
                                                    <i class="fa-solid fa-chevron-right text-gray-400"></i>
                                                `;
                                                btn.onclick = () => {
                                                    modal.classList.add('hidden');
                                                    proceedWithLogin(data);
                                                };
                                                listContainer.appendChild(btn);
                                            });
                                            modal.classList.remove('hidden');
                                        } else {
                                            proceedWithLogin(membersList[0]);
                                        }
                                        resetInlineLoginBtn();
                                    }
                                }
                            } catch (err) {
                                console.error('Inline login error:', err);
                                showInlineFlash('inline-login-flash', 'A network error occurred. Please try again.');
                                resetInlineLoginBtn();
                            }
                        });
                    }

                    function resetInlineLoginBtn() {
                        if (!inlineLoginBtn) return;
                        inlineLoginBtn.disabled = false;
                        const btnLoader = inlineLoginBtn.querySelector('.inline-btn-loader');
                        const btnText = inlineLoginBtn.querySelector('.inline-btn-text');
                        if (btnLoader) btnLoader.classList.add('hidden');
                        if (btnText) btnText.classList.remove('hidden');
                    }

                    // Inline Signup handlers
                    const inlineSignupForm = document.getElementById('inlineSignupForm');
                    const inlineSignupBtn = document.getElementById('inlineSignupBtn');
                    const inlineVerifyBtn = document.getElementById('inlineVerifyBtn');

                    if (inlineSignupForm) {
                        inlineSignupForm.addEventListener('submit', async (e) => {
                            e.preventDefault();
                            const email = document.getElementById('inline-signup-email').value.trim();
                            const pass = document.getElementById('inline-signup-password').value;
                            const confirmPass = document.getElementById('inline-signup-confirmpassword').value;

                            if (!isValidEmail(email)) {
                                showInlineFlash('inline-signup-flash', 'Please enter a valid email address (e.g., example@domain.com). Domain extension must contain letters only.');
                                return;
                            }
                            if (pass !== confirmPass) {
                                showInlineFlash('inline-signup-flash', 'Passwords do not match');
                                return;
                            }
                            if (pass.length < 8) {
                                showInlineFlash('inline-signup-flash', 'Password must be at least 8 characters');
                                return;
                            }

                            // Send OTP
                            if (inlineSignupBtn) {
                                inlineSignupBtn.disabled = true;
                                const btnLoader = inlineSignupBtn.querySelector('.inline-btn-loader');
                                const btnText = inlineSignupBtn.querySelector('.inline-btn-text');
                                if (btnLoader) btnLoader.classList.remove('hidden');
                                if (btnText) btnText.classList.add('hidden');
                            }

                            try {
                                const query = `
                                    mutation VerifyEmail($email: String!) {
                                        verifyEmailAddress(email: $email) {
                                            success
                                            message
                                        }
                                    }
                                `;
                                const res = await fetch('{{ config('api.url') }}/graphql/authentication', {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({ query, variables: { email } })
                                });
                                const json = await res.json();
                                if (json.data?.verifyEmailAddress?.success) {
                                    document.getElementById('inlineDisplayEmail').textContent = email;
                                    document.getElementById('inlineSignupStep').classList.add('hidden');
                                    document.getElementById('inlineOtpStep').classList.remove('hidden');
                                    showInlineFlash('inline-signup-flash', 'OTP sent to your email!', 'success');
                                } else {
                                    showInlineFlash('inline-signup-flash', json.data?.verifyEmailAddress?.message || 'Failed to send OTP');
                                }
                            } catch (err) {
                                console.error('Inline signup error:', err);
                                showInlineFlash('inline-signup-flash', 'Error sending OTP');
                            } finally {
                                if (inlineSignupBtn) {
                                    inlineSignupBtn.disabled = false;
                                    const btnLoader = inlineSignupBtn.querySelector('.inline-btn-loader');
                                    const btnText = inlineSignupBtn.querySelector('.inline-btn-text');
                                    if (btnLoader) btnLoader.classList.add('hidden');
                                    if (btnText) btnText.classList.remove('hidden');
                                }
                            }
                        });
                    }

                    // Inline OTP inputs auto focus
                    const otpInputs = document.querySelectorAll('.inline-otp-box');
                    otpInputs.forEach((box, index) => {
                        box.addEventListener('input', (e) => {
                            if (e.target.value.length === 1 && index < otpInputs.length - 1) {
                                otpInputs[index + 1].focus();
                            }
                        });
                        box.addEventListener('keydown', (e) => {
                            if (e.key === 'Backspace' && !e.target.value && index > 0) {
                                otpInputs[index - 1].focus();
                            }
                        });
                    });

                    // Inline OTP Verify Button
                    if (inlineVerifyBtn) {
                        inlineVerifyBtn.addEventListener('click', async () => {
                            const otp = Array.from(otpInputs).map(b => b.value).join('');
                            if (otp.length !== 6) {
                                showInlineFlash('inline-signup-flash', 'Please enter a valid 6-digit OTP code');
                                return;
                            }
                            const urlParams = new URLSearchParams(window.location.search);
                            let rawOrg = (document.getElementById('inline-signup-org')?.value || '').trim();
                            if (!rawOrg) {
                                rawOrg = (urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '').trim();
                            }
                            const organisation = rawOrg.replace('_lms', '');
                            const firstName = document.getElementById('inline-signup-firstname').value.trim();
                            const lastName = document.getElementById('inline-signup-lastname').value.trim();
                            const email = document.getElementById('inline-signup-email').value.trim();
                            const password = document.getElementById('inline-signup-password').value;

                            inlineVerifyBtn.disabled = true;
                            try {
                                const query = `
                                    mutation SignupAppUser($organisation: String!, $email: String!, $password: String!, $first_name: String!, $last_name: String!, $otp: Int!) {
                                        signupAppUser(organisation: $organisation, email: $email, password: $password, first_name: $first_name, last_name: $last_name, otp: $otp) {
                                            success
                                            message
                                            parent_id
                                            user_id
                                        }
                                    }
                                `;

                                const response = await fetch('{{ config('api.url') }}/graphql/authentication', {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({
                                        query,
                                        variables: {
                                            organisation,
                                            email,
                                            password,
                                            first_name: firstName,
                                            last_name: lastName,
                                            otp: parseInt(otp)
                                        }
                                    })
                                });

                                const json = await response.json();
                                const result = json.data?.signupAppUser;

                                if (result && result.success) {
                                    showInlineFlash('inline-signup-flash', 'Signup successful! Signing you in...', 'success');
                                    // Log in immediately after signup to get token
                                    const loginQuery = `
                                        mutation LoginMylUser($login: String!, $password: String!, $organisation: String!) {
                                            loginMylUser(login: $login, password: $password, organisation: $organisation) {
                                                success
                                                message
                                                organisations {
                                                    organisation
                                                    members {
                                                        token
                                                        role
                                                        first_name
                                                        last_name
                                                        email
                                                    }
                                                }
                                            }
                                        }
                                    `;
                                    const loginRes = await fetch('{{ config('api.url') }}/graphql/authentication', {
                                        method: 'POST',
                                        headers: { 'Content-Type': 'application/json' },
                                        body: JSON.stringify({
                                            query: loginQuery,
                                            variables: { login: email, password: password, organisation: `${organisation}_lms` }
                                        })
                                    });
                                    const loginJson = await loginRes.json();
                                    const loginResult = loginJson.data?.loginMylUser;
                                    const memberToken = loginResult?.organisations?.[0]?.members?.[0]?.token;

                                    if (memberToken) {
                                        localStorage.setItem('authToken', memberToken);
                                        localStorage.setItem('organisation', `${organisation}_lms`);
                                        localStorage.setItem('last_db', `${organisation}_lms`);

                                        setTimeout(() => {
                                            const currentUrl = new URL(window.location.href);
                                            currentUrl.searchParams.set('dbname', `${organisation}_lms`);
                                            currentUrl.searchParams.set('token', memberToken);
                                            window.location.href = currentUrl.toString();
                                        }, 800);
                                    } else {
                                        document.getElementById('inline-signup-card')?.classList.add('hidden');
                                        document.getElementById('inline-login-card')?.classList.remove('hidden');
                                        showInlineFlash('inline-login-flash', 'Account created! Please sign in.', 'success');
                                    }
                                } else {
                                    showInlineFlash('inline-signup-flash', result ? result.message : 'Signup failed.');
                                }
                            } catch (err) {
                                console.error('Inline verify error:', err);
                                showInlineFlash('inline-signup-flash', 'A network error occurred.');
                            } finally {
                                inlineVerifyBtn.disabled = false;
                            }
                        });
                    }

                    const inlineBackToSignup = document.getElementById('inlineBackToSignup');
                    if (inlineBackToSignup) {
                        inlineBackToSignup.addEventListener('click', () => {
                            document.getElementById('inlineOtpStep')?.classList.add('hidden');
                            document.getElementById('inlineSignupStep')?.classList.remove('hidden');
                        });
                    }
                });

            </script>

            <!-- Payment Modal -->
            <div id="payment-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3><i class="fas fa-shield-halved"></i> Secure Checkout</h3>
                        <span class="close-modal" onclick="window.closePaymentModal()">&times;</span>
                    </div>
                    <div style="flex:1; position:relative; display:flex; flex-direction:column; overflow:hidden;">
                        <div id="payment-loading">
                            <div class="spinner"></div>
                            <p style="font-weight: 600; color: #64748b; font-size: 0.875rem;">Initializing Secure
                                Connection...</p>
                        </div>
                        <iframe id="payment-iframe" style="flex:1; width:100%; border:none; background:transparent;"
                            src=""></iframe>
                    </div>

                </div>
            </div>

            <!-- Full Page Loader -->
            <div id="full-page-loader"
                class="hidden fixed inset-0 z-[10000] bg-slate-900/60 backdrop-blur-sm flex flex-col items-center justify-center">
                <div class="relative">
                    <div class="w-16 h-16 border-4 border-white/20 border-t-white rounded-full animate-spin"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <i class="fa-solid fa-cloud-arrow-up text-white text-xl"></i>
                    </div>
                </div>
                <p class="mt-4 text-white font-bold tracking-wider text-lg" id="loader-text">Processing Registrations...
                </p>
                <p class="text-white/70 text-sm">Please do not refresh or close this page</p>
            </div>

            <!-- Font Awesome -->
            <script src="https://kit.fontawesome.com/ff110e9818.js" crossorigin="anonymous"></script>
        </main>

    </div>

    @include('components.footer')