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

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

{% block content %}
<div id="perfil-container">
    
    <aside class="user-info-sidebar">
        <div class="profile-header">
            <div class="profile-pic-container">
                <img id="profileImage" class="profile-pic" src="{{ user.user_img|default:'' }}"
                    alt="Foto de perfil de {{ user.user_name|default:'Usuario' }}">

                <input type="file" id="profileImageInput" accept="image/*" aria-label="Seleccionar imagen de perfil">

                <button class="btn-change-photo" type="button"
                    onclick="document.getElementById('profileImageInput').click();"
                    aria-label="Cambiar foto de perfil">
                    <i class="fa-solid fa-camera"></i>
                </button>
            </div>

            <div class="user-info">
                <h1 class="user-name" id="nombreUsuario">
                    {{ user.user_name|default:'Usuario' }}
                </h1>
                <p class="user-email">
                    {{ user.user_email|default:'correo@ejemplo.com' }}
                </p>
            </div>
        </div>
    </aside>
    
    <div class="main-profile-content">
        <section class="profile-card personal-info-card">
            <div class="card-header-perfil">
                <h2 class="card-title">
                    <i class="fa-solid fa-user"></i>
                    Información Personal
                </h2>
            </div>

            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">Gerencia</label>
                        <p class="info-value">
                            {{ user.user_gerencia|default:"Sin asignar" }}
                        </p>
                    </div>
                    <div class="info-item">
                        <label class="info-label">Área</label>
                        <p class="info-value" id="Type">
                            {{ user.user_area|default:"Sin asignar" }}
                        </p>
                    </div>
                    <div class="info-item">
                        <label class="info-label">Tipo de documento</label>
                        <p class="info-value" id="docType">
                            Cédula de Ciudadanía
                        </p>
                    </div>
                    <div class="info-item">
                        <label class="info-label">Número de documento</label>
                        <p class="info-value" id="docNumber">
                            {{ user.doc_number|default:"No especificado" }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="profile-card security-card">
            <div class="card-header-perfil">
                <h2 class="card-title">
                    <i class="fa-solid fa-lock"></i>
                    Seguridad y Contraseña
                </h2>
            </div>

            <div class="card-body">
                <form id="passwordChangeForm" class="password-form">
                    <div class="form-group">
                        <label for="pass1" class="form-label">
                            Nueva contraseña
                        </label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-key input-icon"></i>
                            <input id="pass1" class="form-control" type="password"
                                placeholder="Ingresa la nueva contraseña" 
                                autocomplete="off" 
                                data-lpignore="true">
                                
                            <button type="button" class="toggle-password" data-target="pass1"
                                aria-label="Mostrar contraseña">
                                <i class="fa-solid fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="pass2" class="form-label">
                            Confirmar contraseña
                        </label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-key input-icon"></i>
                            <input id="pass2" class="form-control" type="password"
                                placeholder="Confirma la nueva contraseña" 
                                autocomplete="off" 
                                data-lpignore="true">
                                
                            <button type="button" class="toggle-password" data-target="pass2"
                                aria-label="Mostrar contraseña">
                                <i class="fa-solid fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="password-requirements">
                        <h4 class="requirements-title">
                            <i class="fa-solid fa-shield-halved"></i>
                            <span id="feedbackText" style="font-weight: bold; margin-left: 10px; color: #666;">
                                Empieza tu contraseña...
                            </span>
                        </h4>
                        <div id="passwordMessage"></div>
                    </div>
                    
                    <div class="form-actions">
                        <button id="register" class="btn-primary" type="button" disabled>
                            <i class="fa-solid fa-check"></i>
                            Actualizar Contraseña
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <aside class="reports-notifications-sidebar">
        <div class="profile-card sidebar-card reports-card">
            <div class="card-header-perfil">
                <h2 class="card-title">
                    <i class="fa-solid fa-gear"></i>
                    Permisos Informes
                </h2>
            </div>
            <div class="card-body">
                <div id="permisos_grid" class="Grid"></div>
            </div>
        </div>

        <div class="profile-card sidebar-card notifications-card">
            <div class="card-header-perfil">
                <h2 class="card-title">
                    <i class="fa-solid fa-bell"></i>
                    Notificaciones
                </h2>
            </div>
            <div class="card-body">
                <div id="notificaciones_grid" class="Grid"></div>
            </div>
        </div>
    </aside>
</div>
{% endblock %}

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