@extends('layouts.app')

@section('title', 'Transferências Bancárias')

@push('styles-custom')
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Mantém estilos do Select2 */
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }

        /* Remove estilo zebrado padrão */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: transparent;
        }

        /* Altura das linhas aumentada */
        .table td {
            padding: 0.875rem 0.75rem;
            vertical-align: middle;
        }

        .table th {
            padding: 0.875rem 0.75rem;
            vertical-align: middle;
        }

        /* Cores alternadas customizadas */
        .table tbody tr.row-even {
            background-color: #f8f9fa !important; /* Cinza bem claro */
        }

        .table tbody tr.row-odd {
            background-color: #ffffff !important; /* Branco */
        }

        /* Hover nas linhas */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.15) !important;
        }

        /* Remove ícones dos headers */
        .table th .fas {
            display: none;
        }

        /* DataTables customização */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--phoenix-primary);
            color: white !important;
            border-color: var(--phoenix-primary);
        }

        /* Scrollbar duplo */
        .table-responsive {
            position: relative;
        }

        .table-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-bottom: 10px;
        }

        .table-scroll-top-inner {
            height: 1px;
        }

        .dataTables_wrapper .dataTables_processing {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ddd;
            border-radius: 0.375rem;
            padding: 20px;
        }

        /* Badge customização */
        .badge-vinculacao {
            font-size: 0.75rem;
            padding: 0.375rem 0.5rem;
        }

        /* Cards de filtro */
        .filter-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
        }

        /* Icones nos headers */
        .table th .fas {
            opacity: 0.7;
            margin-right: 0.25rem;
        }

        /* Modal customização */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.6);
        }

        .modal-content {
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
            border: none;
            border-radius: 0.5rem;
        }

        .modal-header {
            border-bottom: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

        .modal-footer {
            border-top: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Transferências Bancárias</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título e Botão Adicionar -->
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">
                    <span class="fas fa-exchange-alt text-primary me-3"></span>
                    Transferências Bancárias
                </h2>
            </div>
            <div class="col-auto">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary" onclick="window.location='{{ route('transferencias.create') }}'">
                        <span class="fas fa-plus me-2"></span>Nova Transferência
                    </button>
                    {{--
                    <button type="button" class="btn btn-outline-primary" onclick="window.location='{{ route('transferencias.relatorio.rede') }}'">
                        <span class="fas fa-network-wired me-2"></span>Rede de Vinculações
                    </button>
                     --}}
                </div>
            </div>
        </div>

        <!-- Card de Filtros -->
        <div class="card mb-4 filter-card">
            <div class="card-header bg-body-tertiary">
                <div class="d-flex align-items-center">
                    <span class="fas fa-filter text-primary me-2"></span>
                    <h5 class="mb-0">Filtros Avançados</h5>
                </div>
            </div>
            <div class="card-body">
                <form id="filterForm">
                    <!-- Primeira linha - Filtros principais -->
                    <div class="row g-3 mb-3">
                        <!-- Status de Vinculação -->
                        <div class="col-md-2">
                            <label class="form-label small fw-semibold">Status de Vinculação</label>
                            <select name="status_vinculacao" id="filterStatusVinculacao" class="form-select form-select-sm">
                                <option value="all">Todas</option>
                                <option value="disponivel">Disponíveis</option>
                                <option value="origem">Origem</option>
                                <option value="destino">Destino</option>
                                <option value="intermediaria">Intermediárias</option>
                            </select>
                        </div>

                        <!-- Período -->
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">Período</label>
                            <select name="periodo" id="filterPeriodo" class="form-select form-select-sm">
                                <option value="tudo">Tudo</option>
                                <option value="hoje">Hoje</option>
                                <option value="ontem">Ontem</option>
                                <option value="ultimos_7">Últimos 7 dias</option>
                                <option value="ultimos_15">Últimos 15 dias</option>
                                <option value="ultimo_mes">Último mês</option>
                                <option value="mes_atual">Mês atual</option>
                                <option value="intervalo">Intervalo</option>
                                <option value="especifico">Específico</option>
                            </select>
                        </div>

                        <!-- Container para datas dinâmicas -->
                        <div class="col-md-5" id="datasContainer">
                            <!-- Intervalo de datas -->
                            <div id="intervaloContainer" style="display: none;">
                                <label class="form-label small fw-semibold">Intervalo de Datas</label>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="date" name="data_inicio" id="dataInicio" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        <input type="date" name="data_fim" id="dataFim" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <!-- Data específica -->
                            <div id="especificoContainer" style="display: none;">
                                <label class="form-label small fw-semibold">Data Específica</label>
                                <input type="date" name="data_especifica" id="dataEspecifica" class="form-control form-control-sm">
                            </div>
                        </div>

                        <!-- Registros por página -->
                        <div class="col-md-2">
                            <label class="form-label small fw-semibold">Registros</label>
                            <select id="perPage" class="form-select form-select-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100" selected>100</option>
                                <option value="250">250</option>
                            </select>
                        </div>
                    </div>

                    <!-- Segunda linha - Buscas -->
                    <div class="row g-3">
                        <!-- Busca primária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small fw-semibold">Busca Principal</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q"
                                            placeholder="Buscar em todas as colunas"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="search_field" id="searchField" class="form-select form-select-sm">
                                        <option value="">Todas as Colunas</option>
                                        <option value="descricao">Descrição</option>
                                        <option value="valor">Valor</option>
                                        <option value="origem">Origem</option>
                                        <option value="destino">Destino</option>
                                        <option value="plano_saida">Plano de Saída</option>
                                        <option value="plano_entrada">Plano de Entrada</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Busca secundária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small fw-semibold">Busca Secundária (opcional)</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput2"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q2"
                                            placeholder="Segundo filtro (opcional)"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="search_field2" id="searchField2" class="form-select form-select-sm">
                                        <option value="">Selecione</option>
                                        <option value="descricao">Descrição</option>
                                        <option value="valor">Valor</option>
                                        <option value="origem">Origem</option>
                                        <option value="destino">Destino</option>
                                        <option value="plano_saida">Plano de Saída</option>
                                        <option value="plano_entrada">Plano de Entrada</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botões de ação -->
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            <button type="button" id="btnLimparFiltros" class="btn btn-outline-secondary btn-sm">
                                <span class="fas fa-times me-1"></span>Limpar
                            </button>
                            <button type="button" id="btnAplicarFiltros" class="btn btn-primary btn-sm">
                                <span class="fas fa-search me-1"></span>Aplicar Filtros
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tabela -->
        <div class="card">
            <div class="card-body">
                <!-- Scrollbar superior -->
                <div class="table-scroll-top">
                    <div class="table-scroll-top-inner"></div>
                </div>

                <div class="table-responsive" id="tableContainer">
                    <table id="transferenciasTable" class="table table-sm fs-9 mb-0">
                        <thead class="bg-body-tertiary">
                            <tr>
                                <th>#</th>
                                <th>Data</th>
                                <th>Descrição</th>
                                <th>Origem</th>
                                <th>Destino</th>
                                <th>Plano Saída</th>
                                <th>Plano Entrada</th>
                                <th>Status Vinculação</th>
                                <th>Valor</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


        <!-- Modal de Exclusão -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <span class="fas fa-exclamation-triangle text-danger me-2"></span>
                        Confirmar Exclusão
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <span class="fas fa-exclamation-triangle me-2"></span>
                        <strong>Atenção!</strong> Esta ação não pode ser desfeita.
                    </div>
                    <p>Tem certeza que deseja excluir a transferência <strong id="transferenciaInfo"></strong>?</p>
                    <p class="text-muted small">
                        <span class="fas fa-info-circle me-1"></span>
                        Todos os dados relacionados também serão removidos.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <span class="fas fa-times me-2"></span>Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <span class="fas fa-trash me-2"></span>Excluir Transferência
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Container para modais dinâmicos -->
<div id="modalContainer"></div>

@endsection

@push('scripts-custom')
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <!-- Choices e Select2 -->
    <script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
    <script src="{{ asset('vendors/select2/js/select2.min.js') }}"></script>

    <script>
        // Função para capturar todos os parâmetros de filtro atuais
        function getFilterParams() {
            const params = new URLSearchParams(window.location.search);
            const filters = {};

            // Captura todos os parâmetros da URL
            for (const [key, value] of params) {
                filters[key] = value;
            }

            // Captura também os valores atuais dos filtros no formulário
            filters.status_vinculacao = $('#filterStatusVinculacao').val() || 'all';
            filters.periodo = $('#filterPeriodo').val() || 'tudo';
            filters.search_field = $('#searchField').val() || '';
            filters.q = $('#searchInput').val() || '';
            filters.search_field2 = $('#searchField2').val() || '';
            filters.q2 = $('#searchInput2').val() || '';
            filters.data_inicio = $('#dataInicio').val() || '';
            filters.data_fim = $('#dataFim').val() || '';
            filters.data_especifica = $('#dataEspecifica').val() || '';

            return filters;
        }

        // Função para adicionar campos hidden com os filtros em um formulário
        function addFilterFieldsToForm(form, filters) {
            for (const [key, value] of Object.entries(filters)) {
                if (value) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = value;
                    form.appendChild(input);
                }
            }
        }

        // Funções para abrir modais dinamicamente
        function viewVinculacoes(transferenciaId) {
            // Captura os filtros atuais
            const filters = getFilterParams();
            const queryParams = new URLSearchParams(filters).toString();

            const url = `/transferencias/${transferenciaId}/modal-vinculacoes${queryParams ? '?' + queryParams : ''}`;

            $.get(url, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);
                $(`#modalVinculacoes${transferenciaId}`).modal('show');

                // Inicializa tooltips
                $('[data-bs-toggle="tooltip"]').tooltip();
            });
        }

        let currentTransferenciaId = null;

        function confirmarExclusao(transferenciaId) {
            currentTransferenciaId = transferenciaId;

            // Buscar informações da transferência na tabela atual
            const row = $(`#transferenciasTable tbody tr`).filter(function() {
                return $(this).find('td:first').text().trim() == transferenciaId;
            });

            let transferenciaInfo = `#${transferenciaId}`;
            if (row.length > 0) {
                const descricao = row.find('td:nth-child(3)').text().trim();
                if (descricao && descricao !== 'N/A') {
                    transferenciaInfo = `#${transferenciaId} - ${descricao}`;
                }
            }

            document.getElementById('transferenciaInfo').textContent = transferenciaInfo;

            // Abre o modal
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        // Função para restaurar filtros da URL ao carregar a página
        function restoreFiltersFromURL() {
            const params = new URLSearchParams(window.location.search);

            // Restaura cada filtro se existir na URL
            if (params.has('status_vinculacao')) $('#filterStatusVinculacao').val(params.get('status_vinculacao'));
            if (params.has('periodo')) $('#filterPeriodo').val(params.get('periodo'));
            if (params.has('search_field')) $('#searchField').val(params.get('search_field'));
            if (params.has('q')) $('#searchInput').val(params.get('q'));
            if (params.has('search_field2')) $('#searchField2').val(params.get('search_field2'));
            if (params.has('q2')) $('#searchInput2').val(params.get('q2'));
            if (params.has('data_inicio')) $('#dataInicio').val(params.get('data_inicio'));
            if (params.has('data_fim')) $('#dataFim').val(params.get('data_fim'));
            if (params.has('data_especifica')) $('#dataEspecifica').val(params.get('data_especifica'));

            // Mostra/esconde campos de data conforme necessário
            if (params.get('periodo') === 'intervalo') {
                $('#intervaloContainer').show();
            } else if (params.get('periodo') === 'especifico') {
                $('#especificoContainer').show();
            }
        }

        let dataTable;

        $(document).ready(function() {
            // Inicializa DataTable
            initDataTable();

            // Configura event listeners
            setupEventListeners();

            // Atualiza placeholders
            updatePlaceholder();
            updatePlaceholder2();

            restoreFiltersFromURL();


            // Event listener para o botão de confirmação do modal
            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                if (currentTransferenciaId) {
                    const filters = getFilterParams();

                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/transferencias/${currentTransferenciaId}`;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    form.appendChild(methodField);

                    // Adiciona os filtros
                    addFilterFieldsToForm(form, filters);

                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });

        function initDataTable() {
            dataTable = $('#transferenciasTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("transferencias.index") }}',
                    type: 'GET',
                    data: function(d) {
                        // Adiciona todos os filtros
                        d.status_vinculacao = $('#filterStatusVinculacao').val();
                        d.periodo = $('#filterPeriodo').val();
                        d.data_inicio = $('#dataInicio').val();
                        d.data_fim = $('#dataFim').val();
                        d.data_especifica = $('#dataEspecifica').val();
                        d.search_field = $('#searchField').val();
                        d.q = $('#searchInput').val();
                        d.search_field2 = $('#searchField2').val();
                        d.q2 = $('#searchInput2').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id', className: 'fw-semibold' },
                    {
                        data: 'data',
                        name: 'data',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' && data.display) {
                                return data.display;
                            }
                            return data.display || '';
                        }
                    },
                    { data: 'descricao', name: 'descricao' },
                    { data: 'origem', name: 'origem' },
                    { data: 'destino', name: 'destino' },
                    { data: 'plano_saida', name: 'plano_saida' },
                    { data: 'plano_entrada', name: 'plano_entrada' },
                    {
                        data: 'status_vinculacao',
                        name: 'status_vinculacao',
                        className: 'text-center',
                        orderable: false
                    },
                    { data: 'valor', name: 'valor', className: 'text-end fw-semibold' },
                    { data: 'acoes', name: 'acoes', orderable: false, searchable: false, className: 'text-center' }
                ],
                pageLength: 100,
                lengthMenu: [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]],
                order: [[1, 'desc']], // Ordena por data
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json'
                },
                dom: '<"d-none"lf>rt<"d-flex justify-content-between align-items-center mt-3"<"dataTables_info"i><"dataTables_paginate"p>>',
                drawCallback: function(settings) {
                    // Reinicializa tooltips
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Aplicar cores alternadas nas linhas (invertido: começa com branco)
                    $('#transferenciasTable tbody tr').each(function(index) {
                        $(this).removeClass('row-even row-odd bg-body');
                        if (index % 2 === 0) {
                            $(this).addClass('row-odd');  // Primeira linha = branco
                        } else {
                            $(this).addClass('row-even'); // Segunda linha = cinza claro
                        }
                    });
                }
            });

            // Sincroniza select de registros por página
            $('#perPage').on('change', function() {
                dataTable.page.len($(this).val()).draw();
            });
        }

        function setupEventListeners() {
            // Filtro de período
            $('#filterPeriodo').on('change', function() {
                const periodo = $(this).val();
                $('#intervaloContainer, #especificoContainer').hide();

                if (periodo === 'intervalo') {
                    $('#intervaloContainer').show();
                } else if (periodo === 'especifico') {
                    $('#especificoContainer').show();
                }

                // Se não for intervalo ou específico, aplica o filtro automaticamente
                if (periodo !== 'intervalo' && periodo !== 'especifico') {
                    dataTable.ajax.reload();
                }
            });

            // Aplicar filtros quando datas mudarem
            $('#dataInicio, #dataFim').on('change', function() {
                if ($('#dataInicio').val() && $('#dataFim').val()) {
                    dataTable.ajax.reload();
                }
            });

            $('#dataEspecifica').on('change', function() {
                dataTable.ajax.reload();
            });

            // Aplicar filtros
            $('#btnAplicarFiltros').on('click', function() {
                dataTable.ajax.reload();
            });

            // Limpar filtros
            $('#btnLimparFiltros').on('click', function() {
                $('#filterForm')[0].reset();
                $('#intervaloContainer, #especificoContainer').hide();
                updatePlaceholder();
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

            // Mudança nos campos de busca
            $('#searchField').on('change', function() {
                updatePlaceholder();
                dataTable.ajax.reload();
            });

            $('#searchField2').on('change', function() {
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

            // Aplicar filtro ao pressionar Enter nos campos de busca
            $('#searchInput, #searchInput2').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    dataTable.ajax.reload();
                }
            });

            // Aplicar filtros quando status de vinculação mudar
            $('#filterStatusVinculacao').on('change', function() {
                dataTable.ajax.reload();
            });
        }

        // Sincronizar scrollbars horizontal
        function setupDualScrollbar() {
            const tableContainer = document.getElementById('tableContainer');
            const scrollTop = document.querySelector('.table-scroll-top');
            const scrollTopInner = document.querySelector('.table-scroll-top-inner');

            if (!tableContainer || !scrollTop || !scrollTopInner) return;

            // Função para atualizar largura
            function updateScrollWidth() {
                const tableWidth = tableContainer.querySelector('table').offsetWidth;
                scrollTopInner.style.width = tableWidth + 'px';

                // Mostrar/ocultar scrollbar superior baseado na necessidade
                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
                    scrollTop.style.display = 'block';
                } else {
                    scrollTop.style.display = 'none';
                }
            }

            // Sincronizar scroll
            scrollTop.addEventListener('scroll', function() {
                tableContainer.scrollLeft = this.scrollLeft;
            });

            tableContainer.addEventListener('scroll', function() {
                scrollTop.scrollLeft = this.scrollLeft;
            });

            // Atualizar largura quando a tabela for redesenhada
            dataTable.on('draw.dt', updateScrollWidth);

            // Atualizar largura quando a janela for redimensionada
            window.addEventListener('resize', updateScrollWidth);

            // Atualizar largura inicial
            setTimeout(updateScrollWidth, 500);
        }

        // Chamar após inicializar o DataTable
        setTimeout(setupDualScrollbar, 100);

        // Funções de placeholder
        function updatePlaceholder() {
            const field = $('#searchField').val();
            const input = $('#searchInput');
            if (!field) {
                input.attr('placeholder', 'Buscar em todas as colunas');
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.attr('placeholder', 'Buscar por ' + label);
            }
        }

        function updatePlaceholder2() {
            const field = $('#searchField2').val();
            const input = $('#searchInput2');
            if (!field) {
                input.attr('placeholder', 'Segundo filtro (opcional)');
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.attr('placeholder', 'Buscar por ' + label);
            }
        }

        // Função para adicionar filtros atuais a qualquer URL
        function addCurrentFiltersToUrl(baseUrl) {
            const filters = getFilterParams();
            const url = new URL(baseUrl, window.location.origin);

            Object.entries(filters).forEach(([key, value]) => {
                if (value && value !== 'all' && value !== 'tudo' && value !== '') {
                    url.searchParams.set(key, value);
                }
            });

            return url.toString();
        }

        // Interceptar cliques em links para adicionar filtros
        $(document).on('click', 'a[href*="/transferencias/"]', function(e) {
            const href = $(this).attr('href');

            // Só processa se for um link interno e não tiver parâmetros já
            if (href && !href.includes('?') && !href.includes('#')) {
                // Verifica se é um link de ação (edit, show)
                if (href.includes('/edit') || href.includes('/show') || href === '/transferencias') {
                    const urlWithFilters = addCurrentFiltersToUrl(href);
                    $(this).attr('href', urlWithFilters);
                }
            }
        });
    </script>
@endpush