@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">Balanza de comprobación</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>-Todas-</option>
                                    @foreach($periodos as $p)
                                    <option value="{{$p->periodo}}">{{$p->descripcion}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-4 mt-4">
                                <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>
                                <button type="button" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150"
                                    data-toggle="modal" data-target="#modal-generar-xml">
                                    <i class="material-icons align-middle text-sm">archive</i> Generar XML
                                </button>
                            </div>
                        </div>

                        <div class="overflow-x-auto">

                            <div class="flex gap-2 mb-4 justify-end m-2" style="display: none;" id="aacordeon-balanza-comprobacion-expandir-contraer">
                                <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="exportarBalanzaComprobacion('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="exportarBalanzaComprobacion('pdf')">
                                    <i class="material-icons align-middle text-sm">picture_as_pdf</i>Exportar PDF
                                </button>
                                <button onclick="expandirAccordion()" class=" 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">
                                    <i class="material-icons align-middle text-sm">unfold_more</i> Expandir todo
                                </button>
                                <button onclick="contraerAccordion()" class="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">
                                    <i class="material-icons align-middle text-sm">unfold_less</i> Contraer todo
                                </button>
                            </div>
                            <div id="loading-balanza" 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 reporte...</span>
                            </div>
                            <table class="min-w-full divide-y divide-gray-200" id="tabla-balanza-comprobacion" style="display:none;">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider" style="width: 40px;"></th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Cuenta</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Número de cuenta</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Saldo inicial</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Cargos</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Abonos</th>
                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-700 uppercase tracking-wider">Saldo final</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-balanza-comprobacion" class="bg-white divide-y divide-gray-200">
                                    <!-- Las filas se generan dinámicamente -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para generar XML de la balanza de comprobación -->
<div id="modal-generar-xml" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="previewAsignarCuenta" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h5 class="modal-title text-lg font-semibold text-gray-900" id="title-modal-asignar-cuenta">Contabilidad electronica</h5>
                <button type="button" class="close text-gray-400 hover:text-gray-500" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body">
                <div class="grid grid-cols-12 gap-4">
                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Periodo: <span class="text-red-500">*</span></label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 select2" id="periodo">
                            @foreach ($periodos as $periodo)
                            <option value="{{ $periodo['id'] }}"> {{ $periodo['descripcion'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{__('Tipo de envio:')}} <span class="text-red-500">*</span></label>
                        <div class="bg-gray-50 p-2 rounded-md">
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="radioTipoEnvioBalanza" value="N" checked class="form-radio h-4 w-4 text-blue-600">
                                    <span class="ml-2 text-gray-700">{{__('Normal')}}</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="radioTipoEnvioBalanza" value="C" class="form-radio h-4 w-4 text-blue-600">
                                    <span class="ml-2 text-gray-700">{{__('Complementaria')}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-4">
                    <div class="col-span-6 hidden" id="contentFechaUltimaModificacionBalanza">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Fecha último modificación contable: <span class="text-red-500">*</span></label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="fechaUltimaModificacionBalanza">
                    </div>
                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{__('Tipo de consulta:')}} <span class="text-red-500">*</span></label>
                        <div class="bg-gray-50 p-2 rounded-md">
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="radioTipoConsultaBalanza" value="todas" checked class="form-radio h-4 w-4 text-blue-600">
                                    <span class="ml-2 text-gray-700">{{__('Todas las cuentas')}}</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="radioTipoConsultaBalanza" value="conMovimientos" class="form-radio h-4 w-4 text-blue-600">
                                    <span class="ml-2 text-gray-700">{{__('Solo con movimientos')}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer px-6 py-4 bg-gray-50 border-t border-gray-200 px-6 py-4">
                <button type="button" class="bg-transparent text-red-500 hover:text-red-600 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" data-dismiss="modal">Cerrar</button>
                <button type="button" class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="procesarReporte()">Generar XML</button>
            </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;
    }

    /* Estilos para el acordeón */
    .acordeon-item {
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin: 0.5rem;
    }

    .acordeon-header {
        background-color: #ffffff;
        padding: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .acordeon-header:hover {
        background-color: #f8fafc;
        border-left: 4px solid #3b82f6;
    }

    .acordeon-header.active {
        background-color: rgb(229, 229, 229);
        border-left: 4px solid #fbbf24;
    }

    .acordeon-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: #fafafa;
    }

    .acordeon-content.active {
        max-height: 10000px;
    }

    .acordeon-icon {
        transition: transform 0.3s ease;
        color: #6b7280;
    }

    .acordeon-header.active .acordeon-icon {
        transform: rotate(180deg);
        color: #6b7280;
    }

    .cuenta-item {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        transition: background-color 0.2s ease;
    }

    .cuenta-item:hover {
        background-color: #f9fafb;
    }

    .cuenta-item:last-child {
        border-bottom: none;
    }

    .cuenta-info {
        flex: 1;
    }

    .cuenta-acciones {
        display: flex;
        gap: 0.5rem;
    }


    .grupo-indicator {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;

    }

    .cuenta-codigo {
        font-weight: 700;
        color: #1f2937;
        font-size: 0.85rem;
    }

    .cuenta-descripcion {
        color: #4b5563;
        font-size: 0.875rem;
        font-weight: 400;
    }

    .estatus-grupo {
        background-color: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }
</style>

@endsection

@push('js')
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });
    });
    const ajaxResponseErrors = {
        icon: 'error',
        title: 'Error',
        html: '',
        confirmButtonText: 'Aceptar'
    };

    $('input[name="radioTipoEnvioBalanza"]').on('change', function() {
        if ($(this).val() == 'N') {
            $('#contentFechaUltimaModificacionBalanza').hide();
            return false;
        }
        $('#contentFechaUltimaModificacionBalanza').show();
    })

    function generarReporte() {
        var periodo = $('#periodoFilter').val();
        if (!periodo) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona un periodo.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }
        $('#tabla-balanza-comprobacion').hide();
        $('#aacordeon-balanza-comprobacion-expandir-contraer').hide();
        $('#loading-balanza').show();
        $.ajax({
            url: "{{ route('reporte-balanza-comprobacion.generar-reporte') }}",
            type: "POST",
            data: {
                periodo: periodo
            },
            success: function(response) {
                renderizarTablaBalanza(response);
                $('#aacordeon-balanza-comprobacion-expandir-contraer').show();
                $('#tabla-balanza-comprobacion').show();
                $('#loading-balanza').hide();
            },
            error: function(xhr, status, error) {
                $('#tbody-balanza-comprobacion').html('<tr><td colspan="7" 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 reporte</p></td></tr>');
                $('#tabla-balanza-comprobacion').show();
                $('#loading-balanza').hide();
            }
        });
    }

    function renderizarTablaBalanza(data) {
        let html = '';
        let totales = {
            saldo_inicial: 0,
            cargos: 0,
            abonos: 0,
            saldo_final: 0
        };

        data.forEach(function(cuenta, idx) {
            if (cuenta) {
                html += generarFilaBalanza(cuenta, 0, idx, '');
                // Solo sumamos los nodos principales
                totales.saldo_inicial += parseFloat(cuenta.saldo_inicial) || 0;
                totales.cargos += parseFloat(cuenta.cargos) || 0;
                totales.abonos += parseFloat(cuenta.abonos) || 0;
                totales.saldo_final += parseFloat(cuenta.saldo_final) || 0;
            }

        });

        // Fila de totales
        html += `
            <tr style="background:#e5e7eb; font-weight:bold;">
                <td colspan="3" class="text-right pr-4">Totales:</td>
                <td class="text-right">${formatter.format(totales.saldo_inicial.toFixed(2))}</td>
                <td class="text-right">${formatter.format(totales.cargos.toFixed(2))}</td>
                <td class="text-right">${formatter.format(totales.abonos.toFixed(2))}</td>
                <td class="text-right">${formatter.format(totales.saldo_final.toFixed(2))}</td>
            </tr>
        `;

        $('#tbody-balanza-comprobacion').html(html);
        inicializarEventosTreegrid();
    }

    function generarFilaBalanza(cuenta, nivel, idx, parentId) {
        const tieneHijas = cuenta.hijas && cuenta.hijas.length > 0;
        const rowId = 'cuenta-' + (parentId ? parentId + '-' : '') + idx;
        let padding = 15 * nivel;
        let icono = '';
        // Si tiene hijas, el texto será bold, si no, será normal
        let claseDescripcion = tieneHijas ? 'font-bold' : 'font-normal';
        if (tieneHijas) {
            icono = `<button class="btn-expandir bg-transparent border-0 p-0 m-0" data-rowid="${rowId}" style="outline:none;"><i class="material-icons align-middle text-base">expand_more</i></button>`;
        }
        let html = `<tr id="${rowId}" class="treegrid-row" data-nivel="${nivel}" data-parent="${parentId}" style="${parentId ? 'display:none;' : ''}">
            <td class=" text-center" style="padding-left:${padding}px;">${icono}</td>
            <td class="px-2 py-1">${cuenta.numero_cuenta ? cuenta.numero_cuenta : ''}</td>
            <td class="${claseDescripcion} cuenta-columna" style="padding-left:${8 + 10 * nivel}px;">${cuenta.cuenta}</td>
            <td class="px-2 py-1 text-right monto-celda">${formatter.format(cuenta.saldo_inicial)}</td>
            <td class="px-2 py-1 text-right monto-celda">${formatter.format(cuenta.cargos)}</td>
            <td class="px-2 py-1 text-right monto-celda">${formatter.format(cuenta.abonos)}</td>
            <td class="px-2 py-1 text-right monto-celda">${formatter.format(cuenta.saldo_final)}</td>
        </tr>`;
        if (tieneHijas) {
            cuenta.hijas.forEach(function(hija, hijoIdx) {
                html += generarFilaBalanza(hija, nivel + 1, hijoIdx, rowId);
            });
        }
        return html;
    }

    function inicializarEventosTreegrid() {
        $('.btn-expandir').off('click').on('click', function(e) {
            e.preventDefault();
            const rowId = $(this).data('rowid');
            const icon = $(this).find('i');
            const expandido = icon.text() === 'expand_less';
            const $row = $('#' + rowId);
            const montoCeldas = $row.find('.monto-celda');
            if (expandido) {
                icon.text('expand_more');
                ocultarHijas(rowId);
                montoCeldas.show(); // Mostrar montos del padre al contraer
                // Quitar el background al contraer
                $row.removeClass('bg-blue-50');
            } else {
                icon.text('expand_less');
                mostrarHijas(rowId);
                montoCeldas.hide(); // Ocultar montos del padre al expandir
                // Quitar el background al expandir
                $row.removeClass('bg-blue-50');
            }
        });
    }

    function mostrarHijas(parentId) {
        $(`tr[data-parent='${parentId}']`).each(function() {
            $(this).show();
            // Si el botón está en estado expandido, mostrar también sus hijas
            const btn = $(this).find('.btn-expandir i');
            if (btn.length && btn.text() === 'expand_less') {
                mostrarHijas($(this).attr('id'));
            }
        });
    }

    function ocultarHijas(parentId) {
        $(`tr[data-parent='${parentId}']`).each(function() {
            $(this).hide();
            ocultarHijas($(this).attr('id'));
            // Reset icono
            const btn = $(this).find('.btn-expandir i');
            if (btn.length) btn.text('expand_more');
        });
    }


    // Ajuste de funciones para la nueva lógica de tabla tipo treegrid

    function expandirAccordion() {
        // Mostrar todas las filas hijas y poner los íconos en expandido
        $('#tabla-balanza-comprobacion tbody tr').each(function() {
            $(this).show();
            const btn = $(this).find('.btn-expandir i');
            if (btn.length) {
                btn.text('expand_less');
            }
            $(this).addClass('bg-blue-50');
        });
    }

    function contraerAccordion() {
        // Ocultar todas las filas hijas y poner los íconos en contraído
        $('#tabla-balanza-comprobacion tbody tr').each(function() {
            // Solo dejar visibles las filas de nivel 0 (las principales)
            const nivel = parseInt($(this).data('nivel'));
            if (nivel > 0) {
                $(this).hide();
            } else {
                $(this).show();
            }
            const btn = $(this).find('.btn-expandir i');
            if (btn.length) {
                btn.text('expand_more');
            }
            $(this).removeClass('bg-blue-50');
        });
    }


    function exportarBalanzaComprobacion(type) {
        var periodo = $('#periodoFilter').val();
        if (!periodo) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Por favor selecciona un periodo.',
                confirmButtonText: 'Aceptar'
            });
            return;
        }
        $.ajax({
            url: "{{ route('reporte-balanza-comprobacion.generar-archivo') }}",
            type: 'POST',
            data: {
                export: type,
                periodo: periodo
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                if (response.filename) {
                    // Crear un enlace temporal para descargar el archivo
                    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) {
                console.error('Error al exportar:', error);
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Error al exportar el archivo.');
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
            }
        });
    }


    //*CONTABILIDAD ELECTRONICA

    function procesarReporte() {
        $('#loadingLoad').modal('show');
        $.ajax({
                url: "{{ route('contabilidad-electronica.generar-xml') }}",
                type: 'POST',
                data: {
                    periodo: $('#periodo').val(),
                    reporte: "balanza_comprobacion",
                    tipoConsultaBalanza: $('input[name="radioTipoConsultaBalanza"]:checked').val(),
                    tipoEnvioBalanza: $('input[name="radioTipoEnvioBalanza"]:checked').val(),
                    fechaUltimaModificacionBalanza: $('#fechaUltimaModificacionBalanza').val(),
                    fechaActualizacionCuentas: $('#fechaActualizacionCuentas').val(),
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (!resp['success']) {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Lo sentimos!',
                        text: resp['message']
                    });
                    return;
                }

                const link = document.createElement('a');
                link.href = resp['file'];
                link.download = "{{ $rfc }}" + "balanza_comprobacion" + ".xml";
                link.click();

                if ($('#reporte').val() === 'balanza_comprobacion') {
                    setTimeout(() => {
                        const linkPDF = document.createElement('a');
                        linkPDF.href = "{{url('temps')}}/{{auth()->user()->username}}_BalanzaComprobacion_{{date('Y-m-d')}}.pdf";
                        linkPDF.setAttribute('download', "{{auth()->user()->username}}_BalanzaComprobacion_{{date('Y-m-d')}}.pdf");
                        document.body.appendChild(linkPDF);
                        linkPDF.click();
                        document.body.removeChild(linkPDF);
                    }, 1500);
                    return;
                }

                if ($('#reporte').val() === 'catalogo_cuentas_contables' && resp['cuentaSinCodigoAgrupador']) {
                    setTimeout(() => {
                        $('#modalCatalogoCuentasContables').modal('show');
                        const linkTXT = document.getElementById('btn-txt');
                        linkTXT.href = "{{url('temps')}}/{{auth()->user()->username}}_CatalogoCuentasContablesSinCodigoAgrupador_{{date('Y-m-d')}}.txt";
                        linkTXT.setAttribute('download', "{{auth()->user()->username}}_CatalogoCuentasContablesSinCodigoAgrupador_{{date('Y-m-d')}}.txt");
                    });
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                Swal.fire({
                    icon: 'error',
                    title: '¡Lo sentimos!',
                    text: 'Error al generar el archivo XML.' + jqXHR.responseJSON.message
                });
            })
            .always(function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide')
                }, 2000);
            });
    }
</script>
@endpush