@extends('layouts.app', ['activePage' => 'bitacora-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-12">
                <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-2">
                        <div>
                            <h6 class="text-2xl font-semibold text-slate-900">Bitácora General de Movimientos</h6>
                            <p class="text-sm text-slate-500">Consulta todo el historial de creaciones y ediciones de movimientos bancarios.</p>
                        </div>
                    </div>

                    <form id="bitacoraFilters" class="space-y-4">
                        <section class="bg-gray-25 rounded-lg border border-gray-200 p-3">
                            <div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Entidad:</label>
                                    <select id="entidadFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md">
                                        <option value="" selected>-Todas-</option>
                                        <option value="movimiento">Movimientos</option>
                                        <option value="conciliacion">Conciliaciones</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Acción:</label>
                                    <select id="accionFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md">
                                        <option value="" selected>-Todas-</option>
                                        <option value="creado">Creación</option>
                                        <option value="editado">Edición</option>
                                        <option value="eliminado">Eliminación</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Usuario:</label>
                                    <select id="usuarioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md">
                                        <option value="" selected>-Todos-</option>
                                        @foreach($usuarios as $usuario)
                                        <option value="{{ $usuario->id }}">{{ $usuario->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Fecha inicio:</label>
                                    <input type="date" id="fechaInicioFilter" 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>
                                    <label class="block text-sm font-medium text-slate-700">Fecha fin:</label>
                                    <input type="date" id="fechaFinFilter" 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>

                            <div class="flex flex-wrap items-center justify-between gap-3 pt-3">
                                <p class="text-xs text-slate-500 mb-0">Filtra para localizar acciones específicas.</p>
                                <div class="flex items-center gap-2">
                                    <button type="button" id="btnUltimos7" class="inline-flex items-center gap-1 bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-2 text-xs rounded-md font-medium">
                                        Últimos 7 días
                                    </button>
                                    <button type="button" id="btnLimpiarFiltrosBitacora" class="inline-flex items-center gap-1 bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-2 text-xs rounded-md font-medium">
                                        Limpiar filtros
                                    </button>
                                    <button type="button" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium" onclick="getBitacoraGeneral()">
                                        <i class="material-icons text-base leading-none">refresh</i>
                                        Actualizar bitácora
                                    </button>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-4 mb-2 mb-md-0">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-3">
                    <p class="text-xs text-slate-500 mb-1">Total de registros</p>
                    <p id="bitacoraTotalRegistros" class="text-xl font-semibold text-slate-900 mb-0">0</p>
                </div>
            </div>
            <div class="col-md-4 mb-2 mb-md-0">
                <div class="bg-green-50 border border-green-100 rounded-lg shadow-sm p-3">
                    <p class="text-xs text-green-700 mb-1">Creaciones</p>
                    <p id="bitacoraTotalCreaciones" class="text-xl font-semibold text-green-700 mb-0">0</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="bg-blue-50 border border-blue-100 rounded-lg shadow-sm p-3">
                    <p class="text-xs text-blue-700 mb-1">Ediciones</p>
                    <p id="bitacoraTotalEdiciones" class="text-xl font-semibold text-blue-700 mb-0">0</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2">
                        <div>
                            <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de Bitácora</h6>
                            <p class="text-xs text-slate-500 mb-0">Historial global de movimientos con usuario, cambios e IP.</p>
                        </div>
                        <div class="text-left">
                            <p id="bitacoraGeneralStatus" 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="bitacoraGeneralLastRefresh">-</span></p>
                        </div>
                    </div>

                    <div class="table-scroll mt-3">
                        <table class="min-w-full" id="list-bitacora-movimientos" width="100%">
                            <thead class="sticky-top bg-gray-50 px-6 py-3 text-[9px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                                <tr>
                                    <th class="px-2 py-2">Fecha/Hora</th>
                                    <th class="px-2 py-2">Entidad</th>
                                    <th class="px-2 py-2">Acción</th>
                                    <th class="px-2 py-2">Usuario</th>
                                    <th class="px-2 py-2">Folio</th>
                                    <th class="px-2 py-2">Tipo</th>
                                    <th class="px-2 py-2">Fecha mov.</th>
                                    <th class="px-2 py-2">Monto</th>
                                    <th class="px-2 py-2">Descripción</th>
                                    <th class="px-2 py-2">Cambios</th>
                                    <th class="px-2 py-2">IP</th>
                                </tr>
                            </thead>
                        </table>
                    </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; }

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

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

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

    .cambios-cell {
        min-width: 260px;
        max-width: 360px;
        white-space: normal;
        line-height: 1.35;
    }

    .badge-tipo {
        display: inline-flex;
        align-items: center;
        border-radius: 9999px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
    }

    .badge-tipo.ingreso {
        background: #dcfce7;
        color: #166534;
    }

    .badge-tipo.egreso {
        background: #fee2e2;
        color: #991b1b;
    }
</style>
@endsection

@push('js')
<script>
    let $bitacoraGeneralStatus, $bitacoraGeneralLastRefresh;
    let $bitacoraTotalRegistros, $bitacoraTotalCreaciones, $bitacoraTotalEdiciones;

    const escapeHtml = function(text) {
        if (text === null || text === undefined) {
            return '';
        }

        return String(text)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    };

    const renderCambios = function(cambios) {
        if (!cambios || typeof cambios !== 'object' || Object.keys(cambios).length === 0) {
            return '<span class="text-slate-400">Sin cambios</span>';
        }

        return Object.keys(cambios).map(function(key) {
            return '<div><span class="font-semibold text-slate-700">' + escapeHtml(key) + ':</span> ' + escapeHtml(cambios[key]) + '</div>';
        }).join('');
    };

    const refreshTimestamp = function() {
        if ($bitacoraGeneralLastRefresh && $bitacoraGeneralLastRefresh.length) {
            $bitacoraGeneralLastRefresh.text(new Date().toLocaleString('es-MX'));
        }
    };

    const actualizarResumenBitacora = function(rows) {
        const registros = rows || [];
        let creaciones = 0;
        let ediciones = 0;

        registros.forEach(function(row) {
            if (row.accion === 'creado') {
                creaciones++;
            } else if (row.accion === 'editado') {
                ediciones++;
            }
        });

        $bitacoraTotalRegistros.text(registros.length);
        $bitacoraTotalCreaciones.text(creaciones);
        $bitacoraTotalEdiciones.text(ediciones);
    };

    const limpiarFiltrosBitacora = function() {
        $('#entidadFilter').val('').trigger('change');
        $('#accionFilter').val('').trigger('change');
        $('#usuarioFilter').val('').trigger('change');
        $('#fechaInicioFilter').val('');
        $('#fechaFinFilter').val('');
    };

    const aplicarUltimosDias = function(dias) {
        const hoy = new Date();
        const inicio = new Date();
        inicio.setDate(hoy.getDate() - dias);

        const formatDate = function(date) {
            const y = date.getFullYear();
            const m = String(date.getMonth() + 1).padStart(2, '0');
            const d = String(date.getDate()).padStart(2, '0');
            return y + '-' + m + '-' + d;
        };

        $('#fechaInicioFilter').val(formatDate(inicio));
        $('#fechaFinFilter').val(formatDate(hoy));
    };

    function getBitacoraGeneral() {
        if ($.fn.DataTable.isDataTable('#list-bitacora-movimientos')) {
            $('#list-bitacora-movimientos').DataTable().destroy();
        }

        $bitacoraGeneralStatus.text('Consultando bitácora...');
        $('#list-bitacora-movimientos').attr('aria-busy', 'true');

        $('#list-bitacora-movimientos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200],
            dom: 'Bfrtip',
            deferRender: true,
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{ route('bitacora-movimientos.get-all') }}",
                type: 'POST',
                data: {
                    tipo_entidad: $('#entidadFilter').val(),
                    accion: $('#accionFilter').val(),
                    usuario_id: $('#usuarioFilter').val(),
                    fecha_inicio: $('#fechaInicioFilter').val(),
                    fecha_fin: $('#fechaFinFilter').val()
                },
                error: function() {
                    $bitacoraGeneralStatus.text('No fue posible consultar la bitácora');
                }
            },
            columns: [{
                    data: 'fecha_hora'
                },
                {
                    data: 'tipo_entidad',
                    render: function(data) {
                        if (data === 'conciliacion') {
                            return '<span class="inline-flex items-center rounded px-2 py-1 text-[10px] font-medium bg-purple-100 text-purple-700">Conciliación</span>';
                        }

                        return '<span class="inline-flex items-center rounded px-2 py-1 text-[10px] font-medium bg-slate-100 text-slate-700">Movimiento</span>';
                    }
                },
                {
                    data: 'accion',
                    render: function(data) {
                        let cls = 'bg-blue-100 text-blue-700';
                        let label = 'Edición';

                        if (data === 'creado') {
                            cls = 'bg-green-100 text-green-700';
                            label = 'Creación';
                        } else if (data === 'eliminado') {
                            cls = 'bg-red-100 text-red-700';
                            label = 'Eliminación';
                        }

                        return '<span class="inline-flex items-center rounded px-2 py-1 text-[10px] font-medium ' + cls + '">' + label + '</span>';
                    }
                },
                {
                    data: 'usuario'
                },
                {
                    data: 'folio_movimiento'
                },
                {
                    data: 'tipo_movimiento'
                    ,
                    render: function(data) {
                        if (data === 'ingreso') {
                            return '<span class="badge-tipo ingreso">Ingreso</span>';
                        }

                        if (data === 'egreso') {
                            return '<span class="badge-tipo egreso">Egreso</span>';
                        }

                        return data || '-';
                    }
                },
                {
                    data: 'fecha_movimiento',
                    defaultContent: '-'
                },
                {
                    data: 'monto_movimiento'
                },
                {
                    data: 'descripcion'
                },
                {
                    data: 'cambios',
                    className: 'cambios-cell',
                    render: function(data) {
                        return renderCambios(data);
                    }
                },
                {
                    data: 'ip_address'
                },
            ],
            buttons: [{
                    extend: 'excel',
                    title: 'Bitacora general de movimientos',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium'
                },
                {
                    extend: 'pdf',
                    title: 'Bitacora general de movimientos',
                    text: 'Exportar a PDF',
                    orientation: 'landscape',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium'
                }
            ],
            order: [
                [0, 'desc']
            ],
            initComplete: function(settings, json) {
                const total = (json && json.recordsTotal) ? json.recordsTotal : 0;
                $bitacoraGeneralStatus.text('Bitácora cargada (' + total + ' registros)');
                $('#list-bitacora-movimientos').removeAttr('aria-busy');
                actualizarResumenBitacora((json && json.data) ? json.data : []);
                refreshTimestamp();
            }
        });
    }

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

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

        $bitacoraGeneralStatus = $('#bitacoraGeneralStatus');
        $bitacoraGeneralLastRefresh = $('#bitacoraGeneralLastRefresh');
        $bitacoraTotalRegistros = $('#bitacoraTotalRegistros');
        $bitacoraTotalCreaciones = $('#bitacoraTotalCreaciones');
        $bitacoraTotalEdiciones = $('#bitacoraTotalEdiciones');

        $('#btnLimpiarFiltrosBitacora').on('click', function() {
            limpiarFiltrosBitacora();
            getBitacoraGeneral();
        });

        $('#btnUltimos7').on('click', function() {
            aplicarUltimosDias(7);
            getBitacoraGeneral();
        });

        getBitacoraGeneral();
    });
</script>
@endpush