{% import "macros.html" as macros %}
<div class="bg-white shadow-sm rounded-lg mb-4">

    <div class="px-4 py-3">
        <div id="chart-container-{{ data.cliente_id }}">
            {% for grupo in data.estado_moneda_grupos %}
            <div class="px-4 py-3 border-b text-center">
                <small class="text-gray-500">[{{ data.cliente_codigo }}]</small>
                <h5 class="text-xl font-semibold">{{ data.cliente_nombre }}</h5>
            </div>
            <div class="mb-6">
                <h4 class="text-sm font-semibold mb-2 text-center">
                    {% if grupo.estado == 'COBRADA' and data.idioma == 'es' %}
                    Facturas cobradas ({{ grupo.moneda }})
                    {% elif grupo.estado == 'COBRADA' and data.idioma == 'en' %}
                    Paid invoices ({{ grupo.moneda }})
                    {% elif grupo.estado == 'POR COBRAR' and data.idioma == 'es' %}
                    Facturas por cobrar ({{ grupo.moneda }})
                    {% elif grupo.estado == 'POR COBRAR' and data.idioma == 'en' %}
                    Outstanding invoices ({{ grupo.moneda }})
                    {% else %}
                    {{ grupo.estado }} ({{ grupo.moneda }})
                    {% endif %}
                </h4>
                {% for r in grupo.resumen %}
                <div class="overflow-x-auto">
                    <!--<div class="max-h-64 overflow-y-auto">-->
                    <div>
                        <table
                            class="min-w-full text-[11px] text-left text-gray-700 border border-gray-300 table-fixed">
                            <!--<thead class="bg-gray-100 text-gray-800 sticky top-0 z-10">-->
                            <thead class="bg-gray-100 text-gray-800">
                                <tr>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-6">#</th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-24">No.</th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-32">
                                        {% if data.idioma == 'es' %} Fecha Emisión {% else %} Issue Date {% endif %}
                                    </th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-32">
                                        {% if data.idioma == 'es' %} Fecha Pago {% else %} Payment Date {% endif %}
                                    </th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-32">
                                        {% if data.idioma == 'es' %} Días Vencido {% else %} Days Overdue {% endif %}
                                    </th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-32">
                                        {% if data.idioma == 'es' %} Monto {% else %} Amount {% endif %}
                                    </th>
                                    <th class="px-2 py-1 border border-gray-300 font-medium w-32">
                                        {% if data.idioma == 'es' %} Pendiente {% else %} Pending {% endif %}
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for f in grupo.facturas %}
                                <tr class="bg-white hover:bg-gray-50">
                                    <td class="px-2 py-1 border border-gray-200 w-6">{{ loop.index }}</td>
                                    <td class="px-2 py-1 border border-gray-200 w-24 whitespace-nowrap">
                                        <strong>{{ f.factura_nro }}</strong>
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200 w-32 whitespace-nowrap">
                                        {{ f.factura_fecha_emision_str }}
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200 w-32 whitespace-nowrap">
                                        {{ f.factura_fecha_pago_str or '' }}
                                    </td>
                                    <td
                                        class="px-2 py-1 border border-gray-200 w-32 {{ macros.color_por_dias(f.dias_vencido) }}">
                                        {{ f.dias_vencido }}
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200 w-32">{{ f.factura_total_str }}</td>
                                    <td class="px-2 py-1 border border-gray-200 w-32">{{ f.factura_pendiente_str }}</td>
                                </tr>
                                {% endfor %}
                            <!--<tr class="bg-white hover:bg-gray-50 sticky bottom-0 z-10 bg-gray-100">-->
                                <tr class="bg-white hover:bg-gray-50 bg-gray-100">
                                    <td class="px-2 py-1 border border-gray-200">
                                        <strong>{{ r.cantidad_facturas }}</strong>
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200"></td>
                                    <td class="px-2 py-1 border border-gray-200"></td>
                                    <td class="px-2 py-1 border border-gray-200"></td>
                                    <td
                                        class="px-2 py-1 border border-gray-200 {{ macros.color_por_dias(r.promedio_dias_vencido) }}">
                                        <strong>{{ r.promedio_dias_vencido }}</strong>
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200">
                                        <strong>{{ r.total_str }}</strong>
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200">
                                        <strong>{{ r.total_pendiente_str }}</strong>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endfor %}
                <hr class="my-4">
                <canvas data-index="{{ loop.index0 }}" class="histograma-chart w-full h-24 mb-3"></canvas>
            </div>
            {% endfor %}
        </div>

        <script type="application/json" id="chart-data-{{ data.cliente_id }}">
        {
            "clientId": {{ data.cliente_id | tojson }},
            "chartData": {{ data.estado_moneda_grupos | tojson }},
            "labelX": {{ ("Rango de días vencido" if data.idioma == 'es' else "Days Overdue Range") | tojson }},
            "labelY": {{ ("Número de facturas" if data.idioma == 'es' else "Number of Invoices") | tojson }},
            "title": {{ (
                "Histograma de facturas por días vencido"
                if data.idioma == 'es' else
                "Histogram of Invoices by Days Overdue"
            ) | tojson }}
        }
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const appData = JSON.parse(document.getElementById('chart-data-{{ data.cliente_id }}').textContent);
                const chartCanvases = document.querySelectorAll('#chart-container-{{ data.cliente_id }} .histograma-chart');

                // Asignar color según el rango (extrayendo valor mínimo del rango)
                function getBarColor(rango) {
                    const match = rango.match(/\d+/); // extrae primer número encontrado
                    const min = match ? parseInt(match[0]) : 999;

                    if (min <= 29) return 'rgb(153, 246, 228)';     // Verde
                    if (min <= 59) return 'rgb(254, 240, 138)';     // Amarillo
                    if (min <= 89) return 'rgb(254, 215, 170)';     // Naranja
                    return 'rgb(254, 202, 202)';                    // Rojo
                }

                chartCanvases.forEach((canvas, index) => {
                    const grupo = appData.chartData[index];
                    if (!grupo || !canvas) return;

                    const labels = grupo.histograma.map(item => item.rango_vencimiento);
                    const values = grupo.histograma.map(item => item.cantidad);
                    const backgroundColors = labels.map(getBarColor);
                    const borderColors = backgroundColors.map(c => c.replace('0.7', '1'));

                    new Chart(canvas, {
                        type: 'bar',
                        data: {
                            labels,
                            datasets: [{
                                label: 'Cantidad de facturas',
                                data: values,
                                backgroundColor: backgroundColors,
                                borderColor: borderColors,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                title: {
                                    display: true,
                                    text: appData.title
                                },
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: appData.labelY
                                    }
                                },
                                x: {
                                    title: {
                                        display: true,
                                        text: appData.labelX
                                    }
                                }
                            }
                        }
                    });
                });
            });
        </script>
    </div>
</div>
</div>