{% extends 'layout/base.twig' %}

{% set title = 'Create User' %}
{% set pageTitle = 'Create User' %}
{% set pageDescription = 'Add a new user to the system' %}
{% set pageIcon = 'fas fa-user-plus' %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i class="fas fa-user text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                User Information
            </h2>
        </div>

        <div class="p-6">
            <form method="POST" action="/users/store" class="space-y-5">
                {{ csrf_field() }}

                <!-- Name & Username Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <!-- Full Name -->
                    <div>
                        <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                            Full Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               id="full_name"
                               name="full_name"
                               required
                               autofocus
                               class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                               placeholder="John Doe">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                            The user's display name
                        </p>
                    </div>

                    <!-- Username -->
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                            Username <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                <i class="fas fa-at text-sm"></i>
                            </span>
                            <input type="text"
                                   id="username"
                                   name="username"
                                   required
                                   pattern="[a-zA-Z0-9_]+"
                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                   placeholder="johndoe">
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                            Letters, numbers, and underscores only
                        </p>
                    </div>
                </div>

                <!-- Email & Role Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                            Email Address <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                <i class="fas fa-envelope text-sm"></i>
                            </span>
                            <input type="email"
                                   id="email"
                                   name="email"
                                   required
                                   class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                   placeholder="john@example.com">
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                            Used for login and notifications
                        </p>
                    </div>

                    <!-- Role -->
                    <div>
                        <label for="role" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                            Role <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 dark:text-slate-500">
                                <i class="fas fa-shield-alt text-sm"></i>
                            </span>
                            <select id="role"
                                    name="role"
                                    required
                                    class="w-full pl-9 pr-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm appearance-none bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
                                <option value="user">User</option>
                                <option value="admin">Admin</option>
                            </select>
                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 dark:text-slate-500">
                                <i class="fas fa-chevron-down text-xs"></i>
                            </span>
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                            Admins have full system access
                        </p>
                    </div>
                </div>

                <!-- Password Section -->
                <div class="border-t border-gray-200 dark:border-slate-700 pt-5 mt-5">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                        <i class="fas fa-lock text-gray-400 dark:text-slate-500 mr-2"></i>
                        Password
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <!-- Password -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password"
                                       id="password"
                                       name="password"
                                       required
                                       minlength="8"
                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                       placeholder="••••••••">
                                <button type="button"
                                        onclick="togglePassword('password')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                    <i class="fas fa-eye text-sm" id="password-toggle-icon"></i>
                                </button>
                            </div>
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                Minimum 8 characters
                            </p>
                        </div>

                        <!-- Confirm Password -->
                        <div>
                            <label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1.5">
                                Confirm Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password"
                                       id="password_confirm"
                                       name="password_confirm"
                                       required
                                       minlength="8"
                                       class="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white"
                                       placeholder="••••••••">
                                <button type="button"
                                        onclick="togglePassword('password_confirm')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">
                                    <i class="fas fa-eye text-sm" id="password_confirm-toggle-icon"></i>
                                </button>
                            </div>
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-slate-400">
                                Re-enter the password to confirm
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-3 pt-3">
                    <button type="submit"
                            class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors text-sm">
                        <i class="fas fa-user-plus mr-2"></i>
                        Create User
                    </button>
                    <a href="/users"
                       class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors text-sm">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Info Section -->
    <div class="mt-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 rounded-lg p-4">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                    <i class="fas fa-info-circle text-white"></i>
                </div>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">What happens next?</h3>
                <ul class="text-xs text-gray-600 dark:text-slate-400 space-y-1">
                    <li class="flex items-center">
                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
                        <span class="ml-2">Admin-created users are automatically verified and can log in immediately</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
                        <span class="ml-2">Users can manage their own domains and notification groups</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-circle text-blue-500" style="font-size: 6px;"></i>
                        <span class="ml-2">Admin users have access to system settings and user management</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-toggle-icon');

    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

document.getElementById('password_confirm').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirm = this.value;

    if (confirm && password !== confirm) {
        this.setCustomValidity('Passwords do not match');
        this.classList.add('border-red-300');
        this.classList.remove('border-gray-300');
    } else {
        this.setCustomValidity('');
        this.classList.remove('border-red-300');
        this.classList.add('border-gray-300');
    }
});
</script>
{% endblock %}