{#-
SPDX-License-Identifier: Apache-2.0
SPDX-FileCopyrightText: 2025 - 2026 BMO Soluciones, S.A.
-#}

{% extends "base.html" %}
{% block content %}
<div class="content-header">
    <h3>Historial de Nóminas: {{ planilla.nombre }}</h3>
    <div>
        <a href="{{ url_for('planilla.edit', planilla_id=planilla.id) }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i> Volver a Planilla
        </a>
        <a href="{{ url_for('planilla.ejecutar_nomina', planilla_id=planilla.id) }}" class="btn btn-primary">
            <i class="bi bi-play-fill me-1"></i> Nueva Ejecución
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        {% if nominas %}
        <table class="table table-striped table-hover" id="nominas-table">
            <thead>
                <tr>
                    <th>Período</th>
                    <th>Fecha Generación</th>
                    <th>Estado</th>
                    <th class="text-right">Total Bruto</th>
                    <th class="text-right">Total Deducciones</th>
                    <th class="text-right">Total Neto</th>
                    <th>Generado Por</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for nomina in nominas %}
                <tr {% if nomina.estado == 'calculating' %}class="table-primary"{% endif %}
                    data-nomina-id="{{ nomina.id }}"
                    data-planilla-id="{{ planilla.id }}"
                    data-estado="{{ nomina.estado }}">
                    <td>
                        {{ nomina.periodo_inicio.strftime('%d/%m/%Y') }} -
                        {{ nomina.periodo_fin.strftime('%d/%m/%Y') }}
                    </td>
                    <td>{{ nomina.fecha_generacion.strftime('%d/%m/%Y %H:%M') }}</td>
                    <td>
                        {% if nomina.estado == 'calculating' %}
                        <span class="badge bg-primary js-estado-badge">
                            <i class="bi bi-arrow-repeat"></i> Calculando
                            {% if nomina.total_empleados and nomina.total_empleados > 0 %}
                            (<span class="js-procesados">{{ nomina.empleados_procesados }}</span>/<span class="js-total">{{ nomina.total_empleados }}</span>)
                            {% endif %}
                        </span>
                        {% elif nomina.estado == 'generated' %}
                        <span class="badge bg-warning">Generado</span>
                        {% elif nomina.estado == 'approved' %}
                        <span class="badge bg-info">Aprobado</span>
                        {% elif nomina.estado == 'applied' %}
                        <span class="badge bg-success">Aplicado</span>
                        {% elif nomina.estado == 'paid' %}
                        <span class="badge bg-success">Pagado</span>
                        {% elif nomina.estado == 'cancelled' %}
                        <span class="badge bg-secondary">Anulado</span>
                        {% elif nomina.estado == 'error' %}
                        <span class="badge bg-danger">Error</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ nomina.estado }}</span>
                        {% endif %}
                    </td>
                    <td class="text-right">{{ "{:,.2f}".format(nomina.total_bruto|float) }}</td>
                    <td class="text-right">{{ "{:,.2f}".format(nomina.total_deducciones|float) }}</td>
                    <td class="text-right"><strong>{{ "{:,.2f}".format(nomina.total_neto|float) }}</strong></td>
                    <td>{{ nomina.generado_por or 'N/A' }}</td>
                    <td>
                        <a href="{{ url_for('planilla.ver_nomina', planilla_id=planilla.id, nomina_id=nomina.id) }}"
                           class="btn btn-sm btn-outline-primary" title="Ver Detalle">
                            <i class="bi bi-eye"></i>
                        </a>
                        {% if nomina.estado == 'error' %}
                        <form action="{{ url_for('planilla.reintentar_nomina', planilla_id=planilla.id, nomina_id=nomina.id) }}"
                              method="post" style="display: inline;" class="ms-1">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-warning" 
                                    onclick="return confirm('¿Reintentar esta nómina?')"
                                    title="Reintentar Procesamiento">
                                <i class="bi bi-arrow-clockwise"></i>
                            </button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="mt-2" id="background-refresh-hint" style="display: none;">
            <small class="text-muted">
                <i class="bi bi-arrow-repeat"></i> El historial se actualiza automáticamente cada 3 segundos mientras haya nóminas en cálculo.
            </small>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> No hay nóminas generadas para esta planilla.
            <a href="{{ url_for('planilla.ejecutar_nomina', planilla_id=planilla.id) }}">Ejecutar primera nómina</a>
        </div>
        {% endif %}
    </div>
</div>

{% if nominas %}
<script>
(function() {
    const rows = Array.from(document.querySelectorAll('tr[data-nomina-id][data-estado="calculating"]'));
    const hint = document.getElementById('background-refresh-hint');

    if (!rows.length) {
        return;
    }

    if (hint) {
        hint.style.display = '';
    }

    let hasCompletedNomina = false;

    function updateRow(row, data) {
        const badge = row.querySelector('.js-estado-badge');
        const processed = row.querySelector('.js-procesados');
        const total = row.querySelector('.js-total');

        if (processed) {
            processed.textContent = data.empleados_procesados || 0;
        }

        if (total) {
            total.textContent = data.total_empleados || 0;
        }

        if (data.estado && data.estado !== 'calculating') {
            hasCompletedNomina = true;
            row.setAttribute('data-estado', data.estado);
            if (badge) {
                badge.classList.remove('bg-primary');
                badge.classList.add(data.estado === 'error' ? 'bg-danger' : 'bg-success');
                badge.innerHTML = data.estado === 'error' ? 'Error' : 'Completado';
            }
        }
    }

    async function pollProgress() {
        await Promise.all(
            rows.map(async (row) => {
                if (row.getAttribute('data-estado') !== 'calculating') {
                    return;
                }

                const nominaId = row.getAttribute('data-nomina-id');
                const progressUrlTemplate = '{{ url_for("planilla.progreso_nomina", planilla_id=planilla.id, nomina_id="__NOMINA_ID__") }}';
                const progressUrl = progressUrlTemplate.replace('__NOMINA_ID__', nominaId);

                try {
                    const response = await fetch(progressUrl);
                    if (!response.ok) {
                        return;
                    }
                    const data = await response.json();
                    updateRow(row, data);
                } catch (_error) {
                    // Silent retry in next polling cycle
                }
            })
        );

        if (hasCompletedNomina) {
            setTimeout(() => window.location.reload(), 750);
        }
    }

    pollProgress();
    const intervalId = setInterval(pollProgress, 3000);
    window.addEventListener('beforeunload', () => clearInterval(intervalId));
})();
</script>
{% endif %}
{% endblock %}