<!--
Archivo: ScoreDistributorsMexico.html
Ruta: src\templates\Ventas\ScoreDistributorsMX\ScoreDistributorsMexico.html
Descripción: Plantilla para visualizar el score de Network Environment.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->

{% extends "layout.html" %}

{% block title %}{{ _('Score') }}{% endblock %}

{% block content %}
<!-- Conexion de CSS Casetas -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Ventas/VentasDist/ScoreDistributorsMexico.css') }}">

<!-- 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">

<main class="page">
    <section class="clean-block clean-form dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Score de Ventas Distribuidores México') }}</h2>
                <p>{{ _('Visualiza el score consolidado de todos los proyectos de fabricación y seguimiento de plantas eléctricas de emergencia para Ventas Distribuidores México.') }}</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="ClienteScoreTable" class="display nowrap" style="width:100%">
                <thead>
                    <tr>
                        <!--<th>{{ _('ID') }}</th> --><!-- ordernumandline -->
                        <th>{{ _('Número de Orden') }}</th>  <!-- OrderNum -->                        
                        <th>{{ _('Tipo') }}</th>  <!-- Tipo  -->
                        <th>{{ _('Departamento') }}</th>  <!-- Departamento -->
                        <th>{{ _('Vendedor') }}</th>  <!-- Vendedor -->
                        <th>{{ _('Cliente') }}</th>  <!-- Name -->                        
                        <th>{{ _('Capacidad') }}</th>  <!-- Capacidad -->                        
                        <th>{{ _('Fecha de Orden') }}</th>  <!-- OrderDate -->                        
                        <th>{{ _('Fecha Requerida') }}</th>  <!-- NeedByDate -->                        
                        <th>{{ _('Fecha de Planeación') }}</th>  <!-- FechaPlaneación -->                        
                        <th>{{ _('Fecha de Ventas') }}</th>  <!-- FechaVenta -->
                        <th>{{ _('Estado M') }}</th>  <!-- Faltante_M -->
                        <th>{{ _('Estatus M') }}</th>  <!-- Estatus_M -->
                        <th>{{ _('Fecha Llegada M') }}</th>  <!-- Fecha_Llegada_M -->
                        <th>{{ _('Estado G') }}</th>  <!-- Faltante_G -->
                        <th>{{ _('Estatus G') }}</th>  <!-- Estatus_G -->
                        <th>{{ _('Fecha Llegada G') }}</th>  <!-- Fecha_Llegada_G -->                       
                    </tr>

                    <!-- Campos de búsqueda -->
                    <tr>
                        <th><input type="text" placeholder="{{ _('Buscar Número de Orden') }}"></th>
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>
                        <th><input type="text" placeholder="{{ _('Buscar Vendedor') }}"></th>
                        <th><input type="text" placeholder="{{ _('Buscar Cliente') }}"></th>                        
                        <th><input type="text" placeholder="{{ _('Buscar Capacidad') }}"></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th>                        
                        <th><input type="text" placeholder="{{ _('') }}" disabled></th> 
                    </tr>
                </thead>

                <tbody id="ClienteScorebody">
                    <!-- Los datos se cargarán dinámicamente con JavaScript -->
                </tbody>
            </table>             
        
        
        </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>
    var TXT_BUTTON = "{{_('Exportar a Excel')}}";
    var TXT_DETAIL = "{{_('Detalle:')}}";
</script>
<!-- Conexion de JS Casetas -->
<script src="{{ url_for('static', filename='js/Ventas/VentasDist/ScoreDistributorsMexico.js') }}"></script>

{% endblock %}
