<!--
╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  PROFILE.HTML – POUŽÍVATEĽ PROFIL
║  ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  @version 2.0.0
║  @author EasyWay Team
║  @license MIT
║  ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  USER PROFILE
║  ──────────────────────────────────────────────────────────────────────────────
║  Osobné údaje, bezpečnosť (heslo, 2FA, relácie) a predvoľby účtu
║
║  ROZLOŽENIE
║  ──────────────────────────────────────────────────────────────────────────────
║  .site-header / .site-nav   →  verejné horné menu (rovnaké ako vo vzore)
║  .app--panel-right          →  mriežka s obsahom vľavo a zasúvacím panelom vpravo
║  .main-header               →  aplikačná lišta (nadpis, posledná aktualizácia, obnoviť)
║  .page-heading              →  uvodný nadpis celej stránky
║  .profile-hero              →  avatar, meno, rola, email a stav účtu
║  .zone-tabs / .zone-tab     →  lišta záložiek Osobné údaje / Bezpečnosť / Nastavenia
║  .zone-panel                →  obsah jednej záložky
║  .dashboard-card             →  karta jednej skupiny údajov (ako vo vzore)
║  .dashboard-card__header     →  hlavička karty s nadpisom (ako vo vzore)
║  .two-factor-status         →  stav dvojfaktorovej autentifikácie
║  .sessions-list             →  zoznam aktívnych prihlásení
║  .preference-list           →  prepínače notifikácií a tmavého režimu
║  .account-stats             →  štatistiky účtu
║  .modal                     →  aktivácia 2FA cez QR kód
║  .zone-footer               →  záverečný pätičný panel
║
║  Dizajn prebraný zo vzoru: zones/super-admin/dashboard.html
║  ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  © 2026 EasyWay Platform. Všetky práva vyhradené.
║  ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
-->

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Môj profil – Používateľ</title>

    <meta name="description" content="Osobné údaje, bezpečnosť a predvoľby používateľského účtu">
    <meta name="robots" content="noindex, nofollow">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="app-version" content="3.0.0">
    <meta name="app-zone" content="user">
    <meta name="app-user-role" content="user">

    <link rel="icon" href="../../assets/img/favicon.ico">

    <!-- CSS -->
    <link rel="stylesheet" href="../../assets/css/core/variables.css">
    <link rel="stylesheet" href="../../assets/css/core/base.css">
    <link rel="stylesheet" href="../../assets/css/core/layout.css">
    <link rel="stylesheet" href="../../assets/css/core/components.css">
    <link rel="stylesheet" href="../../assets/css/core/utilities.css">

    <link rel="stylesheet" href="../../assets/css/zones/zone-shared.css">
    <link rel="stylesheet" href="../../assets/css/core/modals.css">
    <link rel="stylesheet" href="../../assets/css/zones/user/user.css">
    <link rel="stylesheet" href="../../assets/css/zones/landing-zone-theme.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Režimy platformy (dev / maintenance / Signature) -->
    <script src="../../assets/js/global-modes.js" defer></script>
    <!-- Ovládanie prihláseného používateľa v hlavičke (zdieľané core moduly).
         Načítava sa SYNCHRONNE ešte pred <body>, aby atribút
         data-session="user|guest" bol zapísaný pred prvým vykreslením
         (tlačidlá sa preto nikdy neobzivia v nesprávnom stave). -->
    <link rel="stylesheet" href="../../assets/css/core/session-nav.css">
    <script src="../../assets/js/core/session-state.js"></script>
    <script src="../../assets/js/core/zone-state.js"></script>
</head>
<body>
    <!-- ═══════════════════════════════════════════
         VEREJNÉ HORNÉ MENU
         Rovnaké ako na public/zones/index.html
         ═══════════════════════════════════════════ -->
    <header class="site-header" id="siteHeader" role="banner">
        <nav class="site-nav" aria-label="Hlavná navigácia">
            <a href="../index.html" class="nav__logo">
                <span class="nav__logo-text">
                    <span class="nav__logo-text--primary">Easy</span>
                    <span class="nav__logo-text--secondary">Way</span>
                </span>
                <span class="nav__logo-badge">Platform</span>
            </a>

            <ul class="nav__list" id="siteNavList">
                <li class="nav__item">
                    <a href="../index.html#features" class="nav__link">Funkcie</a>
                </li>
                <li class="nav__item">
                    <a href="../index.html#pricing" class="nav__link">Cenník</a>
                </li>
                <li class="nav__item">
                    <a href="../about.html" class="nav__link">O nás</a>
                </li>
                <li class="nav__item">
                    <a href="../contact.html" class="nav__link">Kontakt</a>
                </li>
                <li class="nav__item nav__item--auth">
                    <a href="../../auth/login.html" class="nav__link nav__link--login">Prihlásiť</a>
                    <a href="../../auth/register.html" class="btn btn--primary btn--sm">Zaregistrovať</a>
                </li>
                <!-- Stav PRIHLÁSENÝ – hlavné tlačidlo Dashboard + Odhlásiť.
                     URL dashboardu doplní assets/js/core/session-state.js podľa role. -->
                <li class="nav__item nav__item--session">
                    <a href="dashboard.html" class="nav__session-btn nav__session-btn--dashboard" data-session-dashboard>
                        <svg class="nav__session-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                            <path d="m12 14 4-4" />
                            <path d="M3.34 19a10 10 0 1 1 17.32 0" />
                        </svg>
                        <span class="nav__session-label">Dashboard</span>
                    </a>
                    <button type="button" class="nav__session-btn nav__session-btn--logout" data-session-logout>
                        <svg class="nav__session-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                            <path d="m16 17 5-5-5-5" />
                            <path d="M21 12H9" />
                        </svg>
                        <span class="nav__session-label">Odhlásiť</span>
                    </button>
                </li>
            </ul>

            <button class="nav__toggle" id="navToggle" type="button"
                    aria-label="Otvoriť menu" aria-controls="siteNavList" aria-expanded="false">
                <span class="nav__toggle-bar"></span>
                <span class="nav__toggle-bar"></span>
                <span class="nav__toggle-bar"></span>
            </button>
        </nav>
    </header>

    <div class="app app--panel-right app--with-site-header">
        <!-- ═══════════════════════════════════════════
             HLAVNÝ OBSAH
             ═══════════════════════════════════════════ -->
        <main class="main-content">
            <!-- ── Aplikačná lišta ─────────────────────── -->
            <header class="main-header">
                <div class="main-header__left">
                    <button class="main-header__menu-btn" type="button" id="panelToggle"
                            onclick="toggleSidebar()" aria-controls="sidebar" aria-expanded="true"
                            aria-label="Prepnúť kontrolný panel">☰</button>
                    <div class="main-header__heading">
                        <span class="main-header__eyebrow">Používateľ</span>
                        <h1 class="main-header__title">Môj profil</h1>
                    </div>
                </div>

                <div class="main-header__right">
                    <span class="main-header__last-update">
                        Posledná aktualizácia: <span id="lastUpdate">pred chvíľou</span>
                    </span>
                    <button class="main-header__refresh" type="button" onclick="refreshProfile()">
                        <span aria-hidden="true">🔄</span> Obnoviť
                    </button>
                </div>
            </header>

            <!-- ── Obsah stránky ────────────────────────── -->
            <div class="page-content">

                <!-- Uvodný nadpis celej stránky -->
                <section class="page-heading" aria-labelledby="pageHeadingTitle">
                    <span class="page-heading__eyebrow">Váš účet v EasyWay</span>
                    <h2 class="page-heading__title" id="pageHeadingTitle">Môj profil</h2>
                    <p class="page-heading__lead">
                        Spravujte osobné údaje, heslo, dvojfaktorovú autentifikáciu aj aktívne prihlásenia.
                        Predvoľby notifikácií a vzhľadu nájdete na záložke Nastavenia.
                    </p>
                </section>

                <!-- ── Záhlavie profilu ─────────────────────── -->
                <section class="profile-hero" aria-labelledby="profileName">
                    <div class="profile-hero__avatar">
                        <img src="../../assets/img/easyway-logo.svg" alt="Avatar používateľa" id="profileAvatar" width="72" height="72">
                        <button class="profile-hero__avatar-upload" type="button" onclick="uploadAvatar()"
                                aria-label="Nahrať nový avatar">
                            <span aria-hidden="true">📷</span>
                        </button>
                    </div>

                    <div class="profile-hero__info">
                        <h2 class="profile-hero__name" id="profileName">Ján Používateľ</h2>
                        <div class="profile-hero__meta">
                            <span class="profile-hero__role">Používateľ</span>
                            <span class="profile-hero__divider" aria-hidden="true">•</span>
                            <span class="profile-hero__email">jan@email.sk</span>
                            <span class="profile-hero__divider" aria-hidden="true">•</span>
                            <span class="profile-hero__status profile-hero__status--active">🟢 Aktívny</span>
                        </div>
                    </div>
                </section>

                <!-- ── Záložky ──────────────────────────────── -->
                <div class="zone-tabs" role="tablist" aria-label="Sekcie profilu">
                    <button class="zone-tab zone-tab--active" type="button" role="tab"
                            id="tab-btn-personal" aria-controls="panel-personal" aria-selected="true"
                            data-tab="personal">
                        <span class="zone-tab__icon" aria-hidden="true">👤</span> Osobné údaje
                    </button>
                    <button class="zone-tab" type="button" role="tab"
                            id="tab-btn-security" aria-controls="panel-security" aria-selected="false"
                            data-tab="security" tabindex="-1">
                        <span class="zone-tab__icon" aria-hidden="true">🛡️</span> Bezpečnosť
                    </button>
                    <button class="zone-tab" type="button" role="tab"
                            id="tab-btn-preferences" aria-controls="panel-preferences" aria-selected="false"
                            data-tab="preferences" tabindex="-1">
                        <span class="zone-tab__icon" aria-hidden="true">🎛️</span> Nastavenia
                    </button>
                </div>

                <!-- ── Osobné údaje ─────────────────────────── -->
                <section class="zone-panel zone-panel--active" id="panel-personal"
                         role="tabpanel" aria-labelledby="tab-btn-personal">
                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">📝 Osobné údaje</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <form id="personalForm" onsubmit="savePersonalData(event)" novalidate>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="firstName">Meno</label>
                                        <input type="text" id="firstName" name="first_name" class="form-input" value="Ján" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="lastName">Priezvisko</label>
                                        <input type="text" id="lastName" name="last_name" class="form-input" value="Používateľ" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="profileEmail">Email</label>
                                        <input type="email" id="profileEmail" name="email" class="form-input" value="jan@email.sk" disabled>
                                        <small class="form-hint">Email je viazaný na prihlasovací účet a nemožno ho tu zmeniť.</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone">Telefón</label>
                                        <input type="tel" id="phone" name="phone" class="form-input" value="+421 900 123 456">
                                    </div>
                                    <div class="form-group form-group--full">
                                        <label for="address">Adresa</label>
                                        <input type="text" id="address" name="address" class="form-input" value="Mlynské Nivy 1, 821 09 Bratislava">
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn--primary">
                                        <span aria-hidden="true">💾</span> Uložiť zmeny
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>

                <!-- ── Bezpečnosť ───────────────────────────── -->
                <section class="zone-panel" id="panel-security"
                         role="tabpanel" aria-labelledby="tab-btn-security" hidden>
                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">🔑 Zmena hesla</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <form id="passwordForm" onsubmit="changePassword(event)" novalidate>
                                <div class="form-group">
                                    <label for="currentPassword">Aktuálne heslo</label>
                                    <input type="password" id="currentPassword" name="current_password" class="form-input" autocomplete="current-password" required>
                                </div>
                                <div class="form-group">
                                    <label for="newPassword">Nové heslo</label>
                                    <input type="password" id="newPassword" name="new_password" class="form-input" autocomplete="new-password" required>
                                    <small class="form-hint">Minimálne 8 znakov, 1 veľké písmeno, 1 číslica</small>
                                </div>
                                <div class="form-group">
                                    <label for="newPasswordConfirm">Potvrdenie nového hesla</label>
                                    <input type="password" id="newPasswordConfirm" name="new_password_confirmation" class="form-input" autocomplete="new-password" required>
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn--primary">
                                        <span aria-hidden="true">🗝️</span> Zmeniť heslo
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">🛡️ Dvojfaktorová autentifikácia</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="two-factor-status">
                                <div class="two-factor-status__info">
                                    <span class="two-factor-status__label">Stav</span>
                                    <span class="two-factor-status__value two-factor-status__value--inactive">🔴 Neaktívna</span>
                                </div>
                                <button class="btn btn--primary" type="button" onclick="enable2FA()">
                                    <span aria-hidden="true">🛡️</span> Aktivovať 2FA
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">💻 Aktívne relácie</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="sessions-list" id="sessionsList">
                                <div class="session-item">
                                    <div class="session-item__info">
                                        <span class="session-item__device">💻 Desktop – Chrome</span>
                                        <span class="session-item__location">Bratislava, SK</span>
                                        <span class="session-item__time">Aktívna teraz</span>
                                    </div>
                                    <span class="session-item__status session-item__status--active">✅ Aktívna</span>
                                </div>
                                <div class="session-item">
                                    <div class="session-item__info">
                                        <span class="session-item__device">📱 Mobil – Safari</span>
                                        <span class="session-item__location">Bratislava, SK</span>
                                        <span class="session-item__time">Pred 2 hodinami</span>
                                    </div>
                                    <button class="btn btn--sm btn--danger" type="button" onclick="terminateSession(2)">
                                        Ukončiť
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- ── Nastavenia / predvoľby ────────────────── -->
                <section class="zone-panel" id="panel-preferences"
                         role="tabpanel" aria-labelledby="tab-btn-preferences" hidden>
                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">🔔 Notifikácie</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="preference-list">
                                <label class="preference-item">
                                    <input type="checkbox" checked>
                                    <span class="preference-item__label">Emailové notifikácie</span>
                                </label>
                                <label class="preference-item">
                                    <input type="checkbox" checked>
                                    <span class="preference-item__label">Push notifikácie</span>
                                </label>
                                <label class="preference-item">
                                    <input type="checkbox">
                                    <span class="preference-item__label">SMS notifikácie</span>
                                </label>
                                <label class="preference-item">
                                    <input type="checkbox">
                                    <span class="preference-item__label">Marketingové emaily</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">🎨 Vzhľad</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="preference-list">
                                <label class="preference-item">
                                    <input type="checkbox" id="darkModeToggle">
                                    <span class="preference-item__label">Tmavý režim</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">🌐 Jazyk</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="form-group">
                                <label for="languageSelect">Jazyk rozhrania</label>
                                <select class="form-select" id="languageSelect">
                                    <option value="sk" selected>Slovenčina</option>
                                    <option value="en">English</option>
                                    <option value="de">Deutsch</option>
                                    <option value="hu">Magyar</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="dashboard-card__header">
                            <div class="dashboard-card__heading">
                                <h3 class="dashboard-card__title">📊 Štatistiky účtu</h3>
                            </div>
                        </div>
                        <div class="dashboard-card__body">
                            <div class="account-stats">
                                <div class="account-stat">
                                    <span class="account-stat__label">Dátum registrácie</span>
                                    <span class="account-stat__value" id="registrationDate">15.01.2024</span>
                                </div>
                                <div class="account-stat">
                                    <span class="account-stat__label">Posledné prihlásenie</span>
                                    <span class="account-stat__value" id="lastLogin">Dnes 14:30</span>
                                </div>
                                <div class="account-stat">
                                    <span class="account-stat__label">Celkový čas používania</span>
                                    <span class="account-stat__value" id="totalTime">124 hodín</span>
                                </div>
                                <div class="account-stat">
                                    <span class="account-stat__label">Verzia účtu</span>
                                    <span class="account-stat__value" id="accountVersion">FREE</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- ── Pätička ──────────────────────────────── -->
            <footer class="zone-footer zone-footer--centered" role="contentinfo">
                <div class="zone-footer__inner">
                    <div class="zone-footer__brand">
                        <a href="../index.html" class="zone-footer__logo">
                            Easy<span class="zone-footer__logo-accent">Way</span>
                        </a>
                        <span class="zone-footer__tagline">Komplexná platforma pre správu prepravy a logistiky.</span>
                    </div>
                    <span class="zone-footer__bottom">&copy; 2026 EasyWay Platform. All rights reserved.</span>
                </div>
            </footer>
        </main>

        <!-- ═══════════════════════════════════════════
             ZASÚVACÍ KONTROLNÝ PANEL (VPRAVO)
             ═══════════════════════════════════════════ -->
        <aside class="sidebar" id="sidebar" aria-label="Kontrolný panel">
            <div class="sidebar__header">
                <a href="./dashboard.html" class="sidebar__logo">
                    <span class="sidebar__logo-text">
                        <span class="sidebar__logo-text--primary">Easy</span>
                        <span class="sidebar__logo-text--secondary">Way</span>
                    </span>
                    <span class="sidebar__logo-badge">Používateľ</span>
                </a>
                <button class="sidebar__toggle" type="button" id="sidebarToggle"
                        onclick="toggleSidebar()" aria-controls="sidebar" aria-expanded="true"
                        aria-label="Zbaliť kontrolný panel">
                    <span aria-hidden="true">◀</span>
                </button>
            </div>

            <nav class="sidebar__nav" aria-label="Sekcie">
                <ul class="sidebar__list">
                    <li class="sidebar__item">
                        <a href="./dashboard.html" class="sidebar__link">
                            <span class="sidebar__icon" aria-hidden="true">📊</span>
                            <span class="sidebar__label">Dashboard</span>
                        </a>
                    </li>
                    <li class="sidebar__item">
                        <a href="./subscriptions.html" class="sidebar__link">
                            <span class="sidebar__icon" aria-hidden="true">💳</span>
                            <span class="sidebar__label">Predplatné</span>
                            <span class="sidebar__badge sidebar__badge--success">Aktívne</span>
                        </a>
                    </li>
                    <li class="sidebar__divider" aria-hidden="true"></li>
                    <li class="sidebar__item">
                        <a href="./statistics.html" class="sidebar__link">
                            <span class="sidebar__icon" aria-hidden="true">📈</span>
                            <span class="sidebar__label">Štatistiky</span>
                        </a>
                    </li>
                    <li class="sidebar__item">
                        <a href="./profile.html" class="sidebar__link sidebar__link--active" aria-current="page">
                            <span class="sidebar__icon" aria-hidden="true">👤</span>
                            <span class="sidebar__label">Profil</span>
                        </a>
                    </li>
                    <li class="sidebar__item">
                        <a href="./settings.html" class="sidebar__link">
                            <span class="sidebar__icon" aria-hidden="true">⚙️</span>
                            <span class="sidebar__label">Nastavenia</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="sidebar__footer">
                <div class="sidebar__user">
                    <div class="sidebar__user-avatar" aria-hidden="true">👤</div>
                    <div class="sidebar__user-info">
                        <div class="sidebar__user-name">Ján Používateľ</div>
                        <div class="sidebar__user-email">jan@email.sk</div>
                    </div>
                </div>
                <button class="sidebar__logout" type="button" onclick="logout()">
                    <span aria-hidden="true">🚪</span> Odhlásiť
                </button>
            </div>
        </aside>

        <!-- Pozadie ovládacieho panela (pod malými obrazovkami).
             Stojí za panelom, aby ho vedel označiť súladníkom `~`. -->
        <div class="app__backdrop" id="panelBackdrop" aria-hidden="true"></div>
    </div>

    <!-- ═══════════════════════════════════════════
         MODÁL – aktivácia 2FA
         ═══════════════════════════════════════════ -->
    <div class="modal" id="twoFactorModal" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="twoFactorModalTitle">
        <div class="modal__overlay" onclick="close2FAModal()"></div>
        <div class="modal__content">
            <div class="modal__header">
                <h2 class="modal__title" id="twoFactorModalTitle">🔐 Aktivácia 2FA</h2>
                <button class="modal__close" type="button" onclick="close2FAModal()" aria-label="Zavrieť">✕</button>
            </div>
            <div class="modal__body" id="twoFactorModalBody">
                <!-- Dynamicky generované -->
            </div>
        </div>
    </div>

    <script>
    /**
     * ============================================================
     * USER PROFILE
     * ============================================================
     */
    (function() {
        'use strict';

        var MOBILE_QUERY = '(max-width: 920px)';
        var MOBILE_BREAKPOINT = 920;

        var sidebar = document.getElementById('sidebar');
        var backdrop = document.getElementById('panelBackdrop');
        var headerToggle = document.getElementById('panelToggle');
        var sidebarToggle = document.getElementById('sidebarToggle');
        var mobileQuery = window.matchMedia(MOBILE_QUERY);

        /* ------------------------------------------------------------
         * Ovládanie zasúvacieho kontrolného panelu
         * - na širokých obrazovkách sa panel zbali do úzkej lišty
         * - na úzkych obrazovkách funguje ako šuflík sprava -> doľava
         * ------------------------------------------------------------ */
        function isMobile() {
            /*
             * Šírka sa číta priamo z rozloženia dokumentu a nie z MediaQueryList.
             * MediaQueryList totiž pri prvom čítaní vracia hodnotu z poslednej
             * commitnutej miery (v novo otvorenom rámme býva 300x150), takže by
             * sa panel na širokej obrazovke pri načítaní zbytočne zbalil.
             */
            return document.documentElement.clientWidth <= MOBILE_BREAKPOINT;
        }

        function isPanelOpen() {
            return isMobile() ? sidebar.classList.contains('sidebar--open')
                              : !sidebar.classList.contains('sidebar--collapsed');
        }

        function syncPanelState() {
            var open = isPanelOpen();

            if (backdrop) {
                backdrop.classList.toggle('is-visible', isMobile() && open);
            }

            document.body.classList.toggle('panel-open', isMobile() && open);

            [headerToggle, sidebarToggle].forEach(function (button) {
                if (button) {
                    button.setAttribute('aria-expanded', String(open));
                }
            });

            // Zrkadlové tlačidlá: na širokej obrazovke smerujú dovnútra stĺpca.
            if (sidebarToggle) {
                sidebarToggle.setAttribute(
                    'aria-label',
                    open ? 'Zbaliť kontrolný panel' : 'Rozbaliť kontrolný panel'
                );
            }
        }

        /*
         * Stav panela:
         * - široká obrazovka  -> trieda `sidebar--collapsed` = úzka lišta
         * - úzka obrazovka    -> trieda `sidebar--open`       = otvorený šuflík
         * triedy sa nikdy neprekrývajú, aby sa ich CSS nedalo zamieňať.
         */
        function toggleSidebar() {
            if (isMobile()) {
                sidebar.classList.toggle('sidebar--open');
            } else {
                sidebar.classList.toggle('sidebar--collapsed');
            }
            syncPanelState();
        }

        function closePanel() {
            sidebar.classList.remove('sidebar--open');
            sidebar.classList.remove('sidebar--collapsed');
            syncPanelState();
        }

        if (backdrop) {
            backdrop.addEventListener('click', closePanel);
        }

        document.addEventListener('keydown', function (event) {
            if (event.key !== 'Escape') {
                return;
            }

            if (document.getElementById('twoFactorModal').style.display === 'flex') {
                close2FAModal();
                return;
            }

            if (isMobile() && sidebar.classList.contains('sidebar--open')) {
                closePanel();
            }
        });

        // Pri zmene šírky okna sa panel prepne do správneho režimu.
        mobileQuery.addEventListener('change', function () {
            sidebar.classList.remove('sidebar--open');
            sidebar.classList.remove('sidebar--collapsed');
            document.body.classList.remove('panel-open');
            syncPanelState();
        });

        /*
         * Verejné horné menu – rovnaké správanie ako na landing stránke:
         * na úzkych obrazovkách sa rozbalí do rozbaľovacieho zoznamu
         * a po scrollnutí sa pod hlavičku objaví tieň.
         */
        const siteHeader = document.getElementById('siteHeader');
        const navToggle = document.getElementById('navToggle');
        const navList = document.getElementById('siteNavList');

        if (navToggle && navList) {
            navToggle.addEventListener('click', function () {
                const open = navToggle.classList.toggle('nav__toggle--active');
                navList.classList.toggle('nav__list--open', open);
                navToggle.setAttribute('aria-expanded', String(open));
                navToggle.setAttribute('aria-label', open ? 'Zavrieť menu' : 'Otvoriť menu');
            });

            // Kliknutie na položku menu zavrie rozbaľovací zoznam.
            navList.querySelectorAll('.nav__link').forEach(function (link) {
                link.addEventListener('click', function () {
                    navToggle.classList.remove('nav__toggle--active');
                    navList.classList.remove('nav__list--open');
                    navToggle.setAttribute('aria-expanded', 'false');
                    navToggle.setAttribute('aria-label', 'Otvoriť menu');
                });
            });
        }

        if (siteHeader) {
            var syncSiteHeader = function () {
                siteHeader.classList.toggle('site-header--scrolled', window.scrollY > 50);
            };

            window.addEventListener('scroll', syncSiteHeader, { passive: true });
            syncSiteHeader();
        }

        /* ============================================================
         * ZÁLOŽKY
         * ============================================================ */

        var TAB_IDS = ['personal', 'security', 'preferences'];

        /**
         * Prepnutie záložiek
         */
        function switchTab(tabId) {
            if (TAB_IDS.indexOf(tabId) === -1) {
                return;
            }

            document.querySelectorAll('.zone-tab').forEach(function (tab) {
                var isActive = tab.dataset.tab === tabId;
                tab.classList.toggle('zone-tab--active', isActive);
                tab.setAttribute('aria-selected', String(isActive));
                tab.setAttribute('tabindex', isActive ? '0' : '-1');
            });

            document.querySelectorAll('.zone-panel').forEach(function (panel) {
                var isActive = panel.id === 'panel-' + tabId;
                panel.classList.toggle('zone-panel--active', isActive);
                // `hidden` kryje panel aj bez CSS (pre čítačky obrazovky a tlač).
                panel.hidden = !isActive;
            });
        }

        /**
         * Prepnutie záložky aj podľa kľúča v URL (#personal / #security / #preferences).
         * Nastavenia na tejto zóne odkazujú na `./profile.html#security`.
         */
        function syncTabFromHash() {
            var requested = (window.location.hash || '').replace('#', '');

            if (TAB_IDS.indexOf(requested) !== -1) {
                switchTab(requested);
                return true;
            }
            return false;
        }

        /**
         * Aktualizácia času poslednej načítanej platby v aplikačnej lište
         */
        function markUpdated() {
            var stamp = document.getElementById('lastUpdate');
            if (stamp) {
                stamp.textContent = new Date().toLocaleTimeString('sk-SK');
            }
        }

        /**
         * Ručné obnovenie dát cez tlačidlo Obnoviť
         */
        function refreshProfile() {
            markUpdated();
            showNotification('Údaje profilu boli obnovené', 'success');
        }

        /* ============================================================
         * PROFIL
         * ============================================================ */

        /**
         * Uloženie osobných údajov
         */
        async function savePersonalData(event) {
            event.preventDefault();

            const form = document.getElementById('personalForm');
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            try {
                const response = await fetch('/api/v1/user/profile', {
                    method: 'PUT',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                });

                if (!response.ok) {
                    throw new Error('Chyba pri ukladaní údajov');
                }

                showNotification('Osobné údaje boli úspešne uložené', 'success');

            } catch (error) {
                console.error('Save profile error:', error);
                showNotification('Chyba pri ukladaní údajov', 'error');
            }
        }

        /**
         * Zmena hesla
         */
        async function changePassword(event) {
            event.preventDefault();

            const form = document.getElementById('passwordForm');
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            if (data.new_password !== data.new_password_confirmation) {
                showNotification('Heslá sa nezhodujú', 'error');
                return;
            }

            try {
                const response = await fetch('/api/v1/auth/change-password', {
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        current_password: data.current_password,
                        new_password: data.new_password,
                    }),
                });

                if (!response.ok) {
                    throw new Error('Chyba pri zmene hesla');
                }

                form.reset();
                showNotification('Heslo bolo úspešne zmenené', 'success');

            } catch (error) {
                console.error('Change password error:', error);
                showNotification('Chyba pri zmene hesla', 'error');
            }
        }

        /**
         * Aktivácia 2FA
         */
        async function enable2FA() {
            try {
                const response = await fetch('/api/v1/auth/2fa/generate', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                        'Accept': 'application/json',
                    },
                });

                if (!response.ok) {
                    throw new Error('Chyba pri generovaní 2FA');
                }

                const data = await response.json();

                document.getElementById('twoFactorModalBody').innerHTML = `
                    <div class="two-factor-setup">
                        <p class="two-factor-setup__description">
                            Naskenujte tento QR kód v aplikácii Google Authenticator:
                        </p>
                        <div class="two-factor-setup__qr">
                            <img src="${data.qr_code}" alt="QR kód pre 2FA" width="180" height="180">
                        </div>
                        <div class="two-factor-setup__secret">
                            <span class="two-factor-setup__secret-label">Alebo zadajte tento kľúč manuálne:</span>
                            <div class="two-factor-setup__secret-value">${data.secret}</div>
                        </div>
                        <form onsubmit="verify2FA(event)" class="two-factor-setup__form" novalidate>
                            <div class="form-group">
                                <label for="twoFactorCode">Overovací kód</label>
                                <input type="text" id="twoFactorCode" name="code" class="form-input form-input--code"
                                       inputmode="numeric" autocomplete="one-time-code"
                                       maxlength="6" placeholder="123456" required>
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn btn--secondary" onclick="close2FAModal()">Zrušiť</button>
                                <button type="submit" class="btn btn--primary">Overiť a aktivovať</button>
                            </div>
                        </form>
                    </div>
                `;

                document.getElementById('twoFactorModal').style.display = 'flex';
                document.getElementById('twoFactorCode').focus();

            } catch (error) {
                console.error('2FA enable error:', error);
                showNotification('Chyba pri aktivácii 2FA', 'error');
            }
        }

        /**
         * Verifikácia 2FA
         */
        async function verify2FA(event) {
            event.preventDefault();

            const form = event.target;
            const code = form.querySelector('input[name="code"]').value;

            try {
                const response = await fetch('/api/v1/auth/2fa/enable', {
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ code }),
                });

                if (!response.ok) {
                    throw new Error('Chyba pri overovaní 2FA');
                }

                close2FAModal();
                showNotification('2FA bola úspešne aktivovaná', 'success');

                const twoFactorValue = document.querySelector('.two-factor-status__value');
                twoFactorValue.textContent = '🟢 Aktívna';
                twoFactorValue.className = 'two-factor-status__value two-factor-status__value--active';

            } catch (error) {
                console.error('2FA verify error:', error);
                showNotification('Chyba pri overovaní 2FA kódu', 'error');
            }
        }

        /**
         * Zatvorenie 2FA modálu
         */
        function close2FAModal() {
            document.getElementById('twoFactorModal').style.display = 'none';
        }

        /**
         * Nahrávanie avataru
         */
        function uploadAvatar() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = async function() {
                const file = this.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('avatar', file);

                try {
                    const response = await fetch('/api/v1/user/profile/avatar', {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
                        },
                        body: formData,
                    });

                    if (!response.ok) {
                        throw new Error('Chyba pri nahrávaní avataru');
                    }

                    const data = await response.json();
                    document.getElementById('profileAvatar').src = data.avatar_url + '?t=' + Date.now();
                    showNotification('Avatar bol úspešne nahraný', 'success');

                } catch (error) {
                    console.error('Avatar upload error:', error);
                    showNotification('Chyba pri nahrávaní avataru', 'error');
                }
            };
            input.click();
        }

        /**
         * Ukončenie relácie
         */
        function terminateSession(sessionId) {
            if (confirm('Naozaj chcete ukončiť túto reláciu?')) {
                showNotification('Relácia bola ukončená', 'success');
            }
        }

        /**
         * Odhlásenie (funkcia je zároveň prepísaná v global-modes.js)
         */
        function logout() {
            if (confirm('Naozaj sa chcete odhlásiť?')) {
                localStorage.clear();
                window.location.href = '../../auth/login.html';
            }
        }

        /* ============================================================
         * OZNÁMENIA
         * ============================================================ */

        const TOAST_ICONS = {
            success: '✅',
            error: '⚠️',
            warning: '🔔',
            info: 'ℹ️',
        };

        /**
         * Zobrazenie notifikácie
         */
        function showNotification(message, type = 'info') {
            const toast = document.createElement('div');
            const variant = TOAST_ICONS[type] ? type : 'info';

            toast.className = `zone-toast zone-toast--${variant}`;
            toast.setAttribute('role', variant === 'error' ? 'alert' : 'status');

            const icon = document.createElement('span');
            icon.setAttribute('aria-hidden', 'true');
            icon.textContent = TOAST_ICONS[variant];

            const text = document.createElement('span');
            text.textContent = message;

            toast.append(icon, text);
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.classList.add('is-closing');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // Globálne funkcie
        window.toggleSidebar = toggleSidebar;
        window.logout = logout;
        window.switchTab = switchTab;
        window.refreshProfile = refreshProfile;
        window.savePersonalData = savePersonalData;
        window.changePassword = changePassword;
        window.enable2FA = enable2FA;
        window.verify2FA = verify2FA;
        window.close2FAModal = close2FAModal;
        window.uploadAvatar = uploadAvatar;
        window.terminateSession = terminateSession;
        window.showNotification = showNotification;

        // Inicializácia
        document.addEventListener('DOMContentLoaded', function() {
            // Stav bez triedy je na širokej obrazovke plne rozvinutý a šuflík zavretý.
            syncPanelState();

            document.querySelectorAll('.zone-tab').forEach(function (tab) {
                tab.addEventListener('click', function () {
                    switchTab(this.dataset.tab);
                });
            });

            // Klávesnica: šípky posúvajú výber po lište záložiek.
            document.querySelector('.zone-tabs').addEventListener('keydown', function (event) {
                var tabs = Array.prototype.slice.call(document.querySelectorAll('.zone-tab'));
                var current = tabs.indexOf(document.activeElement);

                if (current === -1) {
                    return;
                }

                var next = null;
                if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
                    next = (current + 1) % tabs.length;
                } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
                    next = (current - 1 + tabs.length) % tabs.length;
                } else if (event.key === 'Home') {
                    next = 0;
                } else if (event.key === 'End') {
                    next = tabs.length - 1;
                }

                if (next !== null) {
                    event.preventDefault();
                    tabs[next].focus();
                    switchTab(tabs[next].dataset.tab);
                }
            });

            // Priamy odkaz na konkrétnu záložku (#security) ju rovno otvorí.
            window.addEventListener('hashchange', syncTabFromHash);
            syncTabFromHash();

            // Dark mode
            document.getElementById('darkModeToggle').addEventListener('change', function() {
                document.documentElement.setAttribute('data-theme', this.checked ? 'dark' : 'light');
                localStorage.setItem('theme', this.checked ? 'dark' : 'light');
            });

            const savedTheme = localStorage.getItem('theme');
            if (savedTheme === 'dark') {
                document.getElementById('darkModeToggle').checked = true;
                document.documentElement.setAttribute('data-theme', 'dark');
            } else if (savedTheme === 'light') {
                document.documentElement.setAttribute('data-theme', 'light');
            }

            // Language
            document.getElementById('languageSelect').addEventListener('change', function() {
                localStorage.setItem('language', this.value);
                showNotification(`Jazyk zmenený na ${this.options[this.selectedIndex].text}`, 'success');
            });

            const savedLang = localStorage.getItem('language');
            if (savedLang) {
                document.getElementById('languageSelect').value = savedLang;
            }

            markUpdated();
        });

    })();
    </script>
</body>
</html>