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

{% block extra_css %}
<!-- Estilos propios de usuarios -->
<link rel="stylesheet" href="{% static 'perfil/css/style.css' %}">
{% endblock %}

{% block content %}
<div class="container_profile">
    <div class="card">
        <div class="user-profile">
            <div class="position-relative profile-pic-container">
                <!-- Imagen de perfil -->
                <img id="profileImage" class="profile-pic" src="{{ user.user_img|default:'' }}" alt="Imagen de perfil">
            
                <!-- Input oculto para seleccionar imagen -->
                <input type="file" name="profileImage" id="profileImageInput" style="display: none;" accept="image/*">
            
                <!-- Botón para cambiar imagen -->
                <button class="btn btn-change-photo" type="button" onclick="document.getElementById('profileImageInput').click();" title="Cambiar imagen de perfil.">
                    <i class="fa-solid fa-image"></i>
                </button>
            </div>
            <div class="inf_user">
                <h6 class="f-w-600" style="color: #efc031;">Nombre:</h6>
                <p id="nombreUsuario" style="font-size: 14px; font-weight: bolder;">{{ user.user_name|default:'Usuario' }}</p>

                <h6 class="f-w-600" style="color: #efc031; padding-top: 10px;">Usuario:</h6>
                <p style="font-size: 14px; font-weight: bolder;">{{ user.user_email|default:'Correo' }}</p>
            </div>
        </div>

        <div class="card-block">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            <!-- Sección: Datos Personales -->
            <div class="d-flex justify-content-between align-items-center b-b-default m-b-20 m-t-40 p-b-5">
                <h6 class="f-w-600">Datos Personales</h6>    
            </div>

            <div class="datospresonal">
                <div class="row" id="personalData">
                    <!-- Nombre de Usuario -->
                    <div class="col-sm-6">
                    <p class="m-b-10 f-w-600">Nombre de usuario</p>
                    <h6 class="text-muted f-w-400" id="nombre">{{ user.user_name|default:"Usuario" }}</h6>
                    </div>

                    <!-- Correo -->
                    <div class="col-sm-6">
                    <p class="m-b-10 f-w-600">Correo</p>
                    <h6 class="text-muted f-w-400" id="companyName">{{ user.user_email|default:"Correo" }}</h6>
                    </div>

                    <!-- Área -->
                    <div class="col-sm-6">
                    <p class="m-b-10 f-w-600">Área</p>
                    <h6 class="text-muted f-w-400" id="Type">{{ user.user_area|default:"Sin área" }}</h6>
                    </div>

                    <!-- Tipo de Documento -->
                    <div class="col-sm-6">
                    <p class="m-b-10 f-w-600">Tipo de documento</p>
                    <h6 class="text-muted f-w-400" id="docType">CC</h6>
                    </div>

                    <!-- Número de Documento -->
                    <div class="col-sm-6">
                    <p class="m-b-10 f-w-600">Número de Documento</p>
                    <h6 class="text-muted f-w-400" id="docNumber">{{ user.doc_number|default:"" }}</h6>
                    </div>
                </div>
            </div>

            <div style="padding-top: 20px;">
            <!-- Sección: Cambio de Contraseña -->
                <div class="d-flex justify-content-between align-items-center b-b-default m-b-20 m-t-40 p-b-5">
                    <h6 class="f-w-600">Cambio de contraseña</h6>    
                </div>

                <div id="passwordChangeSection" class="password-change-section datospresonal">
                    <div class="row">
                        <!-- Nueva Contraseña -->
                        <div class="col-sm-6">
                            <p class="m-b-10 f-w-600">Contraseña</p>
                            <input id="pass1" class="f-w-400 form-control" type="password" placeholder="Nueva contraseña">
                        </div>


                        <!-- Repetir Contraseña -->
                        <div class="col-sm-6">
                            <p class="m-b-10 f-w-600">Repita contraseña</p>
                            <input id="pass2" class="f-w-400 form-control" type="password" placeholder="Repetir contraseña">
                        </div>

                        <!-- Mensajes de validación -->
                        <div class="col-sm-12">
                            <ul id="passwordMessage" class="text-danger"></ul>
                        </div>

                        <!-- Botón para cambiar la contraseña -->
                        <div class="col-sm-12 d-flex justify-content-center ">
                            <button id="register" class="resta" type="button" disabled>Cambiar Contraseña</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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