@include('components.header')

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

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

    .section-header {
        background: #263b7a;
        color: white;
        padding: 14px 20px;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .section-container {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .section-content {
        background: white;
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 10px 10px;
        padding: 24px;
    }

    .section-content.collapsed {
        display: none;
    }

    .color-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid transparent;
        transition: all 0.2s ease;
    }

    .color-circle:hover {
        transform: scale(1.1);
    }

    .color-circle.selected {
        border-color: #16467B;
        box-shadow: 0 0 0 2px white, 0 0 0 4px #16467B;
    }

    .form-input {
        width: 100%;
        padding: 12px 16px;
        background: #f3f4f6;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        color: #374151;
        transition: all 0.2s;
    }

    .form-input:focus {
        outline: none;
        background: #e5e7eb;
        box-shadow: 0 0 0 2px rgba(38, 59, 122, 0.1);
    }

    .field-row {
        display: flex;
        align-items: center;
        padding: 5px 5px;
        background: #f3f4f6;
        border-radius: 6px;
        margin-bottom: 8px;
    }

    .field-row:last-of-type {
        margin-bottom: 0;
    }

    .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 24px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    input:checked + .toggle-slider {
        background-color: #16467B;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    .season-tag {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        background: #f3f4f6;
        border-radius: 6px;
        margin: 4px;
        font-size: 14px;
    }

    .season-tag.selected {
        background: #16467B;
        color: white;
    }

    .league-type-btn {
        padding: 10px 20px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }

    .league-type-btn.selected {
        border-color: #16467B;
        background: #f0f7ff;
    }

    .action-btn {
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-save {
        background: #6b7280;
        color: white;
        border: none;
    }

    .btn-save:hover {
        background: #4b5563;
    }

    .btn-publish {
        background: #22c55e;
        color: white;
        border: none;
    }

    .btn-publish:hover {
        background: #16a34a;
    }

    .btn-preview {
        background: #14b8a6;
        color: white;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-preview:hover {
        background: #0d9488;
    }

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

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

    .drop-zone {
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        padding: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: #f9fafb;
    }

    .drop-zone:hover {
        border-color: #263b7a;
        background: #f3f4f6;
    }

    .page-container {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .form-header {
        color: #16467B;
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .action-buttons-container {
        padding-top: 20px;
        margin-top: 20px;
        margin-bottom: 10px;
        border-top: 1px solid #e5e7eb;
    }

    .section-save-btn {
        padding: 8px 16px;
        background: #16467B;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .section-save-btn:hover {
        background: #0d2f57;
    }

    .section-save-btn.saved {
        background: #22c55e;
    }

    .section-footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        margin-top: 16px;
        border-top: 1px solid #f3f4f6;
    }

    /* Additional Fields Button */
    .add-fields-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        color: #374151;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 16px;
    }

    .add-fields-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    /* Trash/Delete Icon */
    .delete-field-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: #9ca3af;
        cursor: pointer;
        transition: color 0.2s;
    }

    .delete-field-btn:hover {
        color: #ef4444;
    }

    /* Required Checkbox Styling */
    .required-checkbox {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #6b7280;
        font-size: 14px;
    }

    .required-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #263b7a;
    }

    /* Fields Header */
    .fields-header {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 12px;
    }

    /* Add Fields Modal Styles */
    .add-fields-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        justify-content: center;
        align-items: center;
    }

    .add-fields-modal-overlay.active {
        display: flex;
    }

    .add-fields-modal {
        background: white;
        border-radius: 12px;
        width: 90%;
        max-width: 560px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .add-fields-modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid #e5e7eb;
    }

    .add-fields-modal-header h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 4px;
    }

    .add-fields-modal-header p {
        font-size: 13px;
        color: #6b7280;
    }

    .add-fields-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        cursor: pointer;
        color: #6b7280;
        padding: 4px;
    }

    .add-fields-modal-close:hover {
        color: #1f2937;
    }

    .add-fields-modal-body {
        padding: 20px 24px;
    }

    .predefined-fields-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
    }

    .predefined-field-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .predefined-field-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #263b7a;
    }

    .predefined-field-item label {
        font-size: 14px;
        color: #374151;
        cursor: pointer;
    }

    .predefined-field-item .field-type-badge {
        font-size: 11px;
        color: #6b7280;
        background: #f3f4f6;
        padding: 2px 8px;
        border-radius: 4px;
        margin-left: auto;
    }

    .field-unit-options {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 8px;
    }

    .field-unit-options label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #6b7280;
    }

    .field-unit-options input[type="radio"] {
        width: 14px;
        height: 14px;
        accent-color: #263b7a;
    }

    .add-selected-btn {
        width: 100%;
        padding: 12px;
        background: #263b7a;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 20px;
        transition: background 0.2s, opacity 0.2s;
    }

    .add-selected-btn:hover:not(:disabled) {
        background: #1a2a5a;
    }

    .add-selected-btn:disabled {
        background: #9ca3af;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .custom-field-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
    }

    .custom-field-section h4 {
        font-size: 15px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .custom-field-group {
        margin-bottom: 16px;
    }

    .custom-field-group label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 6px;
    }

    .custom-field-group input,
    .custom-field-group select,
    .custom-field-group textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 14px;
        color: #374151;
        background: white;
    }

    .custom-field-group input:focus,
    .custom-field-group select:focus,
    .custom-field-group textarea:focus {
        outline: none;
        border-color: #263b7a;
        box-shadow: 0 0 0 2px rgba(38, 59, 122, 0.1);
    }

    .custom-field-group .helper-text {
        font-size: 12px;
        color: #9ca3af;
        margin-bottom: 6px;
    }

    .custom-field-options {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 12px;
    }

    .custom-field-options label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #6b7280;
        cursor: pointer;
    }

    .custom-field-options input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #263b7a;
    }

    .add-custom-btn {
        width: 100%;
        padding: 12px;
        background: #263b7a;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 16px;
        transition: background 0.2s;
    }

    .add-custom-btn:hover {
        background: #1a2a5a;
    }

    .add-fields-modal-footer {
        padding: 16px 24px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: flex-end;
    }

    .modal-close-btn {
        padding: 10px 24px;
        background: white;
        color: #374151;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .modal-close-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    /* Preview Modal Styles - Web Format */
    .preview-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #c5dced;
        z-index: 9999;
        overflow-y: auto;
    }

    .preview-modal.active {
        display: block;
    }

    .preview-close-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 10001;
        transition: transform 0.2s;
    }

    .preview-close-btn:hover {
        transform: scale(1.1);
    }

    .preview-web-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 30px 20px;
    }

    .preview-hero {
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
        color: white;
        text-align: center;
        padding: 50px 40px;
        border-radius: 16px;
        margin-bottom: 24px;
    }

    .preview-hero-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .preview-hero-subtitle {
        font-size: 16px;
        opacity: 0.9;
    }

    .preview-section {
        background: white;
        border: 2px solid #1e1b4b;
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .preview-section-header {
        background: #1e1b4b;
        color: white;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .preview-section-header svg {
        transition: transform 0.3s ease;
    }

    .preview-section-header.collapsed svg {
        transform: rotate(180deg);
    }

    .preview-section-content {
        padding: 24px;
        max-height: 1000px;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.3s ease;
        opacity: 1;
    }

    .preview-section-content.collapsed {
        max-height: 0;
        padding: 0 24px;
        opacity: 0;
    }

    .preview-section-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 20px;
    }

    .preview-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 16px;
    }

    .preview-form-row.three-col {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .preview-form-row.single {
        grid-template-columns: 1fr;
    }

    /* Material Design Floating Label - Transparent Background */
    .preview-form-group {
        position: relative;
        margin-bottom: 24px;
        padding-top: 16px;
    }

    .preview-form-label {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.2s ease;
        background: transparent;
    }

    .preview-form-label .required {
        color: #ef4444;
        margin-left: 2px;
    }

    .preview-form-input {
        width: 100%;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #d1d5db;
        font-size: 16px;
        background: transparent;
        color: #1f2937;
        outline: none;
        transition: border-color 0.2s;
    }

    .preview-form-input:focus {
        border-bottom: 2px solid #1e1b4b;
    }

    /* Floating label animation */
    .preview-form-input:focus + .preview-form-label,
    .preview-form-input:not(:placeholder-shown) + .preview-form-label {
        top: 0;
        font-size: 12px;
        color: #1e1b4b;
        transform: translateY(0);
    }

    .preview-form-input::placeholder {
        color: transparent;
    }

    /* Section Divider Style (like NAME., ADDRESS.) */
    .preview-field-group-title {
        font-size: 14px;
        font-weight: 700;
        color: #1e1b4b;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 2px dashed #c5dced;
    }

    .preview-submit-container {
        text-align: center;
        margin-top: 30px;
    }

    .preview-submit-btn {
        padding: 16px 60px;
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .preview-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(30, 27, 75, 0.3);
    }

    .preview-footer {
        text-align: center;
        padding: 30px 20px;
        color: #6b7280;
        font-size: 13px;
    }

    .preview-footer a {
        color: #2563eb;
        text-decoration: underline;
    }
</style>
</head>

<body class="h-dvh flex flex-col overflow-hidden" style="background-color: #e8f4fc;">

    @include('components.navbar')

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

        <main id="content" class="flex-1 p-6 transition-all duration-300 overflow-y-auto">

            <!-- Main Page Container -->
            <div class="page-container">
                <h2 class="form-header">Registration Form Builder</h2>

                <!-- Registration Name -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Registration Name</label>
                    <input type="text" class="form-input" placeholder="Fall 2023 Registrations" value="Fall 2023 Registrations">
                </div>

                <!-- Date Range -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                        <input type="date" class="form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                        <input type="date" class="form-input">
                    </div>
                </div>

                <!-- League Type -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">League Type</label>
                    <div class="flex gap-4">
                        <button class="league-type-btn selected" onclick="selectLeagueType(this)">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="#16467B">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                            </svg>
                            Youth League
                        </button>
                        <button class="league-type-btn" onclick="selectLeagueType(this)">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="#6b7280">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                            </svg>
                            Adult League
                        </button>
                    </div>
                </div>

                <!-- Seasons -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Seasons</label>
                    <div class="flex flex-wrap">
                        <span class="season-tag selected" onclick="toggleSeason(this)">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            Spring 2023
                        </span>
                        <span class="season-tag selected" onclick="toggleSeason(this)">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            Summer 2023
                        </span>
                        <span class="season-tag" onclick="toggleSeason(this)">Fall 2023</span>
                        <span class="season-tag" onclick="toggleSeason(this)">Winter 2024</span>
                    </div>
                </div>

                <!-- Choose a Logo/Color -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Choose a Logo/Accent</label>
                    <div class="flex flex-wrap gap-3 items-center">
                        <div class="color-circle selected" style="background: #1e3a8a;" onclick="selectColor(this)" title="Royal Blue"></div>
                        <div class="color-circle" style="background: #3b82f6;" onclick="selectColor(this)" title="Royal Blue"></div>
                        <div class="color-circle" style="background: #ef4444;" onclick="selectColor(this)" title="Red"></div>
                        <div class="color-circle" style="background: #8b5cf6;" onclick="selectColor(this)" title="Purple"></div>
                        <div class="color-circle" style="background: #f97316;" onclick="selectColor(this)" title="Orange"></div>
                        <div class="color-circle" style="background: #84cc16;" onclick="selectColor(this)" title="Lime"></div>
                        <div class="color-circle" style="background: #fbbf24;" onclick="selectColor(this)" title="Yellow"></div>
                        <div class="color-circle" style="background: #14b8a6;" onclick="selectColor(this)" title="Teal"></div>
                        <div class="color-circle" style="background: #ec4899;" onclick="selectColor(this)" title="Pink"></div>
                        <div class="color-circle" style="background: #6b7280;" onclick="selectColor(this)" title="Gray"></div>
                        <div class="color-circle" style="background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); border: 1px solid #ddd;" onclick="selectColor(this)" title="Custom"></div>
                        <button class="color-circle flex items-center justify-center bg-white border-2 border-dashed border-gray-300 hover:border-gray-400" title="Add Custom">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="#9ca3af">
                                <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                            </svg>
                        </button>
                    </div>
                    <div class="flex gap-2 text-xs text-gray-500 mt-2">
                        <span>Royal Blue</span>
                        <span>Royal Blu</span>
                        <span>Red</span>
                        <span>Purple</span>
                        <span>Purple Gra</span>
                        <span>Lime</span>
                        <span>Yellow</span>
                        <span>Teal</span>
                        <span>Pink</span>
                    </div>
                </div>

                <!-- Expand/Collapse All -->
                <div class="flex gap-4 text-sm">
                    <button class="text-blue-600 hover:underline flex items-center gap-1" onclick="expandAll()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>
                        </svg>
                        Expand All
                    </button>
                    <button class="text-blue-600 hover:underline flex items-center gap-1" onclick="collapseAll()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
                        </svg>
                        Collapse All
                    </button>
                </div>

                <!-- WELCOME PAGE Section -->
                <div class="mb-4 section-container" data-section-id="welcome" data-section-type="default">
                <div class="section-header" onclick="toggleSection(this)">
                    <span>WELCOME PAGE</span>
                    <svg class="chevron-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="section-content">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Page Title</label>
                        <input type="text" class="form-input" id="welcome-title" placeholder="Welcome to Sports League Registration" value="Welcome to Sports League Registration">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea class="form-input" id="welcome-description" rows="3" placeholder="Please complete all sections to register your player">Please complete all sections to register your player</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Banner Image</label>
                        <div class="drop-zone">
                            <svg class="mx-auto w-10 h-10 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
                            </svg>
                            <p class="text-gray-700 font-medium">Drag and drop your banner image here</p>
                            <p class="text-blue-600 text-sm mt-1 cursor-pointer hover:underline">or click to browse</p>
                            <p class="text-gray-400 text-xs mt-2">Recommended size: 1200×300px</p>
                        </div>
                    </div>
                    <div class="section-footer">
                        <button class="section-save-btn" onclick="saveSection('welcome')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                                <polyline points="7 3 7 8 15 8"></polyline>
                            </svg>
                            Save Section
                        </button>
                    </div>
                </div>
                </div>

                <!-- PARENT PAGE Section -->
                <div class="mb-4 section-container" data-section-id="parent" data-section-type="default">
                <div class="section-header" onclick="toggleSection(this)">
                    <span>PARENT PAGE</span>
                    <svg class="chevron-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="section-content" id="parent-fields-container">
                    <p class="fields-header">Default Fields (Youth league only)</p>
                    
                    <div class="field-row" data-field-name="First Name">
                        <span class="flex-1 text-gray-700">First Name</span>
                        <div class="flex items-center gap-4">
                            <label class="required-checkbox">
                                <input type="checkbox" checked class="field-required">
                                Required
                            </label>
                            <button class="delete-field-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="field-row" data-field-name="Last Name">
                        <span class="flex-1 text-gray-700">Last Name</span>
                        <div class="flex items-center gap-4">
                            <label class="required-checkbox">
                                <input type="checkbox" checked class="field-required">
                                Required
                            </label>
                            <button class="delete-field-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="field-row" data-field-name="Email">
                        <span class="flex-1 text-gray-700">Email Address</span>
                        <div class="flex items-center gap-4">
                            <label class="required-checkbox">
                                <input type="checkbox" checked class="field-required">
                                Required
                            </label>
                            <button class="delete-field-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="field-row" data-field-name="Phone Number">
                        <span class="flex-1 text-gray-700">Phone Number</span>
                        <div class="flex items-center gap-4">
                            <label class="required-checkbox">
                                <input type="checkbox" checked class="field-required">
                                Required
                            </label>
                            <button class="delete-field-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="field-row" data-field-name="Address">
                        <span class="flex-1 text-gray-700">Address</span>
                        <div class="flex items-center gap-4">
                            <label class="required-checkbox">
                                <input type="checkbox" checked class="field-required">
                                Required
                            </label>
                            <button class="delete-field-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <button class="add-fields-btn" onclick="openParentFieldsModal()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                        </svg>
                        Additional Fields
                    </button>
                    <div class="section-footer">
                        <button class="section-save-btn" onclick="saveSection('parent')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                                <polyline points="7 3 7 8 15 8"></polyline>
                            </svg>
                            Save Section
                        </button>
                    </div>
                </div>
                </div>

                <!-- PLAYER PAGE Section -->
                <div class="mb-4 section-container" data-section-id="player" data-section-type="default">
                <div class="section-header" onclick="toggleSection(this)">
                    <span>PLAYER PAGE</span>
                    <svg class="chevron-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="section-content" id="player-fields-container">
                    <p class="text-sm text-gray-500 mb-4">Default Fields</p>
                    
                    <div class="field-row" data-field-name="First Name"><span class="flex-1 text-gray-700">First Name</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Last Name"><span class="flex-1 text-gray-700">Last Name</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Email"><span class="flex-1 text-gray-700">Email Address</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Date of Birth"><span class="flex-1 text-gray-700">Date of Birth</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Gender"><span class="flex-1 text-gray-700">Gender</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Phone"><span class="flex-1 text-gray-700">Phone</span><div class="flex items-center gap-4"><span class="text-xs text-gray-400">Optional</span><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Lives With"><span class="flex-1 text-gray-700">Lives With</span><div class="flex items-center gap-4"><span class="text-xs text-gray-400">(Dropdown)</span><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Address"><span class="flex-1 text-gray-700">Address Line 1</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Address 2 (optional)"><span class="flex-1 text-gray-700">Address Line 2</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="City"><span class="flex-1 text-gray-700">City</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="State"><span class="flex-1 text-gray-700">State</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>
                    <div class="field-row" data-field-name="Zip"><span class="flex-1 text-gray-700">Zip Code</span><div class="flex items-center gap-4"><label class="flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded field-required">Required</label><button class="text-gray-400 hover:text-gray-600">⋮</button></div></div>

                    <button class="add-fields-btn" onclick="openAddFieldsModal()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"/></svg>
                        Add Field
                    </button>
                    <div class="section-footer">
                        <button class="section-save-btn" onclick="saveSection('player')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                            Save Section
                        </button>
                    </div>
                </div>
                </div>

                <!-- CUSTOM PAGE Section -->
                <div class="mb-4 section-container" data-section-id="custom" data-section-type="custom" id="custom-pages-container">
                <div class="section-header" onclick="toggleSection(this)">
                    <span>CUSTOM PAGE</span>
                    <svg class="chevron-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="section-content" id="custom-fields-container">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Custom Pages</label>
                        <div id="custom-pages-list" class="mb-3">
                            <p class="text-sm text-gray-500" id="no-custom-pages-msg">No custom pages added yet.</p>
                        </div>
                        <button onclick="openCustomFieldsModal()" class="add-fields-btn">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                            </svg>
                            Add Page
                        </button>
                    </div>
                    <div class="section-footer">
                        <button class="section-save-btn" onclick="saveSection('custom')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                            Save Section
                        </button>
                    </div>
                </div>
                </div>

                <!-- PAYMENT PAGE Section -->
                <div class="mb-6 section-container" data-section-id="payment" data-section-type="default">
                <div class="section-header" onclick="toggleSection(this)">
                    <span>PAYMENT PAGE</span>
                    <svg class="chevron-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="section-content" id="payment-section-content">
                    <!-- Hot Choice -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Hot Choice</label>
                        <p class="text-xs text-gray-500 mb-2">Assign fees for each season</p>
                        <div class="flex flex-wrap gap-2 mb-3"><span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Fall 2023 ($50)</span></div>
                        <div class="flex gap-2">
                            <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">+ Add Hot Choice</button>
                            <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">+ Add Fee Desc</button>
                        </div>
                    </div>
                    <!-- Payment Gateway Fees -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Gateway Fees</label>
                            <p class="text-xs text-gray-500 mb-2">Who's responsible for payment fees?</p>
                            <div class="flex gap-2">
                                <button class="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm">Customer Pays</button>
                                <button class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">League Pays</button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Transaction Options</label>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 text-sm"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded">Allow Check</label>
                                <label class="flex items-center gap-2 text-sm"><input type="checkbox" checked class="w-4 h-4 text-blue-600 rounded">Credit Card</label>
                                <label class="flex items-center gap-2 text-sm"><input type="checkbox" class="w-4 h-4 text-blue-600 rounded">Payment Plans</label>
                            </div>
                        </div>
                    </div>
                    <!-- Convenience Fee -->
                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Convenience Fee</label>
                            <div class="flex gap-2">
                                <input type="number" id="convenience-fee" class="form-input w-24" placeholder="0" value="2.50">
                                <select id="fee-type" class="form-input w-32">
                                    <option>Choose % or Amount</option>
                                    <option selected>$ (Amount)</option>
                                    <option>% (Percentage)</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email Processing</label>
                            <label class="flex items-center gap-2 text-sm mt-2"><input type="checkbox" checked id="auto-billing" class="w-4 h-4 text-blue-600 rounded">Enable Auto Billing</label>
                        </div>
                    </div>
                    <!-- Discount Coupon -->
                    <div class="mt-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Discount Coupon</label>
                        <div class="flex items-center gap-4">
                            <label class="flex items-center gap-2 text-sm"><input type="radio" name="discount" class="w-4 h-4 text-blue-600">Yes</label>
                            <label class="flex items-center gap-2 text-sm"><input type="radio" name="discount" checked class="w-4 h-4 text-blue-600">No</label>
                        </div>
                    </div>
                    <div class="section-footer">
                        <button class="section-save-btn" onclick="saveSection('payment')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                            Save Section
                        </button>
                    </div>
                </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons-container flex flex-wrap gap-4">
                    <button class="action-btn btn-save" onclick="saveAllSections()">Save Registration</button>
                    <button class="action-btn btn-publish">Publish Registration</button>
                    <button class="action-btn btn-preview" onclick="openPreview()">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        Preview
                    </button>
                </div>
            </div> <!-- End page-container -->

        </main>
    </div>

    @include('components.footer')

    <!-- Add Fields Modal for Player Page -->
    <div id="add-fields-modal" class="add-fields-modal-overlay">
        <div class="add-fields-modal" style="position: relative;">
            <button class="add-fields-modal-close" onclick="closeAddFieldsModal()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            
            <div class="add-fields-modal-header">
                <h3>Additional Fields - Player Details</h3>
                <p>Select Additional fields or create a custom field for your Player Details.</p>
            </div>
            
            <div class="add-fields-modal-body">
                <!-- Predefined Fields Grid -->
                <div class="predefined-fields-grid">
                    <!-- Row 1 -->
                    <div class="predefined-field-item" data-field-type="Number">
                        <input type="checkbox" id="field-jersey">
                        <label for="field-jersey">Jersey Number</label>
                        <span class="field-type-badge">Number</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="Number">
                        <input type="checkbox" id="field-height">
                        <label for="field-height">Height</label>
                        <span class="field-type-badge">Number</span>
                        <div class="field-unit-options">
                            <label><input type="radio" name="height-unit" value="cm"> cm</label>
                            <label><input type="radio" name="height-unit" value="ft" checked> ft In</label>
                        </div>
                    </div>
                    
                    <!-- Row 2 -->
                    <div class="predefined-field-item" data-field-type="Text">
                        <input type="checkbox" id="field-emergency">
                        <label for="field-emergency">Emergency Contact Details</label>
                        <span class="field-type-badge">Text</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="Number">
                        <input type="checkbox" id="field-weight">
                        <label for="field-weight">Weight</label>
                        <span class="field-type-badge">Number</span>
                        <div class="field-unit-options">
                            <label><input type="radio" name="weight-unit" value="kg"> kg</label>
                            <label><input type="radio" name="weight-unit" value="lbs" checked> lbs</label>
                        </div>
                    </div>
                    
                    <!-- Row 3 -->
                    <div class="predefined-field-item" data-field-type="Text">
                        <input type="checkbox" id="field-school">
                        <label for="field-school">School</label>
                        <span class="field-type-badge">Text</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="Dropdown">
                        <input type="checkbox" id="field-relationship">
                        <label for="field-relationship">Relationship to Player</label>
                        <span class="field-type-badge">Dropdown</span>
                    </div>
                    
                    <!-- Row 4 -->
                    <div class="predefined-field-item" data-field-type="Dropdown">
                        <input type="checkbox" id="field-division">
                        <label for="field-division">Division</label>
                        <span class="field-type-badge">Dropdown</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="Phone">
                        <input type="checkbox" id="field-phone">
                        <label for="field-phone">Phone</label>
                        <span class="field-type-badge">Phone</span>
                    </div>
                    
                    <!-- Row 5 -->
                    <div class="predefined-field-item" data-field-type="Dropdown">
                        <input type="checkbox" id="field-grade">
                        <label for="field-grade">Grade</label>
                        <span class="field-type-badge">Dropdown</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="File">
                        <input type="checkbox" id="field-photo">
                        <label for="field-photo">Photo Upload</label>
                        <span class="field-type-badge">File</span>
                    </div>
                </div>
                
                <!-- Additional Emergency Contact Option -->
                <div class="predefined-field-item" style="margin-top: 16px;">
                    <input type="checkbox" id="field-additional-emergency">
                    <label for="field-additional-emergency">Allow Additional Emergency Contact Details</label>
                </div>
                
                <!-- Add Selected Button -->
                <button id="add-selected-btn" class="add-selected-btn" onclick="addSelectedFields()" disabled>
                    + Add Selected Field
                </button>
                
                <!-- Custom Field Section -->
                <div class="custom-field-section">
                    <h4>Create Custom Field</h4>
                    
                    <div class="custom-field-group">
                        <label for="custom-field-name">Field Name</label>
                        <input type="text" id="custom-field-name" placeholder="Enter field name">
                    </div>
                    
                    <div class="custom-field-group">
                        <label for="custom-field-type">Field Type</label>
                        <select id="custom-field-type" onchange="toggleDropdownOptions()">
                            <option value="text">Text Input</option>
                            <option value="textarea">Text Area</option>
                            <option value="dropdown">Dropdown</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="radio">Radio Buttons</option>
                            <option value="date">Date</option>
                            <option value="number">Number</option>
                            <option value="file">File Upload</option>
                        </select>
                    </div>
                    
                    <!-- Dropdown Options Container (shown when Dropdown or Radio is selected) -->
                    <div id="dropdown-options-container" class="custom-field-group" style="display: none;">
                        <label>Options</label>
                        <p class="helper-text">Enter the options for this dropdown field</p>
                        <div id="dropdown-options-list">
                            <div class="dropdown-option-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                                <span style="color: #6b7280; font-size: 13px; min-width: 60px;">Option 1</span>
                                <input type="text" class="dropdown-option-input" placeholder="Enter option 1" style="flex: 1;">
                                <button type="button" onclick="removeDropdownOption(this)" style="color: #ef4444; padding: 4px; background: none; border: none; cursor: pointer;" title="Remove">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </button>
                            </div>
                            <div class="dropdown-option-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                                <span style="color: #6b7280; font-size: 13px; min-width: 60px;">Option 2</span>
                                <input type="text" class="dropdown-option-input" placeholder="Enter option 2" style="flex: 1;">
                                <button type="button" onclick="removeDropdownOption(this)" style="color: #ef4444; padding: 4px; background: none; border: none; cursor: pointer;" title="Remove">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <button type="button" onclick="addDropdownOption()" style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f3f4f6; border: 1px dashed #9ca3af; border-radius: 6px; color: #374151; font-size: 13px; cursor: pointer; margin-top: 8px;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
                            </svg>
                            Add Option
                        </button>
                    </div>
                    
                    <div class="custom-field-group">
                        <label>Additional Info.</label>
                        <p class="helper-text">This information will be displayed in an Information Icon</p>
                        <input type="text" id="custom-field-info" placeholder="Enter Additional Info.">
                    </div>
                    
                    <div class="custom-field-options">
                        <label>
                            <input type="checkbox" id="custom-field-required">
                            Mark as required
                        </label>
                        <label>
                            <input type="checkbox" id="custom-field-fee">
                            Add Fee
                        </label>
                        <label>
                            <input type="checkbox" id="custom-field-group">
                            Group by player
                        </label>
                    </div>
                    
                    <button class="add-custom-btn" onclick="addCustomField()">
                        + Add Custom Field
                    </button>
                </div>
            </div>
            
            <div class="add-fields-modal-footer">
                <button class="modal-close-btn" onclick="closeAddFieldsModal()">Close</button>
            </div>
        </div>
    </div>

    <!-- Add Fields Modal for Parent Page -->
    <div id="parent-fields-modal" class="add-fields-modal-overlay">
        <div class="add-fields-modal" style="position: relative;">
            <button class="add-fields-modal-close" onclick="closeParentFieldsModal()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            
            <div class="add-fields-modal-header">
                <h3>Additional Fields - Parent Details</h3>
                <p>Select Additional fields or create a custom field for your Parent Details.</p>
            </div>
            
            <div class="add-fields-modal-body">
                <!-- Predefined Fields for Parent -->
                <div id="parent-predefined-fields-grid" class="predefined-fields-grid" style="grid-template-columns: 1fr 1fr;">
                    <div class="predefined-field-item" data-field-type="Phone">
                        <input type="checkbox" id="parent-field-phone">
                        <label for="parent-field-phone">Additional Phone No.</label>
                        <span class="field-type-badge">Phone</span>
                    </div>
                    <div class="predefined-field-item" data-field-type="Email">
                        <input type="checkbox" id="parent-field-email">
                        <label for="parent-field-email">Additional Email</label>
                        <span class="field-type-badge">Email</span>
                    </div>
                </div>
                
                <!-- Add Selected Button -->
                <button id="parent-add-selected-btn" class="add-selected-btn" onclick="addParentSelectedFields()" disabled>
                    + Add Selected Field
                </button>
                
                <!-- Custom Field Section for Parent -->
                <div class="custom-field-section">
                    <h4>Create Custom Field</h4>
                    
                    <div class="custom-field-group">
                        <label for="parent-custom-field-name">Field Name</label>
                        <input type="text" id="parent-custom-field-name" placeholder="Enter field name">
                    </div>
                    
                    <div class="custom-field-group">
                        <label for="parent-custom-field-type">Field Type</label>
                        <select id="parent-custom-field-type" onchange="toggleParentDropdownOptions()">
                            <option value="text">Text Input</option>
                            <option value="textarea">Text Area</option>
                            <option value="dropdown">Dropdown</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="radio">Radio Buttons</option>
                            <option value="date">Date</option>
                            <option value="number">Number</option>
                            <option value="file">File Upload</option>
                        </select>
                    </div>
                    
                    <!-- Dropdown Options for Parent -->
                    <div id="parent-dropdown-options-container" class="custom-field-group" style="display: none;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <label style="margin-bottom: 0;">Options</label>
                            <button type="button" onclick="addParentDropdownOption()" style="display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: none; border: none; color: #263b7a; font-size: 13px; cursor: pointer; font-weight: 500;">
                                + Add
                            </button>
                        </div>
                        <div id="parent-dropdown-options-list">
                            <input type="text" class="parent-dropdown-option-input" placeholder="Enter Option 1" style="margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;">
                        </div>
                    </div>
                    
                    <div class="custom-field-options" style="margin-top: 12px;">
                        <label>
                            <input type="checkbox" id="parent-custom-field-required">
                            Mark as required
                        </label>
                        <label>
                            <input type="checkbox" id="parent-custom-field-fee">
                            Add Fee
                        </label>
                    </div>
                    
                    <button class="add-custom-btn" onclick="addParentCustomField()">
                        + Add Custom Field
                    </button>
                </div>
            </div>
            
            <div class="add-fields-modal-footer">
                <button class="modal-close-btn" onclick="closeParentFieldsModal()">Close</button>
            </div>
        </div>
    </div>

    <!-- Custom Fields Modal for Custom Page -->
    <div id="custom-fields-modal" class="add-fields-modal-overlay">
        <div class="add-fields-modal" style="position: relative; max-width: 640px;">
            <button class="add-fields-modal-close" onclick="closeCustomFieldsModal()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            
            <div class="add-fields-modal-header">
                <h3>Custom Fields</h3>
                <p>Add Custom Fields for your Custom Page</p>
            </div>
            
            <div class="add-fields-modal-body">
                <!-- Pre-populated Templates -->
                <p class="text-sm font-medium text-gray-600 mb-3">Select from Pre-populated Templates</p>
                <div id="custom-templates-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                    <!-- Volunteer Preference Template -->
                    <label class="template-card" data-template="volunteer" style="border: 2px solid #e5e7eb; border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.2s; display: block;">
                        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <input type="checkbox" id="template-volunteer" class="template-checkbox" onchange="updateTemplateSelection()" style="width: 18px; height: 18px; accent-color: #263b7a;">
                                <h4 style="font-weight: 600; font-size: 14px; color: #1f2937; margin: 0;">Volunteer Preference</h4>
                            </div>
                        </div>
                        <p style="font-size: 12px; color: #6b7280; margin-bottom: 10px; margin-left: 28px;">6 preset fields included</p>
                        <div style="font-size: 12px; color: #6b7280; margin-left: 28px;">
                            <p style="font-weight: 500; margin-bottom: 4px;">Fields Included:</p>
                            <p style="color: #263b7a;">• Available to Volunteer</p>
                            <p style="color: #263b7a;">• Volunteer Role Preference</p>
                            <p style="color: #263b7a;">• Days Available</p>
                            <p style="color: #9ca3af;">+ 3 more...</p>
                        </div>
                    </label>
                    
                    <!-- Coach Preference Template -->
                    <label class="template-card" data-template="coach" style="border: 2px solid #e5e7eb; border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.2s; display: block;">
                        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <input type="checkbox" id="template-coach" class="template-checkbox" onchange="updateTemplateSelection()" style="width: 18px; height: 18px; accent-color: #263b7a;">
                                <h4 style="font-weight: 600; font-size: 14px; color: #1f2937; margin: 0;">Coach Preference</h4>
                            </div>
                        </div>
                        <p style="font-size: 12px; color: #6b7280; margin-bottom: 10px; margin-left: 28px;">6 preset fields included</p>
                        <div style="font-size: 12px; color: #6b7280; margin-left: 28px;">
                            <p style="font-weight: 500; margin-bottom: 4px;">Fields Included:</p>
                            <p style="color: #263b7a;">• Interested in Coaching</p>
                            <p style="color: #263b7a;">• Coaching Experience Level</p>
                            <p style="color: #263b7a;">• Preferred Age Group</p>
                            <p style="color: #9ca3af;">+ 3 more...</p>
                        </div>
                    </label>
                </div>
                
                <!-- Add Selected Template Button -->
                <button id="add-template-btn" class="add-selected-btn" onclick="addSelectedTemplate()" disabled>
                    + Add Selected Template
                </button>
                
                <!-- Create New Custom Page Section -->
                <div class="custom-field-section">
                    <h4>Create New Custom Page</h4>
                    
                    <div class="custom-field-group">
                        <label for="custom-page-name">Page Name</label>
                        <input type="text" id="custom-page-name" placeholder="Enter Page Name">
                    </div>
                    
                    <div class="custom-field-group">
                        <label for="custom-page-field-name">Field Name</label>
                        <input type="text" id="custom-page-field-name" placeholder="Enter field name">
                    </div>
                    
                    <div class="custom-field-group">
                        <label for="custom-page-field-type">Field Type</label>
                        <select id="custom-page-field-type" onchange="toggleCustomPageDropdownOptions()">
                            <option value="text">Text Input</option>
                            <option value="textarea">Text Area</option>
                            <option value="dropdown">Dropdown</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="radio">Radio Buttons</option>
                            <option value="date">Date</option>
                            <option value="number">Number</option>
                            <option value="file">File Upload</option>
                        </select>
                    </div>
                    
                    <!-- Dropdown Options for Custom Page -->
                    <div id="custom-page-dropdown-options-container" class="custom-field-group" style="display: none;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <label style="margin-bottom: 0;">Options</label>
                            <button type="button" onclick="addCustomPageDropdownOption()" style="display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: none; border: none; color: #263b7a; font-size: 13px; cursor: pointer; font-weight: 500;">
                                + Add
                            </button>
                        </div>
                        <div id="custom-page-dropdown-options-list">
                            <input type="text" class="custom-page-dropdown-option-input" placeholder="Enter Option 1" style="margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;">
                        </div>
                    </div>
                    
                    <div class="custom-field-group">
                        <label>Additional Info.</label>
                        <p class="helper-text">This information will be displayed in an Information Icon</p>
                        <input type="text" id="custom-page-field-info" placeholder="Enter Additional Info.">
                    </div>
                    
                    <div class="custom-field-options" style="margin-top: 12px;">
                        <label>
                            <input type="checkbox" id="custom-page-field-required">
                            Mark as required
                        </label>
                        <label>
                            <input type="checkbox" id="custom-page-field-fee">
                            Add Fee
                        </label>
                    </div>
                    
                    <button class="add-custom-btn" onclick="addCustomPageField()">
                        + Add Custom Field
                    </button>
                </div>
            </div>
            
            <div class="add-fields-modal-footer">
                <button class="modal-close-btn" onclick="closeCustomFieldsModal()">Close</button>
            </div>
        </div>
    </div>

    <script>
        // Toggle section expand/collapse
        function toggleSection(header) {
            const content = header.nextElementSibling;
            const chevron = header.querySelector('.chevron-icon');
            content.classList.toggle('collapsed');
            chevron.classList.toggle('rotated');
        }

        // Add Fields Modal Functions
        function openAddFieldsModal() {
            const modal = document.getElementById('add-fields-modal');
            const container = document.getElementById('player-fields-container');
            
            // Get all existing field names from the player container
            const existingFields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                existingFields.push(row.getAttribute('data-field-name'));
            });
            
            // Check/uncheck predefined field checkboxes based on existing fields
            const predefinedItems = modal.querySelectorAll('.predefined-field-item');
            predefinedItems.forEach(item => {
                const checkbox = item.querySelector('input[type="checkbox"]');
                const label = item.querySelector('label');
                if (checkbox && label) {
                    const fieldName = label.textContent.trim();
                    // Check the checkbox if field already exists in the list
                    checkbox.checked = existingFields.includes(fieldName);
                }
            });
            
            // Update button state
            updateAddSelectedButtonState();
            
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeAddFieldsModal() {
            document.getElementById('add-fields-modal').classList.remove('active');
            document.body.style.overflow = '';
        }

        // Update Add Selected Button state based on checkboxes
        function updateAddSelectedButtonState() {
            const modal = document.getElementById('add-fields-modal');
            const container = document.getElementById('player-fields-container');
            const addBtn = document.getElementById('add-selected-btn');
            
            // Get existing field names
            const existingFields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                existingFields.push(row.getAttribute('data-field-name'));
            });
            
            // Check if any checkbox is checked AND the field doesn't already exist
            let hasNewSelection = false;
            const checkboxes = modal.querySelectorAll('.predefined-field-item input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    const item = checkbox.closest('.predefined-field-item');
                    const label = item.querySelector('label');
                    const fieldName = label ? label.textContent.trim() : '';
                    if (!existingFields.includes(fieldName)) {
                        hasNewSelection = true;
                    }
                }
            });
            
            // Enable or disable the button
            addBtn.disabled = !hasNewSelection;
        }

        // Setup checkbox listeners when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Add change event listeners to all checkboxes in the modal
            const modal = document.getElementById('add-fields-modal');
            
            // Use event delegation for checkboxes (including dynamically added ones)
            modal.addEventListener('change', function(e) {
                if (e.target.type === 'checkbox') {
                    updateAddSelectedButtonState();
                }
            });
            
            // Close modal when clicking outside
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeAddFieldsModal();
                }
            });
        });

        // Add Selected Fields from Modal
        function addSelectedFields() {
            const container = document.getElementById('player-fields-container');
            const fieldsToAdd = [];
            
            // Get all checkboxes in predefined fields
            const predefinedItems = document.querySelectorAll('.predefined-field-item input[type="checkbox"]');
            
            predefinedItems.forEach(checkbox => {
                if (checkbox.checked) {
                    const item = checkbox.closest('.predefined-field-item');
                    const label = item.querySelector('label');
                    const fieldName = label ? label.textContent.trim() : '';
                    const fieldType = item.getAttribute('data-field-type') || 'Text';
                    
                    // Check if field already exists in the container
                    const exists = container.querySelector(`[data-field-name="${fieldName}"]`);
                    if (!exists && fieldName) {
                        fieldsToAdd.push({ name: fieldName, type: fieldType });
                    }
                }
            });
            
            // Add new fields to the container
            fieldsToAdd.forEach(field => {
                const fieldRow = document.createElement('div');
                fieldRow.className = 'field-row';
                fieldRow.setAttribute('data-field-name', field.name);
                fieldRow.setAttribute('data-field-type', field.type);
                fieldRow.innerHTML = `
                    <span class="flex-1 text-gray-700">${field.name}</span>
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">${field.type}</span>
                        <label class="required-checkbox">
                            <input type="checkbox" class="field-required">
                            Required
                        </label>
                        <button class="delete-field-btn" onclick="removeField(this)">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="3 6 5 6 21 6"></polyline>
                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                            </svg>
                        </button>
                    </div>
                `;
                
                // Insert before the Add Field button
                const addFieldBtn = container.querySelector('.add-fields-btn');
                container.insertBefore(fieldRow, addFieldBtn);
            });
            
            if (fieldsToAdd.length > 0) {
                // Uncheck all checkboxes after adding
                predefinedItems.forEach(checkbox => checkbox.checked = false);
                alert(`Added ${fieldsToAdd.length} field(s) successfully!`);
            } else {
                alert('No new fields to add. Fields may already exist or none selected.');
            }
            
            closeAddFieldsModal();
        }

        // Add Custom Field
        function addCustomField() {
            const fieldName = document.getElementById('custom-field-name').value.trim();
            const fieldType = document.getElementById('custom-field-type').value;
            const additionalInfo = document.getElementById('custom-field-info').value.trim();
            
            if (!fieldName) {
                alert('Please enter a field name');
                return;
            }
            
            // Map field type values to display names
            const typeDisplayNames = {
                'text': 'Text',
                'textarea': 'TextArea',
                'dropdown': 'Dropdown',
                'checkbox': 'Checkbox',
                'radio': 'Radio',
                'date': 'Date',
                'number': 'Number',
                'file': 'File'
            };
            const displayType = typeDisplayNames[fieldType] || fieldType;
            
            // Check if this field already exists in the predefined list
            const predefinedGrid = document.querySelector('.predefined-fields-grid');
            const existingItem = Array.from(predefinedGrid.querySelectorAll('.predefined-field-item label')).find(
                label => label.textContent.trim().toLowerCase() === fieldName.toLowerCase()
            );
            
            if (existingItem) {
                alert('A field with this name already exists in the list');
                return;
            }
            
            // Create unique ID for the checkbox
            const fieldId = 'field-custom-' + Date.now();
            
            // Create new predefined field item
            const newFieldItem = document.createElement('div');
            newFieldItem.className = 'predefined-field-item';
            newFieldItem.setAttribute('data-field-type', displayType);
            newFieldItem.style.cssText = 'border: 2px solid #263b7a; border-radius: 6px; padding: 8px; background: #f0f4ff;';
            newFieldItem.innerHTML = `
                <input type="checkbox" id="${fieldId}" checked>
                <label for="${fieldId}">${fieldName}</label>
                <span class="field-type-badge">${displayType}</span>
                <button type="button" onclick="removeCustomFieldFromList(this)" style="margin-left: auto; color: #ef4444; padding: 2px;" title="Remove from list">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            `;
            
            // Add to the predefined fields grid
            predefinedGrid.appendChild(newFieldItem);
            
            // Clear the form
            document.getElementById('custom-field-name').value = '';
            document.getElementById('custom-field-info').value = '';
            document.getElementById('custom-field-required').checked = false;
            document.getElementById('custom-field-fee').checked = false;
            document.getElementById('custom-field-group').checked = false;
            document.getElementById('custom-field-type').value = 'text';
            
            // Reset dropdown options and hide container
            resetDropdownOptions();
            document.getElementById('dropdown-options-container').style.display = 'none';
            
            // Update button state
            updateAddSelectedButtonState();
            
            // Scroll to show the newly added field
            newFieldItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            alert(`Custom field "${fieldName}" added to the list! Check it and click "+ Add Selected Field" to add to the form.`);
        }
        
        // Remove custom field from the predefined list
        function removeCustomFieldFromList(button) {
            const fieldItem = button.closest('.predefined-field-item');
            if (fieldItem) {
                fieldItem.remove();
            }
        }

        // Remove Field
        function removeField(button) {
            const fieldRow = button.closest('.field-row');
            if (fieldRow) {
                fieldRow.remove();
            }
        }

        // ============ PARENT MODAL FUNCTIONS ============
        
        // Open Parent Fields Modal
        function openParentFieldsModal() {
            const modal = document.getElementById('parent-fields-modal');
            const container = document.getElementById('parent-fields-container');
            
            // Get all existing field names from the parent container
            const existingFields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                existingFields.push(row.getAttribute('data-field-name'));
            });
            
            // Check/uncheck predefined field checkboxes based on existing fields
            const predefinedItems = modal.querySelectorAll('.predefined-field-item');
            predefinedItems.forEach(item => {
                const checkbox = item.querySelector('input[type="checkbox"]');
                const label = item.querySelector('label');
                if (checkbox && label) {
                    const fieldName = label.textContent.trim();
                    checkbox.checked = existingFields.includes(fieldName);
                }
            });
            
            // Update button state
            updateParentAddSelectedButtonState();
            
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        // Close Parent Fields Modal
        function closeParentFieldsModal() {
            document.getElementById('parent-fields-modal').classList.remove('active');
            document.body.style.overflow = '';
        }

        // Update Parent Add Selected Button state
        function updateParentAddSelectedButtonState() {
            const modal = document.getElementById('parent-fields-modal');
            const container = document.getElementById('parent-fields-container');
            const addBtn = document.getElementById('parent-add-selected-btn');
            
            const existingFields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                existingFields.push(row.getAttribute('data-field-name'));
            });
            
            let hasNewSelection = false;
            const checkboxes = modal.querySelectorAll('.predefined-field-item input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    const item = checkbox.closest('.predefined-field-item');
                    const label = item.querySelector('label');
                    const fieldName = label ? label.textContent.trim() : '';
                    if (!existingFields.includes(fieldName)) {
                        hasNewSelection = true;
                    }
                }
            });
            
            addBtn.disabled = !hasNewSelection;
        }

        // Add Selected Fields to Parent
        function addParentSelectedFields() {
            const container = document.getElementById('parent-fields-container');
            const modal = document.getElementById('parent-fields-modal');
            const fieldsToAdd = [];
            
            const existingFields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                existingFields.push(row.getAttribute('data-field-name'));
            });
            
            const predefinedItems = modal.querySelectorAll('.predefined-field-item input[type="checkbox"]');
            predefinedItems.forEach(checkbox => {
                if (checkbox.checked) {
                    const item = checkbox.closest('.predefined-field-item');
                    const label = item.querySelector('label');
                    const fieldName = label ? label.textContent.trim() : '';
                    const fieldType = item.getAttribute('data-field-type') || 'Text';
                    
                    if (!existingFields.includes(fieldName) && fieldName) {
                        fieldsToAdd.push({ name: fieldName, type: fieldType });
                    }
                }
            });
            
            fieldsToAdd.forEach(field => {
                const fieldRow = document.createElement('div');
                fieldRow.className = 'field-row';
                fieldRow.setAttribute('data-field-name', field.name);
                fieldRow.setAttribute('data-field-type', field.type);
                fieldRow.innerHTML = `
                    <span class="flex-1 text-gray-700">${field.name}</span>
                    <div class="flex items-center gap-4">
                        <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">${field.type}</span>
                        <label class="required-checkbox">
                            <input type="checkbox" class="field-required">
                            Required
                        </label>
                        <button class="delete-field-btn" onclick="removeField(this)">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="3 6 5 6 21 6"></polyline>
                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                            </svg>
                        </button>
                    </div>
                `;
                
                const addFieldBtn = container.querySelector('.add-fields-btn');
                container.insertBefore(fieldRow, addFieldBtn);
            });
            
            if (fieldsToAdd.length > 0) {
                predefinedItems.forEach(checkbox => checkbox.checked = false);
                alert(`Added ${fieldsToAdd.length} field(s) successfully!`);
            } else {
                alert('No new fields to add.');
            }
            
            closeParentFieldsModal();
        }

        // Add Custom Field to Parent predefined list
        function addParentCustomField() {
            const fieldName = document.getElementById('parent-custom-field-name').value.trim();
            const fieldType = document.getElementById('parent-custom-field-type').value;
            
            if (!fieldName) {
                alert('Please enter a field name');
                return;
            }
            
            const typeDisplayNames = {
                'text': 'Text', 'textarea': 'TextArea', 'dropdown': 'Dropdown',
                'checkbox': 'Checkbox', 'radio': 'Radio', 'date': 'Date',
                'number': 'Number', 'file': 'File'
            };
            const displayType = typeDisplayNames[fieldType] || fieldType;
            
            const predefinedGrid = document.getElementById('parent-predefined-fields-grid');
            const existingItem = Array.from(predefinedGrid.querySelectorAll('.predefined-field-item label')).find(
                label => label.textContent.trim().toLowerCase() === fieldName.toLowerCase()
            );
            
            if (existingItem) {
                alert('A field with this name already exists');
                return;
            }
            
            const fieldId = 'parent-field-custom-' + Date.now();
            const newFieldItem = document.createElement('div');
            newFieldItem.className = 'predefined-field-item';
            newFieldItem.setAttribute('data-field-type', displayType);
            newFieldItem.style.cssText = 'border: 2px solid #263b7a; border-radius: 6px; padding: 8px; background: #f0f4ff;';
            newFieldItem.innerHTML = `
                <input type="checkbox" id="${fieldId}" checked>
                <label for="${fieldId}">${fieldName}</label>
                <span class="field-type-badge">${displayType}</span>
                <button type="button" onclick="this.closest('.predefined-field-item').remove(); updateParentAddSelectedButtonState();" style="margin-left: auto; color: #ef4444; padding: 2px; background: none; border: none; cursor: pointer;" title="Remove">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            `;
            
            predefinedGrid.appendChild(newFieldItem);
            
            // Clear form
            document.getElementById('parent-custom-field-name').value = '';
            document.getElementById('parent-custom-field-type').value = 'text';
            document.getElementById('parent-custom-field-required').checked = false;
            document.getElementById('parent-custom-field-fee').checked = false;
            resetParentDropdownOptions();
            document.getElementById('parent-dropdown-options-container').style.display = 'none';
            
            updateParentAddSelectedButtonState();
            newFieldItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            alert(`Custom field "${fieldName}" added to the list!`);
        }

        // Toggle Parent dropdown options
        function toggleParentDropdownOptions() {
            const fieldType = document.getElementById('parent-custom-field-type').value;
            const optionsContainer = document.getElementById('parent-dropdown-options-container');
            
            if (fieldType === 'dropdown' || fieldType === 'radio') {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
            }
        }

        // Add Parent dropdown option
        function addParentDropdownOption() {
            const optionsList = document.getElementById('parent-dropdown-options-list');
            const optionCount = optionsList.querySelectorAll('.parent-dropdown-option-input').length + 1;
            
            const newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.className = 'parent-dropdown-option-input';
            newInput.placeholder = `Enter Option ${optionCount}`;
            newInput.style.cssText = 'margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;';
            
            optionsList.appendChild(newInput);
        }

        // Reset Parent dropdown options
        function resetParentDropdownOptions() {
            const optionsList = document.getElementById('parent-dropdown-options-list');
            optionsList.innerHTML = `
                <input type="text" class="parent-dropdown-option-input" placeholder="Enter Option 1" style="margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;">
            `;
        }

        // Setup Parent modal event listeners
        document.addEventListener('DOMContentLoaded', function() {
            const parentModal = document.getElementById('parent-fields-modal');
            if (parentModal) {
                parentModal.addEventListener('change', function(e) {
                    if (e.target.type === 'checkbox') {
                        updateParentAddSelectedButtonState();
                    }
                });
                parentModal.addEventListener('click', function(e) {
                    if (e.target === parentModal) {
                        closeParentFieldsModal();
                    }
                });
            }
        });

        // ============ CUSTOM FIELDS MODAL FUNCTIONS ============
        
        // Open Custom Fields Modal
        function openCustomFieldsModal() {
            const modal = document.getElementById('custom-fields-modal');
            
            // Reset template checkboxes
            document.querySelectorAll('.template-checkbox').forEach(cb => {
                cb.checked = false;
            });
            
            // Reset template card styling
            document.querySelectorAll('.template-card').forEach(card => {
                card.style.borderColor = '#e5e7eb';
                card.style.background = 'white';
            });
            
            // Disable add template button
            document.getElementById('add-template-btn').disabled = true;
            
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        // Close Custom Fields Modal
        function closeCustomFieldsModal() {
            document.getElementById('custom-fields-modal').classList.remove('active');
            document.body.style.overflow = '';
        }

        // Update Template Selection based on checkboxes
        function updateTemplateSelection() {
            const checkboxes = document.querySelectorAll('.template-checkbox');
            let anyChecked = false;
            
            checkboxes.forEach(cb => {
                const card = cb.closest('.template-card');
                if (cb.checked) {
                    card.style.borderColor = '#263b7a';
                    card.style.background = '#f0f4ff';
                    anyChecked = true;
                } else {
                    card.style.borderColor = '#e5e7eb';
                    card.style.background = 'white';
                }
            });
            
            // Enable/disable button based on selection
            document.getElementById('add-template-btn').disabled = !anyChecked;
        }

        // Add Selected Templates (multiple can be selected)
        function addSelectedTemplate() {
            const container = document.getElementById('custom-pages-list');
            const noMsg = document.getElementById('no-custom-pages-msg');
            
            const templateData = {
                volunteer: {
                    name: 'Volunteer Preference',
                    fields: ['Available to Volunteer', 'Volunteer Role Preference', 'Days Available', 'Time Preference', 'Skills/Experience', 'Comments']
                },
                coach: {
                    name: 'Coach Preference',
                    fields: ['Interested in Coaching', 'Coaching Experience Level', 'Preferred Age Group', 'Certifications', 'Availability', 'Additional Notes']
                }
            };
            
            let addedCount = 0;
            
            // Check which templates are selected
            if (document.getElementById('template-volunteer').checked) {
                if (noMsg) noMsg.style.display = 'none';
                addTemplateToList(container, templateData.volunteer);
                addedCount++;
            }
            
            if (document.getElementById('template-coach').checked) {
                if (noMsg) noMsg.style.display = 'none';
                addTemplateToList(container, templateData.coach);
                addedCount++;
            }
            
            if (addedCount > 0) {
                alert(`${addedCount} template(s) added successfully!`);
                closeCustomFieldsModal();
            } else {
                alert('Please select at least one template');
            }
        }
        
        // Helper function to add template to list
        function addTemplateToList(container, template) {
            const pageDiv = document.createElement('div');
            pageDiv.className = 'custom-page-item';
            pageDiv.style.cssText = 'background: #f3f4f6; border-radius: 8px; padding: 16px; margin-bottom: 12px;';
            pageDiv.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <h4 style="font-weight: 600; font-size: 14px; color: #1f2937;">${template.name}</h4>
                    <button onclick="this.closest('.custom-page-item').remove(); checkCustomPagesEmpty();" style="color: #ef4444; background: none; border: none; cursor: pointer; padding: 4px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        </svg>
                    </button>
                </div>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    ${template.fields.map(field => `<span style="background: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; color: #374151;">${field}</span>`).join('')}
                </div>
            `;
            container.appendChild(pageDiv);
        }

        // Add Custom Page Field
        function addCustomPageField() {
            const pageName = document.getElementById('custom-page-name').value.trim();
            const fieldName = document.getElementById('custom-page-field-name').value.trim();
            const fieldType = document.getElementById('custom-page-field-type').value;
            const isRequired = document.getElementById('custom-page-field-required').checked;
            
            if (!pageName) {
                alert('Please enter a page name');
                return;
            }
            
            if (!fieldName) {
                alert('Please enter a field name');
                return;
            }
            
            const typeDisplayNames = {
                'text': 'Text', 'textarea': 'TextArea', 'dropdown': 'Dropdown',
                'checkbox': 'Checkbox', 'radio': 'Radio', 'date': 'Date',
                'number': 'Number', 'file': 'File'
            };
            const displayType = typeDisplayNames[fieldType] || fieldType;
            
            const container = document.getElementById('custom-pages-list');
            const noMsg = document.getElementById('no-custom-pages-msg');
            if (noMsg) noMsg.style.display = 'none';
            
            // Create custom page element
            const pageDiv = document.createElement('div');
            pageDiv.className = 'custom-page-item';
            pageDiv.style.cssText = 'background: #f3f4f6; border-radius: 8px; padding: 16px; margin-bottom: 12px;';
            pageDiv.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <h4 style="font-weight: 600; font-size: 14px; color: #1f2937;">${pageName}</h4>
                    <button onclick="this.closest('.custom-page-item').remove(); checkCustomPagesEmpty();" style="color: #ef4444; background: none; border: none; cursor: pointer; padding: 4px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        </svg>
                    </button>
                </div>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    <span style="background: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; color: #374151;">${fieldName} <span style="color: #9ca3af;">(${displayType})</span>${isRequired ? ' <span style="color: #ef4444;">*</span>' : ''}</span>
                </div>
            `;
            
            container.appendChild(pageDiv);
            
            // Clear form
            document.getElementById('custom-page-name').value = '';
            document.getElementById('custom-page-field-name').value = '';
            document.getElementById('custom-page-field-type').value = 'text';
            document.getElementById('custom-page-field-info').value = '';
            document.getElementById('custom-page-field-required').checked = false;
            document.getElementById('custom-page-field-fee').checked = false;
            resetCustomPageDropdownOptions();
            document.getElementById('custom-page-dropdown-options-container').style.display = 'none';
            
            alert(`Custom page "${pageName}" with field "${fieldName}" added successfully!`);
            closeCustomFieldsModal();
        }

        // Check if custom pages list is empty
        function checkCustomPagesEmpty() {
            const container = document.getElementById('custom-pages-list');
            const pages = container.querySelectorAll('.custom-page-item');
            const noMsg = document.getElementById('no-custom-pages-msg');
            if (pages.length === 0 && noMsg) {
                noMsg.style.display = 'block';
            }
        }

        // Toggle Custom Page dropdown options
        function toggleCustomPageDropdownOptions() {
            const fieldType = document.getElementById('custom-page-field-type').value;
            const optionsContainer = document.getElementById('custom-page-dropdown-options-container');
            
            if (fieldType === 'dropdown' || fieldType === 'radio') {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
            }
        }

        // Add Custom Page dropdown option
        function addCustomPageDropdownOption() {
            const optionsList = document.getElementById('custom-page-dropdown-options-list');
            const optionCount = optionsList.querySelectorAll('.custom-page-dropdown-option-input').length + 1;
            
            const newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.className = 'custom-page-dropdown-option-input';
            newInput.placeholder = `Enter Option ${optionCount}`;
            newInput.style.cssText = 'margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;';
            
            optionsList.appendChild(newInput);
        }

        // Reset Custom Page dropdown options
        function resetCustomPageDropdownOptions() {
            const optionsList = document.getElementById('custom-page-dropdown-options-list');
            optionsList.innerHTML = `
                <input type="text" class="custom-page-dropdown-option-input" placeholder="Enter Option 1" style="margin-bottom: 8px; width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;">
            `;
        }

        // Setup Custom Fields modal event listeners
        document.addEventListener('DOMContentLoaded', function() {
            const customModal = document.getElementById('custom-fields-modal');
            if (customModal) {
                customModal.addEventListener('click', function(e) {
                    if (e.target === customModal) {
                        closeCustomFieldsModal();
                    }
                });
            }
        });

        // Toggle dropdown options visibility based on field type selection
        function toggleDropdownOptions() {
            const fieldType = document.getElementById('custom-field-type').value;
            const optionsContainer = document.getElementById('dropdown-options-container');
            
            if (fieldType === 'dropdown' || fieldType === 'radio') {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
            }
        }

        // Add a new dropdown option input
        function addDropdownOption() {
            const optionsList = document.getElementById('dropdown-options-list');
            const optionCount = optionsList.querySelectorAll('.dropdown-option-row').length + 1;
            
            const newOptionRow = document.createElement('div');
            newOptionRow.className = 'dropdown-option-row';
            newOptionRow.style.cssText = 'display: flex; gap: 8px; margin-bottom: 8px; align-items: center;';
            newOptionRow.innerHTML = `
                <span style="color: #6b7280; font-size: 13px; min-width: 60px;">Option ${optionCount}</span>
                <input type="text" class="dropdown-option-input" placeholder="Enter option ${optionCount}" style="flex: 1;">
                <button type="button" onclick="removeDropdownOption(this)" style="color: #ef4444; padding: 4px; background: none; border: none; cursor: pointer;" title="Remove">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            `;
            
            optionsList.appendChild(newOptionRow);
        }

        // Remove a dropdown option
        function removeDropdownOption(button) {
            const optionsList = document.getElementById('dropdown-options-list');
            const optionRows = optionsList.querySelectorAll('.dropdown-option-row');
            
            // Don't allow removing if only 2 options left
            if (optionRows.length <= 2) {
                alert('A dropdown must have at least 2 options');
                return;
            }
            
            const row = button.closest('.dropdown-option-row');
            if (row) {
                row.remove();
                // Renumber the remaining options
                renumberDropdownOptions();
            }
        }

        // Renumber dropdown options after removal
        function renumberDropdownOptions() {
            const optionsList = document.getElementById('dropdown-options-list');
            const optionRows = optionsList.querySelectorAll('.dropdown-option-row');
            
            optionRows.forEach((row, index) => {
                const label = row.querySelector('span');
                const input = row.querySelector('input');
                if (label) label.textContent = `Option ${index + 1}`;
                if (input) input.placeholder = `Enter option ${index + 1}`;
            });
        }

        // Reset dropdown options to default (2 options)
        function resetDropdownOptions() {
            const optionsList = document.getElementById('dropdown-options-list');
            optionsList.innerHTML = `
                <div class="dropdown-option-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <span style="color: #6b7280; font-size: 13px; min-width: 60px;">Option 1</span>
                    <input type="text" class="dropdown-option-input" placeholder="Enter option 1" style="flex: 1;">
                    <button type="button" onclick="removeDropdownOption(this)" style="color: #ef4444; padding: 4px; background: none; border: none; cursor: pointer;" title="Remove">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <div class="dropdown-option-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
                    <span style="color: #6b7280; font-size: 13px; min-width: 60px;">Option 2</span>
                    <input type="text" class="dropdown-option-input" placeholder="Enter option 2" style="flex: 1;">
                    <button type="button" onclick="removeDropdownOption(this)" style="color: #ef4444; padding: 4px; background: none; border: none; cursor: pointer;" title="Remove">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
            `;
        }

        // Expand all sections
        function expandAll() {
            document.querySelectorAll('.section-content').forEach(content => {
                content.classList.remove('collapsed');
            });
            document.querySelectorAll('.chevron-icon').forEach(chevron => {
                chevron.classList.remove('rotated');
            });
        }

        // Collapse all sections
        function collapseAll() {
            document.querySelectorAll('.section-content').forEach(content => {
                content.classList.add('collapsed');
            });
            document.querySelectorAll('.chevron-icon').forEach(chevron => {
                chevron.classList.add('rotated');
            });
        }

        // Select color
        function selectColor(element) {
            document.querySelectorAll('.color-circle').forEach(circle => {
                circle.classList.remove('selected');
            });
            element.classList.add('selected');
        }

        // Select league type
        function selectLeagueType(element) {
            document.querySelectorAll('.league-type-btn').forEach(btn => {
                btn.classList.remove('selected');
                btn.querySelector('svg').setAttribute('fill', '#6b7280');
            });
            element.classList.add('selected');
            element.querySelector('svg').setAttribute('fill', '#16467B');
        }

        // Toggle season selection
        function toggleSeason(element) {
            element.classList.toggle('selected');
            if (element.classList.contains('selected')) {
                if (!element.querySelector('svg')) {
                    const checkIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                    checkIcon.setAttribute('class', 'w-4 h-4 mr-2');
                    checkIcon.setAttribute('fill', 'currentColor');
                    checkIcon.setAttribute('viewBox', '0 0 20 20');
                    checkIcon.innerHTML = '<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>';
                    element.insertBefore(checkIcon, element.firstChild);
                }
            } else {
                const svg = element.querySelector('svg');
                if (svg) svg.remove();
            }
        }

        // Custom Pages Array
        let customPages = JSON.parse(localStorage.getItem('formBuilder_custom') || '{"pages":[]}').pages || [];

        // Add Custom Page
        function addCustomPage() {
            const input = document.getElementById('custom-page-name-input');
            const pageName = input.value.trim();
            if (!pageName) return;
            
            customPages.push({ name: pageName, fields: [] });
            input.value = '';
            renderCustomPages();
        }

        // Render Custom Pages
        function renderCustomPages() {
            const list = document.getElementById('custom-pages-list');
            const noMsg = document.getElementById('no-custom-pages-msg');
            
            if (customPages.length === 0) {
                noMsg.style.display = 'block';
                return;
            }
            
            noMsg.style.display = 'none';
            list.innerHTML = customPages.map((page, idx) => `
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2" data-custom-page-idx="${idx}">
                    <span class="font-medium text-gray-700">${page.name}</span>
                    <button onclick="removeCustomPage(${idx})" class="text-red-500 hover:text-red-700 text-sm">Remove</button>
                </div>
            `).join('');
        }

        // Remove Custom Page
        function removeCustomPage(idx) {
            customPages.splice(idx, 1);
            renderCustomPages();
        }

        // Save Section to LocalStorage
        function saveSection(sectionId) {
            const btn = event.target.closest('.section-save-btn');
            let data = {};
            
            switch(sectionId) {
                case 'welcome':
                    data = {
                        title: document.getElementById('welcome-title')?.value || '',
                        description: document.getElementById('welcome-description')?.value || ''
                    };
                    break;
                case 'parent':
                    data = { fields: getFieldsFromSection('parent-fields-container') };
                    break;
                case 'player':
                    data = { fields: getFieldsFromSection('player-fields-container') };
                    break;
                case 'custom':
                    data = { pages: customPages };
                    break;
                case 'payment':
                    data = {
                        convenienceFee: document.getElementById('convenience-fee')?.value || '',
                        feeType: document.getElementById('fee-type')?.value || '',
                        autoBilling: document.getElementById('auto-billing')?.checked || false
                    };
                    break;
            }
            
            localStorage.setItem(`formBuilder_${sectionId}`, JSON.stringify(data));
            
            // Visual feedback
            btn.classList.add('saved');
            btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Saved!`;
            setTimeout(() => {
                btn.classList.remove('saved');
                btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg> Save Section`;
            }, 2000);
        }

        // Get fields from section
        function getFieldsFromSection(containerId) {
            const container = document.getElementById(containerId);
            if (!container) return [];
            const fields = [];
            container.querySelectorAll('.field-row[data-field-name]').forEach(row => {
                const checkbox = row.querySelector('.field-required');
                fields.push({
                    name: row.dataset.fieldName,
                    required: checkbox ? checkbox.checked : false
                });
            });
            return fields;
        }

        // Save all sections
        function saveAllSections() {
            ['welcome', 'parent', 'player', 'custom', 'payment'].forEach(section => {
                const container = document.querySelector(`[data-section-id="${section}"]`);
                if (container) {
                    const btn = container.querySelector('.section-save-btn');
                    if (btn) btn.click();
                }
            });
        }

        // Open Preview Modal
        function openPreview() {
            const modal = document.getElementById('preview-modal');
            modal.classList.add('active');
            renderPreview();
        }

        // Close Preview Modal
        function closePreview() {
            document.getElementById('preview-modal').classList.remove('active');
        }

        // Render Preview
        function renderPreview() {
            const welcomeData = JSON.parse(localStorage.getItem('formBuilder_welcome') || '{}');
            const parentData = JSON.parse(localStorage.getItem('formBuilder_parent') || '{}');
            const playerData = JSON.parse(localStorage.getItem('formBuilder_player') || '{}');
            const customData = JSON.parse(localStorage.getItem('formBuilder_custom') || '{}');
            
            // Update hero section
            const title = welcomeData.title || document.getElementById('welcome-title')?.value || 'Welcome to Sports League Registration';
            const subtitle = welcomeData.description || document.getElementById('welcome-description')?.value || 'Please complete all sections to register your player';
            
            document.getElementById('preview-hero-title').textContent = title;
            document.getElementById('preview-hero-subtitle').textContent = subtitle;
            
            // Render Parent Fields
            renderPreviewSection('preview-parent-content', parentData.fields || getDefaultParentFields(), 'Player Information');
            
            // Render Player Fields
            renderPreviewSection('preview-player-content', playerData.fields || getDefaultPlayerFields(), 'Player Information');
            
            // Render Custom Pages
            renderCustomPagesPreview(customData.pages || []);
        }

        function getDefaultParentFields() {
            return [
                {name: 'First Name', required: true, row: 1, col: 2},
                {name: 'Last Name', required: true, row: 1, col: 2},
                {name: 'Email', required: true, row: 2, col: 2},
                {name: 'Phone Number', required: true, row: 2, col: 2},
                {name: 'Address', required: false, row: 3, col: 1},
                {name: 'Address 2', required: false, row: 4, col: 1},
                {name: 'City', required: false, row: 5, col: 3},
                {name: 'State', required: false, row: 5, col: 3},
                {name: 'Zip', required: false, row: 5, col: 3}
            ];
        }

        function getDefaultPlayerFields() {
            return [
                {name: 'First Name', required: true, row: 1, col: 2},
                {name: 'Last Name', required: true, row: 1, col: 2},
                {name: 'Email', required: false, row: 2, col: 2},
                {name: 'Date of Birth', required: true, row: 2, col: 2},
                {name: 'Gender', required: false, row: 3, col: 2},
                {name: 'Phone', required: false, row: 3, col: 2},
                {name: 'Address', required: true, row: 4, col: 1},
                {name: 'Address 2', required: false, row: 5, col: 1},
                {name: 'City', required: true, row: 6, col: 3},
                {name: 'State', required: false, row: 6, col: 3},
                {name: 'Zip', required: true, row: 6, col: 3}
            ];
        }

        function renderPreviewSection(containerId, fields, sectionTitle) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            // Group fields by row
            const rows = {};
            fields.forEach(f => {
                if (!rows[f.row || 0]) rows[f.row || 0] = [];
                rows[f.row || 0].push(f);
            });
            
            let html = `<div class="preview-section-title">${sectionTitle}</div>`;
            
            Object.keys(rows).sort((a,b) => a-b).forEach(rowNum => {
                const rowFields = rows[rowNum];
                const colClass = rowFields[0]?.col === 3 ? 'three-col' : (rowFields[0]?.col === 1 ? 'single' : '');
                
                html += `<div class="preview-form-row ${colClass}">`;
                rowFields.forEach(f => {
                    html += `
                        <div class="preview-form-group">
                            <input type="text" class="preview-form-input" placeholder=" ">
                            <label class="preview-form-label">
                                ${f.name} ${f.required ? '<span class="required">*</span>' : ''}
                            </label>
                        </div>
                    `;
                });
                html += `</div>`;
            });
            
            container.innerHTML = html;
        }

        function renderCustomPagesPreview(pages) {
            const container = document.getElementById('preview-custom-pages');
            if (!container) return;
            
            if (pages.length === 0) {
                container.innerHTML = '';
                return;
            }
            
            container.innerHTML = pages.map((page, idx) => `
                <div class="preview-section">
                    <div class="preview-section-header" onclick="togglePreviewSection(this)">
                        ${page.name.toUpperCase()}
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </div>
                    <div class="preview-section-content collapsed">
                        <div class="preview-section-title">Custom ${page.name} Fields</div>
                        <p class="text-gray-500">No custom fields defined yet.</p>
                    </div>
                </div>
            `).join('');
        }

        function togglePreviewSection(element) {
            const isCurrentlyCollapsed = element.classList.contains('collapsed');
            const content = element.nextElementSibling;
            
            // Close all other accordions first
            document.querySelectorAll('.preview-section-header').forEach(header => {
                header.classList.add('collapsed');
                const headerContent = header.nextElementSibling;
                if (headerContent) headerContent.classList.add('collapsed');
            });
            
            // If this one was collapsed, open it (toggle)
            if (isCurrentlyCollapsed) {
                element.classList.remove('collapsed');
                if (content) content.classList.remove('collapsed');
            }
        }

        // Initialize on load
        document.addEventListener('DOMContentLoaded', () => {
            renderCustomPages();
        });
    </script>

    <!-- Preview Modal - Web Format -->
    <div id="preview-modal" class="preview-modal">
        <button class="preview-close-btn" onclick="closePreview()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
        
        <div class="preview-web-container">
            <!-- Hero Section -->
            <div class="preview-hero">
                <h1 class="preview-hero-title" id="preview-hero-title">Welcome to Sports League Registration</h1>
                <p class="preview-hero-subtitle" id="preview-hero-subtitle">Please complete all sections to register your player</p>
            </div>
            
            <!-- Parent Page Section -->
            <div class="preview-section">
                <div class="preview-section-header" onclick="togglePreviewSection(this)">
                    PARENT PAGE
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </div>
                <div class="preview-section-content" id="preview-parent-content">
                    <!-- Fields rendered dynamically -->
                </div>
            </div>
            
            <!-- Player Page Section -->
            <div class="preview-section">
                <div class="preview-section-header collapsed" onclick="togglePreviewSection(this)">
                    PLAYER PAGE
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </div>
                <div class="preview-section-content collapsed" id="preview-player-content">
                    <!-- Fields rendered dynamically -->
                </div>
            </div>
            
            <!-- Custom Pages Container -->
            <div id="preview-custom-pages"></div>
            
            <!-- Terms Section -->
            <div class="preview-section">
                <div class="preview-section-header collapsed" onclick="togglePreviewSection(this)">
                    TERMS AND CONDITIONS
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </div>
                <div class="preview-section-content collapsed">
                    <p class="text-gray-600">By registering, you agree to all terms and conditions of the league.</p>
                </div>
            </div>
            
            <!-- Payment Section -->
            <div class="preview-section">
                <div class="preview-section-header collapsed" onclick="togglePreviewSection(this)">
                    PAYMENT PAGE
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                </div>
                <div class="preview-section-content collapsed">
                    <div class="preview-section-title">Payment Information</div>
                    <p class="text-gray-600">Complete your registration by providing payment details.</p>
                </div>
            </div>
            
            <!-- Submit Button -->
            <div class="preview-submit-container">
                <button class="preview-submit-btn">Submit Registration</button>
            </div>
            
            <!-- Footer -->
            <div class="preview-footer">
                <a href="#">Manage Your League LLC</a>. Copyright © 2025<br>All Rights Reserved.
            </div>
        </div>
    </div>

</body>

</html>