<div class="position-relative mx-n4 mt-n4">
    <div class="profile-wid-bg profile-setting-img">
        <img src="main/assets/images/profile-bg.jpg" class="profile-wid-img" alt="">
    </div>
</div>
<div class="row">
    <div class="col-xxl-3">
        <div class="card mt-n5">
            <div class="card-body p-4">
                <div class="text-center">
                    <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                        <img src="main/assets/images/users/<?= App::obtenerFotoUsuario() ?>?v=<?=rand();?>" class="rounded-circle avatar-xl img-thumbnail user-profile-image" alt="user-profile-image" id="img-foto-usuario">
                        <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                            <input id="file-foto-usuario" type="file" class="profile-img-file-input">
                            <label for="file-foto-usuario" class="profile-photo-edit avatar-xs">
                                <span class="avatar-title rounded-circle bg-light text-body">
                                    <i class="ri-camera-fill"></i>
                                </span>
                            </label>
                        </div>
                    </div>
                    <h5 class="fs-16 mb-1"><?= App::obtenerNombreCompletoUsuario(); ?></h5>
                </div>
            </div>
        </div>
        <!--end card-->
    </div>
    <!--end col-->
    <div class="col-xxl-9">
        <div class="card mt-xxl-n5">
            <div class="card-header">
                <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab">
                            <i class="fas fa-home"></i> Datos personales
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#changePassword" role="tab">
                            <i class="far fa-user"></i> Cambiar contraseña
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body p-4">
                <div class="tab-content">
                    <div class="tab-pane active" id="personalDetails" role="tabpanel">
                        <form action="javascript:void(0);">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="txt-nombres" class="form-label">Nombres</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-nombres" placeholder="Enter your firstname" value="<?= App::obtenerNombresUsuario(); ?>" readonly>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="txt-apellidos" class="form-label">Apellidos</label>
                                        <input type="text" class="form-control form-control-sm" id="txt-apellidos" placeholder="Enter your lastname" value="<?= App::obtenerApellidosUsuario(); ?>" readonly>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="txt-email" class="form-label">Correo electrónico</label>
                                        <input type="email" class="form-control form-control-sm" id="txt-email" placeholder="Enter your email" value="<?= App::obtenerEmailUsuario(); ?>" readonly>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label">Roles</label>
                                        <div id="contenedor-roles"></div>
                                    </div>
                                </div>
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane" id="changePassword" role="tabpanel">
                        <form id="password-form" name="password-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                            <div class="row g-2">
                                <div class="col-lg-4">
                                    <div>
                                        <label for="txt-contrasenia-actual" class="form-label">Contraseña actual <span class="required">*</span></label>
                                        <input type="password" class="form-control form-control-sm" id="txt-contrasenia-actual" placeholder="Ingrese su contraseña actual" required>
                                        <span class="invalid-feedback">
                                            Por favor ingrese la contraseña actual
                                        </span>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-4">
                                    <div>
                                        <label for="txt-nueva-contrasenia" class="form-label">Nueva contrasenia <span class="required">*</span></label>
                                        <input type="password" class="form-control form-control-sm" id="txt-nueva-contrasenia" placeholder="Ingrese la nueva contraseña" required>
                                        <span class="invalid-feedback">
                                            Por favor ingrese la nueva contraseña
                                        </span>
                                    </div>
                                    <div id="password-contain" class="p-3 bg-light mb-2 rounded">
                                        <h5 class="fs-13">La contraseña debe tener:</h5>
                                        <p id="pass-length" class="invalid fs-12 mb-2">Mínimo <b>6 carácteres</b></p>
                                        <p id="pass-lower" class="invalid fs-12 mb-2">Incluir al menos una <b>minúscula</b></p>
                                        <p id="pass-upper" class="invalid fs-12 mb-2">Incluir al menos una <b>mayúscula</b></p>
                                        <p id="pass-number" class="invalid fs-12 mb-2">Incluir al menos un <b>número</b></p>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-4">
                                    <div>
                                        <label for="txt-confirmacion-contrasenia" class="form-label">Confirme la nueva contraseña</label>
                                        <input type="password" class="form-control form-control-sm" id="txt-confirmacion-contrasenia" placeholder="Confirme la nueva contraseña" required>
                                        <span class="invalid-feedback">
                                            Por favor confirme la nueva contraseña
                                        </span>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-12">
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-success">Cambiar contraseña</button>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
<!--end row-->

<?php
$jsModules = [
    'perfilPage'
];
