{% extends "base.html" %}

{% block title %}{% if user %}Editar Usuario: {{ user.name }}{% else %}Nuevo Usuario{% endif %} — Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Header -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1 fw-bold">
                <i class="bi bi-person-gear text-primary me-2"></i>
                {% if user %}Editar Cuenta de Usuario{% else %}Crear Nueva Cuenta de Usuario{% endif %}
            </h1>
            <p class="text-muted small mb-0">
                Gestión integral de identidad, datos de contacto, credenciales y rol institucional para Bedelía, Docentes y Alumnos.
            </p>
        </div>
        <div>
            <a href="/admin/users_list" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Volver a Usuarios
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-body-tertiary py-3 d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-person-vcard text-primary fs-5"></i>
                        <h5 class="card-title h6 mb-0 fw-bold">
                            {% if user %}Ficha de Datos de: {{ user.name }}{% else %}Datos del Nuevo Usuario{% endif %}
                        </h5>
                    </div>
                    {% if user %}
                    <span class="badge bg-primary-subtle text-primary border font-monospace">ID #{{ user.id }}</span>
                    {% endif %}
                </div>

                <div class="card-body p-4">
                    <form method="POST">
                        {% if user %}
                        <input type="hidden" name="id" value="{{ user.id }}">
                        {% endif %}

                        <!-- SECCIÓN 1: IDENTIDAD Y DOCUMENTACIÓN -->
                        <div class="mb-4">
                            <h6 class="text-uppercase text-primary fw-bold small border-bottom pb-2 mb-3">
                                <i class="bi bi-person-badge me-1"></i>1. Identidad y Documentación Personal
                            </h6>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="first_name" class="form-label small fw-semibold">Nombre(s) <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" 
                                           value="{{ user.first_name if user else '' }}" required 
                                           placeholder="Ej: María Belén">
                                </div>
                                <div class="col-md-6">
                                    <label for="last_name" class="form-label small fw-semibold">Apellido(s) <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" 
                                           value="{{ user.last_name if user else '' }}" required 
                                           placeholder="Ej: González">
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="document_type" class="form-label small fw-semibold">
                                        Tipo de Documento <span class="text-muted">(Argentina / Extranjero)</span>
                                    </label>
                                    <select class="form-select" id="document_type" name="document_type">
                                        <optgroup label="Documentos Nacionales (Argentina)">
                                            <option value="DNI" {% if not user or user.document_type == 'DNI' %}selected{% endif %}>DNI — Documento Nacional de Identidad</option>
                                            <option value="CUIL" {% if user and user.document_type == 'CUIL' %}selected{% endif %}>CUIL / CUIT — Código Laboral / Fiscal</option>
                                            <option value="PAS" {% if user and user.document_type == 'PAS' %}selected{% endif %}>Pasaporte Argentino</option>
                                        </optgroup>
                                        <optgroup label="Documentos Extranjeros e Internacionales">
                                            <option value="PASEXT" {% if user and user.document_type == 'PASEXT' %}selected{% endif %}>Pasaporte Extranjero (Internacional)</option>
                                            <option value="DNIEXT" {% if user and user.document_type == 'DNIEXT' %}selected{% endif %}>DNI para Extranjeros (Radicación)</option>
                                            <option value="CIEXT" {% if user and user.document_type == 'CIEXT' %}selected{% endif %}>Cédula Mercosur / Extranjera</option>
                                        </optgroup>
                                        <optgroup label="Documentos Históricos Nacionales">
                                            <option value="CI" {% if user and user.document_type == 'CI' %}selected{% endif %}>Cédula de Identidad (Policía Federal)</option>
                                            <option value="LC" {% if user and user.document_type == 'LC' %}selected{% endif %}>Libreta Cívica (LC)</option>
                                            <option value="LE" {% if user and user.document_type == 'LE' %}selected{% endif %}>Libreta de Enrolamiento (LE)</option>
                                        </optgroup>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="document_number" class="form-label small fw-semibold">Número de Documento</label>
                                    <input type="text" class="form-control font-monospace" id="document_number" name="document_number" 
                                           value="{{ user.document_number if user else '' }}" 
                                           placeholder="Ej: 38123456">
                                    <div class="form-text small" id="docHelpText">
                                        Ingrese el número según la tipificación oficial seleccionada.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SECCIÓN 2: DATOS DE CONTACTO Y DOMICILIO -->
                        <div class="mb-4">
                            <h6 class="text-uppercase text-primary fw-bold small border-bottom pb-2 mb-3">
                                <i class="bi bi-geo-alt me-1"></i>2. Contacto y Domicilio
                            </h6>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="phone" class="form-label small fw-semibold">
                                        <i class="bi bi-telephone me-1 text-secondary"></i>Teléfono de Contacto
                                    </label>
                                    <input type="tel" class="form-control" id="phone" name="phone" 
                                           value="{{ user.phone if user else '' }}" 
                                           placeholder="Ej: +54 9 11 4455-6677">
                                    <div class="form-text small">Móvil o fijo con código de área.</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="personal_email" class="form-label small fw-semibold">
                                        <i class="bi bi-envelope-at me-1 text-secondary"></i>Email Personal / Particular
                                    </label>
                                    <input type="email" class="form-control" id="personal_email" name="personal_email" 
                                           value="{{ user.personal_email if user else '' }}" 
                                           placeholder="Ej: nombre.apellido@gmail.com">
                                    <div class="form-text small">Correo personal alternativo para notificaciones y recuperación.</div>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="address" class="form-label small fw-semibold">
                                        <i class="bi bi-house-door me-1 text-secondary"></i>Domicilio / Dirección
                                    </label>
                                    <input type="text" class="form-control" id="address" name="address" 
                                           value="{{ user.address if user else '' }}" 
                                           placeholder="Ej: Av. Córdoba 1850, Piso 4 B, CABA">
                                    <div class="form-text small">Calle, número, piso/departamento y localidad.</div>
                                </div>
                            </div>
                        </div>

                        <!-- SECCIÓN 3: CUENTA, ACCESO Y ROL INSTITUCIONAL -->
                        <div class="mb-4">
                            <h6 class="text-uppercase text-primary fw-bold small border-bottom pb-2 mb-3">
                                <i class="bi bi-shield-lock me-1"></i>3. Cuenta de Acceso y Rol Institucional
                            </h6>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="email" class="form-label small fw-semibold">Email Institucional <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-body-tertiary"><i class="bi bi-envelope"></i></span>
                                        <input type="email" class="form-control" id="email" name="email" 
                                               value="{{ user.email if user else '' }}" required 
                                               placeholder="usuario@edu-space.com">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="password" class="form-label small fw-semibold">
                                        Contraseña {% if not user %}<span class="text-danger">*</span>{% endif %}
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-body-tertiary"><i class="bi bi-key"></i></span>
                                        <input type="password" class="form-control" id="password" name="password" 
                                               {% if not user %}required{% endif %}
                                               placeholder="{% if user %}Dejar en blanco para mantener{% else %}Mínimo 6 caracteres{% endif %}">
                                    </div>
                                    {% if user %}
                                    <small class="text-muted d-block mt-1">
                                        Solo complete este campo si desea restablecer la contraseña del usuario.
                                    </small>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-8">
                                    <label for="role_id" class="form-label small fw-semibold">Rol / Grupo de Acceso <span class="text-danger">*</span></label>
                                    <select class="form-select" id="role_id" name="role_id" required>
                                        <option value="" disabled {% if not user or not user.role_id %}selected{% endif %}>Seleccione un rol...</option>
                                        {% for r in roles %}
                                            <option value="{{ r.id }}" {% if user and user.role_id == r.id %}selected{% endif %}>
                                                {{ r.name }} {% if r.description %}— {{ r.description }}{% endif %}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <small class="text-muted d-block mt-1">
                                        Define los permisos para Bedelía, Profesores/Docentes, Alumnos o Administradores.
                                    </small>
                                </div>

                                <div class="col-md-4 d-flex align-items-center">
                                    <div class="form-check form-switch mt-3">
                                        <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active" 
                                               {% if not user or user.is_active %}checked{% endif %}>
                                        <label class="form-check-label fw-semibold small" for="is_active">
                                            Cuenta Activa
                                        </label>
                                        <small class="text-muted d-block">
                                            Permite iniciar sesión en el sistema.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                            <a href="/admin/users_list" class="btn btn-outline-secondary">
                                Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary px-4 fw-semibold shadow-sm">
                                <i class="bi bi-save me-1"></i>Guardar Usuario
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var docTypeSelect = document.getElementById('document_type');
    var docNumInput = document.getElementById('document_number');
    var docHelpText = document.getElementById('docHelpText');

    var hints = {
        'DNI': 'DNI Argentino: 7 u 8 dígitos numéricos sin puntos (ej: 38123456).',
        'CUIL': 'CUIL/CUIT: 11 dígitos numéricos o con guiones (ej: 20-38123456-7).',
        'PAS': 'Pasaporte Argentino: 3 letras y 6 números (ej: AAB123456).',
        'PASEXT': 'Pasaporte Extranjero: código alfanumérico emitido por país de origen.',
        'DNIEXT': 'DNI Extranjero: 7 a 10 dígitos o alfanumérico con residencia.',
        'CI': 'Cédula de Identidad Nacional: 6 a 8 dígitos numéricos.',
        'CIEXT': 'Cédula de Identidad Mercosur: formato de país emisor.',
        'LC': 'Libreta Cívica: 6 a 7 dígitos numéricos.',
        'LE': 'Libreta de Enrolamiento: 6 a 7 dígitos numéricos.'
    };

    function updateDocHint() {
        var val = docTypeSelect.value;
        if (hints[val]) {
            docHelpText.textContent = hints[val];
        }
    }

    if (docTypeSelect) {
        docTypeSelect.addEventListener('change', updateDocHint);
        updateDocHint();
    }
});
</script>
{% endblock %}