{{-- Top Navigation Bar - Replaces Sidebar --}}

<style>
    /* ========== Top Navigation Bar Styles ========== */
    .topnav {
        background-color: var(--primary-theme-color, #11315b);
        margin-top: 56px; /* push below fixed navbar */
        z-index: 40;
        box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
    }

    .topnav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        max-width: 100%;
        position: relative;
    }

    .topnav-menu {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    /* ========== Top-level menu items ========== */
    .topnav-item {
        position: relative;
    }

    .topnav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 18px;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 3px solid transparent;
        position: relative;
    }

    .topnav-link:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .topnav-link.active {
        color: #ffffff;
        font-weight: 600;
        background-color: rgba(255, 255, 255, 0.12);
        border-bottom-color: #ffffff;
    }

    .topnav-link svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .topnav-link .dropdown-arrow {
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
        margin-left: 2px;
        opacity: 0.7;
    }

    .topnav-item.open > .topnav-link .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* ========== First-level dropdown ========== */
    .topnav-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: #ffffff;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 6px 0;
        z-index: 100;
        border-top: 3px solid var(--primary-theme-color, #11315b);
    }

    .topnav-item.open > .topnav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .topnav-dropdown-item {
        position: relative;
    }

    .topnav-dropdown-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px;
        color: #374151;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        gap: 8px;
    }

    .topnav-dropdown-link:hover {
        background-color: #f3f4f6;
        color: var(--primary-theme-color, #11315b);
    }

    .topnav-dropdown-link.active {
        background-color: var(--primary-theme-color, #11315b);
        color: #ffffff;
        font-weight: 600;
    }

    .topnav-dropdown-link .submenu-arrow {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.5;
        transition: all 0.2s ease;
    }

    .topnav-dropdown-item:hover > .topnav-dropdown-link .submenu-arrow {
        opacity: 1;
        transform: translateX(2px);
    }

    /* ========== Nested submenu (opens to the right) ========== */
    .topnav-submenu {
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 220px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 6px 0;
        z-index: 110;
        border-left: 3px solid var(--primary-theme-color, #11315b);
    }

    .topnav-dropdown-item.open > .topnav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .topnav-submenu-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        color: #374151;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .topnav-submenu-link:hover {
        background-color: #f3f4f6;
        color: var(--primary-theme-color, #11315b);
    }

    .topnav-submenu-link.active {
        background-color: var(--primary-theme-color, #11315b);
        color: #ffffff;
        font-weight: 600;
    }

    .topnav-submenu-link .dot-indicator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #d1d5db;
        flex-shrink: 0;
        transition: background-color 0.2s ease;
    }

    .topnav-submenu-link.active .dot-indicator {
        background-color: #ffffff;
    }

    .topnav-submenu-link:hover .dot-indicator {
        background-color: var(--primary-theme-color, #11315b);
    }

    /* ========== Loading spinner for forms ========== */
    .topnav-loading {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        color: #9ca3af;
        font-size: 12px;
    }

    .topnav-loading .spinner {
        width: 14px;
        height: 14px;
        border: 2px solid #e5e7eb;
        border-top-color: var(--primary-theme-color, #11315b);
        border-radius: 50%;
        animation: topnav-spin 0.6s linear infinite;
    }

    @keyframes topnav-spin {
        to { transform: rotate(360deg); }
    }

    /* ========== Signout button ========== */
    .topnav-signout {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 8px;
        margin: 4px 0;
        white-space: nowrap;
    }

    .topnav-signout:hover {
        background-color: rgba(239, 68, 68, 0.2);
        color: #fca5a5;
    }

    .topnav-signout svg {
        width: 16px;
        height: 16px;
    }

    /* ========== Mobile hamburger ========== */
    .topnav-mobile-toggle {
        display: none;
        padding: 8px;
        color: white;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s;
    }

    .topnav-mobile-toggle:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .topnav-mobile-toggle svg {
        width: 22px;
        height: 22px;
    }

    /* ========== Mobile responsive ========== */
    @media (max-width: 1024px) {
        .topnav-mobile-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .topnav-menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--primary-theme-color, #11315b);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
            padding: 8px 0;
            z-index: 100;
            max-height: 70vh;
            overflow-y: auto;
        }

        .topnav-menu.mobile-open {
            display: flex;
        }

        .topnav-link {
            padding: 12px 20px;
            border-bottom: none;
            border-left: 3px solid transparent;
        }

        .topnav-link.active {
            border-bottom: none;
            border-left-color: #ffffff;
        }

        .topnav-dropdown {
            position: static;
            box-shadow: none;
            border-radius: 0;
            border-top: none;
            background: rgba(0, 0, 0, 0.15);
            padding: 0;
        }

        .topnav-submenu {
            position: static;
            box-shadow: none;
            border-radius: 0;
            border-left: none;
            background: rgba(0, 0, 0, 0.25);
            padding: 0;
        }

        .topnav-dropdown-link {
            color: rgba(255, 255, 255, 0.85);
            padding: 10px 20px 10px 36px;
        }

        .topnav-dropdown-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        .topnav-dropdown-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #ffffff;
        }

        .topnav-submenu-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 10px 20px 10px 52px;
        }

        .topnav-submenu-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        .topnav-submenu-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #ffffff;
        }

        .topnav-submenu-link .dot-indicator {
            background-color: rgba(255, 255, 255, 0.4);
        }

        .topnav-submenu-link.active .dot-indicator,
        .topnav-submenu-link:hover .dot-indicator {
            background-color: #ffffff;
        }

        .topnav-signout {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 4px 8px 0;
            padding: 12px 12px;
        }
    }
</style>

<nav class="topnav" id="topnav">
    <div class="topnav-inner">
        {{-- Mobile hamburger button --}}
        <div class="topnav-mobile-toggle" id="topnavMobileToggle" onclick="toggleTopnavMobile()">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
        </div>

        <ul class="topnav-menu" id="topnavMenu">
            {{-- Dashboard --}}
            <li class="topnav-item">
                <a href="{{ url('/') }}" class="topnav-link {{ $page === 'home' ? 'active' : '' }}" data-page="home">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M13 9V3H21V9H13ZM3 13V3H11V13H3ZM13 21V11H21V21H13ZM3 21V15H11V21H3Z" />
                    </svg>
                    <span>Dashboard</span>
                </a>
            </li>

            {{-- Family Circle --}}
            <!-- <li class="topnav-item">
                <a href="{{ config('app.prefix', '/user-dashboard') }}/family-circle" class="topnav-link {{ $page === 'family' ? 'active' : '' }}" data-page="family">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
                    </svg>
                    <span>Family Circle</span>
                </a>
            </li> -->

            {{-- Registrations Dropdown --}}
            @php
                $isRegistrationActive = in_array($page, [
                    'registrations',
                    'current-registration',
                    'complete-registration',
                    'past-registration',
                    'draft-registrations',
                    'form-builder',
                    'published-forms',
                    'non-published-forms',
                    'published-sets',
                    'non-published-sets',
                    'registration-sets',
                    'past-forms',
                    'saved-forms'
                ]);
            @endphp
            <li class="topnav-item" id="topnav-reg">
                <div class="topnav-link {{ $isRegistrationActive ? 'active' : '' }}" onclick="toggleTopnavDropdown('topnav-reg')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 9V7H18V9H9ZM9 12V10H18V12H9ZM14 22V18.925L19.525 13.425C19.675 13.275 19.8417 13.1667 20.025 13.1C20.2083 13.0333 20.3917 13 20.575 13C20.775 13 20.9667 13.0375 21.15 13.1125C21.3333 13.1875 21.5 13.3 21.65 13.45L22.575 14.375C22.7083 14.525 22.8125 14.6917 22.8875 14.875C22.9625 15.0583 23 15.2417 23 15.425C23 15.6083 22.9667 15.7958 22.9 15.9875C22.8333 16.1792 22.725 16.35 22.575 16.5L17.075 22H14ZM20.575 16.4L21.5 15.425L20.575 14.5L19.625 15.45L20.575 16.4ZM6 22C5.16667 22 4.45833 21.7083 3.875 21.125C3.29167 20.5417 3 19.8333 3 19V16H6V2H21V11.025C20.6667 10.9917 20.3292 11.0042 19.9875 11.0625C19.6458 11.1208 19.3167 11.225 19 11.375V4H8V16H14L12 18V22H6Z" />
                    </svg>
                    <span>Registrations</span>
                    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </div>

                <div class="topnav-dropdown">
                    {{-- 1. Registration Form (dropdown item with nested submenu) --}}
                    <div class="topnav-dropdown-item" id="topnav-reg-form-item">
                        <div class="topnav-dropdown-link {{ in_array($page, ['current-registration', 'registrations', 'complete-registration', 'past-registration', 'draft-registrations']) ? 'active' : '' }}"
                             onclick="toggleTopnavSubmenu('topnav-reg-form-item')">
                            <span>Registration Form</span>
                            <svg class="submenu-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                            </svg>
                        </div>

                        {{-- Nested submenu for Registration Form --}}
                        <div class="topnav-submenu" id="topnav-reg-form-submenu">
                            
                            {{-- Current Registration (with dynamic sub-menu) --}}
                            <div class="topnav-dropdown-item" id="topnav-current-reg">
                                <div class="topnav-dropdown-link {{ $page === 'current-registration' || $page === 'registrations' ? 'active' : '' }}"
                                     onclick="toggleTopnavSubmenu('topnav-current-reg')">
                                    <span>Current Registration</span>
                                    <svg class="submenu-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                                    </svg>
                                </div>

                                {{-- Deep nested submenu for dynamic forms --}}
                                <div class="topnav-submenu" id="topnav-current-reg-submenu">
                                    <div class="topnav-loading" id="topnav-forms-loading" style="display: none;">
                                        <div class="spinner"></div>
                                        <span>Loading forms...</span>
                                    </div>
                                    <div id="topnav-forms-list"></div>
                                </div>
                            </div>

                            <a href="{{ url('/draft-registrations') }}"
                               class="topnav-dropdown-link {{ $page === 'draft-registrations' ? 'active' : '' }}">
                                <span>Draft Registration</span>
                            </a>

                            <a href="{{ url('/complete-registration') }}"
                               class="topnav-dropdown-link {{ $page === 'complete-registration' ? 'active' : '' }}">
                                <span>Completed Registration</span>
                            </a>

                            <a href="{{ url('/past-registrations') }}"
                               class="topnav-dropdown-link {{ $page === 'past-registration' ? 'active' : '' }}">
                                <span>Past Registration</span>
                            </a>
                        </div>
                    </div>

                    {{-- 2. Form Builder (dropdown item with nested submenu, Admin Only) --}}
                    @php
                        $fbPreserveParams = request()->only(['dbname', 'db_name', 'organisation', 'org', 'db', 'token', 'authToken', 'auth_token']);
                        $fbQs = !empty($fbPreserveParams) ? '?' . http_build_query($fbPreserveParams) : '';
                    @endphp
                    <div class="topnav-dropdown-item hidden" id="topnav-formbuilder">
                        <div class="topnav-dropdown-link {{ in_array($page, ['form-builder', 'registration-sets', 'published-forms', 'non-published-forms', 'published-sets', 'non-published-sets', 'past-forms', 'saved-forms']) ? 'active' : '' }}"
                             onclick="toggleTopnavSubmenu('topnav-formbuilder')">
                            <span>Form Builder</span>
                            <svg class="submenu-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                            </svg>
                        </div>

                        {{-- Nested submenu for Form Builder --}}
                        <div class="topnav-submenu" id="topnav-formbuilder-submenu">
                            <a href="{{ url('/create-form') . $fbQs }}" id="topnav-link-create" class="topnav-dropdown-link {{ $page === 'form-builder' ? 'active' : '' }}">
                                <span>Create Form</span>
                            </a>
                            <a href="{{ url('/published-forms') . $fbQs }}" id="topnav-link-published" class="topnav-dropdown-link {{ in_array($page, ['published-forms', 'published-sets', 'past-forms']) ? 'active' : '' }}">
                                <span>Published Forms</span>
                            </a>
                            <a href="{{ url('/non-published-forms') . $fbQs }}" id="topnav-link-non-published" class="topnav-dropdown-link {{ in_array($page, ['non-published-forms', 'non-published-sets', 'unpublished-forms', 'saved-forms']) ? 'active' : '' }}">
                                <span>Non-Published Forms</span>
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            {{-- Schedule Dropdown --}}
            @php
                $isScheduleActive = in_array($page, ['schedule', 'all-events']);
            @endphp
            <li class="topnav-item" id="topnav-schedule">
                <div class="topnav-link {{ $isScheduleActive ? 'active' : '' }}" onclick="toggleTopnavDropdown('topnav-schedule')">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
                    </svg>
                    <span>Schedule</span>
                    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </div>

                <div class="topnav-dropdown">
                    <a href="{{ url('/schedule?view=my') }}"
                       class="topnav-dropdown-link {{ ($page === 'schedule' && request()->get('view') !== 'all') ? 'active' : '' }}">
                        <span>My Event</span>
                    </a>

                    <a href="{{ url('/schedule?view=all') }}"
                       class="topnav-dropdown-link {{ ($page === 'schedule' && request()->get('view') === 'all') ? 'active' : '' }}">
                        <span>All Events</span>
                    </a>
                </div>
            </li>



            {{-- Settings --}}
            <li class="topnav-item">
                <a href="{{ url('/settings') }}" class="topnav-link {{ $page === 'settings' ? 'active' : '' }}" data-page="settings">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
                    </svg>
                    <span>Settings</span>
                </a>
            </li>
        </ul>

        {{-- Sign Out --}}
        <div class="topnav-signout" id="topnavSignoutBtn">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
            </svg>
            <span>Sign Out</span>
        </div>
    </div>
</nav>

<script>
    // ========== Topnav State ==========
    const topnavCurrentPage = "{{ $page ?? '' }}";

    // ========== Role-Based Menu Items & Dynamic Links ==========
    const userRole = localStorage.getItem('user_role');
    if (userRole === 'admin') {
        const formBuilderItem = document.getElementById('topnav-formbuilder');
        if (formBuilderItem) {
            formBuilderItem.classList.remove('hidden');
        }
    }

    function syncTopnavFormBuilderLinks() {
        const linkCreate = document.getElementById('topnav-link-create');
        const linkPub = document.getElementById('topnav-link-published');
        const linkNonPub = document.getElementById('topnav-link-non-published');
        if (!linkPub && !linkNonPub && !linkCreate) return;

        const isRegOrg = (function() {
            if (typeof window.isRegistrationSetOverride !== 'undefined' && window.isRegistrationSetOverride !== null) {
                return Boolean(window.isRegistrationSetOverride);
            }
            if (window.allLeaguesDataInfo && typeof window.allLeaguesDataInfo.registration_set !== 'undefined' && window.allLeaguesDataInfo.registration_set !== null) {
                return Number(window.allLeaguesDataInfo.registration_set) === 1;
            }
            const stored = localStorage.getItem('registration_set');
            if (stored !== null) return Number(stored) === 1;
            const storedOrgObj = localStorage.getItem('organisation_info');
            if (storedOrgObj) {
                try {
                    const parsed = JSON.parse(storedOrgObj);
                    if (typeof parsed.registration_set !== 'undefined') return Number(parsed.registration_set) === 1;
                } catch(e) {}
            }
            return false;
        })();

        const prefix = (function() {
            if (typeof window.APP_PREFIX !== 'undefined' && window.APP_PREFIX !== null) return window.APP_PREFIX;
            const path = window.location.pathname;
            if (path.startsWith('/user-dashboard')) return '/user-dashboard';
            if (path.startsWith('/admin-dashboard')) return '/admin-dashboard';
            return '';
        })();

        const urlParams = new URLSearchParams(window.location.search);
        const dbname = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
        const token = urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token') || localStorage.getItem('authToken') || '';
        const params = new URLSearchParams();
        if (dbname) params.set('dbname', dbname);
        if (token) params.set('token', token);
        const qs = params.toString() ? '?' + params.toString() : '';

        if (linkCreate) {
            const span = linkCreate.querySelector('span');
            if (span) span.textContent = isRegOrg ? 'Registration Set Builder' : 'Create Form';
            linkCreate.href = `${window.location.origin}${prefix}/create-form${qs}`;
        }
        if (linkPub) {
            linkPub.href = `${window.location.origin}${prefix}/${isRegOrg ? 'published-sets' : 'published-forms'}${qs}`;
        }
        if (linkNonPub) {
            linkNonPub.href = `${window.location.origin}${prefix}/${isRegOrg ? 'non-published-sets' : 'non-published-forms'}${qs}`;
        }
    }

    try { syncTopnavFormBuilderLinks(); } catch(e) {}
    document.addEventListener('DOMContentLoaded', syncTopnavFormBuilderLinks);
    let topnavLiveFormsFetched = false;
    let topnavLiveFormsData = [];

    // ========== Mobile toggle ==========
    function toggleTopnavMobile() {
        const menu = document.getElementById('topnavMenu');
        menu.classList.toggle('mobile-open');
    }

    // ========== Dropdown toggle (top-level) ==========
    function toggleTopnavDropdown(itemId) {
        const item = document.getElementById(itemId);
        if (!item) return;

        const isOpen = item.classList.contains('open');

        // Close all other top-level dropdowns
        document.querySelectorAll('.topnav-item.open').forEach(el => {
            if (el.id !== itemId) el.classList.remove('open');
        });

        if (isOpen) {
            item.classList.remove('open');
        } else {
            item.classList.add('open');
        }
    }

    // ========== Submenu toggle (nested, opens right) ==========
    function toggleTopnavSubmenu(itemId) {
        const item = document.getElementById(itemId);
        if (!item) return;

        const isOpen = item.classList.contains('open');

        // Close other submenus at the same level
        const parent = item.parentElement;
        if (parent) {
            parent.querySelectorAll('.topnav-dropdown-item.open').forEach(el => {
                if (el.id !== itemId) el.classList.remove('open');
            });
        }

        if (isOpen) {
            item.classList.remove('open');
        } else {
            item.classList.add('open');

            // Fetch live forms if needed
            if (itemId === 'topnav-current-reg' && !topnavLiveFormsFetched) {
                fetchTopnavLiveForms();
            }
        }
    }

    // ========== Fetch live forms ==========
    async function fetchTopnavLiveForms() {
        const loading = document.getElementById('topnav-forms-loading');
        const formsList = document.getElementById('topnav-forms-list');

        if (loading) loading.style.display = 'flex';

        try {
            const organisation = localStorage.getItem('organisation') || '';
            const token = localStorage.getItem('authToken') || '';

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

            const result = await response.json();

            if (result.data && result.data.fetchLiveRegistrations && result.data.fetchLiveRegistrations.registrations) {
                topnavLiveFormsData = result.data.fetchLiveRegistrations.registrations;
                topnavLiveFormsFetched = true;
                renderTopnavLiveForms();
            } else {
                renderTopnavNoForms();
            }
        } catch (error) {
            renderTopnavErrorForms();
        }

        if (loading) loading.style.display = 'none';
    }

    // ========== Render live forms in submenu ==========
    function renderTopnavLiveForms() {
        const formsList = document.getElementById('topnav-forms-list');
        if (!formsList) return;

        if (!topnavLiveFormsData || topnavLiveFormsData.length === 0) {
            renderTopnavNoForms();
            return;
        }

        const urlParams = new URLSearchParams(window.location.search);
        const currentRegSetId = urlParams.get('registration_set_id');
        const currentFormId = urlParams.get('form_id');

        // Clear previous content safely
        formsList.replaceChildren();

        topnavLiveFormsData.forEach(reg => {
            const id = reg.id;
            const name = reg.name;
            const type = reg.type;
            const isSingleForm = type === 'single';

            const isActive = isSingleForm
                ? (currentFormId && currentFormId == id)
                : (currentRegSetId && currentRegSetId == id);

            const localDb = localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
            const localTok = localStorage.getItem('authToken') || '';
            let urlParam = isSingleForm ? `form_id=${encodeURIComponent(id)}` : `registration_set_id=${encodeURIComponent(id)}`;
            if (localDb) urlParam += `&dbname=${encodeURIComponent(localDb)}`;
            if (localTok) urlParam += `&token=${encodeURIComponent(localTok)}`;

            const link = document.createElement('a');
            link.href = `${window.APP_PREFIX || '/user-dashboard'}/registration-form?${urlParam}`;
            link.className = `topnav-submenu-link${isActive ? ' active' : ''}`;
            link.dataset.id = id;
            link.dataset.type = type;

            const dot = document.createElement('span');
            dot.className = 'dot-indicator';
            link.appendChild(dot);

            const span = document.createElement('span');
            span.textContent = name;
            link.appendChild(span);

            formsList.appendChild(link);
        });
    }

    function renderTopnavNoForms() {
        const formsList = document.getElementById('topnav-forms-list');
        if (!formsList) return;
        formsList.replaceChildren();
        const msg = document.createElement('div');
        msg.style.cssText = 'padding: 10px 18px; color: #9ca3af; font-size: 12px; font-style: italic;';
        msg.textContent = 'No forms available';
        formsList.appendChild(msg);
    }

    function renderTopnavErrorForms() {
        const formsList = document.getElementById('topnav-forms-list');
        if (!formsList) return;
        formsList.replaceChildren();
        const msg = document.createElement('div');
        msg.style.cssText = 'padding: 10px 18px; color: #ef4444; font-size: 12px;';
        msg.textContent = 'Error loading forms';
        formsList.appendChild(msg);
    }

    // ========== Auto-open and fetch on registration page ==========
    if (['registrations', 'current-registration'].includes(topnavCurrentPage)) {
        const regItem = document.getElementById('topnav-current-reg');
        if (regItem) {
            regItem.classList.add('open');
            fetchTopnavLiveForms();
        }
    }

    // ========== Close dropdowns on outside click ==========
    document.addEventListener('click', function(e) {
        const topnav = document.getElementById('topnav');
        if (!topnav) return;

        if (!topnav.contains(e.target)) {
            // Close all dropdowns
            document.querySelectorAll('.topnav-item.open').forEach(el => el.classList.remove('open'));
            document.querySelectorAll('.topnav-dropdown-item.open').forEach(el => el.classList.remove('open'));
        }
    });

    // ========== Desktop: hover to open dropdowns ==========
    if (window.innerWidth > 1024) {
        document.querySelectorAll('.topnav-item').forEach(item => {
            const dropdown = item.querySelector('.topnav-dropdown');
            if (!dropdown) return;

            let hoverTimeout;

            item.addEventListener('mouseenter', () => {
                clearTimeout(hoverTimeout);
                // Close other items
                document.querySelectorAll('.topnav-item.open').forEach(el => {
                    if (el !== item) el.classList.remove('open');
                });
                item.classList.add('open');
            });

            item.addEventListener('mouseleave', () => {
                hoverTimeout = setTimeout(() => {
                    item.classList.remove('open');
                    // Also close nested submenus
                    item.querySelectorAll('.topnav-dropdown-item.open').forEach(el => el.classList.remove('open'));
                }, 200);
            });
        });

        // Nested submenu hover on desktop
        document.querySelectorAll('.topnav-dropdown-item').forEach(item => {
            const submenu = item.querySelector('.topnav-submenu');
            if (!submenu) return;

            let subHoverTimeout;

            item.addEventListener('mouseenter', () => {
                clearTimeout(subHoverTimeout);
                item.classList.add('open');

                // Fetch forms if needed
                if (item.id === 'topnav-current-reg' && !topnavLiveFormsFetched) {
                    fetchTopnavLiveForms();
                }
            });

            item.addEventListener('mouseleave', () => {
                subHoverTimeout = setTimeout(() => {
                    item.classList.remove('open');
                }, 200);
            });
        });
    }

    // ========== Sign Out ==========
    document.getElementById('topnavSignoutBtn').addEventListener('click', () => {
        const lastDb = localStorage.getItem('organisation') || localStorage.getItem('last_db');

        localStorage.removeItem('authToken');
        localStorage.removeItem('player_id');
        localStorage.removeItem('parent_id');
        localStorage.removeItem('user_role');
        localStorage.removeItem('user_email');
        localStorage.removeItem('username');
        localStorage.removeItem('organisation');

        const loginUrl = (window.APP_PREFIX || '/user-dashboard') + '/login' + (lastDb ? `?db=${encodeURIComponent(lastDb)}` : '');
        window.location.href = loginUrl;
    });
</script>