@extends('layouts.app', ['activePage' => 'ingresos', 'menuParent' => '', 'titlePage' => __('Bancos - Captura de ingresos')])

@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="text-2xl font-bold text-gray-900 mb-1">Capturar de movimientos de tarjeta</h5>
                        <p class="text-sm text-gray-600">Registra y gestiona los movimientos bancarios de tus tarjetas de crédito o débito</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="bg-white rounded-lg shadow-md mb-4">
                    <div class="p-6">
                        @if($data['tipoMovimiento'] === 'ingreso')
                        @include('bancos.includes.movimientosIngresosTarjetaFormComponent',['tipoMovimiento' => $data['tipoMovimiento'] ?? 'ingreso'])
                        @else
                        @include('bancos.includes.movimientosEgresosTarjetaFormComponent',['tipoMovimiento' => $data['tipoMovimiento'] ?? 'egreso'])
                        @endif

                        <!-- Skeleton Loader para campos Excel -->
                        <div id="skeleton-campos-excel" class="mt-4">
                            <div class="animate-pulse space-y-3">
                                <div class="grid grid-cols-12 gap-4">
                                    <div class="col-span-6">
                                        <div class="h-4 bg-gray-200 rounded w-32 mb-2"></div>
                                        <div class="h-10 bg-gray-200 rounded"></div>
                                    </div>
                                    <div class="col-span-6">
                                        <div class="h-4 bg-gray-200 rounded w-28 mb-2"></div>
                                        <div class="h-10 bg-gray-200 rounded"></div>
                                    </div>
                                    <div class="col-span-6">
                                        <div class="h-4 bg-gray-200 rounded w-36 mb-2"></div>
                                        <div class="h-10 bg-gray-200 rounded"></div>
                                    </div>
                                    <div class="col-span-6">
                                        <div class="h-4 bg-gray-200 rounded w-24 mb-2"></div>
                                        <div class="h-10 bg-gray-200 rounded"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="inputs-campos-excel-container" style="display: none;">
                            @include('bancos.includes.inputsCamposExcelComponent', ['data' => $data])
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-12 text-right">
                                <button class="bg-white hover:bg-gray-700 text-gray-70 px-4 py-2 rounded-md text-sm font-medium border border-gray-300 transition-colors duration-200" id="btnRecargarPagina">
                                    <i class="material-icons align-middle text-sm">autorenew</i> Limpiar campos
                                </button>
                                <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" id="btnCancelarEdicion" style="display: none;">
                                    <i class="material-icons align-middle text-sm">close</i> Cancelar edición
                                </button>
                                <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" id="btnSaveMovimiento">
                                    <i class="material-icons align-middle text-sm">save</i> Guardar movimiento
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                @include('bancos.includes.tablaMovimientosTarjetaComponent')
            </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;
    }

    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 900;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1100 !important;
        float: left;
        display: none;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }
</style>

@endsection

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

        // Constante para tipo de movimiento
        const tipoMovimiento = '{{ $data["tipoMovimiento"] }}';

        // Mostrar skeleton loaders al cargar la página
        mostrarSkeletonFormulario(true);
        $('#skeleton-campos-excel').show();
        $('#inputs-campos-excel-container').hide();




        // Inicializar Select2 para campos select dinámicos
        $('.select2.campo-excel-dinamico').select2({
            width: '100%',
            placeholder: '-Selecciona-'
        });

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

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

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

        $('#tipo_movimiento').val('{{ $data["tipoMovimiento"] }}').trigger('change');

        $('#tipo_movimiento').change(function() {
            const selectedTipo = $(this).val();

            if (selectedTipo === 'egreso') {
                window.location.href = "{{ route('movimientos-tarjetas.index', ['tipo_movimiento' => 'egreso']) }}";
                return;
            }
            window.location.href = "{{ route('movimientos-tarjetas.index', ['tipo_movimiento' => 'ingreso']) }}";
        });

        function mostrarSkeletonFormulario(mostrar) {
            const tipoActual = '{{ $data["tipoMovimiento"] }}';
            const skeletonId = tipoActual === 'ingreso' ? '#skeleton-form-ingreso' : '#skeleton-form-egreso';
            const contenidoId = tipoActual === 'ingreso' ? '#form-ingreso-contenido' : '#form-egreso-contenido';

            if (mostrar) {
                $(skeletonId).show();
                $(contenidoId).hide();
            } else {
                $(skeletonId).hide();
                $(contenidoId).show();
            }
        }
        setTimeout(() => {
            $('#skeleton-campos-excel').hide();
            $('#inputs-campos-excel-container').show();
            mostrarSkeletonFormulario(false);

        }, 300);

        // Cargar movimientos cuando se seleccione cuenta y periodo
        function cargarMovimientos() {
            const cuentaId = $('#cuenta').val();
            const periodoId = $('#periodoFilter').val();

            if (!cuentaId || !periodoId) {
                mostrarSinMovimientos();
                return;
            }

            $.ajax({
                url: "{{ route('movimientos-tarjetas.get-movimientos-filtrados') }}",
                type: 'POST',
                data: {
                    cuenta_id: cuentaId,
                    periodo_id: periodoId
                },
                beforeSend: function() {
                    $('#skeleton-loader').show();
                    $('#contenedor-tabla-principal').hide();
                    $('#mensaje-sin-movimientos').hide();
                },
                success: function(response) {
                    $('#skeleton-loader').hide();
                    if (response.success && response.data.length > 0) {
                        $('#contenedor-tabla-principal').show();
                        mostrarMovimientos(response.data);
                    } else {
                        $('#contenedor-tabla-principal').hide();
                        mostrarSinMovimientos();
                    }
                },
                error: function(xhr) {
                    console.error('Error al cargar movimientos:', xhr);
                    $('#skeleton-loader').hide();
                    $('#contenedor-tabla-principal').show();
                    $('#tbody-movimientos').html(`
                        <tr>
                            <td colspan="7" class="text-center py-6">
                                <div class="flex flex-col items-center">
                                    <i class="material-icons text-4xl text-red-400 mb-2">error_outline</i>
                                    <p class="text-red-500 font-semibold text-sm">Error al cargar los movimientos</p>
                                    <p class="text-gray-500 text-xs mt-1">Por favor, intenta nuevamente</p>
                                </div>
                            </td>
                        </tr>
                    `);
                }
            });
        }

        function mostrarMovimientos(movimientos) {
            let html = '';
            movimientos.forEach(function(mov) {
                const tipoBadge = mov.tipo_movimiento === 'ingreso' ?
                    '<span class="inline-flex items-center rounded-full bg-gradient-to-r from-green-400 to-green-500 px-2 py-0.5 text-xs font-bold text-white shadow-sm"><i class="material-icons text-xs mr-0.5">arrow_upward</i>Deposito</span>' :
                    '<span class="inline-flex items-center rounded-full bg-gradient-to-r from-red-400 to-red-500 px-2 py-0.5 text-xs font-bold text-white shadow-sm"><i class="material-icons text-xs mr-0.5">arrow_downward</i>Retiro</span>';

                const beneficiarioProveedor = mov.beneficiario || mov.proveedor || '<span class="text-gray-400 italic text-xs">Sin asignar</span>';

                html += `
                    <tr class="hover:bg-blue-50 transition-colors duration-150">
                        <td class="px-2 py-2 text-xs text-gray-700 font-medium whitespace-nowrap">
                            <i class="material-icons text-xs align-middle text-gray-400 mr-0.5">calendar_today</i>
                            ${mov.fecha || 'N/A'}
                        </td>
                        <td class="px-2 py-2 text-xs">${tipoBadge}</td>
                        <td class="px-2 py-2 text-xs text-right font-bold">${mov.monto}</td>
                        <td class="px-2 py-2 text-xs">${mov.categoria}</td>
                        <td class="px-2 py-2 text-xs">${beneficiarioProveedor}</td>
                        <td class="px-2 py-2 text-xs text-center">
                            <div class="flex items-center justify-center space-x-1">
                                <button class="btn-editar-movimiento bg-blue-100 hover:bg-blue-200 text-blue-700 p-1 rounded transition-colors duration-150" 
                                    data-id="${mov.id}" title="Editar">
                                    <i class="material-icons text-sm">edit</i>
                                </button>
                                <button class="btn-eliminar-movimiento bg-red-100 hover:bg-red-200 text-red-700 p-1 rounded transition-colors duration-150" 
                                    data-id="${mov.id}" title="Eliminar">
                                    <i class="material-icons text-sm">delete</i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            $('#tbody-movimientos').html(html);
            $('#mensaje-sin-movimientos').hide();
            $('#total-movimientos').text(`${movimientos.length} ${movimientos.length === 1 ? 'registro' : 'registros'}`);
        }

        function mostrarSinMovimientos() {
            $('#tbody-movimientos').html('');
            $('#contenedor-tabla-principal').hide();
            $('#mensaje-sin-movimientos').show();
            $('#total-movimientos').text('0 registros');
        }

        // Eventos para cargar movimientos
        $('#cuenta, #periodoFilter').change(function() {
            cargarMovimientos();
        });


        $('#btnSaveMovimiento').click(() => {
            const datosFormulario = getDataFormulario();
            if (!datosFormulario) {
                mostrarError('No se pudo leer la información del formulario.');
                return;
            }

            const errores = validarCampos(datosFormulario);
            if (errores.length) {
                mostrarError(errores.join('\n'));
                return;
            }

            const camposDinamicos = getDataCamposDinamicos();
            saveDataMovimiento(datosFormulario, camposDinamicos);
        });

        function getDataFormulario() {
            const beneficiarioProveedor = tipoMovimiento === 'ingreso' ?
                $('#beneficiario option:selected').val() :
                $('#proveedor option:selected').val();

            return {
                monto: $('#monto').val(),
                beneficiario: tipoMovimiento === 'ingreso' ? beneficiarioProveedor : undefined,
                proveedor: tipoMovimiento === 'egreso' ? beneficiarioProveedor : undefined,
                forma_pago: $('#forma_pago option:selected').val(),
                cuenta: $('#cuenta option:selected').val(),
                periodo: $('#periodoFilter option:selected').val(),
                fecha: $('#fecha').val(),
                categoria: $('#categoria option:selected').val(),
                notas: $('#notas_recibo').val()?.trim()
            };
        }

        function validarCampos(data) {
            const errores = [];

            const campoRequerido = tipoMovimiento === 'ingreso' ? 'beneficiario' : 'proveedor';
            const nombreCampo = tipoMovimiento === 'ingreso' ? 'El beneficiario' : 'El proveedor';

            if (!data[campoRequerido]) errores.push(`${nombreCampo} es requerido.`);

            if (!data.monto) errores.push('El monto es requerido.');
            if (!data.categoria) errores.push('La categoría y subcategoría son requeridas.');
            if (!data.forma_pago) errores.push('La forma de pago es requerida.');
            if (!data.cuenta) errores.push('La cuenta es requerida.');
            if (!data.periodo) errores.push('El periodo es requerido.');
            if (!data.fecha) errores.push('La fecha del ingreso es requerida.');

            return errores;
        }

        function getDataCamposDinamicos() {
            const campos = [];

            $('.campo-excel-dinamico').each(function() {
                const $campo = $(this);
                const campoId = $campo.data('campo-id');
                const nombreCampo = $campo.attr('name');
                let valor = '';

                if ($campo.attr('type') === 'checkbox') {
                    valor = $campo.is(':checked') ? 1 : 0;
                } else if ($campo.attr('type') === 'radio') {
                    const seleccionado = $(`input[name="${nombreCampo}"]:checked`);
                    valor = seleccionado.length ? seleccionado.val() : '';
                } else if ($campo.attr('type') === 'color') {
                    const textoColor = $(`#${$campo.attr('id')}_text`).val();
                    valor = textoColor ? textoColor : $campo.val();
                } else {
                    valor = $campo.val();
                }

                campos.push({
                    campo_id: campoId,
                    nombre: nombreCampo,
                    valor: valor
                });
            });

            return campos;
        }

        function saveDataMovimiento(dataFormulario, camposDinamicos) {

            const $btn = $('#btnSaveMovimiento');
            $btn.prop('disabled', true).addClass('opacity-50 cursor-not-allowed');

            // Determinar si es actualización o creación
            const url = modoEdicion ?
                "{{ route('movimientos-tarjetas.update-movimiento') }}" :
                "{{ route('movimientos-tarjetas.save-movimiento') }}";

            const method = modoEdicion ? 'POST' : 'POST';
            const textoAccion = modoEdicion ? 'actualiza' : 'guarda';

            $.ajax({
                url: url,
                type: method,
                data: {
                    id: movimientoEnEdicion,
                    tipo_movimiento: tipoMovimiento,
                    ...dataFormulario,
                    campos_excel: camposDinamicos
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Procesando...',
                        text: `Por favor espera mientras se ${textoAccion} el movimiento.`,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    setTimeout(() => {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: response.message || `Movimiento ${modoEdicion ? 'actualizado' : 'guardado'} correctamente.`,
                            confirmButtonText: 'Aceptar',
                            background: '#fff',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // Cancelar modo edición y limpiar formulario
                            if (modoEdicion) {
                                cancelarEdicion();
                            } else {
                                limpiarCamposFormulario();
                            }
                            cargarMovimientos();
                        });
                    }, 1000);

                },
                error: function(xhr) {
                    const mensaje = xhr.responseJSON?.message || 'Ocurrió un error al guardar el movimiento.';
                    mostrarError(mensaje);
                },
                complete: function() {
                    $btn.prop('disabled', false).removeClass('opacity-50 cursor-not-allowed');
                }
            });
        }

        function mostrarError(mensaje) {
            Swal.fire({
                icon: 'error',
                title: 'Validación',
                text: mensaje,
                confirmButtonText: 'Entendido',
                background: '#fff'
            });
        }

        function limpiarCamposFormulario() {
            // Limpiar campos pero mantener cuenta y periodo seleccionados
            $('#monto').val('');
            $('#fecha').val('');
            $('#notas_recibo').val('');

            // Limpiar select2 específicos según tipo de movimiento
            if (tipoMovimiento === 'ingreso') {
                $('#beneficiario').val('').trigger('change');
            } else {
                $('#proveedor').val('').trigger('change');
            }

            // Limpiar otros campos opcionales
            $('#forma_pago').val('').trigger('change');
            $('#categoria').val('').trigger('change');

            // Limpiar campos dinámicos de Excel si existen
            $('.campo-excel-dinamico').each(function() {
                const $campo = $(this);
                if ($campo.attr('type') === 'checkbox') {
                    $campo.prop('checked', false);
                } else if ($campo.attr('type') === 'radio') {
                    $campo.prop('checked', false);
                } else if ($campo.hasClass('select2')) {
                    $campo.val('').trigger('change');
                } else {
                    $campo.val('');
                }
            });
        }

        function mostrarExito(mensaje) {
            Swal.fire({
                icon: 'success',
                title: 'Éxito',
                text: mensaje,
                confirmButtonText: 'Aceptar',
                background: '#fff'
            });
        }

        // Variable para modo de edición
        let modoEdicion = false;
        let movimientoEnEdicion = null;

        // Evento para editar movimiento
        $(document).on('click', '.btn-editar-movimiento', function() {
            const movimientoId = $(this).data('id');
            cargarMovimientoParaEditar(movimientoId);
        });

        // Evento para eliminar movimiento
        $(document).on('click', '.btn-eliminar-movimiento', function() {
            const movimientoId = $(this).data('id');
            eliminarMovimiento(movimientoId);
        });

        function cargarMovimientoParaEditar(id) {
            $.ajax({
                url: "{{ route('movimientos-tarjetas.get-movimiento') }}",
                type: 'POST',
                data: {
                    id: id
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Cargando...',
                        text: 'Obteniendo datos del movimiento',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        willOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    setTimeout(() => {

                        Swal.close();
                        if (response.success) {
                            modoEdicion = true;
                            movimientoEnEdicion = response.data.id;
                            llenarFormularioConDatos(response.data);
                            $('#btnSaveMovimiento').html('<i class="material-icons align-middle text-sm">update</i> Actualizar movimiento');
                            $('#btnCancelarEdicion').show();

                            // Scroll al formulario
                            $('html, body').animate({
                                scrollTop: 0
                            }, 500);
                        } else {
                            mostrarError('No se pudo cargar el movimiento');
                        }
                    }, 1000);
                },
                error: function(xhr) {
                    Swal.close();
                    mostrarError('Error al cargar el movimiento: ' + (xhr.responseJSON?.message || 'Error desconocido'));
                }
            });
        }

        function llenarFormularioConDatos(data) {
            // Llenar campos básicos
            $('#monto').val(data.monto);
            $('#fecha').val(data.fecha);
            $('#notas_recibo').val(data.notas);

            // Llenar selects con trigger para Select2
            $('#forma_pago').val(data.id_forma_pago).trigger('change');
            $('#categoria').val(data.id_categoria).trigger('change');

            // Llenar beneficiario o proveedor según tipo
            if (data.tipo_movimiento === 'ingreso') {
                $('#beneficiario').val(data.id_beneficiario).trigger('change');
            } else {
                $('#proveedor').val(data.id_proveedor).trigger('change');
            }

            // Llenar campos Excel si existen
            if (data.campos_excel && data.campos_excel.length > 0) {
                data.campos_excel.forEach(function(campo) {
                    const $campoInput = $(`.campo-excel-dinamico[data-campo-id="${campo.campo_id}"]`);
                    if ($campoInput.length > 0) {
                        if ($campoInput.hasClass('select2')) {
                            $campoInput.val(campo.valor).trigger('change');
                        } else if ($campoInput.attr('type') === 'checkbox') {
                            $campoInput.prop('checked', campo.valor == '1');
                        } else {
                            $campoInput.val(campo.valor);
                        }
                    }
                });
            }
        }

        function eliminarMovimiento(id) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: 'Esta acción eliminará el movimiento de forma permanente',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('movimientos-tarjetas.delete-movimiento') }}",
                        data: {
                            id: id
                        },
                        type: 'POST',
                        beforeSend: function() {
                            Swal.fire({
                                title: 'Eliminando...',
                                text: 'Por favor espera',
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                willOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                        },
                        success: function(response) {
                            setTimeout(() => {

                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Eliminado!',
                                        text: response.message,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    cargarMovimientos();
                                } else {
                                    mostrarError(response.message);
                                }
                            }, 1000);
                        },
                        error: function(xhr) {
                            Swal.close();
                            mostrarError('Error al eliminar: ' + (xhr.responseJSON?.message || 'Error desconocido'));
                        }
                    });
                }
            });
        }

        function cancelarEdicion() {
            modoEdicion = false;
            movimientoEnEdicion = null;
            limpiarCamposFormulario();
            $('#btnSaveMovimiento').html('<i class="material-icons align-middle text-sm">save</i> Guardar movimiento');
            $('#btnCancelarEdicion').hide();
        }

        // Evento click para cancelar edición
        $('#btnCancelarEdicion').click(function() {
            cancelarEdicion();
        });

        $('#btnRecargarPagina').click(() => {
            location.reload();
        });
    });
</script>
@endpush