@extends('layouts.app', ['activePage' => 'consulta-movimientos', 'menuParent' => '', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row gy-3 mb-3 align-items-stretch">
            <div class="col-lg-8 h-100">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-2 mb-2 h-100">
                    <div class="flex items-start justify-between mb-1">
                        <div>
                            <h6 class="text-2xl font-semibold text-slate-900 ">Consulta de Movimientos Bancarios</h6>
                            <p class="text-sm text-slate-500">Revisa todos tus movimientos de banco con filtros rápidos y visualización clara de ingresos y egresos.</p>
                        </div>
                    </div>
                    <form id="movimientosFilters" class="space-y-4">
                        <section class="bg-gray-25 rounded-lg border border-gray-200 p-3" id="tourMovimientosFiltros">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">&#128269;</span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">PARAMETROS DE BUSQUEDA</h6>
                                    <p class="text-sm text-slate-700 mb-0">Filtra tus movimientos por tipo, forma de pago y rango de fechas.</p>
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Tipo de movimiento:</label>
                                    <select id="tipoMovimientoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todos-</option>
                                        <option value="egreso">Egreso</option>
                                        <option value="ingreso">Ingreso</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Forma de pago:</label>
                                    <select id="formaPagoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        @foreach($formasPago as $forma)
                                        <option value="{{ $forma->id }}">{{ $forma->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Categoría:</label>
                                    <select id="categoriaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        @foreach($categorias as $categoria)
                                        <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Cuenta:</label>
                                    <select id="cuentaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        @foreach($cuentas as $cuenta)
                                        <option value="{{ $cuenta->id }}">{{ $cuenta->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Año:</label>
                                    <select id="anioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todos-</option>
                                        @for($i = date('Y'); $i >= 2020; $i--)
                                        <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Mes:</label>
                                    <select id="mesFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todos-</option>
                                        <option value="1" {{ date('n') == 1 ? 'selected' : '' }}>Enero</option>
                                        <option value="2" {{ date('n') == 2 ? 'selected' : '' }}>Febrero</option>
                                        <option value="3" {{ date('n') == 3 ? 'selected' : '' }}>Marzo</option>
                                        <option value="4" {{ date('n') == 4 ? 'selected' : '' }}>Abril</option>
                                        <option value="5" {{ date('n') == 5 ? 'selected' : '' }}>Mayo</option>
                                        <option value="6" {{ date('n') == 6 ? 'selected' : '' }}>Junio</option>
                                        <option value="7" {{ date('n') == 7 ? 'selected' : '' }}>Julio</option>
                                        <option value="8" {{ date('n') == 8 ? 'selected' : '' }}>Agosto</option>
                                        <option value="9" {{ date('n') == 9 ? 'selected' : '' }}>Septiembre</option>
                                        <option value="10" {{ date('n') == 10 ? 'selected' : '' }}>Octubre</option>
                                        <option value="11" {{ date('n') == 11 ? 'selected' : '' }}>Noviembre</option>
                                        <option value="12" {{ date('n') == 12 ? 'selected' : '' }}>Diciembre</option>
                                    </select>
                                </div>
                            </div>
                            <div class="flex flex-wrap items-center justify-between gap-3 pt-3" >
                                <p class="text-xs text-slate-500 mb-0">Selecciona los filtros para visualizar tus movimientos.</p>
                                <button type="button" id="tourMovimientosBuscar" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" onclick="getMovimientos()">
                                    <i class="material-icons text-base leading-none">refresh</i>
                                    Actualizar listado
                                </button>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
            <div class="col-lg-4 h-100">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-3" id="tourResumen">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h6 class="text-sm font-semibold text-slate-900 mb-0">Resumen</h6>
                        </div>
                        <span id="movimientosHistoryBadge" class="cfdi-history-badge neutral">Esperando datos</span>
                    </div>

                    <!-- Primera fila: Totales principales -->
                    <div class="grid grid-cols-3 gap-3 mb-4">
                        <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
                            <p class="text-xs text-slate-600 font-medium mb-1">Total movimientos</p>
                            <p class="text-2xl font-bold text-slate-900" id="movimientosHistoryTotals">-</p>
                        </div>
                        <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
                            <p class="text-xs text-blue-700 font-medium mb-1">Saldo neto</p>
                            <p class="text-2xl font-bold text-blue-700" id="movimientosSaldoNeto">$0.00</p>
                            <p class="text-xs text-blue-600 mt-1" id="movimientosSaldoNetoTendencia"></p>
                        </div>
                        <div class="bg-slate-50 rounded-lg p-3 border border-slate-100">
                            <p class="text-xs text-slate-600 font-medium mb-1">Monto total</p>
                            <p class="text-2xl font-bold text-slate-900" id="movimientosMontoBruto">$0.00</p>
                        </div>
                    </div>

                    <!-- Segunda fila: Desglose Egresos/Ingresos -->
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-red-50 rounded-lg p-3 border border-red-100">
                            <p class="text-xs text-red-700 font-medium mb-1 flex items-center gap-1">
                                <i class="material-icons text-sm">trending_down</i> Egresos
                            </p>
                            <p class="text-lg font-bold text-red-700" id="movimientosMontoEgresos">$0.00</p>
                            <p class="text-xs text-red-600 mt-1" id="movimientosCantEgresos">0 movimientos</p>
                            <p class="text-xs text-red-500 mt-1" id="movimientosPctEgresos"></p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-3 border border-green-100">
                            <p class="text-xs text-green-700 font-medium mb-1 flex items-center gap-1">
                                <i class="material-icons text-sm">trending_up</i> Ingresos
                            </p>
                            <p class="text-lg font-bold text-green-700" id="movimientosMontoIngresos">$0.00</p>
                            <p class="text-xs text-green-600 mt-1" id="movimientosCantIngresos">0 movimientos</p>
                            <p class="text-xs text-green-500 mt-1" id="movimientosPctIngresos"></p>
                        </div>
                    </div>

                    <!-- Tercera fila: Promedios -->
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="bg-orange-50 rounded-lg p-3 border border-orange-100">
                            <p class="text-xs text-orange-700 font-medium mb-1">Promedio por egreso</p>
                            <p class="text-lg font-bold text-orange-700" id="movimientosPromedioEgreso">$0.00</p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-3 border border-purple-100">
                            <p class="text-xs text-purple-700 font-medium mb-1">Promedio por ingreso</p>
                            <p class="text-lg font-bold text-purple-700" id="movimientosPromedioIngreso">$0.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4" id="tourMovimientosTabla">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200">
                        <div>
                            <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de Movimientos</h6>
                            <p class="text-xs text-slate-500 mb-0">Todos los movimientos bancarios con detalles de monto, concepto y beneficiario/proveedor.</p>
                        </div>
                        <div class="text-left">
                            <p id="movimientosStatus" class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1">Esperando datos</p>
                            <p class="text-[11px] text-slate-500 mt-1 mb-0">Última actualización: <span id="movimientosLastRefresh">-</span></p>
                        </div>
                    </div>
                    <div class="table-scroll">
                        <table class="min-w-full" id="list-movimientos" width="100%">
                            <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                                <tr>
                                    <th></th>
                                    <th class="px-2 py-2" width="12%">Cuenta</th>
                                    <th class="px-2 py-2" width="12%">Fecha</th>
                                    <th class="px-2 py-2" width="10%">Folio</th>
                                    <th class="px-2 py-2" width="15%">Concepto</th>
                                    <th class="px-2 py-2" width="12%">Categoría</th>
                                    <th class="px-2 py-2" width="12%">Proveedor/Beneficiario</th>
                                    <th class="px-2 py-2" width="10%">Forma Pago</th>
                                    <th class="px-2 py-2" width="10%">Tipo Movimiento</th>
                                    <th class="px-2 py-2" width="10%">Monto</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<style>
    .cfdi-section {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 1rem;
    }

    .cfdi-section__header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .cfdi-section__icon {
        height: 40px;
        width: 40px;
        border-radius: 0.75rem;
        border: 1px solid #0f172a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #0f172a;
    }


    .cfdi-help-step {
        height: 24px;
        width: 24px;
        border-radius: 9999px;
        background-color: #0A415F;
        color: #fff;
        font-weight: 600;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    }

    .cfdi-tip-item {
        display: flex;
        gap: 0.45rem;
        line-height: 1.4;
        list-style: none;
        padding-left: 0;
    }

    .cfdi-tip-item::before {
        content: '•';
        color: #0A415F;
        font-weight: 700;
    }

    .cfdi-last-download {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .cfdi-last-download dt {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        margin-bottom: 0.1rem;
    }

    .cfdi-last-download dd {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #0f172a;
    }

    .cfdi-history-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.85rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid #cbd5f5;
        transition: all 0.2s ease-in-out;
    }

    .cfdi-history-badge.neutral {
        background-color: #f8fafc;
        color: #475569;
        border-color: #cbd5f5;
    }

    .cfdi-history-badge.success {
        background-color: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .cfdi-history-badge.warning {
        background-color: #fef9c3;
        color: #854d0e;
        border-color: #fde68a;
    }

    .cfdi-history-badge.danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .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;
    }


    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        font-size: 11px !important;
    }


    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 550px;
        overflow-y: auto;
    }


    .estatus-row {
        margin-right: 6px;
        width: 110%;
        max-width: 100px;
        display: inline-block;
    }
</style>
@endsection

@push('js')

<script>
    // Variables globales
    let id_movimiento = '';
    let $movimientosTable = null;
    let $movimientosStatus, $movimientosLastRefresh, $historyBadge, $historyTotals;
    let $montoBruto, $montoEgresos, $montoIngresos, $cantEgresos, $cantIngresos;
    let $saldoNeto, $saldoNetoTendencia, $pctEgresos, $pctIngresos, $promedioEgreso, $promedioIngreso;
    const historyBadgeStates = ['neutral', 'success', 'warning', 'danger'];

    // Funciones globales
    let updateMovimientosStatus = function() {};
    let refreshMovimientosTimestamp = function() {};
    const focusMovimientosTable = function() {
        if (!$movimientosTable || !$movimientosTable.length) {
            return;
        }
        $movimientosTable.attr('tabindex', '-1');
        setTimeout(function() {
            $movimientosTable.trigger('focus');
        }, 50);
    };

    const setHistoryBadgeState = function(statusText) {
        if (!$historyBadge || !$historyBadge.length) {
            return;
        }
        let statusClass = 'success';
        if (statusText) {
            const normalized = statusText.toLowerCase();
            if (normalized.indexOf('error') !== -1 || normalized.indexOf('fail') !== -1) {
                statusClass = 'danger';
            }
        }
        $historyBadge.removeClass(historyBadgeStates.join(' ')).addClass(statusClass);
        $historyBadge.text(statusText || 'Cargado');
    };

    const updateHistorySummary = function(resumen) {
        if (!resumen) return;

        setHistoryBadgeState('Cargado');

        // Actualizar total de movimientos
        if ($historyTotals && $historyTotals.length) {
            $historyTotals.text(resumen.total);
        }

        // Actualizar monto total
        if ($montoBruto && $montoBruto.length) {
            $montoBruto.text(formatter.format(resumen.montoTotal));
        }

        // Actualizar montos por tipo
        if ($montoEgresos && $montoEgresos.length) {
            $montoEgresos.text(formatter.format(resumen.montoEgresos));
        }

        if ($montoIngresos && $montoIngresos.length) {
            $montoIngresos.text(formatter.format(resumen.montoIngresos));
        }

        // Actualizar cantidades
        if ($cantEgresos && $cantEgresos.length) {
            $cantEgresos.text(resumen.cantEgresos + ' movimiento' + (resumen.cantEgresos !== 1 ? 's' : ''));
        }

        if ($cantIngresos && $cantIngresos.length) {
            $cantIngresos.text(resumen.cantIngresos + ' movimiento' + (resumen.cantIngresos !== 1 ? 's' : ''));
        }

        // Mostrar saldo neto con tendencia
        if ($saldoNeto && $saldoNeto.length) {
            $saldoNeto.text(formatter.format(resumen.saldoNeto));
            $saldoNeto.removeClass('text-blue-700 text-red-700 text-green-700');
            if (resumen.saldoNeto > 0) {
                $saldoNeto.addClass('text-green-700');
            } else if (resumen.saldoNeto < 0) {
                $saldoNeto.addClass('text-red-700');
            } else {
                $saldoNeto.addClass('text-blue-700');
            }
        }


        // Mostrar porcentajes
        if ($pctEgresos && $pctEgresos.length) {
            $pctEgresos.text(resumen.pctEgresos + '% del total');
        }

        if ($pctIngresos && $pctIngresos.length) {
            $pctIngresos.text(resumen.pctIngresos + '% del total');
        }

        // Mostrar promedios
        if ($promedioEgreso && $promedioEgreso.length) {
            $promedioEgreso.text(formatter.format(resumen.promedioEgreso));
        }

        if ($promedioIngreso && $promedioIngreso.length) {
            $promedioIngreso.text(formatter.format(resumen.promedioIngreso));
        }
    };

    $(document).ready(function() {
        // Iniciar tour si corresponde
        if (window.TourManager) {
            TourManager.start('consultaMovimientos');
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Inicializar selectores del DOM
        $movimientosStatus = $('#movimientosStatus');
        $movimientosLastRefresh = $('#movimientosLastRefresh');
        $movimientosTable = $('#list-movimientos');
        $historyBadge = $('#movimientosHistoryBadge');
        $historyTotals = $('#movimientosHistoryTotals');
        $montoBruto = $('#movimientosMontoBruto');
        $montoEgresos = $('#movimientosMontoEgresos');
        $montoIngresos = $('#movimientosMontoIngresos');
        $cantEgresos = $('#movimientosCantEgresos');
        $cantIngresos = $('#movimientosCantIngresos');
        $saldoNeto = $('#movimientosSaldoNeto');
        $saldoNetoTendencia = $('#movimientosSaldoNetoTendencia');
        $pctEgresos = $('#movimientosPctEgresos');
        $pctIngresos = $('#movimientosPctIngresos');
        $promedioEgreso = $('#movimientosPromedioEgreso');
        $promedioIngreso = $('#movimientosPromedioIngreso');

        updateMovimientosStatus = function(message) {
            if ($movimientosStatus.length) {
                $movimientosStatus.text(message);
            }
        };

        refreshMovimientosTimestamp = function() {
            if ($movimientosLastRefresh.length) {
                const now = new Date();
                $movimientosLastRefresh.text(now.toLocaleString('es-MX'));
            }
        };

        $('.select2').select2({
            width: '100%',
        });

        // Obtener valor por defecto de tipo movimiento
        $('#tipoMovimientoFilter').val('').trigger('change');

        // Llamar a la función getMovimientos
        getMovimientos();
    });


    function getMovimientos() {
        updateMovimientosStatus('Solicitando datos al servidor...');

        $('#list-movimientos').dataTable().fnDestroy();
        if ($movimientosTable && $movimientosTable.length) {
            $movimientosTable.attr('aria-busy', 'true');
        }

        var table = $('#list-movimientos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{ route('consulta-movimientos.get-movimientos') }}",
                type: "POST",
                data: {
                    tipo_movimiento: $('#tipoMovimientoFilter option:selected').val(),
                    forma_pago: $('#formaPagoFilter option:selected').val(),
                    categoria: $('#categoriaFilter option:selected').val(),
                    cuenta: $('#cuentaFilter option:selected').val(),
                    anio: $('#anioFilter option:selected').val(),
                    mes: $('#mesFilter option:selected').val()
                },
                error: function() {
                    updateMovimientosStatus('No fue posible actualizar los datos');
                }
            },
            initComplete: function(settings, json) {
                updateMovimientosStatus('Consulta actualizada');
                refreshMovimientosTimestamp();
                if ($movimientosTable && $movimientosTable.length) {
                    $movimientosTable.removeAttr('aria-busy');
                }
                focusMovimientosTable();

                // Usar el resumen enviado desde el backend
                if (json && json.resumen) {
                    updateHistorySummary(json.resumen);
                }
            },
            columns: [{
                    data: "id",
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                {
                    data: "cuenta",
                },
                {
                    data: "fecha",
                },
                {
                    data: "folio",
                },
                {
                    data: "concepto",
                },
                {
                    data: "categoria",
                },
                {
                    data: "proveedor",
                },
                {
                    data: "forma_pago",
                },
                {
                    data: "tipo_movimiento",
                    render: function(data) {
                        if (data === 'egreso') {
                            return '<span class="inline-flex items-center rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-700">Egreso</span>';
                        } else if (data === 'ingreso') {
                            return '<span class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-700">Ingreso</span>';
                        }
                        return data;
                    }
                },
                {
                    data: "monto",
                    render: function(data, type, row) {
                        if (type === 'display') {
                            const color = row.tipo_movimiento === 'egreso' ? '#dc2626' : '#16a34a';
                            return '<span style="color: ' + color + '; font-weight: 600;">' + data + '</span>';
                        }
                        return data;
                    }
                },

            ],
            buttons: [{
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    }
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Listado de movimientos bancarios',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [1, "desc"]
            ],
        });

        table.on('click', 'tr', function(e) {
            var target = $(e.target);
            var cell = table.cell(target);

            if (!cell || !cell.index()) {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }

            id_movimiento = row.id;
            // Aquí puedes agregar lógica para abrir detalles o editar el movimiento
        });
    }
</script>

@endpush