@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> --}}


    <style>
        /* General input styles */

        .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;
        }

        .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 */
        @supports (-webkit-touch-callout: none) {
            input[type="date"] {
                font-size: 16px;
            }
        }

        .custom-blue {
            background-color: #16467B;
        }

        .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);
        }

        .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: #000080;
        }

        .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: #000080;
            font-weight: 600;
        }

        .material-input-group .required-star {
            color: #ef4444;
        }

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

        .material-input-group .select-arrow {
            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: #000080;
            font-weight: 600;
        }

        /* Prose/description content styling */
        .prose p {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        .prose h3 {
            font-weight: 600;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        .prose ul, .prose ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
        .prose li {
            margin-bottom: 0.25rem;
        }
        .prose strong, .prose b {
            font-weight: 600;
        }
        .prose u {
            text-decoration: underline;
        }
        .checkbox-group {
            width: 100%;
        }
        .checkbox-group.md\\:col-span-2 {
            grid-column: span 2;
        }
    </style>
    </head>

    <body class="bg-gray-100 h-dvh flex flex-col overflow-hidden">


        @include('components.navbar')

        <div class="flex pt-14 h-full overflow-hidden">
            @include('components.sidebar', ['page' => 'current-registration'])

            <main id="content" class="flex-1 overflow-y-auto bg-gray-100 p-6 transition-all duration-300">
                <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-[#000080] 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-[#93C5FD] border-t-[#000080]"></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-[#000080]"></i>
                                    Select Registration Form
                                </label>
                                <select id="registration-form-select" 
                                        class="w-full p-4 border-2 border-[#93C5FD] rounded-lg text-lg focus:border-[#000080] focus:ring-2 focus:ring-[#000080]/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-[#000080] text-white p-8 text-center">
                            <h1 id="form-title" class="text-2xl font-bold tracking-wide">Welcome to Sports League Registration</h1>
                            <p class="text-sm mt-2 opacity-90">Please complete all sections to register your player</p>
                        </div>

                        <!-- Main Body (Light Blue Container with Accordions) -->
                        <div class="bg-[#93C5FD] 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-[#000080]"></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 justify-center pt-4 pb-2 hidden">
                                <button id="submit-registration-btn" class="bg-[#000080] text-white px-12 py-3 rounded-lg font-bold shadow-lg hover:bg-blue-900 transition transform hover:scale-105">Submit Registration</button>
                            </div>
                        </div>
                    </div>

                </div>

                <script>
                    // Toggle accordion section
                    function toggleSection(id, header) {
                        const section = document.getElementById(id);
                        const icon = header.querySelector('i');
                        
                        if (section.classList.contains('accordion-open')) {
                            section.classList.remove('accordion-open');
                            icon.classList.add('rotated');
                        } else {
                            section.classList.add('accordion-open');
                            icon.classList.remove('rotated');
                        }
                    }

                    // Global variable to store field values from parent data
                    let fieldValues = {};
                    let globalParentId = null;
                    
                    // 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 playerPages = {}; 
                    let currentlyEditingPlayerId = null; // Track which player is currently being edited/autofilled
                    
                    // Global auth tokens for API calls
                    let authOrganisation = '';
                    let authToken = '';

                    // Global object to collect all registration data
                    let collectedRegistrationData = {};
                    let currentForm = null;
                    let allPagesMap = {};


                    // Generate input field based on field type
                    // usePrePopulate: only set to true for Parent page fields
                    function generateInputField(field, usePrePopulate = false) {
                        const fieldId = `field-${field.field_id}`;
                        const isRequired = field.is_required === 1;
                        const requiredStar = isRequired ? '<span class="required-star">*</span>' : '';
                        
                        // Get pre-populated value from fieldValues map
                        let preValue = '';
                        if (usePrePopulate) {
                            // Try lookup by field_id first (most specific)
                            if (field.field_id) {
                                preValue = fieldValues[`id_${field.field_id}`];
                            }
                            
                            // Fallback to label match if no ID match found
                            if (!preValue && field.label) {
                                const normalizedLabel = (field.label || '').toLowerCase().trim();
                                preValue = fieldValues[normalizedLabel];
                            }
                            
                            preValue = preValue || '';
                            
                            // Debug logging for field mapping
                            if (preValue) {
                                // console.log(`✅ Field "${field.label}" (ID: ${field.field_id}) pre-populated with: "${preValue}"`);
                            }
                        }
                        const escapedValue = preValue.toString().replace(/"/g, '&quot;');
                        
                        let inputHtml = '';
                        
                        switch(field.field_type) {
                            case 'text':
                            case 'phone':
                            case 'number':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="${field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'}" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'email':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="email" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'date':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="text" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}" class="label-float">${field.label} ${requiredStar}</label>
                                        <i class="fa-regular fa-calendar select-arrow"></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>`;
                                    });
                                }
                                inputHtml = `
                                    <div class="material-input-group">
                                        <select id="${fieldId}" name="${field.page_field_name}" ${isRequired ? 'required' : ''}>
                                            ${optionsHtml}
                                        </select>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                        <i class="fa-solid fa-chevron-down select-arrow"></i>
                                    </div>
                                `;
                                break;
                            case 'checkbox':
                                const description = field.page_field_description || '';
                                // Checkbox with description should span full width
                                const checkboxFullWidth = description ? 'md:col-span-2' : '';
                                inputHtml = `
                                    <div class="checkbox-group ${checkboxFullWidth}">
                                        ${description ? `<div class="text-sm text-gray-600 mb-3 prose prose-sm max-w-none">${description}</div>` : ''}
                                        <div class="flex items-start gap-2">
                                            <input type="checkbox" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   class="w-4 h-4 mt-1 text-blue-900 border-gray-300 rounded focus:ring-blue-500 flex-shrink-0"
                                                   ${preValue && (preValue === '1' || preValue === 'true' || preValue === true) ? 'checked' : ''}
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}" class="text-sm font-bold text-gray-800">${field.label} ${requiredStar}</label>
                                        </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"
                                                  ${isRequired ? 'required' : ''}>${escapedValue}</textarea>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'image':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="file" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               accept="image/*"
                                               class="pt-5"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}" class="label-float">${field.label} ${requiredStar}</label>
                                    </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}" 
                                                   placeholder=" "
                                                   value="${escapedValue}"
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                        </div>
                                    `;
                                }
                        }
                        
                        return inputHtml;
                    }

                    // Fetch and populate player data when checkbox is selected
                    async function onPlayerSelect(playerId, playerName, isChecked) {
                        // console.log(`Player ${playerName} (ID: ${playerId}) ${isChecked ? 'selected' : 'deselected'}`);
                        
                        // Update selection set
                        if (isChecked) {
                            selectedPlayerIds.add(playerId);
                            currentlyEditingPlayerId = playerId;
                        } else {
                            selectedPlayerIds.delete(playerId);
                            if (currentlyEditingPlayerId === playerId) {
                                currentlyEditingPlayerId = null;
                            }
                        }
                        
                        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);
                                }
                            });
                            return;
                        }
                        
                        try {
                        // Check for local player first
                        const localPlayer = playersList.find(p => p.player_id == playerId && p.is_local);
                        if (localPlayer) {
                            // console.log('Local player selected:', localPlayer);
                            playerFieldValues = {};
                            
                            // Populate values from local fields
                            if (Array.isArray(localPlayer.fields)) {
                                localPlayer.fields.forEach(f => {
                                     if (f.label && f.value) {
                                         playerFieldValues[f.label.toLowerCase().trim()] = f.value;
                                     }
                                });
                            } else if (typeof localPlayer.fields === 'object') {
                                 // Fallback if saved as map
                                 Object.entries(localPlayer.fields).forEach(([k, v]) => {
                                      if(v) playerFieldValues[k.toLowerCase().trim()] = v;
                                 });
                            }
                            
                            // 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);
                                }
                            });
                            
                            // Re-render ALL player selection UIs
                            updatePlayerSelectionUI();
                            return;
                        }
                            // Fetch player data
                            const response = await fetch('https://api.manageyourleague.com/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 Response:', result);
                            
                            // Clear previous player field values
                            playerFieldValues = {};
                            
                            if (result.data && result.data.fetchPlayerData) {
                                const playerData = result.data.fetchPlayerData;
                                // console.log('Player Data:', playerData);
                                
                                // 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();
                                            playerFieldValues[normalizedLabel] = field.value;
                                            // console.log(`Player: Mapped label "${field.label}" => "${field.value}"`);
                                        }
                                    });
                                }
                                
                                // console.log('Player Field Values Map:', 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);
                                }
                            });
                            
                            // Re-render ALL player selection UIs to reflect current loading state
                            updatePlayerSelectionUI();
                            
                        } catch (error) {
                            // console.error('Error fetching player data:', error);
                        }
                    }
                    
                    // 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 '';
                        
                        // Filter visible fields (display = 1 or 2)
                        const visibleFields = page.fields.filter(f => f.display === 1 || f.display === 2);
                        
                        // Group fields by group_name
                        const groups = {};
                        visibleFields.forEach(field => {
                            const groupName = field.group_name || 'Other';
                            if (!groups[groupName]) {
                                groups[groupName] = {
                                    sort_order: field.group_sort_order || 999,
                                    fields: []
                                };
                            }
                            groups[groupName].fields.push(field);
                        });

                        // Sort groups by group_sort_order
                        const sortedGroups = Object.entries(groups)
                            .sort((a, b) => a[1].sort_order - b[1].sort_order);

                        // 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') {
                                    // console.log('Processing Phone Numbers group (Player)...');
                                    // 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+)/);
                                        // Default to group '1' if no number found but it's a phone-related field
                                        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');
                                        
                                        // console.log(`Player Field: ${field.label}, FieldName: ${fieldName}, PhoneNum: ${phoneNumber}, isCode: ${isCode}, isPhone: ${isPhone}, isExt: ${isExt}`);
                                        
                                        // If it's a code, phone, or ext field but no number found, default to '1'
                                        if (!phoneNumber && (isCode || isPhone || isExt)) {
                                            phoneNumber = '1';
                                            // console.log(`  -> Defaulting to phoneNumber '1' for: ${field.label}`);
                                        }
                                        
                                        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 {
                                            // Non-phone fields like "Receive SMS"
                                            otherFields.push(field);
                                        }
                                    });
                                    
                                    // console.log('Phone Groups (Player):', JSON.stringify(phoneGroups, null, 2));
                                    // console.log('Other Fields (Player):', otherFields.map(f => f.label));
                                    
                                    // Render phone rows in 3-column grid (Code, Phone, Ext)
                                    Object.keys(phoneGroups).sort().forEach(num => {
                                        const group = phoneGroups[num];
                                        fieldsHtml += '<div class="grid grid-cols-3 gap-4 mb-4">';
                                        
                                        // Code field (smaller)
                                        if (group.code) {
                                            fieldsHtml += `<div>${generatePlayerInputField(group.code, updateWithData)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        // Phone field (main)
                                        if (group.phone) {
                                            fieldsHtml += `<div>${generatePlayerInputField(group.phone, updateWithData)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        // Ext field (smaller)
                                        if (group.ext) {
                                            fieldsHtml += `<div>${generatePlayerInputField(group.ext, updateWithData)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        fieldsHtml += '</div>';
                                    });
                                    
                                    // Render other fields (like Receive SMS) in full width
                                    otherFields.forEach(field => {
                                        fieldsHtml += `<div class="mt-2">${generatePlayerInputField(field, updateWithData)}</div>`;
                                    });
                                } else {
                                    // Regular fields in 2-column grid
                                    sortedFields.forEach(field => {
                                        fieldsHtml += generatePlayerInputField(field, updateWithData);
                                    });
                                }

                                if (fieldsHtml) {
                                    // Hide group header if it's "Additional Information" and there's only one group
                                    const showGroupHeader = !(groupName === 'Additional Information' && sortedGroups.length === 1);
                                    
                                    // Special styling for group header
                                    const groupHeaderHtml = showGroupHeader ? `
                                        <div class="bg-gray-100 py-2 px-3 mb-4">
                                            <h3 class="text-sm font-bold text-[#000080] uppercase tracking-wide">${groupName}.</h3>
                                            <div class="border-b-2 border-dashed border-[#000080] 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';
                                    
                                    fieldsHtml = `
                                        <div class="mb-6">
                                            ${groupHeaderHtml}
                                            <div class="${gridClass}">
                                                ${fieldsHtml}
                                            </div>
                                        </div>
                                    `;
                                    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="text-gray-700 prose prose-sm max-w-none">${descField.page_field_description}</div>`;
                            }
                        }

                        // Add Save Button for Player fields
                        groupsHtml += `
                            <div class="mt-6 pt-4 border-t border-gray-200 flex justify-end">
                                <button type="button" 
                                        onclick="saveNewPlayer(${page.page_id}, this)"
                                        class="bg-[#000080] 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 Player
                                </button>
                            </div>
                        `;
                        
                        return groupsHtml;
                    }
                    
                    // Helper to generate input field specifically for player section using playerFieldValues
                    function generatePlayerInputField(field, usePrePopulate) {
                        const fieldId = `field-${field.field_id}`;
                        const isRequired = field.is_required === 1;
                        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();
                            preValue = playerFieldValues[normalizedLabel] || '';
                            
                            // Debug logging
                            if (preValue) {
                                // console.log(`✅ Player Field "${field.label}" pre-populated with: "${preValue}"`);
                            }
                        }
                        const escapedValue = preValue.toString().replace(/"/g, '&quot;');
                        
                        // 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.
                        
                        let inputHtml = '';
                        
                        switch(field.field_type) {
                            case 'text':
                            case 'phone':
                            case 'number':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="${field.field_type === 'phone' ? 'tel' : field.field_type === 'number' ? 'number' : 'text'}" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'email':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="email" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'date':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="text" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               placeholder=" "
                                               value="${escapedValue}"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}" class="label-float">${field.label} ${requiredStar}</label>
                                        <i class="fa-regular fa-calendar select-arrow"></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>`;
                                    });
                                }
                                inputHtml = `
                                    <div class="material-input-group">
                                        <select id="${fieldId}" name="${field.page_field_name}" ${isRequired ? 'required' : ''}>
                                            ${optionsHtml}
                                        </select>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                        <i class="fa-solid fa-chevron-down select-arrow"></i>
                                    </div>
                                `;
                                break;
                            case 'checkbox':
                                const description = field.page_field_description || '';
                                const checkboxFullWidth = description ? 'md:col-span-2' : '';
                                inputHtml = `
                                    <div class="checkbox-group ${checkboxFullWidth}">
                                        ${description ? `<div class="text-sm text-gray-600 mb-3 prose prose-sm max-w-none">${description}</div>` : ''}
                                        <div class="flex items-start gap-2">
                                            <input type="checkbox" 
                                                   id="${fieldId}" 
                                                   name="${field.page_field_name}" 
                                                   class="w-4 h-4 mt-1 text-blue-900 border-gray-300 rounded focus:ring-blue-500 flex-shrink-0"
                                                   ${preValue && (preValue === '1' || preValue === 'true' || preValue === true) ? 'checked' : ''}
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}" class="text-sm font-bold text-gray-800">${field.label} ${requiredStar}</label>
                                        </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"
                                                  ${isRequired ? 'required' : ''}>${escapedValue}</textarea>
                                        <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                    </div>
                                `;
                                break;
                            case 'image':
                                inputHtml = `
                                    <div class="material-input-group">
                                        <input type="file" 
                                               id="${fieldId}" 
                                               name="${field.page_field_name}" 
                                               accept="image/*"
                                               class="pt-5"
                                               ${isRequired ? 'required' : ''}>
                                        <label for="${fieldId}" class="label-float">${field.label} ${requiredStar}</label>
                                    </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}"
                                                   ${isRequired ? 'required' : ''}>
                                            <label for="${fieldId}">${field.label} ${requiredStar}</label>
                                        </div>
                                    `;
                                }
                        }
                        return inputHtml;
                    }

                    // Render a page as an accordion
                    function renderPage(page, index) {
                        const pageId = `page-${page.page_id}`;
                        
                        // Check if this is the Welcome page - only show description
                        const isWelcomePage = page.name.toLowerCase().trim() === 'welcome';
                        
                        if (isWelcomePage) {
                            // For Welcome page, only show the page_field_description
                            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="text-gray-700 prose prose-sm max-w-none">${descField.page_field_description}</div>`;
                                }
                            }
                            
                            return `
                                <div class="bg-white rounded-lg border-2 border-[#000080] overflow-hidden shadow-md">
                                    <div class="bg-[#000080] 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 uppercase tracking-wide text-sm">${page.name}</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 the Parent page - only pre-populate fields for this page
                        const isParentPage = page.name.toLowerCase() === 'parents' || page.name.toLowerCase() === 'parent';
                        
                        // Filter visible fields (display = 1 or 2)
                        const visibleFields = page.fields.filter(f => f.display === 1 || f.display === 2);
                        
                        // Group fields by group_name
                        const groups = {};
                        visibleFields.forEach(field => {
                            const groupName = field.group_name || 'Other';
                            if (!groups[groupName]) {
                                groups[groupName] = {
                                    sort_order: field.group_sort_order || 999,
                                    fields: []
                                };
                            }
                            groups[groupName].fields.push(field);
                        });

                        // Sort groups by group_sort_order
                        const sortedGroups = Object.entries(groups)
                            .sort((a, b) => a[1].sort_order - b[1].sort_order);

                        // 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];
                            groupsHtml = generateInputField(field, isParentPage);
                        } 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') {
                                    // console.log('Processing Phone Numbers group (Parent)...');
                                    // 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+)/);
                                        // Default to group '1' if no number found but it's a phone-related field
                                        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');
                                        
                                        // console.log(`Parent Field: ${field.label}, FieldName: ${fieldName}, PhoneNum: ${phoneNumber}, isCode: ${isCode}, isPhone: ${isPhone}, isExt: ${isExt}`);
                                        
                                        // If it's a code, phone, or ext field but no number found, default to '1'
                                        if (!phoneNumber && (isCode || isPhone || isExt)) {
                                            phoneNumber = '1';
                                            // console.log(`  -> Defaulting to phoneNumber '1' for: ${field.label}`);
                                        }
                                        
                                        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 {
                                            // Non-phone fields like "Receive SMS"
                                            otherFields.push(field);
                                        }
                                    });
                                    
                                    // console.log('Phone Groups (Parent):', JSON.stringify(phoneGroups, null, 2));
                                    // console.log('Other Fields (Parent):', otherFields.map(f => f.label));
                                    
                                    // Render phone rows in 3-column grid (Code, Phone, Ext)
                                    Object.keys(phoneGroups).sort().forEach(num => {
                                        const group = phoneGroups[num];
                                        fieldsHtml += '<div class="grid grid-cols-3 gap-4 mb-4">';
                                        
                                        // Code field (smaller)
                                        if (group.code) {
                                            fieldsHtml += `<div>${generateInputField(group.code, isParentPage)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        // Phone field (main)
                                        if (group.phone) {
                                            fieldsHtml += `<div>${generateInputField(group.phone, isParentPage)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        // Ext field (smaller)
                                        if (group.ext) {
                                            fieldsHtml += `<div>${generateInputField(group.ext, isParentPage)}</div>`;
                                        } else {
                                            fieldsHtml += '<div></div>';
                                        }
                                        
                                        fieldsHtml += '</div>';
                                    });
                                    
                                    // Render other fields (like Receive SMS) in full width
                                    otherFields.forEach(field => {
                                        fieldsHtml += `<div class="mt-2">${generateInputField(field, isParentPage)}</div>`;
                                    });
                                } else {
                                    // Regular fields in 2-column grid
                                    sortedFields.forEach(field => {
                                        fieldsHtml += generateInputField(field, isParentPage);
                                    });
                                }

                                if (fieldsHtml) {
                                    // Hide group header if it's "Additional Information" and there's only one group
                                    const showGroupHeader = !(groupName === 'Additional Information' && sortedGroups.length === 1);
                                    
                                    // Special styling for group header
                                    const groupHeaderHtml = showGroupHeader ? `
                                        <div class="bg-gray-100 py-2 px-3 mb-4">
                                            <h3 class="text-sm font-bold text-[#000080] uppercase tracking-wide">${groupName}.</h3>
                                            <div class="border-b-2 border-dashed border-[#000080] 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';
                                    
                                    groupsHtml += `
                                        <div class="mb-6">
                                            ${groupHeaderHtml}
                                            <div class="${gridClass}">
                                                ${fieldsHtml}
                                            </div>
                                        </div>
                                    `;
                                }
                            });
                        }

                        // 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="text-gray-700 prose prose-sm max-w-none">${descField.page_field_description}</div>`;
                            }
                        }

                        // Check if this is specifically the "Player" page
                        const pageName = page.name.toLowerCase().trim();
                        const isPlayerPage = pageName === 'player' || pageName === 'children';
                        
                        // Debug: log all pages to see what we're processing
                        // console.log(`Processing page: "${page.name}" (isPlayerPage: ${isPlayerPage})`);
                        
                        const playerSelectionHtml = getPlayerSelectionHtml(page);
                        
                        // Debug logging
                        if (isPlayerPage) {
                            // console.log(`RenderPage: Identified "${page.name}" as Player page.`);
                            playerPages[page.page_id] = page;
                        }
                        
                         // Add Save Button (Welcome page returns early, so this covers all other pages)
                        const buttonText = isPlayerPage ? 'Save Player' : `Save ${page.name}`;
                        const onclickHandler = isPlayerPage ? `saveNewPlayer(${page.page_id})` : `saveSection(${page.page_id})`;
                        
                        groupsHtml += `
                            <div class="mt-6 pt-4 border-t border-gray-200 flex justify-end">
                                <button type="button" 
                                        onclick="${onclickHandler.replace(')', ', this)')}"
                                        class="bg-[#000080] 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> ${buttonText}
                                </button>
                            </div>
                        `;

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

                        return `
                            <div class="bg-white rounded-lg border-2 border-[#000080] overflow-hidden shadow-md">
                                <div class="bg-[#000080] 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 class="font-bold uppercase tracking-wide text-sm">${page.name}</h2>
                                        <i id="header-checkmark-${page.page_id}" class="fa-solid fa-circle-check text-green-500 ${isPlayerPage && updatedPlayerIds.size > 0 ? '' : '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">
                                    ${playerSelectionHtml}
                                    ${fieldsContainerWrapper}
                                </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';
                        if (!isPlayerPage) return '';
                        
                        const containerId = `player-selection-container-${page.page_id}`;
                        if (playersList.length === 0) {
                            return `
                                <div id="${containerId}" class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
                                    <p class="text-sm text-gray-600 italic">No existing players found to pre-fill data.</p>
                                </div>
                            `;
                        }

                        // Autofill section: Players NOT yet updated/saved
                        const autofillPlayers = playersList.filter(p => !updatedPlayerIds.has(p.player_id));
                        let autofillHtml = '';
                        if (autofillPlayers.length > 0) {
                            autofillHtml = `
                                <div class="mb-6">
                                    <h3 class="text-xs font-semibold text-gray-400 uppercase mb-3 tracking-wider">Autofill from Profile:</h3>
                                    <div class="flex flex-col gap-3">
                                        ${autofillPlayers.map(player => {
                                            const isChecked = selectedPlayerIds.has(player.player_id);
                                            return `
                                                <label class="flex items-center gap-3 cursor-pointer group">
                                                    <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-[#000080] rounded-full checked:bg-white transition-all cursor-pointer"
                                                               onchange="onPlayerSelect(${player.player_id}, '${player.first_name} ${player.last_name}', this.checked)">
                                                        <div class="absolute w-3 h-3 rounded-full bg-[#000080] transform scale-0 group-has-[:checked]:scale-100 transition-transform"></div>
                                                    </div>
                                                    <span class="text-base font-medium text-gray-700 group-hover:text-[#000080] 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 = '';
                        if (readyPlayers.length > 0) {
                            const selectedCount = readyPlayers.filter(p => selectedPlayerIds.has(p.player_id)).length;
                            readyHtml = `
                                <div class="mb-4">
                                    <h3 class="text-xs font-semibold text-gray-400 uppercase mb-3 tracking-wider">Players Ready for Registration (${selectedCount} selected):</h3>
                                    <div class="flex flex-col gap-3">
                                        ${readyPlayers.map(player => `
                                            <div class="bg-gray-100 border border-gray-200 rounded-xl p-4 flex items-center gap-4 shadow-sm hover:shadow-md transition-shadow">
                                                <div class="flex-shrink-0">
                                                    <input type="checkbox" 
                                                           name="player-ready-${player.player_id}" 
                                                           ${selectedPlayerIds.has(player.player_id) ? 'checked' : ''}
                                                           class="w-6 h-6 text-[#000080] border-gray-300 rounded focus:ring-[#000080] cursor-pointer"
                                                           onchange="onPlayerSelect(${player.player_id}, '${player.first_name} ${player.last_name}', this.checked)">
                                                </div>
                                                <div class="flex-grow">
                                                    <div class="text-base font-bold text-gray-900">${player.first_name} ${player.last_name}</div>
                                                    <div class="text-xs text-gray-500 font-medium">Selected for registration</div>
                                                </div>
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                            `;
                        }

                        return `
                            <div id="${containerId}" class="mb-8">
                                ${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;
                             }
                         });
                    }

                    // 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');
                        let fieldsArray = [];
                        let firstName = '';
                        let lastName = '';
                        
                        inputs.forEach(input => {
                            if (input.name && input.type !== 'radio' && input.type !== 'checkbox' && input.type !== 'button') {
                                const field = page.fields.find(f => f.page_field_name === input.name);
                                if (field && input.value) {
                                    const label = field.label;
                                    const labelKey = label.toLowerCase().trim();
                                    
                                    fieldsArray.push({ label: label, value: input.value });
                                    
                                    if (labelKey.includes('first name')) firstName = input.value;
                                    if (labelKey.includes('last name')) lastName = input.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');

                            alert('Please enter at least First Name and Last Name to save a player.');
                            return;
                        }
                        
                        // Hide error icon if present
                        const headerError = document.getElementById(`header-error-${page.page_id}`);
                        if (headerError) headerError.classList.add('hidden');

                        
                        let effectivePlayerId = currentlyEditingPlayerId;
                        let isNewPlayer = !effectivePlayerId;

                        if (isNewPlayer) {
                            effectivePlayerId = Date.now();
                        }

                        const playerData = {
                            player_id: effectivePlayerId,
                            first_name: firstName,
                            last_name: lastName,
                            is_local: true,
                            fields: fieldsArray
                        };
                        
                        // Collect ALL data for the final submission object
                        const allInputs = pageContainer.querySelectorAll('input, select, textarea');
                        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 ? "true" : "false";
                                } else if (input.type === 'file') {
                                    value = input.files[0] ? input.files[0].name : '';
                                } else {
                                    value = input.value;
                                }

                                const fieldid = field.fieldid || field.field_id;
                                const customFieldid = field.customFieldid || field.custom_field_id || field.custom_field_id;

                                // Player page is systemic - use simple format for default fields
                                if (!customFieldid || customFieldid === 0 || customFieldid === "0") {
                                    playerResultData[fieldid] = value;
                                } else {
                                    // Custom field format
                                    playerResultData[fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid,
                                        values: value
                                    };
                                }
                            }
                        });

                        if (!collectedRegistrationData[page.page_id]) collectedRegistrationData[page.page_id] = {};
                        collectedRegistrationData[page.page_id][effectivePlayerId] = playerResultData;
                        // console.log(`Saved player data for 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 };
                            }
                        }
                        
                        
                        // Mark as updated/saved
                        updatedPlayerIds.add(effectivePlayerId);

                        
                        // Mark as selected
                        selectedPlayerIds.add(effectivePlayerId);
                        
                        // Clear current editing status
                        currentlyEditingPlayerId = null;
                        
                        // Clear form manually
                        playerFieldValues = {}; 
                        
                        // Re-render UI: Checkboxes (new one checked)
                        updatePlayerSelectionUI();
                        
                        // Re-render Fields: Clear them
                         Object.values(playerPages).forEach(page => {
                                const container = document.getElementById(`player-fields-container-${page.page_id}`);
                                if (container) {
                                    container.innerHTML = generatePlayerFields(page, true);
                                }
                                
                                // Show green checkmark in header
                                const headerCheckmark = document.getElementById(`header-checkmark-${page.page_id}`);
                                if (headerCheckmark) {
                                    headerCheckmark.classList.remove('hidden');
                                }
                                
                                const headerError = document.getElementById(`header-error-${page.page_id}`);
                                if (headerError) {
                                    headerError.classList.add('hidden');
                                }
                        });

                        // Provide visual feedback
                        if (saveBtn) {
                            const originalContent = saveBtn.innerHTML;
                            saveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved';
                            saveBtn.classList.remove('bg-[#000080]');
                            saveBtn.classList.add('bg-green-600');
                            
                            setTimeout(() => {
                                saveBtn.innerHTML = originalContent;
                                saveBtn.classList.remove('bg-green-600');
                                saveBtn.classList.add('bg-[#000080]');
                            }, 2000);
                        }

                        alert('Player saved successfully! Form cleared for next entry.');
                    }

                    // Save a generic section
                    function saveSection(pageId, saveBtn) {
                        const pageContainer = document.getElementById(`page-${pageId}`);
                        if (!pageContainer) return;

                        // Basic validation: check required fields
                        const requiredInputs = pageContainer.querySelectorAll('input[required], select[required], textarea[required]');
                        let allValid = true;
                        let firstInvalid = null;

                        requiredInputs.forEach(input => {
                            if (!input.value || (input.type === 'checkbox' && !input.checked)) {
                                allValid = false;
                                input.classList.add('border-red-500');
                                if (!firstInvalid) firstInvalid = input;
                            } else {
                                input.classList.remove('border-red-500');
                            }
                        });

                        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();
                            alert('Please fill in all required fields in this section.');
                            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() : '';
                        
                        // Identify systemic pages (Parent/Player)
                        const isSystemicPage = ['parent', 'parents', 'player', 'children'].includes(pageName);

                        inputs.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 ? "true" : "false";
                                } else if (input.type === 'file') {
                                    value = input.files[0] ? input.files[0].name : '';
                                } else {
                                    value = input.value;
                                }

                                const fieldid = field.fieldid || field.field_id;
                                const customFieldid = field.customFieldid || field.custom_field_id;

                                if (isSystemicPage && (!customFieldid || customFieldid === 0 || customFieldid === "0")) {
                                    // Default field on systemic page - map with fieldid and value
                                    sectionData[fieldid] = value;
                                } else {
                                    // Custom field OR any field on a custom page - map with object format
                                    sectionData[fieldid] = {
                                        fieldid: fieldid,
                                        customfieldId: customFieldid || 0,
                                        values: value
                                    };
                                }
                            }
                        });
                        
                        const actualPageName = page ? page.name : `Page ${pageId}`;
                        collectedRegistrationData[pageId] = sectionData;
                        // console.log(`Saved section "${actualPageName}":`, sectionData);

                        // Show green checkmark in header
                        const headerCheckmark = document.getElementById(`header-checkmark-${pageId}`);
                        if (headerCheckmark) {
                            headerCheckmark.classList.remove('hidden');
                        }
                        
                        // 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';
                        saveBtn.classList.remove('bg-[#000080]');
                        saveBtn.classList.add('bg-green-600');
                        
                        setTimeout(() => {
                            saveBtn.innerHTML = originalContent;
                            saveBtn.classList.remove('bg-green-600');
                            saveBtn.classList.add('bg-[#000080]');
                        }, 2000);

                        alert('Section saved successfully!');
                    }

                    // 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;
                            
                            // console.log('Organisation:', organisation);
                            // console.log('Token:', token);
                            
                            // 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) {
                                // console.log('No form_id in URL, fetching available forms...');
                                const formsResponse = await fetch('https://api.manageyourleague.com/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();
                                // console.log('Available Forms:', formsResult);
                                
                                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;
                                        // console.log('Using default form_id:', formId);
                                    } else {
                                        throw new Error('No registration forms available');
                                    }
                                } else {
                                    throw new Error('No registration forms available');
                                }
                            }
                            
                            // console.log('Loading form with ID:', formId);
                            
                            const response = await fetch('https://api.manageyourleague.com/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();
                            // console.log('FetchRegistrationMobileApp Response:', result);
                            
                            // Access form and pages from the response
                            const responseData = result.data.fetchRegistrationMobileApp;
                            // console.log('Response Data:', responseData);
                            // console.log('Form type:', typeof responseData.form);
                            // console.log('Pages type:', typeof responseData.pages);
                            
                            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('Parsed Data:', data);
                            // console.log('Pages count:', data.pages ? data.pages.length : 'No pages');
                            
                            // Fetch parent data to pre-populate form fields
                            // Parent is identified via X-Token and X-Organisation headers
                            // console.log('Fetching parent data using token and organisation headers...');
                            
                            const parentDataResponse = await fetch('https://api.manageyourleague.com/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': organisation,
                                    'X-Token': token,
                                },
                                body: JSON.stringify({
                                    query: `query FetchParentData {
                                        fetchParentData {
                                            parent_id
                                            registration_id
                                            form_id
                                            page_id
                                            fields {
                                                field_id
                                                label
                                                value
                                            }
                                            players {
                                                player_id
                                                registration_id
                                                first_name
                                                last_name
                                            }
                                        }
                                    }`
                                })
                            });

                            const parentResult = await parentDataResponse.json();
                            // console.log('FetchParentData Response:', parentResult);
                            
                            // Populate fieldValues map from parent data - MAP BY LABEL
                            if (parentResult.data && parentResult.data.fetchParentData) {
                                const parentData = parentResult.data.fetchParentData;
                                // console.log('Parent Data (raw):', parentData);
                                
                                // Handle both array and single object responses
                                const registrations = Array.isArray(parentData) ? parentData : [parentData];
                                // console.log('Registrations count:', registrations.length);
                                
                                // Iterate through all registrations and map LABEL to value
                                registrations.forEach((registration, regIndex) => {
                                    if (registration.parent_id) {
                                        globalParentId = registration.parent_id;
                                    }
                                    // console.log(`Processing registration ${regIndex}:`, registration);
                                    
                                    // Extract players list
                                    if (registration.players && Array.isArray(registration.players)) {
                                        // console.log(`Registration ${regIndex}: Found ${registration.players.length} players`, 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);
                                                // console.log(`Found player: ${player.first_name} ${player.last_name} (ID: ${player.player_id})`);
                                            }
                                        });
                                    } else {
                                        // console.log(`Registration ${regIndex}: No 'players' array found`, registration);
                                    }
                                    
                                    if (registration.fields && Array.isArray(registration.fields)) {
                                        registration.fields.forEach(field => {
                                            if (field.label && field.value !== null && field.value !== undefined) {
                                                // Store value by LABEL (normalized to lowercase for matching)
                                                const normalizedLabel = field.label.toLowerCase().trim();
                                                fieldValues[normalizedLabel] = field.value;
                                                // console.log(`Mapped label "${field.label}" => "${field.value}"`);
                                            }
                                        });
                                    }
                                });
                                
                                // console.log('Final Field Values Map (by label):', fieldValues);
                                // console.log('Total fields mapped:', Object.keys(fieldValues).length);
                                // console.log('Total players found:', playersList.length);
                            }
                            
                            // 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`;
                            }

                            // Sort pages by sort_order, but move Summary and Payment to the end
                            const sortedPages = data.pages
                                .filter(p => p.display === 1)
                                .sort((a, b) => {
                                    // Move Summary and Payment pages to the very end
                                    const aIsSummaryOrPayment = a.name.toLowerCase() === 'summary' || a.name.toLowerCase() === 'payment';
                                    const bIsSummaryOrPayment = b.name.toLowerCase() === 'summary' || b.name.toLowerCase() === 'payment';
                                    
                                    if (aIsSummaryOrPayment && !bIsSummaryOrPayment) return 1;
                                    if (!aIsSummaryOrPayment && bIsSummaryOrPayment) return -1;
                                    
                                    // If both are Summary/Payment, put Summary before Payment
                                    if (aIsSummaryOrPayment && bIsSummaryOrPayment) {
                                        if (a.name.toLowerCase() === 'summary') return -1;
                                        if (b.name.toLowerCase() === 'summary') return 1;
                                    }
                                    
                                    // Otherwise sort by sort_order
                                    return a.sort_order - b.sort_order;
                                });

                            // Render pages
                            let pagesHtml = '';
                            sortedPages.forEach((page, index) => {
                                // Store in global map
                                allPagesMap[page.page_id] = page;
                                
                                // Rename "Children" to "Player"
                                if (page.name.toLowerCase() === 'children') {
                                    page.name = 'Player';
                                }
                                pagesHtml += renderPage(page, index);
                            });

                            // 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');

                            // Initialize accordions as open
                            setTimeout(() => {
                                const accordions = document.querySelectorAll('.accordion-content');
                                accordions.forEach(accordion => {
                                    accordion.classList.add('accordion-open');
                                });
                            }, 100);

                        } 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 {
                            const organisation = localStorage.getItem('organisation') || '';
                            const token = localStorage.getItem('authToken') || '';
                            
                            // Set global auth tokens
                            authOrganisation = organisation;
                            authToken = token;

                            if (organisation) {
                                globalParentId = organisation;
                            }
                            
                            // Check if form_id is in URL
                            const urlParams = new URLSearchParams(window.location.search);
                            const urlFormId = urlParams.get('form_id');
                            
                            if (urlFormId) {
                                // If form_id is in URL, load that form directly using current_registration API
                                // console.log('Form ID found in URL:', urlFormId);
                                await loadFormById(urlFormId);
                                return;
                            }
                            
                            // Otherwise, fetch available forms and show dropdown
                            // console.log('Fetching available registration forms...');
                            
                            const response = await fetch('https://api.manageyourleague.com/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': organisation,
                                    'X-Token': token,
                                },
                                body: JSON.stringify({
                                    query: `query FetchRegistrationMobileApp {
                                        fetchRegistrationMobileApp {
                                            live_forms
                                        }
                                    }`
                                })
                            });
                            
                            const result = await response.json();
                            // console.log('Available Forms Response:', result);
                            
                            // Hide loading
                            document.getElementById('form-selection-loading').classList.add('hidden');
                            
                            if (result.data && result.data.fetchRegistrationMobileApp && result.data.fetchRegistrationMobileApp.live_forms) {
                                const liveFormsData = result.data.fetchRegistrationMobileApp.live_forms;
                                
                                // console.log('Found live forms:', liveFormsData.length);
                                
                                if (liveFormsData.length > 0) {
                                    // Populate dropdown
                                    const select = document.getElementById('registration-form-select');
                                    liveFormsData.forEach(form => {
                                        if (form.form_id && form.form_name) {
                                            const option = document.createElement('option');
                                            option.value = form.form_id;
                                            option.textContent = form.form_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>
                            `;
                        }
                    }
                    
                    // Load a specific form by ID using current_registration API
                    async function loadFormById(formId) {
                        try {
                            // console.log('Loading form with ID:', formId, 'using current_registration API');
                            
                            // 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
                            await fetchParentData();
                            
                            // Fetch current_registration data
                            const response = await fetch('https://api.manageyourleague.com/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': authOrganisation,
                                    'X-Token': authToken,
                                },
                                body: JSON.stringify({
                                    query: `query FetchRegistrationMobileApp {
                                        fetchRegistrationMobileApp {
                                            current_registration
                                        }
                                    }`
                                })
                            });
                            
                            const result = await response.json();
                            // console.log('Current Registration Response:', result);
                            
                            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);
                                }
                                
                                // console.log('Current Registration Data:', currentRegData);
                                
                                // Find the form matching the selected form_id
                                const selectedFormData = currentRegData.find(reg => reg.form && reg.form.form_id == formId);
                                
                                if (selectedFormData) {
                                    // console.log('Found matching form:', selectedFormData.form.form_name);
                                    processFormData(selectedFormData);
                                } else {
                                    // console.error('Form with ID', formId, 'not found in current_registration data');
                                    // Try to find any form as fallback
                                    if (currentRegData.length > 0) {
                                        // console.log('Using first available form as fallback');
                                        processFormData(currentRegData[0]);
                                    } else {
                                        showFormError('Selected form not found');
                                    }
                                }
                            } else {
                                showFormError('Unable to load registration data');
                            }
                            
                        } catch (error) {
                            // console.error('Error loading form by ID:', error);
                            showFormError('Error loading registration form');
                        }
                    }
                    
                    // Fetch parent data for pre-populating form fields
                    async function fetchParentData() {
                        try {
                            // console.log('Fetching parent data using token and organisation headers...');
                            
                            const response = await fetch('https://api.manageyourleague.com/graphql/registration', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Organisation': authOrganisation,
                                    'X-Token': authToken,
                                },
                                body: JSON.stringify({
                                    query: `query FetchParentData {
                                        fetchParentData {
                                            registration_id
                                            form_id
                                            page_id
                                            fields {
                                                field_id
                                                label
                                                value
                                            }
                                            players {
                                                player_id
                                                registration_id
                                                first_name
                                                last_name
                                            }
                                        }
                                    }`
                                })
                            });

                            const parentResult = await response.json();
                            // console.log('FetchParentData Response:', parentResult);
                            
                            if (parentResult.data && parentResult.data.fetchParentData) {
                                const parentData = parentResult.data.fetchParentData;
                                // console.log('Parent Data (raw):', parentData);
                                
                                const registrations = Array.isArray(parentData) ? parentData : [parentData];
                                // console.log('Registrations count:', registrations.length);
                                
                                registrations.forEach((registration, regIndex) => {
                                    // console.log(`Processing registration ${regIndex}:`, registration);
                                    
                                    if (registration.players && Array.isArray(registration.players)) {
                                        // console.log(`Registration ${regIndex}: Found ${registration.players.length} players`);
                                        registration.players.forEach(player => {
                                            if (!playersList.some(p => p.player_id === player.player_id)) {
                                                playersList.push(player);
                                                // console.log(`Found player: ${player.first_name} ${player.last_name} (ID: ${player.player_id})`);
                                            }
                                        });
                                    }
                                    
                                    if (registration.fields && Array.isArray(registration.fields)) {
                                        registration.fields.forEach(field => {
                                            if (field.value !== null && field.value !== undefined) {
                                                // Map by LABEL (normalized)
                                                if (field.label) {
                                                    const normalizedLabel = field.label.toLowerCase().trim();
                                                    fieldValues[normalizedLabel] = field.value;
                                                }
                                                
                                                // Map by ID (robust for same form) using 'id_' prefix to avoid collision
                                                if (field.field_id) {
                                                    fieldValues[`id_${field.field_id}`] = field.value;
                                                }
                                                
                                                // console.log(`Mapped field: ${field.label} (ID: ${field.field_id}) => "${field.value}"`);
                                            }
                                        });
                                    }
                                });
                                
                                // console.log('Final Field Values Map (by label):', fieldValues);
                                // console.log('Total players found:', playersList.length);
                            }
                            
                            // Local players storage logic has been removed as per requirement

                            
                        } catch (error) {
                            // console.error('Error fetching parent 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 formId = event.target.value;
                        
                        if (!formId) {
                            return;
                        }
                        
                        // console.log('Form selected, navigating to form with ID:', formId);
                        
                        // Navigate to registration page with form_id in URL
                        // This will trigger the loadFormById flow
                        window.location.href = `/user-dashboard/registrations?form_id=${formId}`;
                    }
                    
                    // Process and render form data
                    function processFormData(formData) {
                        const data = {
                            form: formData.form,
                            pages: formData.pages
                        };
                        
                        // console.log('Processing form:', data.form.form_name);
                        
                        // Store current form globally
                        currentForm = data.form;
                        
                        // Initialize collected data with form_id and parent_id at the top
                        collectedRegistrationData = { 
                            form_id: data.form.form_id,
                            parent_id: globalParentId
                        };
                        // console.log('Pages:', data.pages ? data.pages.length : 'No pages');

                        // Update form title
                        document.getElementById('form-title').textContent = `Welcome to ${data.form.form_name} Registration`;

                        // Sort pages by sort_order, but move Summary and Payment to the end
                        const sortedPages = data.pages
                            .filter(p => p.display === 1)
                            .sort((a, b) => {
                                // Move Summary and Payment pages to the very end
                                const aIsSummaryOrPayment = a.name.toLowerCase() === 'summary' || a.name.toLowerCase() === 'payment';
                                const bIsSummaryOrPayment = b.name.toLowerCase() === 'summary' || b.name.toLowerCase() === 'payment';
                                
                                if (aIsSummaryOrPayment && !bIsSummaryOrPayment) return 1;
                                if (!aIsSummaryOrPayment && bIsSummaryOrPayment) return -1;
                                
                                // If both are Summary/Payment, put Summary before Payment
                                if (aIsSummaryOrPayment && bIsSummaryOrPayment) {
                                    if (a.name.toLowerCase() === 'summary') return -1;
                                    if (b.name.toLowerCase() === 'summary') return 1;
                                }
                                
                                // Otherwise sort by sort_order
                                return a.sort_order - b.sort_order;
                            });

                        // Render pages
                        let pagesHtml = '';
                        sortedPages.forEach((page, index) => {
                            // Store in global map
                            allPagesMap[page.page_id] = page;
                            
                            // Rename "Children" to "Player"
                            if (page.name.toLowerCase() === 'children') {
                                page.name = 'Player';
                            }
                            pagesHtml += renderPage(page, index);
                        });

                        // 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');

                        // Initialize accordions as open
                        setTimeout(() => {
                            const accordions = document.querySelectorAll('.accordion-content');
                            accordions.forEach(accordion => {
                                accordion.classList.add('accordion-open');
                            });
                        }, 100);

                        // Add Submit Button Handler
                        const submitBtn = document.getElementById('submit-registration-btn');
                        if (submitBtn) {
                            submitBtn.addEventListener('click', function() {
                                
                                // Construct the payload according to the mutation structure
                                const payload = {
                                    form_id: currentForm ? currentForm.form_id : collectedRegistrationData.form_id,
                                    league_id: currentForm ? currentForm.league_id : null,
                                    season_id: currentForm ? currentForm.season_id : null,
                                    year_id: currentForm ? currentForm.season_id : null,
                                    players: [],
                                    parent_data: [],
                                    registration_fields: []
                                };

                                // Validate that all sections (except Welcome) have been saved (green tick)
                                let missingSections = [];
                                Object.values(allPagesMap).forEach(page => {
                                    if (page.name.toLowerCase() === 'welcome') return;
                                    
                                    const headerCheck = document.getElementById(`header-checkmark-${page.page_id}`);
                                    if (!headerCheck || headerCheck.classList.contains('hidden')) {
                                        missingSections.push(page.name);
                                    }
                                });

                                if (missingSections.length > 0) {
                                    alert(`Please save the following sections before registering:\n- ${missingSections.join('\n- ')}`);
                                    return;
                                }

                                // Iterate through collected pages
                                Object.keys(collectedRegistrationData).forEach(pageId => {
                                    if (pageId === 'form_id' || pageId === 'parent_id') return;

                                    const pageData = collectedRegistrationData[pageId];
                                    const page = allPagesMap[pageId];

                                    if (!page) return;

                                    const pageName = page.name.toLowerCase();
                                    
                                    if (pageName === 'player' || pageName === 'children') {
                                        // Player Page
                                        Object.keys(pageData).forEach(playerId => {
                                            const playerData = pageData[playerId];
                                            const playerEntry = {
                                                player_id: parseInt(playerId),
                                                data: [] // To be populated
                                            };
                                            
                                            // Iterate logic for player fields
                                            // The value for each field in playerData depends on saveNewPlayer logic
                                            // It stores objects { fieldid, customfieldId, values } for custom fields
                                            // And raw values for standard fields if customFieldid is missing/0
                                            
                                            Object.keys(playerData).forEach(key => {
                                                // key is fieldid
                                                // value could be primitive or object
                                                const val = playerData[key];
                                                
                                                if (typeof val === 'object' && val !== null && (val.customfieldId || val.custom_field_id)) {
                                                     // Custom field
                                                     const cid = val.customfieldId || val.custom_field_id;
                                                     playerEntry.data.push({
                                                         field_id: parseInt(key),
                                                         customfield_id: parseInt(cid),
                                                         value: val.values // saveNewPlayer uses 'values'
                                                     });
                                                } else {
                                                    // Standard field
                                                    // We need the field name. 
                                                    const field = page.fields.find(f => (f.field_id == key || f.fieldid == key));
                                                    
                                                    // If val is object but has no customfieldId (shouldn't happen based on logic but check)
                                                    let finalVal = val;
                                                    if (typeof val === 'object' && val !== null && val.values !== undefined) {
                                                        finalVal = val.values;
                                                    }

                                                    if (field) {
                                                        playerEntry.data.push({
                                                            field_id: parseInt(key),
                                                            field_name: field.form_field_name, 
                                                            value: finalVal
                                                        });
                                                    }
                                                }
                                            });
                                            payload.players.push(playerEntry);
                                        });

                                    } else if (pageName === 'parent' || pageName === 'parents') {
                                        // Parent Page
                                        Object.keys(pageData).forEach(key => {
                                            const val = pageData[key];
                                            
                                            if (typeof val === 'object' && val !== null && (val.customfieldId)) {
                                                 // Custom field on Parent Page
                                                 payload.parent_data.push({
                                                     field_id: parseInt(key),
                                                     customfield_id: parseInt(val.customfieldId),
                                                     value: val.values
                                                 });
                                            } else {
                                                // Standard field
                                                const field = page.fields.find(f => (f.field_id == key || f.fieldid == key));
                                                let finalVal = val;
                                                
                                                if (field) {
                                                    payload.parent_data.push({
                                                        field_id: parseInt(key),
                                                        field_name: field.form_field_name,
                                                        value: finalVal
                                                    });
                                                }
                                            }
                                        });

                                    } else {
                                        // Custom Pages (ANY other page)
                                        // Map to registration_fields
                                        Object.keys(pageData).forEach(key => {
                                            const val = pageData[key];
                                            
                                            // Check if it's the object structure
                                            if (typeof val === 'object' && val !== null && (val.customfieldId)) {
                                                payload.registration_fields.push({
                                                    field_id: parseInt(key),
                                                    customfield_id: parseInt(val.customfieldId),
                                                    value: val.values
                                                });
                                            } else {
                                                // It might be a standard field on a custom page? 
                                                // saveSection treats "Custom field OR any field on a custom page - map with object format"
                                                // So they should all be objects.
                                                // But if for some reason it's not, we try to find the custom field ID from page fields
                                                const field = page.fields.find(f => (f.field_id == key || f.fieldid == key));
                                                if (field && (field.custom_field_id || field.customFieldid)) {
                                                     payload.registration_fields.push({
                                                         field_id: parseInt(key),
                                                         customfield_id: parseInt(field.custom_field_id || field.customFieldid),
                                                         value: val
                                                     });
                                                }
                                            }
                                        });
                                    }
                                });

                                console.log('%c--- FINAL REGISTRATION PAYLOAD ---', 'color: #000080; font-size: 16px; font-weight: bold;');
                                console.log('Payload:', payload);

                                // Prepare mutation
                                // Helper to formatting JSON to GraphQL arguments (unquoted keys)
                                const toGraphQLArgs = (obj) => JSON.stringify(obj).replace(/"([^"]+)":/g, '$1:');
                                
                                const playersStr = toGraphQLArgs(payload.players);
                                const parentStr = toGraphQLArgs(payload.parent_data);
                                const regFieldStr = toGraphQLArgs(payload.registration_fields);
                                
                                const mutation = `mutation CreateRegistration {
                                  createRegistration(
                                    form_id: ${payload.form_id}
                                    league_id: ${payload.league_id || 0}
                                    season_id: ${payload.season_id || 0}
                                    year_id: ${payload.year_id || 0}
                                    players: ${playersStr}
                                    parent_data: ${parentStr}
                                    registration_fields: ${regFieldStr}
                                  ) {
                                    success
                                    message
                                    registrations {
                                      registration_id
                                      player_id
                                      legacy_player_id
                                      legacy_parent_id
                                    }
                                  }
                                }`;

                                // Show loading state
                                const originalBtnText = submitBtn.innerHTML;
                                submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';
                                submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
                                submitBtn.disabled = true;

                                // Get fresh tokens just in case
                                const submitOrg = localStorage.getItem('organisation') || '';
                                const submitToken = localStorage.getItem('authToken') || '';

                                fetch('https://api.manageyourleague.com/graphql/registration', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-Organisation': submitOrg,
                                        'X-Token': submitToken,
                                    },
                                    body: JSON.stringify({ query: mutation })
                                })
                                .then(response => response.json())
                                .then(result => {
                                    console.log('Submission Result:', result);
                                    
                                    if (result.errors) {
                                        throw new Error(result.errors.map(e => e.message).join(', '));
                                    }

                                    if (result.data && result.data.createRegistration) {
                                        if (result.data.createRegistration.success) {
                                            // Success
                                            submitBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved!';
                                            submitBtn.classList.remove('bg-[#000080]');
                                            submitBtn.classList.add('bg-green-600');
                                            
                                            alert('Registration saved successfully!');
                                            // Reload to reset or redirect
                                            window.location.reload();
                                        } else {
                                            // Logic failure
                                            throw new Error(result.data.createRegistration.message || 'Unknown error');
                                        }
                                    } else {
                                        throw new Error('Invalid response structure');
                                    }
                                })
                                .catch(error => {
                                    console.error('Error submitting registration:', error);
                                    alert('Error saving registration: ' + error.message);
                                    
                                    // Reset button
                                    submitBtn.innerHTML = originalBtnText;
                                    submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
                                    submitBtn.disabled = false;
                                });
                            });
                        }
                    }
                </script>
                 <!-- Font Awesome -->
                <script src="https://kit.fontawesome.com/ff110e9818.js" crossorigin="anonymous"></script>
            </main>

        </div>

        @include('components.footer')