{% extends "home.html" %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'perfil/css/style.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid profile-container fade-in">
    <div class="row g-0"> <!-- g-0 to remove gutters if we want full flush borders -->
        <!-- Columna 1: Foto de Perfil -->
        <div class="col-md-3 profile-col-left">
            <div class="profile-image-container mb-4">
                <img src="{{ user.profile }}" alt="Foto de Perfil" class="profile-img shadow-lg"
                    id="profileImageDisplay">
                <div class="profile-overlay" onclick="document.getElementById('profileImageInput').click()">
                    <i class="fas fa-camera"></i>
                    <span>Cambiar Foto</span>
                </div>
                <form method="POST" enctype="multipart/form-data" id="profileImageForm" style="display: none;">
                    {% csrf_token %}
                    <input type="file" name="profile_image" id="profileImageInput" accept="image/*"
                        onchange="document.getElementById('profileImageForm').submit()">
                </form>
            </div>
            <h5 class="text-white mb-1 font-weight-bold">{{ usuario.nombre }}</h5>
            <p class="text-white-50 mb-0">{{ usuario.cargo|default:"Sin cargo definido" }}</p>
        </div>

        <!-- Columna 2: Datos Personales -->
        <div class="col-md-5 profile-col-center">
            <h3 class="section-title mb-4">Información Personal</h3>

            <div class="card glass-card mb-4">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="data-label">Nombre Completo</label>
                            <div class="data-value">{{ usuario.nombre }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Documento</label>
                            <div class="data-value">{{ usuario.docnumber }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Tipo Documento</label>
                            <div class="data-value">{{ usuario.docType }}</div>
                        </div>
                        <div class="col-12">
                            <label class="data-label">Correo Electrónico</label>
                            <div class="data-value">{{ usuario.email }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Cargo</label>
                            <div class="data-value">{{ usuario.cargo|default:"--" }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Área</label>
                            <div class="data-value">{{ usuario.area|default:"--" }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Jefe Directo</label>
                            <div class="data-value">{{ usuario.jefe|default:"--" }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="data-label">Correo Jefe</label>
                            <div class="data-value">{{ usuario.correo_jefe|default:"--" }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="btn btn-outline-danger btn-sm mt-2" data-bs-toggle="modal"
                data-bs-target="#datosErradosModal">
                <i class="fas fa-exclamation-triangle me-2"></i>Datos errados
            </button>
        </div>

        <!-- Columna 3: Permisos y Seguridad -->
        <div class="col-md-4 profile-col-right">
            <h3 class="section-title mb-4">Permisos y Seguridad</h3>

            <div class="card glass-card mb-4">
                <div class="card-header bg-transparent border-0">
                    <h5 class="mb-0 text-white"><i class="fas fa-user-shield me-2"></i>Roles Asignados</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2">
                        {% for permiso in permisos %}
                        <span class="badge bg-primary-gradient p-2">{{ permiso.get_tipo_display }}</span>
                        {% empty %}
                        <span class="text-muted">Sin roles asignados</span>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="card glass-card">
                <div class="card-header bg-transparent border-0">
                    <h5 class="mb-0 text-white"><i class="fas fa-lock me-2"></i>Seguridad</h5>
                </div>
                <div class="card-body">
                    <p class="text-white-50 small mb-3">Se recomienda cambiar su contraseña periódicamente para mantener
                        su cuenta segura.</p>

                    <button class="btn btn-primary-gradient w-100" id="btnOpenChangePasswordModal"
                        data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                        <i class="fas fa-key me-2"></i>Cambiar Contraseña
                    </button>

                    <!-- New Password Fields (Initially Hidden) -->
                    <div id="newPasswordContainer" style="display: none;">
                        <div class="mb-3">
                            <label for="newPassword" class="form-label text-white">Nueva Contraseña</label>
                            <div class="position-relative">
                                <input type="password" class="form-control bg-transparent text-white pe-5"
                                    id="newPassword">
                                <button type="button"
                                    class="btn btn-link text-white-50 position-absolute top-50 end-0 translate-middle-y text-decoration-none toggle-password-btn me-4"
                                    style="z-index: 10;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <!-- Segmented Password Strength Meter -->
                            <div id="passwordStrengthMeterContainer" class="d-flex gap-1 mt-2" style="height: 6px;">
                                <!-- Bars will be injected by JS -->
                            </div>
                            <small id="passwordStrengthText" class="text-white-50 d-block mt-1"
                                style="font-size: 0.75rem;">Fuerza: -</small>

                            <!-- Caps Lock Warning -->
                            <div id="newPasswordCapsLock" class="caps-lock-warning">
                                <span class="warning-text">Bloq Mayús activado</span>
                            </div>
                        </div>
                        {{ policies|json_script:"policies-data" }}
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label text-white">Confirmar Contraseña</label>
                            <div class="position-relative">
                                <input type="password" class="form-control bg-transparent text-white pe-5"
                                    id="confirmPassword">
                                <button type="button"
                                    class="btn btn-link text-white-50 position-absolute top-50 end-0 translate-middle-y text-decoration-none toggle-password-btn me-4"
                                    style="z-index: 10;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>

                            <!-- Error Container -->
                            <div id="passwordError" class="caps-lock-warning">
                                <span id="passwordErrorText" class="warning-text">Error</span>
                            </div>

                            <!-- Caps Lock Warning -->
                            <div id="confirmPasswordCapsLock" class="caps-lock-warning">
                                <span class="warning-text">Bloq Mayús activado</span>
                            </div>
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="button" class="btn btn-secondary me-md-2"
                                id="btnCancelChangePassword">Cancelar</button>
                            <button type="button" class="btn btn-primary-gradient" id="btnChangePassword">Actualizar
                                Contraseña</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Datos Errados -->
<div class="modal fade" id="datosErradosModal" tabindex="-1" aria-labelledby="datosErradosModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card border-0">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title text-white" id="datosErradosModalLabel">Reportar Datos Errados</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-white-50 mb-3">Por favor, indíquenos qué información es incorrecta y cuál debería ser el
                    valor correcto.</p>
                <textarea class="form-control bg-transparent text-white errordata" rows="5"
                    placeholder="Describa el error aquí..." id="errorDescription"></textarea>

                <!-- Error Container -->
                <div id="errorReportError" class="caps-lock-warning" style="display: none;">
                    <span id="errorReportErrorText" class="warning-text">La descripción es obligatoria</span>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary-gradient" id="btnSendError"
                    data-url="{% url 'perfil:report_error' %}" data-csrf="{{ csrf_token }}">Enviar Reporte</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Cambiar Contraseña -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card border-0">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title text-white" id="changePasswordModalLabel">Cambiar Contraseña</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Step 1: Verify Current Password -->
                <div id="step1">
                    <p class="text-white-50 mb-3">Por seguridad, ingresa tu contraseña actual para continuar.</p>
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label text-white">Contraseña Actual</label>
                        <div class="position-relative">
                            <input type="password" class="form-control bg-transparent text-white pe-5"
                                id="currentPassword">
                            <button type="button"
                                class="btn btn-link text-white-50 position-absolute top-50 end-0 translate-middle-y text-decoration-none toggle-password-btn me-4"
                                style="z-index: 10;">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>

                        <!-- Error Container -->
                        <div id="currentPasswordError" class="caps-lock-warning">
                            <span id="currentPasswordErrorText" class="warning-text">Contraseña incorrecta</span>
                        </div>

                        <!-- Caps Lock Warning -->
                        <div id="currentPasswordCapsLock" class="caps-lock-warning">
                            <span class="warning-text">Bloq Mayús activado</span>
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="button" class="btn btn-primary-gradient" id="btnVerifyPassword">Continuar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'perfil/js/main.js' %}?v=1.0" defer></script>
{% endblock %}