@extends('layouts.app', ['activePage' => 'cuentascontables', 'menuParent' => 'catalogos', 'titlePage' => __('Contabilidad - Ajuste de saldos de cuentas contables')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6 flex items-center gap-4">
                <h6 class="text-xl font-semibold text-gray-800 m-0">Ajuste de saldos de cuentas contables</h6>
            </div>
            <div class="col-6 text-right">
                <a href="{{ route('cuentas-contables.') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Volver
                </a>
            </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 contable:</label>
                                <input type="month" id="periodo_contable" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                            <div class="col-span-2 mt-4">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 transition-colors duration-200" onclick="getCuentasContables()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                            </div>
                        </div>
                        <div>
                            <div class="mb-6 text-center">
                                <h2 class="text-2xl font-bold text-gray-800 hidden" id="periodo-titulo">

                                </h2>
                            </div>

                            <div id="content-totals" class="text-center mb-4">
                                <!-- El resumen se generará dinámicamente -->
                            </div>


                            <div id="list-cuentas-contables" class="space-y-4 overflow-x-auto table-scroll">
                                <!-- El contenido se generará dinámicamente -->
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12 text-right">
                                <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="actualizarSaldos()">
                                    <i class="material-icons align-middle text-sm">save</i> Actualizar saldos
                                </button>
                            </div>
                        </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;
    }

    .table-scroll {
        max-height: 600px;
        overflow-y: auto;
        width: 100%;
    }

    .accordion-header {
        cursor: pointer;
        padding: 1rem;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
    }

    .accordion-header:hover {
        background-color: #f1f5f9;
    }

    .accordion-content {
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-top: none;
        border-radius: 0 0 0.375rem 0.375rem;
        margin-top: -0.5rem;
        margin-bottom: 1rem;
    }

    .sub-accordion {
        margin-left: 1.5rem;
    }

    .account-row {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 1rem;
        padding: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .account-row:last-child {
        border-bottom: none;
    }

    .account-row:hover {
        background-color: #f8fafc;
    }

    /* Estilos para el scrollbar personalizado */
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        // Set default date to current month
        let today = new Date();
        let firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        $('#periodo_contable').val(firstDay.toISOString().split('T')[0]);
    });

    function renderCuentaAcordeon(cuenta, nivel = 0) {
        let padding = nivel * 20;
        const tieneHijas = cuenta.hijas && cuenta.hijas.length > 0;
        const idHijas = `hijas-${cuenta.id}`;
        let inputAjuste = '';
        let botonRestaurar = '';

        // Solo permitir modificar el saldo si NO tiene hijas
        if (!tieneHijas) {
            inputAjuste = `
                <input type="number"
                    class="w-full px-2 py-1 border border-gray-300 rounded ajuste-input"
                    data-id="${cuenta.id}"
                    data-saldo-inicial="${cuenta.saldo}"
                    data-modified="false"
                    value="0"
                    step="0.01"
                    onchange="calcularSaldoFinal(this)"
                    oninput="marcarComoModificado(this)">
            `;
            botonRestaurar = `
                <button type="button"
                    class="p-1 text-gray-500 hover:text-blue-600"
                    onclick="restaurarSaldoInicial(this, ${cuenta.id}, ${cuenta.saldo})"
                    title="Restaurar saldo inicial">
                    <i class="material-icons">restore</i>
                </button>
            `;
        }

        let html = `
            <div class="border-l-4 border-blue-200 mb-2" style="margin-left:${padding}px">
                <div class="grid grid-cols-6 gap-2 items-center bg-gray-50 rounded px-2 py-1">
                    <div class="col-span-2 flex items-center font-semibold text-gray-700">
                        ${tieneHijas ? `<button type='button' onclick='toggleAccordion("${idHijas}", this)' class='mr-2 focus:outline-none'>
                            <span class='material-icons transition-transform duration-200 text-base'>expand_more</span>
                        </button>` : ''}
                        ${cuenta.numero_cuenta} - ${cuenta.cuenta}
                    </div>
                    <div class="text-right text-sm text-gray-900 font-medium">${formatNumber(cuenta.saldo)}</div>
                    <div>
                        ${inputAjuste}
                    </div>
                    <div class="text-right text-sm text-gray-900 font-medium saldo-final" data-id="${cuenta.id}" data-tipo="${cuenta.tipo_cuenta}" ${!tieneHijas ? `data-tipo-cuenta="${cuenta.tipo_cuenta_agrupadora}"` : ''}>
                        ${formatNumber(cuenta.saldo)}
                    </div>
                    <div class="flex items-center gap-2 justify-end">
                        ${botonRestaurar}
                    </div>
                </div>
                ${tieneHijas ? `<div id='${idHijas}' class='hidden'>${cuenta.hijas.map(hija => renderCuentaAcordeon(hija, nivel + 1)).join('')}</div>` : ''}
            </div>
        `;
        return html;
    }

    function getCuentasContables() {
        var periodo = $('#periodo_contable').val();
        if (!periodo) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes seleccionar un periodo contable');
            return;
        }
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{route('cuentas-contables.get-ajuste-saldos-cuentas')}}",
                type: "POST",
                dataType: "json",
                data: {
                    periodo: periodo
                }
            })
            .done(function(response) {
                if (response.success) {
                    let html = '';
                    response.data.forEach(cuenta => {
                        html += renderCuentaAcordeon(cuenta);
                    });
                    // Agregar el resumen de totales
                    const totalsSummary = generateTotalsSummary(response.data);
                    $('#content-totals').html(totalsSummary);
                    $('#list-cuentas-contables').html(html);
                    calcularTotales();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '<span style="color:#E53E3E;">¡Error!</span>',
                        html: `<div style="font-size:1.15rem; color:#4A5568; margin-top:10px; margin-bottom:22px;">
                                ${response.message}
                               </div>
                               <a href="{{ route('configuracion.contabilidad') }}" class="inline-block px-5 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition font-semibold shadow mt-1">
                                   Ir a configuración contabilidad
                               </a>`,
                        background: '#fff',
                        customClass: {
                            confirmButton: 'hidden', // Oculta el botón para cerrar
                            popup: 'rounded-xl shadow-xl border border-red-100'
                        },
                        showConfirmButton: false // Oculta el botón de cerrar
                    });
                    $('#list-cuentas-contables').html('');
                }
                const fecha = new Date(periodo);
                const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                const mes = meses[fecha.getMonth()];
                const anio = fecha.getFullYear();
                $('#periodo-titulo').html('Periodo de consulta: ' + mes + ' ' + anio);
                $('#periodo-titulo').removeClass('hidden');
            })
            .fail(function() {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al cargar los datos');
                $('#list-cuentas-contables').html('');
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    function formatNumber(number) {
        return new Intl.NumberFormat('es-MX', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(number);
    }

    function marcarComoModificado(input) {
        const valor = parseFloat(input.value) || 0;
        if (valor !== 0) {
            input.dataset.modified = "true";
            input.classList.add('border-blue-500');
        } else {
            input.dataset.modified = "false";
            input.classList.remove('border-blue-500');
        }
    }

    function calcularSaldoFinal(input) {
        const saldoInicial = parseFloat(input.dataset.saldoInicial);
        const ajuste = parseFloat(input.value) || 0;
        const saldoFinal = saldoInicial + ajuste;

        const saldoFinalElement = document.querySelector(`.saldo-final[data-id="${input.dataset.id}"]`);
        if (saldoFinalElement) {
            saldoFinalElement.textContent = formatNumber(saldoFinal);
            saldoFinalElement.classList.add('text-green-500');
        }

        // Recalcular totales después de cada ajuste
        calcularTotales();
    }

    function toggleAccordion(id, btn) {
        const content = document.getElementById(id);
        if (!content) return;
        content.classList.toggle('hidden');
        // Cambiar el icono de expandir/colapsar
        const icon = btn.querySelector('.material-icons');
        if (icon) {
            icon.classList.toggle('rotate-180');
        }
    }

    function restaurarSaldoInicial(button, cuentaId, saldoInicial) {
        // Buscar el input por data-id en el DOM
        const input = document.querySelector(`input.ajuste-input[data-id="${cuentaId}"]`);
        const saldoFinalElement = document.querySelector(`.saldo-final[data-id="${cuentaId}"]`);

        // Restaurar el input
        if (input) {
            input.value = '0';
            input.dataset.modified = 'false';
            input.classList.remove('border-blue-500');
        }

        // Restaurar el saldo final
        if (saldoFinalElement) {
            saldoFinalElement.textContent = formatNumber(saldoInicial);
            saldoFinalElement.classList.remove('text-green-500');
        }

        // Recalcular totales después de restaurar
        calcularTotales();
    }

    function actualizarSaldos() {
        var periodo = $('#periodo_contable').val();
        if (!periodo) {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes seleccionar un periodo contable');
            return;
        }

        var saldos = [];
        $('.ajuste-input[data-modified="true"]').each(function() {
            const saldoInicial = parseFloat($(this).data('saldo-inicial'));
            const ajuste = parseFloat($(this).val()) || 0;
            const saldoFinal = saldoInicial + ajuste;

            saldos.push({
                id: $(this).data('id'),
                saldo_final: saldoFinal
            });
        });

        if (saldos.length === 0) {
            showNotification('warning', 'top', 'center', 'warning', '¡ADVERTENCIA!', 'No hay cuentas modificadas para actualizar');
            return;
        }

        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{route('cuentas-contables.actualizar-saldos')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    saldos: saldos,
                    periodo: periodo
                }
            })
            .done(function(resp) {
                if (resp.data.success) {
                    showNotification('success', 'top', 'center', 'success', '¡HECHO!', resp.data.message);
                    // Resetear el estado de modificación después de guardar
                    $('.ajuste-input').each(function() {
                        // $(this).val('0');
                        $(this).data('modified', 'false');
                        $(this).removeClass('border-blue-500');
                        // calcularSaldoFinal(this);
                    });
                    return false;
                }
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', resp.data.message);
            })
            .fail(function() {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al actualizar los saldos');
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            });
    }

    function generateTotalsSummary(data) {
        return `
            <div class="mt-4 p-2 bg-white rounded-lg border border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Resumen de totales</h3>
                <div class="grid grid-cols-3 gap-8">
                    <div>
                        <div class="text-sm font-medium text-gray-500 mb-2">Total Activos</div>
                        <div id="total-activos" class="text-xl font-bold"></div>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-500 mb-2">Total Pasivos + Capital</div>
                        <div id="total-pasivos-capital" class="text-xl font-bold"></div>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-500 mb-2">Diferencia</div>
                        <div id="diferencia-total" class="text-xl font-bold"></div>
                    </div>
                </div>
                <div id="balance-status" class="mt-4 text-center text-sm font-medium"></div>
            </div>
        `;
    }

    function calcularTotales() {

        let totalActivos = 0;
        let totalPasivosCapital = 0;
        let totalIngresos = 0;
        let totalCostos = 0;
        let totalGastos = 0;
        let totalOrden = 0;

        // Calcular total de activos
        $('.saldo-final[data-tipo-cuenta="Activo"]').each(function() {
            totalActivos += parseFloat($(this).text().replace(/,/g, '')) || 0;
        });

        // Calcular total de pasivos y capital
        $('.saldo-final[data-tipo-cuenta="Pasivo"], .saldo-final[data-tipo-cuenta="Capital"]').each(function() {
            totalPasivosCapital += parseFloat($(this).text().replace(/,/g, '')) || 0;
        });

        $('.saldo-final[data-tipo-cuenta="Ingreso"]').each(function() {
            totalActivos += parseFloat($(this).text().replace(/,/g, '')) || 0;
        });

        $('.saldo-final[data-tipo-cuenta="Costo"]').each(function() {
            totalPasivosCapital += parseFloat($(this).text().replace(/,/g, '')) || 0;
        });

        $('.saldo-final[data-tipo-cuenta="Egreso"]').each(function() {
            totalPasivosCapital += parseFloat($(this).text().replace(/,/g, '')) || 0;
        });

        // Calcular la diferencia
        const diferencia = totalActivos - totalPasivosCapital;

        // Actualizar los totales en la UI
        $('#total-activos').text(formatNumber(totalActivos));
        $('#total-pasivos-capital').text(formatNumber(totalPasivosCapital));
        $('#diferencia-total').text(formatNumber(diferencia));

        // Aplicar color según el valor de la diferencia
        const diferenciaElement = $('#diferencia-total');
        if (Math.abs(diferencia) < 0.01) {
            diferenciaElement.removeClass('text-red-500 text-green-500').addClass('text-green-500');
        } else {
            diferenciaElement.removeClass('text-red-500 text-green-500').addClass('text-red-500');
        }

        // Verificar si los totales son iguales
        const statusElement = $('#balance-status');

        if (Math.abs(diferencia) < 0.01) { // Usar una pequeña tolerancia para comparaciones de punto flotante
            statusElement.text('✓ Los totales están balanceados');
            statusElement.removeClass('text-red-500').addClass('text-green-500');
        } else {
            statusElement.text('✗ Los totales no están balanceados');
            statusElement.removeClass('text-green-500').addClass('text-red-500');
        }
    }

    function filtrarCuentas(input, subnivelId) {
        const searchText = input.value.toLowerCase();
        const subnivelElement = document.getElementById(subnivelId);
        const rows = subnivelElement.querySelectorAll('.grid.grid-cols-5');

        rows.forEach(row => {
            // Omitir la fila del encabezado
            if (row.classList.contains('sticky')) return;

            const cuenta = row.querySelector('div:first-child').textContent.toLowerCase();
            const descripcion = row.querySelector('div:nth-child(2)').textContent.toLowerCase();

            if (cuenta.includes(searchText) || descripcion.includes(searchText)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });

        // Ocultar/mostrar el encabezado de la tabla si no hay resultados
        const tableHeader = subnivelElement.querySelector('.sticky');
        const hasVisibleRows = Array.from(rows).some(row =>
            !row.classList.contains('sticky') && row.style.display !== 'none'
        );

        if (tableHeader) {
            tableHeader.style.display = hasVisibleRows ? '' : 'none';
        }
    }
</script>
@endpush