@extends('layouts.modern')

@section('title', 'Nastavení profilu - MARKOVI')
@section('breadcrumb-section', 'Uživatel')
@section('breadcrumb-page', 'Nastavení profilu')

@section('content')
<div class="page-header">
    <h1 class="page-title">
        <i class="fas fa-user-cog" style="margin-right: 0.5rem; color: var(--primary-500);"></i>
        Nastavení profilu
    </h1>
    <p class="page-subtitle">Spravujte své osobní údaje a nastavení účtu</p>
</div>

<!-- Success/Error Messages -->
@if (session('success'))
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i>
        {{ session('success') }}
    </div>
@endif

@if (session('error'))
    <div class="alert alert-error">
        <i class="fas fa-exclamation-circle"></i>
        {{ session('error') }}
    </div>
@endif

<div class="profile-container">
    <!-- Profile Overview Card -->
    <div class="card profile-overview">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-user" style="margin-right: 0.5rem;"></i>
                Přehled profilu
            </h3>
        </div>
        <div class="card-body">
            <div class="profile-info">
                <div class="profile-avatar">
                    <div class="avatar-circle">
                        @if(Auth::user()->avatar)
                            <img src="{{ url('storage/' . Auth::user()->avatar) }}" alt="{{ Auth::user()->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                        @else
                            {{ strtoupper(substr(Auth::user()->name, 0, 2)) }}
                        @endif
                    </div>
                    <button class="btn btn-secondary btn-sm" onclick="changeAvatar()">
                        <i class="fas fa-camera"></i>
                        Změnit avatar
                    </button>
                </div>
                <div class="profile-details">
                    <h4>{{ Auth::user()->name }}</h4>
                    <p class="text-gray-600">{{ Auth::user()->email }}</p>
                    <div class="profile-stats">
                        <div class="stat-item">
                            <span class="stat-label">Člen od:</span>
                            <span class="stat-value">{{ Auth::user()->created_at->format('d.m.Y') }}</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">Poslední přihlášení:</span>
                            <span class="stat-value">{{ Auth::user()->updated_at->format('d.m.Y H:i') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Profile Settings Tabs -->
    <div class="profile-tabs">
        <div class="tab-navigation">
            <button class="tab-button active" data-tab="personal">
                <i class="fas fa-user"></i>
                Osobní údaje
            </button>
            <button class="tab-button" data-tab="security">
                <i class="fas fa-shield-alt"></i>
                Zabezpečení
            </button>
            <button class="tab-button" data-tab="preferences">
                <i class="fas fa-cog"></i>
                Předvolby
            </button>
            <button class="tab-button" data-tab="roles">
                <i class="fas fa-user-shield"></i>
                Role a oprávnění
            </button>
            <button class="tab-button" data-tab="notifications">
                <i class="fas fa-bell"></i>
                Notifikace
            </button>
        </div>

        <!-- Personal Information Tab -->
        <div class="tab-content active" id="personal">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Osobní informace</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('profile.update') }}" id="personalForm">
                        @csrf
                        @method('PUT')

                        <div class="form-row">
                            <div class="form-group">
                                <label for="name" class="form-label">
                                    <i class="fas fa-user" style="margin-right: 0.5rem;"></i>
                                    Celé jméno
                                </label>
                                <input 
                                    type="text" 
                                    id="name" 
                                    name="name" 
                                    class="form-input" 
                                    value="{{ old('name', Auth::user()->name) }}" 
                                    required
                                >
                                @error('name')
                                    <span class="form-error">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="email" class="form-label">
                                    <i class="fas fa-envelope" style="margin-right: 0.5rem;"></i>
                                    Email
                                </label>
                                <input 
                                    type="email" 
                                    id="email" 
                                    name="email" 
                                    class="form-input" 
                                    value="{{ old('email', Auth::user()->email) }}" 
                                    required
                                >
                                @error('email')
                                    <span class="form-error">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="phone" class="form-label">
                                    <i class="fas fa-phone" style="margin-right: 0.5rem;"></i>
                                    Telefon
                                </label>
                                <input 
                                    type="tel" 
                                    id="phone" 
                                    name="phone" 
                                    class="form-input" 
                                    value="{{ old('phone', Auth::user()->phone ?? '') }}"
                                    placeholder="+420 123 456 789"
                                >
                            </div>

                            <div class="form-group">
                                <label for="company" class="form-label">
                                    <i class="fas fa-building" style="margin-right: 0.5rem;"></i>
                                    Společnost
                                </label>
                                <input 
                                    type="text" 
                                    id="company" 
                                    name="company" 
                                    class="form-input" 
                                    value="{{ old('company', Auth::user()->company ?? '') }}"
                                    placeholder="Název společnosti"
                                >
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Uložit změny
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                <i class="fas fa-undo"></i>
                                Zrušit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security Tab -->
        <div class="tab-content" id="security">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Změna hesla</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('profile.password') }}" id="passwordForm">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="current_password" class="form-label">
                                <i class="fas fa-lock" style="margin-right: 0.5rem;"></i>
                                Současné heslo
                            </label>
                            <div class="password-input">
                                <input 
                                    type="password" 
                                    id="current_password" 
                                    name="current_password" 
                                    class="form-input" 
                                    required
                                >
                                <button type="button" class="password-toggle" onclick="togglePassword('current_password')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            @error('current_password')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password" class="form-label">
                                <i class="fas fa-key" style="margin-right: 0.5rem;"></i>
                                Nové heslo
                            </label>
                            <div class="password-input">
                                <input 
                                    type="password" 
                                    id="password" 
                                    name="password" 
                                    class="form-input" 
                                    required
                                    minlength="8"
                                >
                                <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="password-strength" id="passwordStrength">
                                <div class="strength-bar">
                                    <div class="strength-fill" id="strengthFill"></div>
                                </div>
                                <div class="strength-text" id="strengthText">Síla hesla</div>
                            </div>
                            @error('password')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password_confirmation" class="form-label">
                                <i class="fas fa-check" style="margin-right: 0.5rem;"></i>
                                Potvrzení nového hesla
                            </label>
                            <div class="password-input">
                                <input 
                                    type="password" 
                                    id="password_confirmation" 
                                    name="password_confirmation" 
                                    class="form-input" 
                                    required
                                >
                                <button type="button" class="password-toggle" onclick="togglePassword('password_confirmation')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="passwordMatch" class="password-match"></div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-shield-alt"></i>
                                Změnit heslo
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Two-Factor Authentication -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Dvoufaktorové ověření</h3>
                </div>
                <div class="card-body">
                    <div class="security-option">
                        <div class="option-info">
                            <h4>SMS ověření</h4>
                            <p>Přidejte další vrstvu zabezpečení pomocí SMS kódů</p>
                        </div>
                        <div class="option-action">
                            <label class="toggle-switch">
                                <input type="checkbox" id="sms2fa">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>

                    <div class="security-option">
                        <div class="option-info">
                            <h4>Email ověření</h4>
                            <p>Dostávejte ověřovací kódy na váš email</p>
                        </div>
                        <div class="option-action">
                            <label class="toggle-switch">
                                <input type="checkbox" id="email2fa">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preferences Tab -->
        <div class="tab-content" id="preferences">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Předvolby aplikace</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('profile.preferences') }}" id="preferencesForm">
                        @csrf
                        @method('PUT')

                        <div class="preference-group">
                            <h4>Jazyk a region</h4>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="language" class="form-label">Jazyk</label>
                                    <select id="language" name="language" class="form-select">
                                        <option value="cs">Čeština</option>
                                        <option value="en">English</option>
                                        <option value="sk">Slovenčina</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="timezone" class="form-label">Časové pásmo</label>
                                    <select id="timezone" name="timezone" class="form-select">
                                        <option value="Europe/Prague">Praha (UTC+1)</option>
                                        <option value="Europe/London">Londýn (UTC+0)</option>
                                        <option value="America/New_York">New York (UTC-5)</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="preference-group">
                            <h4>Zobrazení</h4>
                            <div class="preference-option">
                                <div class="option-info">
                                    <h5>Tmavý režim</h5>
                                    <p>Přepnout na tmavé téma aplikace</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="dark_mode" name="dark_mode">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="preference-option">
                                <div class="option-info">
                                    <h5>Kompaktní zobrazení</h5>
                                    <p>Zobrazit více informací na menším prostoru</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="compact_view" name="compact_view">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                Uložit předvolby
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Roles and Permissions Tab -->
        <div class="tab-content" id="roles">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Vaše role a oprávnění</h3>
                </div>
                <div class="card-body">
                    <div class="role-overview">
                        <div class="current-role">
                            <div class="role-badge">
                                <i class="fas fa-user-shield"></i>
                                <div class="role-info">
                                    <h4>{{ Auth::user()->getRoleDisplayName() }}</h4>
                                    <p>{{ Auth::user()->role ? Auth::user()->role->description : 'Základní uživatelská role' }}</p>
                                </div>
                                <div class="role-level">
                                    <span class="level-badge">Úroveň {{ Auth::user()->role ? Auth::user()->role->level : 0 }}</span>
                                </div>
                            </div>
                        </div>

                        @if(Auth::user()->role)
                            <div class="permissions-grid">
                                @php
                                    $permissionsByCategory = Auth::user()->getPermissionsByCategory();
                                @endphp

                                @foreach($permissionsByCategory as $category => $permissions)
                                    <div class="permission-category">
                                        <h5 class="category-title">
                                            <i class="{{ $permissions->first()->icon_class }}"></i>
                                            {{ $permissions->first()->category_display_name }}
                                        </h5>
                                        <div class="permissions-list">
                                            @foreach($permissions as $permission)
                                                <div class="permission-item">
                                                    <i class="fas fa-check permission-check"></i>
                                                    <span class="permission-name">{{ $permission->display_name }}</span>
                                                    @if($permission->description)
                                                        <span class="permission-description">{{ $permission->description }}</span>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="no-permissions">
                                <i class="fas fa-info-circle"></i>
                                <p>Nemáte přiřazenou žádnou roli. Kontaktujte administrátora.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            @if(Auth::user()->isAdmin())
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Správa rolí (pouze pro administrátory)</h3>
                    </div>
                    <div class="card-body">
                        <div class="admin-actions">
                            <div class="admin-info">
                                <i class="fas fa-info-circle"></i>
                                <p>Administrační sekce pro správu rolí a uživatelů bude dostupná v budoucí verzi aplikace.</p>
                            </div>
                            
                            @php
                                $hasAdminRoutes = Route::has('admin.roles.index') && Route::has('admin.users.index');
                            @endphp
                            
                            @if($hasAdminRoutes)
                                <a href="{{ route('admin.roles.index') }}" class="btn btn-primary">
                                    <i class="fas fa-users-cog"></i>
                                    Spravovat role
                                </a>
                                <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-users"></i>
                                    Spravovat uživatele
                                </a>
                            @else
                                <button class="btn btn-secondary" disabled>
                                    <i class="fas fa-users-cog"></i>
                                    Spravovat role (připravuje se)
                                </button>
                                <button class="btn btn-secondary" disabled>
                                    <i class="fas fa-users"></i>
                                    Spravovat uživatele (připravuje se)
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Notifications Tab -->
        <div class="tab-content" id="notifications">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Nastavení notifikací</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('profile.notifications') }}" id="notificationsForm">
                        @csrf
                        @method('PUT')

                        <div class="notification-group">
                            <h4>Email notifikace</h4>
                            
                            <div class="notification-option">
                                <div class="option-info">
                                    <h5>Nové zprávy</h5>
                                    <p>Dostávat email při nových zprávách</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="email_messages" name="email_messages" checked>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="notification-option">
                                <div class="option-info">
                                    <h5>Připomínky kontrol</h5>
                                    <p>Email připomínky nadcházejících kontrol</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="email_inspections" name="email_inspections" checked>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="notification-option">
                                <div class="option-info">
                                    <h5>Systémové aktualizace</h5>
                                    <p>Informace o nových funkcích a aktualizacích</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="email_updates" name="email_updates">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="notification-group">
                            <h4>Push notifikace</h4>
                            
                            <div class="notification-option">
                                <div class="option-info">
                                    <h5>Povolit push notifikace</h5>
                                    <p>Dostávat notifikace v prohlížeči</p>
                                </div>
                                <div class="option-action">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="push_enabled" name="push_enabled">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-bell"></i>
                                Uložit nastavení
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.profile-container {
    max-width: 1200px;
    margin: 0 auto;
}

.profile-overview {
    margin-bottom: var(--space-8);
}

.profile-info {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.profile-avatar {
    text-align: center;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-lg);
}

.profile-details h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.profile-stats {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.stat-value {
    font-weight: 600;
    color: var(--gray-900);
}

.profile-tabs {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.tab-navigation {
    display: flex;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.tab-button {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border: none;
    background: none;
    color: var(--gray-600);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.tab-button:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.tab-button.active {
    background: white;
    color: var(--primary-600);
    border-bottom: 2px solid var(--primary-500);
}

.tab-content {
    display: none;
    padding: var(--space-6);
}

.tab-content.active {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.form-actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.password-input {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: var(--space-1);
}

.password-toggle:hover {
    color: var(--gray-600);
}

.password-strength {
    margin-top: var(--space-2);
}

.strength-bar {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-text {
    font-size: 0.75rem;
    color: var(--gray-600);
}

.strength-weak { background: var(--error-500); }
.strength-fair { background: var(--warning-500); }
.strength-good { background: var(--success-500); }
.strength-strong { background: #059669; }

.password-match {
    margin-top: var(--space-2);
    font-size: 0.75rem;
}

.security-option,
.preference-option,
.notification-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--gray-100);
}

.security-option:last-child,
.preference-option:last-child,
.notification-option:last-child {
    border-bottom: none;
}

.option-info h4,
.option-info h5 {
    margin: 0 0 var(--space-1) 0;
    color: var(--gray-900);
}

.option-info p {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

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

input:checked + .toggle-slider {
    background-color: var(--primary-500);
}

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

.preference-group,
.notification-group {
    margin-bottom: var(--space-8);
}

.preference-group h4,
.notification-group h4 {
    margin-bottom: var(--space-4);
    color: var(--gray-900);
    font-weight: 600;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-2);
}

.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-error {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--error-500);
}

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-500);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Role and Permissions Styles */
.role-overview {
    margin-bottom: var(--space-6);
}

.current-role {
    margin-bottom: var(--space-8);
}

.role-badge {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
}

.role-badge i {
    font-size: 2rem;
    color: var(--primary-600);
}

.role-info {
    flex: 1;
}

.role-info h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 var(--space-1) 0;
}

.role-info p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.875rem;
}

.role-level {
    text-align: right;
}

.level-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--primary-600);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.permission-category {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.category-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-300);
}

.category-title i {
    color: var(--primary-600);
}

.permissions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.permission-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
}

.permission-check {
    color: var(--success-500);
    font-size: 0.75rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.permission-name {
    font-weight: 500;
    color: var(--gray-900);
    font-size: 0.875rem;
}

.permission-description {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: var(--space-1);
}

.no-permissions {
    text-align: center;
    padding: var(--space-8);
    color: var(--gray-600);
}

.no-permissions i {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: var(--space-4);
}

.no-permissions p {
    font-size: 1.125rem;
    margin: 0;
}

.admin-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

.admin-actions .btn {
    min-width: 160px;
}

.admin-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.admin-info i {
    color: var(--blue-600);
    font-size: 1.25rem;
}

.admin-info p {
    margin: 0;
    color: var(--blue-800);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .profile-info {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        justify-content: center;
    }

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

    .tab-navigation {
        flex-wrap: wrap;
    }

    .tab-button {
        flex: 1 1 50%;
        min-width: 120px;
    }

    .security-option,
    .preference-option,
    .notification-option {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');

            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));

            // Add active class to clicked button and corresponding content
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });

    // Password toggle functionality
    window.togglePassword = function(inputId) {
        const input = document.getElementById(inputId);
        const button = input.nextElementSibling;
        const icon = button.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'fas fa-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'fas fa-eye';
        }
    };

    // Password strength checker
    const passwordInput = document.getElementById('password');
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');

    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let score = 0;
            let feedback = '';

            if (password.length >= 8) score += 1;
            if (password.match(/[a-z]/)) score += 1;
            if (password.match(/[A-Z]/)) score += 1;
            if (password.match(/[0-9]/)) score += 1;
            if (password.match(/[^a-zA-Z0-9]/)) score += 1;

            strengthFill.className = 'strength-fill';

            switch(score) {
                case 0:
                case 1:
                    strengthFill.style.width = '20%';
                    strengthFill.classList.add('strength-weak');
                    feedback = 'Velmi slabé';
                    break;
                case 2:
                    strengthFill.style.width = '40%';
                    strengthFill.classList.add('strength-weak');
                    feedback = 'Slabé';
                    break;
                case 3:
                    strengthFill.style.width = '60%';
                    strengthFill.classList.add('strength-fair');
                    feedback = 'Střední';
                    break;
                case 4:
                    strengthFill.style.width = '80%';
                    strengthFill.classList.add('strength-good');
                    feedback = 'Dobré';
                    break;
                case 5:
                    strengthFill.style.width = '100%';
                    strengthFill.classList.add('strength-strong');
                    feedback = 'Velmi silné';
                    break;
            }

            strengthText.textContent = feedback;
            checkPasswordMatch();
        });
    }

    // Password match checker
    const passwordConfirmation = document.getElementById('password_confirmation');
    const passwordMatch = document.getElementById('passwordMatch');

    function checkPasswordMatch() {
        if (!passwordConfirmation || !passwordMatch || !passwordInput) return;
        
        if (passwordConfirmation.value === '') {
            passwordMatch.textContent = '';
            return;
        }

        if (passwordInput.value === passwordConfirmation.value) {
            passwordMatch.innerHTML = '<i class="fas fa-check" style="color: var(--success-500); margin-right: 4px;"></i>Hesla se shodují';
            passwordMatch.style.color = 'var(--success-500)';
        } else {
            passwordMatch.innerHTML = '<i class="fas fa-times" style="color: var(--error-500); margin-right: 4px;"></i>Hesla se neshodují';
            passwordMatch.style.color = 'var(--error-500)';
        }
    }

    if (passwordConfirmation) {
        passwordConfirmation.addEventListener('input', checkPasswordMatch);
    }

    // Change avatar functionality
    window.changeAvatar = function() {
        // Create file input element
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*';
        fileInput.style.display = 'none';
        
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Validate file size (max 2MB)
                if (file.size > 2 * 1024 * 1024) {
                    alert('Soubor je příliš velký. Maximální velikost je 2MB.');
                    return;
                }
                
                // Validate file type
                if (!file.type.startsWith('image/')) {
                    alert('Prosím vyberte obrázek.');
                    return;
                }
                
                // Create FormData and upload
                const formData = new FormData();
                formData.append('avatar', file);
                formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                
                // Show loading state
                const avatarCircle = document.querySelector('.avatar-circle');
                const originalContent = avatarCircle.innerHTML;
                avatarCircle.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                
                // Upload file
                fetch('{{ route("profile.avatar") }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers.get('content-type'));
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        throw new Error('Response is not JSON');
                    }
                    
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);
                    
                    if (data.success) {
                        // Update avatar display
                        if (data.avatar_url) {
                            avatarCircle.innerHTML = `<img src="${data.avatar_url}" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`;
                        }
                        
                        // Show success message
                        showMessage('Avatar byl úspěšně aktualizován.', 'success');
                        
                        // Reload page to update header avatar
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        avatarCircle.innerHTML = originalContent;
                        showMessage(data.message || 'Došlo k chybě při nahrávání avataru.', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error details:', error);
                    avatarCircle.innerHTML = originalContent;
                    
                    if (error.message.includes('HTTP error! status: 404')) {
                        showMessage('Route pro nahrávání avataru nebyla nalezena.', 'error');
                    } else if (error.message.includes('Response is not JSON')) {
                        showMessage('Server vrátil neplatnou odpověď.', 'error');
                    } else {
                        showMessage('Došlo k chybě při nahrávání avataru: ' + error.message, 'error');
                    }
                });
            }
        });
        
        // Trigger file selection
        document.body.appendChild(fileInput);
        fileInput.click();
        document.body.removeChild(fileInput);
    };
    
    // Helper function to show messages
    function showMessage(message, type) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.alert');
        existingAlerts.forEach(alert => alert.remove());
        
        // Create new alert
        const alert = document.createElement('div');
        alert.className = `alert alert-${type}`;
        alert.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
            ${message}
        `;
        
        // Insert at top of content
        const container = document.querySelector('.profile-container');
        container.insertBefore(alert, container.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            alert.remove();
        }, 5000);
    }

    // Form validation
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const submitButton = this.querySelector('button[type="submit"]');
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ukládám...';
                
                // Re-enable after 3 seconds to prevent permanent disable
                setTimeout(() => {
                    submitButton.disabled = false;
                    submitButton.innerHTML = submitButton.getAttribute('data-original-text') || 'Uložit';
                }, 3000);
            }
        });
    });

    // Store original button text
    document.querySelectorAll('button[type="submit"]').forEach(btn => {
        btn.setAttribute('data-original-text', btn.innerHTML);
    });
});
</script>
@endpush