@extends('layouts.modern')

@section('title', 'Upravit uživatele - MARKOVI')
@section('breadcrumb-section', 'Administrace')
@section('breadcrumb-page', 'Upravit uživatele')

@section('content')
<div class="admin-header">
    <div class="admin-header-content">
        <div class="admin-title-section">
            <h1 class="admin-title">
                <i class="fas fa-user-edit"></i>
                Upravit uživatele: {{ $user->name }}
            </h1>
            <p class="admin-subtitle">Upravte informace o uživateli a jeho oprávnění</p>
        </div>
        
        <div class="admin-actions">
            <a href="{{ route('admin.users.show', $user) }}" class="btn btn-info">
                <i class="fas fa-eye"></i>
                Zobrazit detail
            </a>
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i>
                Zpět na seznam
            </a>
        </div>
    </div>
</div>

<!-- Error Messages -->
@if ($errors->any())
    <div class="alert alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <div>
            <strong>Opravte následující chyby:</strong>
            <ul class="error-list">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<form method="POST" action="{{ route('admin.users.update', $user) }}" enctype="multipart/form-data" class="user-form">
    @csrf
    @method('PUT')
    
    <div class="form-grid">
        <!-- Basic Information -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-user"></i>
                    Základní informace
                </h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name" class="form-label required">
                            <i class="fas fa-user"></i>
                            Celé jméno
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            class="form-input @error('name') error @enderror" 
                            value="{{ old('name', $user->name) }}" 
                            placeholder="např. Jan Novák"
                            required
                        >
                        <div class="form-help">
                            Zadejte celé jméno uživatele včetně příjmení.
                        </div>
                        @error('name')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="email" class="form-label required">
                            <i class="fas fa-envelope"></i>
                            Email
                        </label>
                        <input 
                            type="email" 
                            id="email" 
                            name="email" 
                            class="form-input @error('email') error @enderror" 
                            value="{{ old('email', $user->email) }}" 
                            placeholder="jan.novak@example.com"
                            required
                        >
                        <div class="form-help">
                            Email bude použit pro přihlášení do systému.
                        </div>
                        @error('email')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="password" class="form-label">
                            <i class="fas fa-lock"></i>
                            Nové heslo
                        </label>
                        <div class="password-input-wrapper">
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                class="form-input @error('password') error @enderror" 
                                placeholder="Ponechte prázdné pro zachování současného hesla"
                            >
                            <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                <i class="fas fa-eye" id="password-icon"></i>
                            </button>
                        </div>
                        <div class="form-help">
                            Volitelné - zadejte pouze pokud chcete změnit heslo. Minimálně 8 znaků.
                        </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-lock"></i>
                            Potvrzení nového hesla
                        </label>
                        <div class="password-input-wrapper">
                            <input 
                                type="password" 
                                id="password_confirmation" 
                                name="password_confirmation" 
                                class="form-input" 
                                placeholder="Zadejte nové heslo znovu"
                            >
                            <button type="button" class="password-toggle" onclick="togglePassword('password_confirmation')">
                                <i class="fas fa-eye" id="password_confirmation-icon"></i>
                            </button>
                        </div>
                        <div class="form-help">
                            Potvrzení nového hesla - pouze pokud měníte heslo.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-address-card"></i>
                    Kontaktní informace
                </h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="phone" class="form-label">
                            <i class="fas fa-phone"></i>
                            Telefon
                        </label>
                        <input 
                            type="tel" 
                            id="phone" 
                            name="phone" 
                            class="form-input @error('phone') error @enderror" 
                            value="{{ old('phone', $user->phone) }}" 
                            placeholder="+420 123 456 789"
                        >
                        <div class="form-help">
                            Volitelné - kontaktní telefon uživatele.
                        </div>
                        @error('phone')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="company" class="form-label">
                            <i class="fas fa-building"></i>
                            Firma/Organizace
                        </label>
                        <input 
                            type="text" 
                            id="company" 
                            name="company" 
                            class="form-input @error('company') error @enderror" 
                            value="{{ old('company', $user->company) }}" 
                            placeholder="např. ACME s.r.o."
                        >
                        <div class="form-help">
                            Volitelné - název firmy nebo organizace.
                        </div>
                        @error('company')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Role and Avatar -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-user-shield"></i>
                    Role a avatar
                </h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="role_id" class="form-label required">
                            <i class="fas fa-user-shield"></i>
                            Role uživatele
                        </label>
                        <select 
                            id="role_id" 
                            name="role_id" 
                            class="form-select @error('role_id') error @enderror" 
                            required
                        >
                            <option value="">Vyberte roli...</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" 
                                        {{ old('role_id', $user->role_id) == $role->id ? 'selected' : '' }}
                                        data-level="{{ $role->level }}"
                                        data-description="{{ $role->description }}">
                                    {{ $role->display_name }} (Úroveň {{ $role->level }})
                                </option>
                            @endforeach
                        </select>
                        <div class="form-help">
                            Role určuje oprávnění uživatele v systému.
                        </div>
                        <div id="roleDescription" class="role-description"></div>
                        @error('role_id')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="avatar" class="form-label">
                            <i class="fas fa-image"></i>
                            Avatar uživatele
                        </label>
                        <div class="avatar-upload">
                            <div class="avatar-preview" id="avatarPreview">
                                @if($user->avatar)
                                    <img src="{{ asset('storage/' . $user->avatar) }}" alt="{{ $user->name }}">
                                @else
                                    <div class="avatar-placeholder">
                                        {{ strtoupper(substr($user->name, 0, 2)) }}
                                    </div>
                                @endif
                            </div>
                            <div class="avatar-upload-controls">
                                <input 
                                    type="file" 
                                    id="avatar" 
                                    name="avatar" 
                                    class="avatar-input @error('avatar') error @enderror" 
                                    accept="image/*"
                                    onchange="previewAvatar(this)"
                                >
                                <label for="avatar" class="btn btn-outline-primary">
                                    <i class="fas fa-upload"></i>
                                    Změnit obrázek
                                </label>
                                @if($user->avatar)
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="remove_avatar" value="1" class="checkbox-input">
                                        <span class="checkbox-custom"></span>
                                        <span class="checkbox-text">Odstranit současný avatar</span>
                                    </label>
                                @endif
                            </div>
                        </div>
                        <div class="form-help">
                            Volitelné - JPG, PNG, GIF, max. 2MB
                        </div>
                        @error('avatar')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Status -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-toggle-on"></i>
                    Stav účtu
                </h3>
            </div>
            <div class="card-body">
                <div class="status-info">
                    <div class="status-item">
                        <div class="status-label">
                            <i class="fas fa-calendar-plus"></i>
                            Registrace
                        </div>
                        <div class="status-value">
                            {{ $user->created_at->format('d.m.Y H:i') }}
                            <span class="relative-time">({{ $user->created_at->diffForHumans() }})</span>
                        </div>
                    </div>
                    
                    <div class="status-item">
                        <div class="status-label">
                            <i class="fas fa-clock"></i>
                            Poslední aktivita
                        </div>
                        <div class="status-value">
                            {{ $user->updated_at->format('d.m.Y H:i') }}
                            <span class="relative-time">({{ $user->updated_at->diffForHumans() }})</span>
                        </div>
                    </div>
                    
                    <div class="status-item">
                        <div class="status-label">
                            <i class="fas fa-check-circle"></i>
                            Stav účtu
                        </div>
                        <div class="status-value">
                            @if($user->email_verified_at)
                                <span class="status-badge status-active">
                                    <i class="fas fa-check-circle"></i>
                                    Aktivní
                                </span>
                            @else
                                <span class="status-badge status-inactive">
                                    <i class="fas fa-times-circle"></i>
                                    Neaktivní
                                </span>
                            @endif
                            
                            @if(Auth::user()->canManageUser($user) && $user->id !== Auth::id())
                                <label class="toggle-switch" title="Aktivovat/Deaktivovat uživatele">
                                    <input type="checkbox" 
                                           name="is_active" 
                                           value="1"
                                           {{ $user->email_verified_at ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="form-actions">
        <button type="submit" class="btn btn-primary btn-lg">
            <i class="fas fa-save"></i>
            Uložit změny
        </button>
        <a href="{{ route('admin.users.show', $user) }}" class="btn btn-secondary btn-lg">
            <i class="fas fa-times"></i>
            Zrušit
        </a>
        
        @if(Auth::user()->hasPermission('admin.users.edit') && Auth::user()->canManageUser($user))
            <button type="button" class="btn btn-warning btn-lg" onclick="resetPassword()">
                <i class="fas fa-key"></i>
                Resetovat heslo
            </button>
        @endif
    </div>
</form>

<!-- Reset Password Modal -->
<div id="resetPasswordModal" class="modal">
    <div class="modal-content modal-sm">
        <div class="modal-header">
            <h3 class="modal-title">
                <i class="fas fa-key"></i>
                Resetovat heslo
            </h3>
            <button class="modal-close" onclick="closeResetPasswordModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <p>Opravdu chcete resetovat heslo uživatele <strong>{{ $user->name }}</strong>?</p>
            <p class="text-muted">Uživatel obdrží nové heslo emailem.</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeResetPasswordModal()">Zrušit</button>
            <button class="btn btn-warning" id="confirmResetBtn">
                <i class="fas fa-key"></i>
                Resetovat heslo
            </button>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.admin-header {
    background: linear-gradient(135deg, var(--warning-600), var(--warning-700));
    color: white;
    padding: var(--space-8) 0;
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-8);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.admin-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-subtitle {
    margin: var(--space-2) 0 0;
    opacity: 0.9;
    font-size: 1.125rem;
}

.admin-actions {
    display: flex;
    gap: var(--space-3);
}

.admin-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

.admin-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.user-form {
    max-width: 1200px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

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

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

.form-label {
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-label.required::after {
    content: '*';
    color: var(--error-500);
    margin-left: var(--space-1);
}

.form-input,
.form-select {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

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

.form-input.error,
.form-select.error {
    border-color: var(--error-500);
}

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

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

.error-list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
}

.password-input-wrapper {
    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-2);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

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

.role-description {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--info-50);
    border: 1px solid var(--info-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--info-700);
    display: none;
}

.role-description.show {
    display: block;
}

.avatar-upload {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    flex-shrink: 0;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    color: var(--gray-400);
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-upload-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.avatar-input {
    display: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.875rem;
}

.checkbox-input {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.checkbox-text {
    color: var(--gray-700);
}

.status-info {
    display: grid;
    gap: var(--space-4);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.status-label {
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.status-value {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--gray-900);
}

.relative-time {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.status-active {
    background: var(--success-100);
    color: var(--success-700);
}

.status-badge.status-inactive {
    background: var(--error-100);
    color: var(--error-700);
}

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

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: 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(--success-500);
}

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

.form-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--gray-200);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
    font-weight: 600;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
}

.modal-content.modal-sm {
    max-width: 400px;
}

.modal-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .admin-header-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .admin-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .avatar-upload {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .status-item {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Role description display
    const roleSelect = document.getElementById('role_id');
    const roleDescription = document.getElementById('roleDescription');
    
    // Show description for current role on load
    if (roleSelect.value) {
        const selectedOption = roleSelect.options[roleSelect.selectedIndex];
        const description = selectedOption.dataset.description;
        
        if (description && description.trim()) {
            roleDescription.textContent = description;
            roleDescription.classList.add('show');
        }
    }
    
    roleSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const description = selectedOption.dataset.description;
        
        if (description && description.trim()) {
            roleDescription.textContent = description;
            roleDescription.classList.add('show');
        } else {
            roleDescription.classList.remove('show');
        }
    });

    // Form validation
    document.querySelector('.user-form').addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const passwordConfirmation = document.getElementById('password_confirmation').value;
        
        // Only validate password if it's being changed
        if (password || passwordConfirmation) {
            if (password !== passwordConfirmation) {
                e.preventDefault();
                alert('Hesla se neshodují. Zkontrolujte prosím zadání.');
                return false;
            }
            
            if (password.length < 8) {
                e.preventDefault();
                alert('Heslo musí mít alespoň 8 znaků.');
                return false;
            }
        }
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ukládá se...';
        submitBtn.disabled = true;
        
        // Re-enable after 5 seconds to prevent permanent disable
        setTimeout(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 5000);
    });

    // Auto-generate avatar placeholder from name
    const nameInput = document.getElementById('name');
    const avatarPreview = document.getElementById('avatarPreview');
    
    nameInput.addEventListener('input', function() {
        if (!document.getElementById('avatar').files.length && !avatarPreview.querySelector('img')) {
            updateAvatarPlaceholder(this.value);
        }
    });
    
    function updateAvatarPlaceholder(name) {
        const placeholder = avatarPreview.querySelector('.avatar-placeholder');
        if (placeholder && name.trim()) {
            const initials = name.trim().split(' ')
                .map(word => word.charAt(0).toUpperCase())
                .slice(0, 2)
                .join('');
            
            if (initials) {
                placeholder.innerHTML = initials;
            }
        }
    }
});

function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(inputId + '-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'fas fa-eye';
    }
}

function previewAvatar(input) {
    const preview = document.getElementById('avatarPreview');
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            preview.innerHTML = `<img src="${e.target.result}" alt="Avatar preview">`;
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}

function resetPassword() {
    document.getElementById('resetPasswordModal').style.display = 'block';
    
    document.getElementById('confirmResetBtn').onclick = function() {
        fetch(`/admin/users/{{ $user->id }}/reset-password`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(`${data.message}. Nové heslo: ${data.new_password}`, 'success');
            } else {
                showNotification(data.error, 'error');
            }
            closeResetPasswordModal();
        })
        .catch(error => {
            showNotification('Došlo k chybě při resetování hesla.', 'error');
            closeResetPasswordModal();
        });
    };
}

function closeResetPasswordModal() {
    document.getElementById('resetPasswordModal').style.display = 'none';
}

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type}`;
    notification.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        ${message}
    `;
    
    document.querySelector('.admin-header').after(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 5000);
}

// Close modal when clicking outside
window.addEventListener('click', function(event) {
    const modal = document.getElementById('resetPasswordModal');
    if (event.target === modal) {
        closeResetPasswordModal();
    }
});
</script>
@endpush