@extends('layouts.modern')

@section('title', 'Vytvořit uživatele - MARKOVI')
@section('breadcrumb-section', 'Administrace')
@section('breadcrumb-page', 'Vytvořit 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-plus"></i>
                Vytvořit nového uživatele
            </h1>
            <p class="admin-subtitle">Přidejte nového uživatele do systému s příslušnými oprávněními</p>
        </div>
        
        <div class="admin-actions">
            <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.store') }}" enctype="multipart/form-data" class="user-form">
    @csrf
    
    <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') }}" 
                            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') }}" 
                            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 required">
                            <i class="fas fa-lock"></i>
                            Heslo
                        </label>
                        <div class="password-input-wrapper">
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                class="form-input @error('password') error @enderror" 
                                placeholder="Minimálně 8 znaků"
                                required
                            >
                            <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                <i class="fas fa-eye" id="password-icon"></i>
                            </button>
                        </div>
                        <div class="form-help">
                            Heslo musí mít alespoň 8 znaků.
                        </div>
                        @error('password')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation" class="form-label required">
                            <i class="fas fa-lock"></i>
                            Potvrzení hesla
                        </label>
                        <div class="password-input-wrapper">
                            <input 
                                type="password" 
                                id="password_confirmation" 
                                name="password_confirmation" 
                                class="form-input" 
                                placeholder="Zadejte heslo znovu"
                                required
                            >
                            <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">
                            Zadejte stejné heslo pro potvrzení.
                        </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') }}" 
                            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') }}" 
                            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') == $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">
                                <div class="avatar-placeholder">
                                    <i class="fas fa-user"></i>
                                </div>
                            </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>
                                    Vybrat obrázek
                                </label>
                                <button type="button" class="btn btn-outline-secondary" onclick="removeAvatar()">
                                    <i class="fas fa-times"></i>
                                    Odstranit
                                </button>
                            </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>
    </div>

    <!-- Form Actions -->
    <div class="form-actions">
        <button type="submit" class="btn btn-primary btn-lg">
            <i class="fas fa-save"></i>
            Vytvořit uživatele
        </button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-lg">
            <i class="fas fa-times"></i>
            Zrušit
        </a>
    </div>
</form>
@endsection

@push('styles')
<style>
.admin-header {
    background: linear-gradient(135deg, var(--success-600), var(--success-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 .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;
}

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

.avatar-input {
    display: none;
}

.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;
}

@media (max-width: 768px) {
    .admin-header-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .avatar-upload {
        flex-direction: column;
        align-items: center;
        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');
    
    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;
        
        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> Vytváří 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) {
            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;
                placeholder.style.fontSize = '1.5rem';
                placeholder.style.fontWeight = '700';
                placeholder.style.background = 'linear-gradient(135deg, var(--primary-500), var(--primary-600))';
                placeholder.style.color = 'white';
                placeholder.style.width = '100%';
                placeholder.style.height = '100%';
                placeholder.style.display = 'flex';
                placeholder.style.alignItems = 'center';
                placeholder.style.justifyContent = 'center';
            }
        }
    }
});

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 removeAvatar() {
    const input = document.getElementById('avatar');
    const preview = document.getElementById('avatarPreview');
    const nameInput = document.getElementById('name');
    
    input.value = '';
    preview.innerHTML = '<div class="avatar-placeholder"><i class="fas fa-user"></i></div>';
    
    // Restore name-based placeholder if name exists
    if (nameInput.value.trim()) {
        setTimeout(() => {
            updateAvatarPlaceholder(nameInput.value);
        }, 100);
    }
}

function updateAvatarPlaceholder(name) {
    const preview = document.getElementById('avatarPreview');
    const placeholder = preview.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;
            placeholder.style.fontSize = '1.5rem';
            placeholder.style.fontWeight = '700';
            placeholder.style.background = 'linear-gradient(135deg, var(--primary-500), var(--primary-600))';
            placeholder.style.color = 'white';
            placeholder.style.width = '100%';
            placeholder.style.height = '100%';
            placeholder.style.display = 'flex';
            placeholder.style.alignItems = 'center';
            placeholder.style.justifyContent = 'center';
        }
    }
}
</script>
@endpush