<!-- Archivo: AccessDistributors.html -->
<!-- Ruta: src\templates\Ventas\VentasEUA\AccessDistributors.html -->
<!-- Lenguaje: HTML -->

{% extends "layout.html" %}

{% block title %}{{ _('Aprobación de acceso para distribuidores - Plantas Estados Unidos') }}{% 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/Ventas/VentasEUA/AccessDistributors.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 distribuidores') }}</h2>
                <p>{{ _('Módulo con el listado de proveedores 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 las compañías -->
            <table id="ApprovalAccessDistributorsTable" class="table table-striped">
                <thead>
                    <tr>
                        <th>{{ _('ID') }}</th>
                        <th>{{ _('Compañía') }}</th>
                        <th>{{ _('Persona de contacto') }}</th>
                        <th>{{ _('Dirección') }}</th>
                        <th>{{ _('Correo') }}</th>
                        <th>{{ _('Teléfono') }}</th>
                        <th>{{ _('Acción') }}</th>
                    </tr>
                    <tr>
                        <th></th> 
                        <th><input type="text" placeholder="{{ _('Buscar Compañía') }}"></th>
                        <th><input type="text" placeholder="{{ _('Buscar Contacto') }}"></th>
                        <th><input type="text" placeholder="{{ _('Buscar Dirección') }}"></th>
                        <th><input type="text" placeholder="{{ _('Buscar Correo') }}"></th>
                        <th><input type="text" placeholder="{{ _('Buscar Teléfono') }}"></th>
                        <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                    </tr>
                </thead>
                <tbody id="ApprovalAccessDistributorsbody">
                    <!-- Los datos se cargarán dinámicamente con JavaScript -->
                </tbody>
            </table>
        </div>

        <!-- Modal para Asignar Vendedor y Descuento -->
        <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">{{ _('Información de distribuidores') }}</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="Comments">{{ _('Comentario:') }}</label>
                                    <textarea class="form-control" id="Comments" rows="3" readonly></textarea>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="sellerSelect" class="required">{{ _('Asignar vendedor:') }}</label>
                                    <select id="sellerSelect" class="form-select">
                                        <option selected disabled value="">{{ _('Seleccione una opción') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="discountInput" class="required">{{ _('Máximo descuento autorizado:') }}</label>
                                    <input type="text" id="discountInput" class="form-control" placeholder="{{ _('Ingrese un valor (0 - 25)') }}">
                                </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-primary" onclick="assignSeller()">{{ _('Guardar') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal para Rechazar un distribuidor -->
        <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 distribuidores') }}</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 distribuidor:') }}</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/Ventas/VentasEUA/AccessDistributors.js') }}"></script>

{% endblock %}