{% extends "base.html" %}

{% block title %}{{ title }} - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0">
                <h1 class="text-3xl font-bold leading-7 text-gray-900 dark:text-white sm:text-4xl sm:truncate gradient-text">
                    <i class="fas fa-building mr-3 text-primary-500"></i>
                    {{ title }}
                </h1>
                <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
                    {% if department %}
                        Modifica la información del departamento
                    {% else %}
                        Crea un nuevo departamento para organizar los usuarios
                    {% endif %}
                </p>
            </div>
            <div class="mt-4 flex md:mt-0 md:ml-4">
                <a href="{{ url_for('admin_departments') }}" class="btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Volver a Departamentos
                </a>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="animate-fade-in-up">
        <div class="card shadow-xl max-w-2xl mx-auto">
            <div class="px-6 py-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                    <i class="fas fa-edit mr-3 text-indigo-500"></i>
                    Información del Departamento
                </h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Complete los campos requeridos para el departamento
                </p>
            </div>

            <form method="POST" class="p-8 space-y-6">
                {{ form.hidden_tag() }}

                <!-- Department Name -->
                <div>
                    <label for="{{ form.name.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-building mr-2 text-primary-500"></i>Nombre del Departamento
                    </label>
                    {{ form.name(class="form-input", placeholder="Ej: Recursos Humanos, IT, Finanzas...") }}
                    {% if form.name.errors %}
                        {% for error in form.name.errors %}
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                </div>

                <!-- Department Description -->
                <div>
                    <label for="{{ form.description.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-align-left mr-2 text-green-500"></i>Descripción <span class="text-gray-400">(opcional)</span>
                    </label>
                    {{ form.description(class="form-input", rows="4", placeholder="Describe las funciones y responsabilidades de este departamento...") }}
                    {% if form.description.errors %}
                        {% for error in form.description.errors %}
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                </div>

                <!-- Action Buttons -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ url_for('admin_departments') }}" class="btn-secondary">
                        <i class="fas fa-times mr-2"></i>
                        Cancelar
                    </a>

                    <div class="flex space-x-3">
                        {% if department %}
                        <button type="button" onclick="deleteDepartment({{ department.id }})" class="btn-danger">
                            <i class="fas fa-trash mr-2"></i>
                            Eliminar
                        </button>
                        {% endif %}

                        <button type="submit" class="btn-primary shadow-glow">
                            <i class="fas fa-save mr-2"></i>
                            {% if department %}Actualizar{% else %}Crear{% endif %} Departamento
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {% if department %}
    <!-- Department Statistics -->
    <div class="mt-8 animate-fade-in-up" style="animation-delay: 0.2s;">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 max-w-2xl mx-auto">
            <!-- Users Count -->
            <div class="card hover-lift">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Usuarios Asignados
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ department.users|length }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Passwords Count -->
            <div class="card hover-lift">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-key text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Contraseñas Gestionadas
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ department.passwords|length }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Delete Confirmation Modal -->
{% if department %}
<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md mx-4 transform transition-all">
        <div class="p-6">
            <div class="flex items-center mb-4">
                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900">
                    <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 text-xl"></i>
                </div>
            </div>
            <div class="text-center">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">
                    Eliminar Departamento
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                    ¿Estás seguro de que deseas eliminar este departamento? Esta acción no se puede deshacer.
                </p>
                <div class="flex justify-center space-x-3">
                    <button type="button" onclick="closeDeleteModal()" class="btn-secondary">
                        Cancelar
                    </button>
                    <form method="POST" action="{{ url_for('admin_delete_department', id=department.id) }}" class="inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <button type="submit" class="btn-danger">
                            <i class="fas fa-trash mr-2"></i>
                            Eliminar
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if department %}
<script>
function deleteDepartment(id) {
    document.getElementById('deleteModal').classList.remove('hidden');
    document.getElementById('deleteModal').classList.add('flex');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    document.getElementById('deleteModal').classList.remove('flex');
}

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});
</script>
{% endif %}
{% endblock %}