@if(!($hideMarkup ?? false))
<nav class="fixed top-0 left-0 right-0 bg-white shadow-md flex justify-between items-center px-4 py-2 z-50">
    <div class="flex items-center gap-3">
        <button id="menuBtn" class="md:hidden p-2 rounded hover:bg-gray-100">
            <!-- Menu Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 6h16.5m-16.5 6h16.5" />
            </svg>
        </button>

        <!-- Logo and Name Link -->
        <a href="{{ config('app.prefix', '/user-dashboard') }}/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
            <div class="h-10 flex items-center justify-center">
                <img id="leagueLogo" src="{{ asset('images/logoa.png') }}" alt="League Logo"
                    class="h-full w-auto object-contain hidden" />
                <div id="leagueLogoFallback" class="h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center text-xs text-gray-500">Logo</div>
            </div>
            <span id="leagueNameDisplay" class="text-xl font-bold">NEFL</span>
        </a>
    </div>

    <div class="flex items-center gap-3">
        <div id="userIcon" class="h-9 w-9 rounded-full flex items-center justify-center text-white font-semibold">
        </div>
        <span id="userName" class="font-medium"></span>
    </div>
</nav>
@endif

<script>
    // Function to get initials from full name
    function getInitials(name) {
        if (!name) return '?';
        const names = name.trim().split(' ');
        let initials = names[0].charAt(0).toUpperCase(); // First letter
        if (names.length > 1) {
            initials += names[names.length - 1].charAt(0).toUpperCase(); // Last letter
        }
        return initials;
    }

    function applyThemeColor(themeColor) {
        if (!themeColor || !themeColor.startsWith('#')) return;

        // Update CSS Variables
        document.documentElement.style.setProperty('--primary-theme-color', themeColor);
        
        // Convert Hex to RGB
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(themeColor);
        if (result) {
            const r = parseInt(result[1], 16);
            const g = parseInt(result[2], 16);
            const b = parseInt(result[3], 16);
            document.documentElement.style.setProperty('--primary-theme-rgb', `${r}, ${g}, ${b}`);
        }

        // Apply to User Icon
        const userIconElement = document.getElementById('userIcon');
        if (userIconElement) userIconElement.style.backgroundColor = themeColor;

        // Dynamic style injection for other elements
        let dynamicStyle = document.getElementById('dynamic-branding-style');
        if (!dynamicStyle) {
            dynamicStyle = document.createElement('style');
            dynamicStyle.id = 'dynamic-branding-style';
            document.head.appendChild(dynamicStyle);
        }
        
        dynamicStyle.innerHTML = `
            .stat-card { border-left-color: ${themeColor} !important; }
            .sidebar-item:hover:not(.active) { background-color: rgba(255,255,255,0.1) !important; }
            .btn-primary, .login-button, .signup-button, .login-button:hover, .signup-button:hover { background: ${themeColor} !important; }
            #submit-registration-btn { background-color: ${themeColor} !important; }
            .material-input-group input:focus, .material-input-group select:focus, .material-input-group textarea:focus { border-bottom-color: ${themeColor} !important; }
            .material-input-group input:focus+label, .material-input-group input:not(:placeholder-shown)+label, .material-input-group .label-float { color: ${themeColor} !important; }
        `;
    }

    async function fetchLeagueBranding() {
        const authToken = localStorage.getItem('authToken');
        const organisation = localStorage.getItem('organisation');
        
        if (!authToken || !organisation) return;

        try {
            const resourceQuery = `
                query FetchLeagueResource {
                    fetchLeagueResource {
                        name
                        logo1
                        primary_background
                        secondary_background
                    }
                }
            `;

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

            const json = await response.json();
            if (json.data && json.data.fetchLeagueResource) {
                const resource = json.data.fetchLeagueResource;
                
                // Update Logo
                if (resource.logo1) {
                    localStorage.setItem('leagueLogo', resource.logo1);
                    const logoImg = document.getElementById('leagueLogo');
                    const logoFallback = document.getElementById('leagueLogoFallback');
                    
                    let logoUrl = resource.logo1;
                    if (logoUrl.startsWith('http://') && window.location.protocol === 'https:') {
                        logoUrl = (window.APP_PREFIX || '/user-dashboard') + '/image_proxy.php?url=' + encodeURIComponent(logoUrl);
                    }
                    
                    if (logoImg) {
                        logoImg.src = logoUrl;
                        logoImg.onload = () => {
                            if (logoImg) logoImg.classList.remove('hidden');
                            if (logoFallback) logoFallback.classList.add('hidden');
                        };
                    }
                }

                // Update Name
                if (resource.name) {
                    localStorage.setItem('leagueName', resource.name);
                    const nameDisplayEl = document.getElementById('leagueNameDisplay');
                    if (nameDisplayEl) nameDisplayEl.textContent = resource.name;
                }

                // Update Theme Color
                const primary = resource.primary_background;
                const secondary = resource.secondary_background;
                
                if (primary || secondary) {
                    const getBrightness = (hex) => {
                        if (!hex || typeof hex !== 'string' || !hex.startsWith('#')) return 255;
                        const h = hex.replace('#', '');
                        const r = parseInt(h.substr(0, 2), 16);
                        const g = parseInt(h.substr(2, 2), 16);
                        const b = parseInt(h.substr(4, 2), 16);
                        return (r * 299 + g * 587 + b * 114) / 1000;
                    };

                    const p = primary || 'var(--primary-theme-color)';
                    const s = secondary || '#ffffff';
                    const b1 = getBrightness(p);
                    const b2 = getBrightness(s);
                    const themeColor = b1 < b2 ? p : s;
                    
                    if (themeColor && themeColor.startsWith('#')) {
                        localStorage.setItem('themeColor', themeColor);
                        applyThemeColor(themeColor);
                    }
                }
            }
        } catch (error) {
            console.error('Error fetching league branding:', error);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // Set flag indicating the user is browsing within the dashboard session
        sessionStorage.setItem('from_dashboard', 'true');

        // Immediate display from localStorage
        const storedLogo = localStorage.getItem('leagueLogo');
        const storedLeagueName = localStorage.getItem('leagueName');
        const themeColor = localStorage.getItem('themeColor');
        
        const logoImg = document.getElementById('leagueLogo');
        const logoFallback = document.getElementById('leagueLogoFallback');
        const nameDisplay = document.getElementById('leagueNameDisplay');

        if (storedLogo && logoImg) {
            let logoUrl = storedLogo;
            if (logoUrl.startsWith('http://') && window.location.protocol === 'https:') {
                logoUrl = (window.APP_PREFIX || '/user-dashboard') + '/image_proxy.php?url=' + encodeURIComponent(logoUrl);
            }
            logoImg.src = logoUrl;
            logoImg.onload = () => {
                if (logoImg) logoImg.classList.remove('hidden');
                if (logoFallback) logoFallback.classList.add('hidden');
            };
        }

        if (storedLeagueName && nameDisplay) {
            nameDisplay.textContent = storedLeagueName;
        }

        if (themeColor) {
            applyThemeColor(themeColor);
        }

        // Retrieve username information
        const storedName = localStorage.getItem('username');
        const userNameElement = document.getElementById('userName');
        const userIconElement = document.getElementById('userIcon');

        if (userNameElement && userIconElement) {
            if (storedName) {
                userNameElement.textContent = storedName;
                userIconElement.textContent = getInitials(storedName);
            } else {
                userNameElement.textContent = 'Guest';
                userIconElement.textContent = 'G';
            }
        }

        // Fetch fresh branding data
        fetchLeagueBranding();
    });
</script>