<!-- 
 Archivo: DMAccessEmployee.html
Ruta: src\templates\SupYCtrol\DataMaster\DMAccessEmployee.html
Lenguaje: HTML 
-->

{% extends "layout.html" %}

{% block title %}{{ _('Aprobación de acceso para empleados de IGSA') }}{% endblock %}

{% block content %}

<!-- DataTables CSS (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

<!-- Botones de DataTables (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<!-- FontAwesome (para iconos) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- ⚠️ Cargar al final para que tenga prioridad -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/SupYCtrol/DataMaster/DMAccessEmployee.css') }}">

<main class="page">
    <section class="clean-block clean-form dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Aprobación de acceso para empleados') }}</h2>
                <p>{{ _('Módulo con el listado de empleados de IGSA pendientes de aprobación.') }}</p>
            </div>
            <!-- Indicador de carga -->
            <div id="loading-indicator" style="display: none; text-align: center; margin-top: 10px;">
                <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                <span>{{ _('Cargando...') }}</span>
            </div>
            <!-- Botones de acción -->
            <div class="d-flex justify-content-between mb-3">
                <button type="button" class="btn btn-secondary dm-btn-Secundario" onclick="history.back();">
                    <i class="fas fa-arrow-left"></i> {{ _('Regresar') }}
                </button>
            </div>
            <!-- Tabla para listar los empleados -->
            <table id="ApprovalAccessTable" class="table table-striped">
                <thead>
                    <tr>
                        <th>{{ _('ID') }}</th>
                        <th>{{ _('Nombre') }}</th>
                        <th>{{ _('Apellido') }}</th>
                        <th>{{ _('División') }}</th>
                        <th>{{ _('Departamento') }}</th>
                        <th>{{ _('Puesto') }}</th>
                        <th>{{ _('Jefe Directo') }}</th>
                        <th>{{ _('Tipo de permiso') }}</th>
                        <th>{{ _('Fecha y Hora') }}</th>
                        <th>{{ _('Acción') }}</th>
                    </tr>
                    <tr>
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                        <th><input type="text" placeholder="Buscar Nombre"></th>
                        <th><input type="text" placeholder="Buscar Apellido"></th>
                        <th><input type="text" placeholder="Buscar División"></th>
                        <th><input type="text" placeholder="Buscar Correo"></th>
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                    </tr>
                </thead>
                <tbody id="ApprovalAccessbody">
                    <!-- Los datos se cargarán dinámicamente con JavaScript -->
                </tbody>
            </table>
        </div>

        <!-- Modal para Verificar Datos del Empleado -->
        <div class="modal fade" id="EstandarModal" tabindex="-1" aria-labelledby="EstandarModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg modal-custom-width">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="EstandarModalLabel">
                            {{ _('Verificar datos del empleado y corregir si es necesario') }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid p-0">
                            <form class="modal-form-custom">
                                
                                <!-- Fila para Creado -->
                                <div class="form-row">
                                    <div class="form-group form-group-creado">
                                        <label for="CreatedAt">{{ _('Creado:') }}</label>
                                        <input type="text" id="CreatedAt" class="form-control" disabled>
                                    </div>
                                </div>

                                <!-- Fila para Nombres y Apellidos -->
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="FirstName" class="required">{{ _('Nombre:') }}</label>
                                        <input type="text" id="FirstName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="MiddleName">{{ _('Segundo nombre:') }}</label>
                                        <input type="text" id="MiddleName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="LastName" class="required">{{ _('Primer apellido:') }}</label>
                                        <input type="text" id="LastName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="SecondLastName" class="required">{{ _('Segundo apellido:') }}</label>
                                        <input type="text" id="SecondLastName" class="form-control">
                                    </div>
                                </div>
                                
                                <!-- Fila para Compañía, División y Departamento -->
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="Company" class="required">{{ _('Compañía:') }}</label>
                                        <select id="Company" class="form-select">
                                            <option value="">Seleccione una compañía</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="Division" class="required">{{ _('División:') }}</label>
                                        <select id="Division" class="form-select" disabled>
                                            <option value="">Seleccione una división</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="Departament" class="required">{{ _('Departamento:') }}</label>
                                        <select id="Departament" class="form-select" disabled>
                                            <option value="">Seleccione un departamento</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Fila para Tipo de formulario, Puesto y Jefe -->
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="RequestType" class="required">{{ _('Tipo de formulario:') }}</label>
                                        <select id="RequestType" class="form-select" disabled>
                                            <option value="">Seleccione un tipo de formulario</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="DirectSupervisor" class="required">{{ _('Jefe:') }}</label>
                                        <input type="text" id="DirectSupervisor" class="form-control">
                                    </div>
                                </div>

                                <!-- Fila para Puesto Rol y Permisos -->
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="Position" class="required">{{ _('Puesto:') }}</label>
                                        <input type="text" id="Position" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="RolAssig" class="required">{{ _('Asigna un rol:') }}</label>
                                        <select id="RolAssig" class="form-select">
                                            <option value="" disabled>Seleccione un rol. Si no lo encuentra, regístrelo.</option>
                                        </select>
                                    </div>    
                                    <div class="form-group">
                                        <label for="PermissionType" class="required">{{ _('Permiso solicitado:') }}</label>
                                        <input type="text" id="PermissionType" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="PermissionAssign">{{ _('Permiso asignado:') }}</label>
                                        <select id="PermissionAssign" class="form-select">
                                            <option value="Predeterminado" selected>Predeterminado</option>
                                            <option value="Lectura" disabled>Lectura</option>
                                            <option value="Creación" disabled>Creación</option>
                                            <option value="Editar" disabled>Editar</option>
                                            <option value="Borrar" disabled>Borrar</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Fila para Correo, Teléfono y Número de empleado -->
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="CorporateEmail" class="required">{{ _('Correo:') }}</label>
                                        <input type="email" id="CorporateEmail" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="ContactPhone" class="required">{{ _('Teléfono:') }}</label>
                                        <input type="tel" id="ContactPhone" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="EmployeeNumber" class="required">{{ _('Número de empleado:') }}</label>
                                        <input type="text" id="EmployeeNumber" class="form-control">
                                    </div>
                                </div>



                                <!-- Fila para Comentario -->
                                <div class="form-row">
                                    <div class="form-group form-group-comentario">
                                        <label for="Comments">{{ _('Comentario:') }}</label>
                                        <textarea id="Comments" class="form-control" rows="3" disabled></textarea>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancelar') }}</button>
                        <button type="button" class="btn btn-primary" onclick="guardarDatosEmpleado()">{{ _('Guardar') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal para Rechazar un empleado -->
        <div class="modal fade" id="RejectModal" tabindex="-1" aria-labelledby="RejectModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg modal-custom-width">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="RejectModalLabel">{{ _('Rechazo de acceso para empleados') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="modal-form-custom">
                            <div class="form-row">
                                <div class="form-group form-group-comentario">
                                    <label for="Comments2">{{ _('Comentario del empleado:') }}</label>
                                    <textarea class="form-control" id="Comments2" rows="3" readonly></textarea>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group form-group-comentario">
                                    <label for="Commentsresp">{{ _('Motivo de rechazo (opcional):') }}</label>
                                    <textarea class="form-control" id="Commentsresp" rows="3" placeholder="{{ _('Detalle el motivo por el cual se rechaza la solicitud...') }}"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancelar') }}</button>
                        <button type="button" class="btn btn-danger" id="confirmRejectBtn">{{ _('Rechazar') }}</button>
                    </div>
                </div>
            </div>
        </div>        

    </section>

    <!-- Overlay global de carga -->
    <div id="global-loading-overlay" style="display: none;">
        <div class="loading-content">
            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
            <p class="mt-3 loading-text">Procesando solicitud...</p>
        </div>
    </div>

</main>

<!-- jQuery (Debe ir antes de cualquier otro script de DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- Botones de DataTables (Última versión estable) -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<!-- Dependencias para exportar a Excel/PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<script src="{{ url_for('static', filename='js/SupYCtrol/DataMaster/DMAccessEmployee.js') }}"></script>

{% endblock %}