{% extends "master.html" %}



{% block stylesheets %}
    {{ parent() }}    

    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <!--datatable responsive css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />

    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">

    <!-- Sweet Alert css-->
    <link href="{{assets}}/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
{% endblock %}


{% block javascripts %}
    {{ parent() }}

     <!--datatable js-->
     <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
     <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <!-- Sweet Alerts js -->
    <script src="{{assets}}/libs/sweetalert2/sweetalert2.min.js"></script>
    <script src="{{assets}}/js/pages/usuarios.js"></script>

{% endblock %}


{% block body %}


<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Perfil</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{assets}}{{home}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{assets}}Perfil/">Perfil</a></li>
                    <li class="breadcrumb-item active">{{usuario.name}} {{usuario.lastname}}</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

<!--Begin row -->
<div class="row">
    <div class="col-3">
        <div class="card">
            <div class="card-body p-4">
                <div class="text-center">
                    <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                        <img id="profile-img" src="{{assets}}/images/users/{{usuario.foto}}" class="rounded-circle avatar-xl img-thumbnail user-profile-image" alt="user-profile-image">
                        <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                            <form id="FormFoto" action="{{assets}}/Usuarios/foto" method="post">
                               
                               <input type="hidden" name="id" value="{{usuario.id}}" />
                                <input id="profile-img-file-input" name="img-file-input" accept="image/png, image/gif, image/jpeg" type="file" class="profile-img-file-input">
                            
                                <label for="profile-img-file-input" 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">{{usuario.name}} {{usuario.lastname}}</h5>
                    <p class="text-muted mb-0">{{usuario.rol_fimpes}} / {{usuario.rol_institucion}}</p>
                </div>

                <div class="col-lg-12">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button"onClick="window.location.href='{{assets}}Perfil/ver/{{usuario.id}}'" class="btn btn-soft-success">Salir</button>
                        <button type="submit" class="btn btn-primary" data-loading-text="Loading..." id="update-btn">Guardar</button>                                        
                    </div>
                </div>
            </form>
                
            </div>
        </div>
        <!--end card-->
        
    </div>
    <!--end col-->
    <div class="col-9">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                <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> Información
                        </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 Password
                        </a>
                    </li>
                    
                </ul>
            </div>

                
            </div>
            </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);" class="tablelist-form needs-validation" autocomplete="off" id="FormEditPerfil" action="{{assets}}/Usuarios/guardar" method="post" novalidate>
                            
                            <input type="hidden" id="id" name="id" value="{{usuario.id}}" />

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Usuario</label>
                                        <input type="text" class="form-control" id="email" name="email" placeholder="" value="{{usuario.email}}" readonly  required>
                                        <div class="invalid-feedback">
                                            Información necesaria.
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                
                                <div class="col-lg-6">
                                    
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Nombre</label>
                                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="" value="{{usuario.name}}" required>
                                        <div class="invalid-feedback">
                                            Información necesaria.
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Apellidos</label>
                                        <input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="" value="{{usuario.lastname}}" required>
                                        <div class="invalid-feedback">
                                            Información necesaria.
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Teléfono</label>
                                        <input type="text" class="form-control" id="telefono" name="telefono" placeholder="" value="{{usuario.telefono}}" required>
                                        <div class="invalid-feedback">
                                            Información necesaria.
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Extensión</label>
                                        <input type="text" class="form-control" id="extension" name="extension" placeholder="" value="{{usuario.extension}}" >
                                        
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="rol_institucion" class="form-label">PERFIL INSTITUCIÓN:</label>
                                        <select name="rol_institucion" id="rol_institucion" class="form-control" disabled required>
                                            
                                            <option value="0">NO APLICA</option>
                                            {% for rol in roles_institucion %}
                                            <option value="{{rol.id}}"  {% if usuario.id_rol_institucion == rol.id %} selected  {% endif %}>{{rol.rol}} </option>
                                            {% endfor %}

                                        </select>
                                    </div>
                                </div>
                                <!--end col-->
                                
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="institucion" class="form-label">INSTITUCIÓN:</label>
                                
                                        <select name="institucion" id="institucion" class="form-control" disabled required>
                                            
                                            <option value="0">NO APLICA</option>
                                            {% for item in instituciones %}
                                            <option value="{{item.id}}" {% if usuario.id_institucion == item.id %} selected  {% endif %}> {{item.institucion}} </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                               
                                <!--end col-->

                                <div class="col-lg-6">
                                    <div>
                                        <label for="rol_fimpes" class="form-label">PERFIL FIMPES:</label>
                                        
                                        <select name="rol_fimpes" id="rol_fimpes" class="form-control" disabled required>
                                            
                                            <option value="0">NO APLICA</option>
                                            {% for rol in roles_fimpes %}
                                            <option value="{{rol.id}}" {% if usuario.id_rol_fimpes == rol.id %} selected  {% endif %}>{{rol.rol}} </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <!--end col-->


                                <div class="col-lg-12">
                                    <div class="hstack gap-2 justify-content-end">
                                        <button type="button"onClick="window.location.href='{{assets}}Perfil/ver/{{usuario.id}}'" class="btn btn-soft-success">Salir</button>
                                        <button type="submit" class="btn btn-primary" data-loading-text="Loading..." id="add-btn">Guardar</button>                                        
                                    </div>
                                </div>

                               
                               
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                    <!--end tab-pane-->
                    <div class="tab-pane" id="changePassword" role="tabpanel">
                        <form action="{{assets}}Usuarios/cambiarPassword" class="tablelist-form needs-validation" autocomplete="off" id="FormPassword" method="POST" novalidate>
                            
                            <input type="hidden" name="id" value="{{usuario.id}}" />
                            
                            <div class="row g-2">    
                                <div class="col-lg-4">
                                    <div>
                                        <label for="newpasswordInput" class="form-label">Password Actual*</label>
                                        <input type="password" class="form-control" id="password_actual" name="password_actual" placeholder="Password actual" required>
                                    </div>
                                </div>
                                <!--end col-->
                                
                                <div class="col-lg-4">
                                    <div>
                                        <label for="newpasswordInput" class="form-label">Nuevo Password*</label>
                                        <input type="password" class="form-control" id="password" name="password" placeholder="Nuevo password" required>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-lg-4">
                                    <div>
                                        <label for="confirmpasswordInput" class="form-label">Confirmar Password*</label>
                                        <input type="password" class="form-control" id="password_confirm" name="password_confirm" placeholder="Confirmar password" required>
                                    </div>
                                </div>
                                <!--end col-->
                               
                               
                                <div class="col-lg-12">
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-success" id="update-password-btn">Cambiar password</button>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                        
                    </div>
                    <!--end tab-pane-->
                    
                    
                </div>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
<!--end row-->
                    

{% endblock %}