@extends('layouts.app', ['activePage' => 'contabilidad', 'menuParent' => 'reportes', 'titlePage' => __('')])
@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Balance general</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Periodo: <span class="text-red-500">*</span></label>
                                <select id="periodoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="" disabled selected>-Selecciona un periodo-</option>
                                    @foreach($periodos as $p)
                                    <option value="{{$p->id}}">{{$p->descripcion}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2 mt-6">
                                <button class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-[#0A415F] hover:bg-[#083549] text-white transition-colors duration-200" onclick="generarReporte()">
                                    <i class="material-icons align-middle text-sm">search</i> Generar reporte
                                </button>
                            </div>
                        </div>
                        <div class="flex gap-2 mb-4 justify-end m-2" id="balance-botones-exportar" style="display:none;">
                            <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 text-sm rounded-md transition-colors font-medium duration-200" onclick="exportarBalanceGeneral('excel')">
                                <i class="material-icons align-middle text-sm">file_present</i>Exportar EXCEL
                            </button>
                            <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-1.5 text-sm rounded-md transition-colors font-medium duration-200" onclick="exportarBalanceGeneral('pdf')">
                                <i class="material-icons align-middle text-sm">picture_as_pdf</i>Exportar PDF
                            </button>
                        </div>
                        <div id="loading-balance" style="display:none; min-height: 200px;" class="flex flex-col justify-center items-center w-full h-full">
                            <svg class="animate-spin h-10 w-10 text-blue-700 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                            </svg>
                            <span class="text-lg font-semibold text-blue-700">Cargando balance general...</span>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200" id="tabla-balance-general" style="display:none;">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-4 py-2 text-center text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo" colspan="2">ACTIVO</th>
                                        <th class="px-4 py-2 text-center text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo" colspan="2">PASIVO Y CAPITAL</th>
                                    </tr>
                                    <tr>
                                        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo">Subnivel</th>
                                        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo">Monto</th>
                                        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo">Subnivel</th>
                                        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700 uppercase tracking-wider balance-titulo">Monto</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-balance-general" class="bg-white divide-y divide-gray-200 balance-fila">
                                    <!-- Las filas se generan dinámicamente -->
                                </tbody>
                                <tfoot id="tfoot-balance-general" style="display:none;">
                                    <tr class="bg-gray-200 font-bold balance-total">
                                        <td class="px-4 py-2 text-right" colspan="2" id="total-activo"></td>
                                        <td class="px-4 py-2 text-right" colspan="2" id="total-pasivo-capital"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single { height: 40px !important; }
    .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; }
    .balance-titulo {
        font-weight: 700 !important;
        letter-spacing: 0.05em;
    }
    .balance-fila {
        font-size: 0.85rem !important; /* text-sm */
    }
    .balance-total {
        font-weight: 700 !important;
    }
</style>
@endsection

@push('js')
<script>
$(document).ready(function() {
    $('.select2').select2({ placeholder: "-Selecciona-", width: '100%' });
});

function generarReporte() {
    var periodo = $('#periodoFilter').val();
    if (!periodo) {
        Swal.fire({ icon: 'warning', title: 'Atención', text: 'Por favor selecciona un periodo.', confirmButtonText: 'Aceptar' });
        return;
    }
    ejecutarGeneracionBalance(periodo);
}

function ejecutarGeneracionBalance(periodo) {
    $('#tabla-balance-general').hide();
    $('#balance-botones-exportar').hide();
    $('#loading-balance').show();
    $.ajax({
        url: "{{ route('reporte-balance-general.generar-reporte') }}",
        type: "POST",
        data: { periodo: periodo },
        success: function(response) {
            renderizarTablaBalanceGeneral(response);
            $('#balance-botones-exportar').show();
            $('#tabla-balance-general').show();
            $('#tfoot-balance-general').show();
            $('#loading-balance').hide();
        },
        error: function(xhr, status, error) {
            $('#tbody-balance-general').html('<tr><td colspan="4" class="text-center py-8"><i class="material-icons text-gray-400 text-4xl mb-2">error</i><p class="text-gray-500">Error al cargar el balance general</p></td></tr>');
            $('#tabla-balance-general').show();
            $('#tfoot-balance-general').hide();
            $('#loading-balance').hide();
        }
    });
}

function renderizarTablaBalanceGeneral(data) {
    let activos = Object.entries(data['Activo'] || {});
    let pasivos = Object.entries(data['Pasivo'] || {});
    let capital = Object.entries(data['Capital'] || {});

    let totalActivo = 0;
    let totalPasivo = 0;
    let totalCapital = 0;

    // Unimos pasivo y capital en un solo array para la columna derecha, pero con separadores
    let derecha = [];
    if (pasivos.length > 0) {
        derecha.push({separador: 'PASIVO'});
        derecha = derecha.concat(pasivos);
        derecha.push({total: 'PASIVO'});
    }
    if (capital.length > 0) {
        derecha.push({separador: 'CAPITAL'});
        derecha = derecha.concat(capital);
        derecha.push({total: 'CAPITAL'});
    }

    let filasIzq = activos.length;
    let filasDer = derecha.length;
    let filas = Math.max(filasIzq, filasDer);

    let html = '';
    let izq = 0, der = 0;
    let sumandoPasivo = false;
    let sumandoCapital = false;

    for (let i = 0; i < filas; i++) {
        // Izquierda (Activo)
        let cuentaIzq = activos[izq];
        let nombreIzq = cuentaIzq ? cuentaIzq[0] : '';
        let datosIzq = cuentaIzq ? cuentaIzq[1] : null;
        let montoIzq = datosIzq ? parseFloat(datosIzq.suma) : 0;
        if (datosIzq) totalActivo += montoIzq;

        // Derecha (Pasivo y Capital, con separadores)
        let celdaDer = '';
        let celdaMontoDer = '';
        if (derecha[der]) {
            if (derecha[der].separador) {
                celdaDer = `<span class="font-bold text-blue-900">${derecha[der].separador}</span>`;
                celdaMontoDer = '';
                sumandoPasivo = derecha[der].separador === 'PASIVO';
                sumandoCapital = derecha[der].separador === 'CAPITAL';
                der++;
            } else if (derecha[der].total) {
                let total = derecha[der].total === 'PASIVO' ? totalPasivo : totalCapital;
                celdaDer = `<span class="font-bold">Total ${derecha[der].total}</span>`;
                celdaMontoDer = `<span class="font-bold text-blue-800">${formatearMoneda(total)}</span>`;
                sumandoPasivo = false;
                sumandoCapital = false;
                der++;
            } else {
                let nombreDer = derecha[der][0];
                let datosDer = derecha[der][1];
                let montoDer = datosDer ? parseFloat(datosDer.suma) : 0;
                if (sumandoPasivo) totalPasivo += montoDer;
                if (sumandoCapital) totalCapital += montoDer;
                celdaDer = `<span class="font-bold">${nombreDer}</span><div><span class='font-mono text-xs text-gray-500'>${datosDer.numeroCuenta}</span></div>`;
                celdaMontoDer = formatearMoneda(montoDer);
                der++;
            }
        }

        html += `<tr>
            <td class="align-top px-4 py-2 w-1/4">
                <span class="font-bold">${nombreIzq || ''}</span>
                ${datosIzq ? `<div><span class='font-mono text-xs text-gray-500'>${datosIzq.numeroCuenta}</span></div>` : ''}
            </td>
            <td class="align-top px-4 py-2 text-right w-1/4 font-bold">${datosIzq ? formatearMoneda(montoIzq) : ''}</td>
            <td class="align-top px-4 py-2 w-1/4">${celdaDer}</td>
            <td class="align-top px-4 py-2 text-right w-1/4 font-bold">${celdaMontoDer}</td>
        </tr>`;
        if (cuentaIzq) izq++;
    }

    $('#tbody-balance-general').html(html);
    $('#total-activo').html('TOTAL ACTIVO: <span class="text-blue-800">' + formatearMoneda(totalActivo) + '</span>');
    $('#total-pasivo-capital').html('TOTAL PASIVO Y CAPITAL: <span class="text-blue-800">' + formatearMoneda(totalPasivo + totalCapital) + '</span>');
}

function formatearMoneda(monto) {
    return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 2 }).format(monto);
}

function exportarBalanceGeneral(type) {
    var periodo = $('#periodoFilter').val();
    if (!periodo) {
        Swal.fire({ icon: 'warning', title: 'Atención', text: 'Por favor selecciona un periodo.', confirmButtonText: 'Aceptar' });
        return;
    }
    ejecutarExportacionBalance(type, periodo);
}

function ejecutarExportacionBalance(type, periodo) {
    $.ajax({
        url: "{{ route('reporte-balance-general.generar-archivo') }}",
        type: 'POST',
        data: { export: type, periodo: periodo },
        beforeSend: function() { $('#loadingLoad').modal('show'); },
        success: function(response) {
            if (response.filename) {
                var link = document.createElement('a');
                link.href = response.url;
                link.download = response.filename;
                link.click();
            } else {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al exportar el archivo.');
            }
        },
        error: function(xhr, status, error) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al exportar el archivo.');
        },
        complete: function() { setTimeout(() => { $('#loadingLoad').modal('hide'); }, 2000); }
    });
}
</script>
@endpush