@extends('layouts.app')

@push('head')
    <style>
        .admin-warning {
            background: linear-gradient(45deg, #17a2b8, #20c997);
            color: white;
            border: none;
        }
        .info-zone {
            border: 2px solid #17a2b8;
            border-radius: 8px;
            background-color: #e8f4f8;
        }
        .success-zone {
            border: 2px solid #28a745;
            border-radius: 8px;
            background-color: #f0fff4;
        }
        .info-card {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .payment-item {
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            margin-bottom: 8px;
            padding: 12px;
        }
        .payment-item:hover {
            background-color: #f8f9fa;
            border-color: #007bff;
        }
        .payment-item.selected {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }
        .bank-badge {
            background-color: #007bff;
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .no-bank-badge {
            background-color: #6c757d;
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .value-display {
            font-weight: 600;
            font-size: 1.1rem;
        }
        .value-positive {
            color: #28a745;
        }
        .value-negative {
            color: #dc3545;
        }
        .checkbox-custom {
            transform: scale(1.2);
            margin-right: 10px;
        }
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .payments-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
        }
        .no-payments {
            text-align: center;
            color: #6c757d;
            font-style: italic;
            padding: 40px 20px;
        }
        .selection-controls {
            border: 1px solid #e3f2fd;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        .selection-counter .badge {
            font-size: 0.875rem;
            padding: 6px 12px;
            border-radius: 20px;
        }
        .btn-group .btn {
            transition: all 0.2s ease;
            font-weight: 500;
        }
        .btn-group .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
        }
        .btn-success:hover {
            background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        }
        .btn-outline-danger:hover {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            transform: translateY(-1px);
        }
        .btn-feedback {
            animation: btnPulse 0.3s ease;
        }
        @keyframes btnPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .bank-selector {
            background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
            border: 2px solid #ffc107;
            border-radius: 8px;
        }
        /* Select2 customization */
        .select2-container--default .select2-selection--single {
            height: 38px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            padding-left: 12px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
        .select2-dropdown {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }
        .bank-select-container {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
    </style>
@endpush

@section('content')
<div class="content">
    <div class="container-fluid">
        <!-- Header com aviso -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-info admin-warning d-flex align-items-center" role="alert">
                    <span class="fas fa-university me-3 fs-1"></span>
                    <div>
                        <h4 class="alert-heading mb-2">🏦 GERENCIAR CONTA BANCÁRIA DE PAGAMENTOS/RECEBIMENTOS</h4>
                        <p class="mb-0">Esta área permite adicionar ou alterar a conta bancária de pagamentos e recebimentos específicos.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Container para Alertas -->
        <div id="alert-container"></div>

        <div class="row">
            <!-- Gerenciar Conta Bancária de Pagamentos -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <span class="fas fa-credit-card me-2"></span>
                            Gerenciar Conta de Pagamentos
                        </h5>
                    </div>
                    <div class="card-body position-relative">
                        <div class="loading-overlay d-none" id="loadingPagamentos">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                        </div>

                        <div class="info-card p-3 mb-3">
                            <p class="mb-2"><strong>Como funciona:</strong></p>
                            <ul class="mb-0">
                                <li>Digite o ID da conta a pagar</li>
                                <li>Selecione os pagamentos específicos</li>
                                <li>Escolha a nova conta bancária</li>
                                <li>Aplique a mudança</li>
                            </ul>
                        </div>

                        <form id="formGerenciarPagamentos">
                            <div class="mb-3">
                                <label for="conta_pagar_id_manage" class="form-label">ID da Conta a Pagar</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           id="conta_pagar_id_manage" 
                                           placeholder="Digite o ID da conta..."
                                           required>
                                    <button type="button" 
                                            class="btn btn-outline-primary" 
                                            id="btnBuscarPagamentosManage">
                                        <span class="fas fa-search"></span>
                                    </button>
                                </div>
                            </div>

                            <!-- Área de informações da conta -->
                            <div id="contaPagarManageInfo" class="d-none">
                                <div class="info-zone p-3 mb-3">
                                    <h6 class="text-info mb-2">📋 Informações da Conta:</h6>
                                    <div id="contaPagarManageDetalhes"></div>
                                </div>
                                
                                <!-- Lista de Pagamentos -->
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0">💰 Pagamentos Disponíveis:</h6>
                                        <div class="selection-counter">
                                            <span class="badge bg-info fs-7">
                                                <span id="totalSelecionadosPag">0</span> selecionado(s)
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="selection-controls mb-3 p-2 bg-light rounded">
                                        <div class="row align-items-center">
                                            <div class="col-md-8">
                                                <small class="text-muted fw-medium">
                                                    <i class="fas fa-hand-pointer me-1"></i>
                                                    Selecione os pagamentos para alterar conta:
                                                </small>
                                            </div>
                                            <div class="col-md-4 text-end">
                                                <div class="btn-group" role="group">
                                                    <button type="button" 
                                                            class="btn btn-sm btn-success" 
                                                            id="btnSelecionarTodosPag"
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-placement="top" 
                                                            title="Selecionar todos os pagamentos">
                                                        <i class="fas fa-check-double me-1"></i>
                                                        <span class="d-none d-lg-inline">Todos</span>
                                                    </button>
                                                    <button type="button" 
                                                            class="btn btn-sm btn-outline-danger" 
                                                            id="btnDesmarcarTodosPag"
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-placement="top" 
                                                            title="Desmarcar todos os pagamentos">
                                                        <i class="fas fa-times-circle me-1"></i>
                                                        <span class="d-none d-lg-inline">Limpar</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="payments-container" id="pagamentosManageContainer">
                                        <!-- Pagamentos serão carregados aqui via AJAX -->
                                    </div>
                                </div>

                                <!-- Seletor de Conta Bancária com Select2 -->
                                <div class="mb-3" id="seletorContaBancariaPag" style="display: none;">
                                    <div class="bank-select-container">
                                        <h6 class="text-warning mb-3">
                                            <i class="fas fa-university me-2"></i>
                                            Selecione a Nova Conta Bancária:
                                        </h6>
                                        <select id="selectContaBancariaPag" 
                                                class="form-select" 
                                                style="width: 100%">
                                            <option value="">Selecione uma conta bancária...</option>
                                        </select>
                                        <small class="text-muted mt-2 d-block">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Contas bancárias da empresa carregadas automaticamente
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmPagamentosManage">
                                    <label class="form-check-label text-info" for="confirmPagamentosManage">
                                        <strong>Confirmo que desejo alterar a conta bancária dos pagamentos selecionados</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-info w-100" 
                                    id="btnAtualizarPagamentos" 
                                    disabled>
                                <span class="fas fa-sync-alt me-2"></span>
                                Atualizar Conta Bancária dos Pagamentos
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Gerenciar Conta Bancária de Recebimentos -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">
                            <span class="fas fa-piggy-bank me-2"></span>
                            Gerenciar Conta de Recebimentos
                        </h5>
                    </div>
                    <div class="card-body position-relative">
                        <div class="loading-overlay d-none" id="loadingRecebimentos">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                        </div>

                        <div class="info-card p-3 mb-3">
                            <p class="mb-2"><strong>Como funciona:</strong></p>
                            <ul class="mb-0">
                                <li>Digite o ID da conta a receber</li>
                                <li>Selecione os recebimentos (contexto)</li>
                                <li>Escolha a nova conta bancária</li>
                                <li>Altera a conta bancária da Conta a Receber</li>
                                <li><strong>Nota:</strong> Afeta TODOS os recebimentos da conta</li>
                            </ul>
                        </div>

                        <form id="formGerenciarRecebimentos">
                            <div class="mb-3">
                                <label for="conta_receber_id_manage" class="form-label">ID da Conta a Receber</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           id="conta_receber_id_manage" 
                                           placeholder="Digite o ID da conta..."
                                           required>
                                    <button type="button" 
                                            class="btn btn-outline-primary" 
                                            id="btnBuscarRecebimentosManage">
                                        <span class="fas fa-search"></span>
                                    </button>
                                </div>
                            </div>

                            <!-- Área de informações da conta -->
                            <div id="contaReceberManageInfo" class="d-none">
                                <div class="success-zone p-3 mb-3">
                                    <h6 class="text-success mb-2">📋 Informações da Conta:</h6>
                                    <div id="contaReceberManageDetalhes"></div>
                                </div>
                                
                                <!-- Lista de Recebimentos -->
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0">💰 Recebimentos Disponíveis:</h6>
                                        <div class="selection-counter">
                                            <span class="badge bg-success fs-7">
                                                <span id="totalSelecionadosRec">0</span> selecionado(s)
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="selection-controls mb-3 p-2 bg-light rounded">
                                        <div class="row align-items-center">
                                            <div class="col-md-8">
                                                <small class="text-muted fw-medium">
                                                    <i class="fas fa-hand-pointer me-1"></i>
                                                    Selecione para contexto (altera conta da Conta a Receber):
                                                </small>
                                            </div>
                                            <div class="col-md-4 text-end">
                                                <div class="btn-group" role="group">
                                                    <button type="button" 
                                                            class="btn btn-sm btn-success" 
                                                            id="btnSelecionarTodosRec"
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-placement="top" 
                                                            title="Selecionar todos os recebimentos">
                                                        <i class="fas fa-check-double me-1"></i>
                                                        <span class="d-none d-lg-inline">Todos</span>
                                                    </button>
                                                    <button type="button" 
                                                            class="btn btn-sm btn-outline-danger" 
                                                            id="btnDesmarcarTodosRec"
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-placement="top" 
                                                            title="Desmarcar todos os recebimentos">
                                                        <i class="fas fa-times-circle me-1"></i>
                                                        <span class="d-none d-lg-inline">Limpar</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="payments-container" id="recebimentosManageContainer">
                                        <!-- Recebimentos serão carregados aqui via AJAX -->
                                    </div>
                                </div>

                                <!-- Seletor de Conta Bancária com Select2 -->
                                <div class="mb-3" id="seletorContaBancariaRec" style="display: none;">
                                    <div class="bank-select-container">
                                        <h6 class="text-warning mb-3">
                                            <i class="fas fa-university me-2"></i>
                                            Selecione a Nova Conta Bancária:
                                        </h6>
                                        <select id="selectContaBancariaRec" 
                                                class="form-select" 
                                                style="width: 100%">
                                            <option value="">Selecione uma conta bancária...</option>
                                        </select>
                                        <small class="text-muted mt-2 d-block">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Contas bancárias da empresa carregadas automaticamente
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmRecebimentosManage">
                                    <label class="form-check-label text-success" for="confirmRecebimentosManage">
                                        <strong>Confirmo que desejo alterar a conta bancária da Conta a Receber (afeta todos os recebimentos)</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-success w-100" 
                                    id="btnAtualizarRecebimentos" 
                                    disabled>
                                <span class="fas fa-sync-alt me-2"></span>
                                Atualizar Conta Bancária da Conta a Receber
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Log de atividades -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <span class="fas fa-info-circle me-2"></span>
                            Informações Importantes sobre Gerenciamento de Contas Bancárias
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h6 class="text-primary">🔍 Como usar:</h6>
                                <ul>
                                    <li>Digite o ID da conta (pagar/receber)</li>
                                    <li>Clique na lupa para buscar</li>
                                    <li><strong>Pagamentos:</strong> Selecione específicos</li>
                                    <li><strong>Recebimentos:</strong> Altera conta da Conta a Receber</li>
                                    <li>Escolha a nova conta bancária no Select2</li>
                                    <li>Confirme e execute a atualização</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h6 class="text-success">✅ Diferenças:</h6>
                                <ul>
                                    <li><strong>Pagamentos:</strong> Alteração individual</li>
                                    <li><strong>Recebimentos:</strong> Altera a Conta a Receber</li>
                                    <li>Select2 com busca inteligente</li>
                                    <li>Validação de relacionamentos</li>
                                    <li>Confirmação obrigatória</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h6 class="text-warning">⚠️ Atenção:</h6>
                                <ul>
                                    <li><strong>Recebimentos:</strong> Afeta TODA a conta</li>
                                    <li>Alteração afeta conciliação</li>
                                    <li>Verifique antes de confirmar</li>
                                    <li>URL de acesso restrito</li>
                                    <li>Apenas administradores</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Script de gerenciamento de contas bancárias carregado com sucesso!');
    
    // URLs base
    const baseUrlContaPagar = '{{ url("admin/system/conta-pagar") }}';
    const baseUrlContaReceber = '{{ url("admin/system/conta-receber") }}';
    const urlContasBancarias = '{{ url("admin/system/contas-bancarias/por-empresa") }}';
    const urlUpdatePagamentos = '{{ route("admin.update-pagamentos-conta-bancaria") }}';
    const urlUpdateRecebimentos = '{{ route("admin.update-recebimentos-conta-bancaria") }}';

    // ==========================================
    // INICIALIZAR SELECT2
    // ==========================================
    
    function initializeSelect2() {
        // Select2 para Pagamentos
        $('#selectContaBancariaPag').select2({
            placeholder: 'Selecione uma conta bancária...',
            allowClear: true,
            width: '100%',
            language: {
                noResults: function() {
                    return "Nenhuma conta bancária encontrada";
                },
                searching: function() {
                    return "Buscando...";
                }
            }
        });

        // Select2 para Recebimentos
        $('#selectContaBancariaRec').select2({
            placeholder: 'Selecione uma conta bancária...',
            allowClear: true,
            width: '100%',
            language: {
                noResults: function() {
                    return "Nenhuma conta bancária encontrada";
                },
                searching: function() {
                    return "Buscando...";
                }
            }
        });

        // Event listeners para mudança de seleção
        $('#selectContaBancariaPag').on('change', function() {
            validateForm();
        });

        $('#selectContaBancariaRec').on('change', function() {
            validateForm();
        });
    }

    // ==========================================
    // FUNÇÕES UTILITÁRIAS
    // ==========================================
    
    function showAlert(type, message) {
        const alertContainer = document.getElementById('alert-container');
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                <span class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></span>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        alertContainer.innerHTML = alertHtml;
        
        setTimeout(() => {
            const alert = alertContainer.querySelector('.alert');
            if (alert) {
                alert.classList.remove('show');
                setTimeout(() => alert.remove(), 150);
            }
        }, 5000);
    }

    function updateSelectionCount(containerId, counterId) {
        const container = document.getElementById(containerId);
        const counter = document.getElementById(counterId);
        const selected = container.querySelectorAll('input[type="checkbox"]:checked').length;
        counter.textContent = selected;
        return selected;
    }

    function loadContasBancarias(empresaId, selectId, selectorId) {
        const selector = document.getElementById(selectorId);
        
        if (!empresaId) {
            console.error('❌ Empresa ID não encontrado:', empresaId);
            showAlert('error', 'Empresa ID não encontrado');
            return;
        }

        // Limpar Select2 e mostrar carregando
        const $select = $(`#${selectId}`);
        $select.empty().append('<option value="">Carregando contas bancárias...</option>');
        
        const url = `${urlContasBancarias}/${empresaId}`;
        console.log(`🏦 INICIANDO: Carregamento de contas bancárias da empresa ${empresaId}`);
        console.log(`🔗 URL: ${url}`);
        
        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            console.log('📡 RESPOSTA: Status:', response.status);
            console.log('📡 RESPOSTA: Headers:', [...response.headers.entries()]);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            return response.json();
        })
        .then(data => {
            console.log('📦 DADOS RECEBIDOS (COMPLETOS):', data);
            console.log('📦 TIPO DOS DADOS:', typeof data);
            console.log('📦 SUCCESS:', data.success);
            console.log('📦 CONTAS:', data.contas);
            
            // Limpar options
            $select.empty();
            $select.append('<option value="">Selecione uma conta bancária...</option>');
            
            if (data.success && data.contas && data.contas.length > 0) {
                console.log(`✅ PROCESSANDO: ${data.contas.length} contas encontradas`);
                
                // Verificar estrutura de cada conta
                data.contas.forEach((conta, index) => {
                    console.log(`🏦 CONTA ${index + 1}:`, conta);
                    console.log(`🏦 CONTA ${index + 1} - ID:`, conta.id);
                    console.log(`🏦 CONTA ${index + 1} - BANCO:`, conta.banco_nome);
                    console.log(`🏦 CONTA ${index + 1} - AGENCIA:`, conta.agencia);
                    console.log(`🏦 CONTA ${index + 1} - CONTA:`, conta.conta_numero);
                    console.log(`🏦 CONTA ${index + 1} - TIPO:`, conta.tipo_conta);
                    console.log(`🏦 CONTA ${index + 1} - DESCRIÇÃO:`, conta.descricao_completa);
                    
                    // Verificar se todos os campos necessários existem
                    if (!conta.id) {
                        console.error(`❌ CONTA ${index + 1}: ID está faltando!`);
                    }
                    
                    // Construir texto de exibição com fallbacks
                    const bancoNome = conta.banco_nome || 'Banco não informado';
                    const agencia = conta.agencia || 'N/A';
                    const contaNumero = conta.conta_numero || 'N/A';
                    const tipoConta = conta.tipo_conta || 'N/A';
                    
                    const textoExibicao = `${bancoNome} - Ag: ${agencia} - CC: ${contaNumero} (${tipoConta})`;
                    
                    console.log(`🏦 CONTA ${index + 1} - TEXTO FINAL:`, textoExibicao);
                    
                    // Criar option
                    const option = new Option(
                        textoExibicao,
                        conta.id,
                        false,
                        false
                    );
                    
                    console.log(`🏦 CONTA ${index + 1} - OPTION CRIADA:`, {
                        text: option.text,
                        value: option.value
                    });
                    
                    $select.append(option);
                });
                
                console.log(`✅ FINALIZADO: ${data.contas.length} contas adicionadas ao Select2`);
            } else {
                console.warn('⚠️ AVISO: Nenhuma conta encontrada ou dados inválidos');
                console.log('⚠️ DETALHES:', {
                    success: data.success,
                    contas_existe: !!data.contas,
                    contas_length: data.contas ? data.contas.length : 'N/A',
                    message: data.message
                });
                
                $select.append('<option value="" disabled>Nenhuma conta bancária encontrada</option>');
            }
            
            // Trigger change para atualizar Select2
            $select.trigger('change');
            
            // Mostrar seletor
            selector.style.display = 'block';
            
            console.log('🎯 SELECT2 ATUALIZADO:', {
                id: selectId,
                opcoes_totais: $select.find('option').length,
                opcoes_com_valor: $select.find('option[value!=""]').length
            });
            
        })
        .catch(error => {
            console.error('❌ ERRO COMPLETO:', error);
            console.error('❌ ERRO STACK:', error.stack);
            
            $select.empty();
            $select.append('<option value="" disabled>Erro ao carregar contas bancárias</option>');
            selector.style.display = 'block';
            
            showAlert('danger', `Erro ao carregar contas bancárias: ${error.message}`);
        });
    }

    function validateForm() {
        // Validar pagamentos
        const selectedPag = updateSelectionCount('pagamentosManageContainer', 'totalSelecionadosPag');
        const confirmPag = document.getElementById('confirmPagamentosManage').checked;
        const bankPag = $('#selectContaBancariaPag').val();
        document.getElementById('btnAtualizarPagamentos').disabled = !(selectedPag > 0 && confirmPag && bankPag);
        
        // Validar recebimentos
        const selectedRec = updateSelectionCount('recebimentosManageContainer', 'totalSelecionadosRec');
        const confirmRec = document.getElementById('confirmRecebimentosManage').checked;
        const bankRec = $('#selectContaBancariaRec').val();
        document.getElementById('btnAtualizarRecebimentos').disabled = !(selectedRec > 0 && confirmRec && bankRec);
    }

    // ==========================================
    // BUSCAR PAGAMENTOS DA CONTA A PAGAR
    // ==========================================

    function buscarPagamentosManage() {
        const id = document.getElementById('conta_pagar_id_manage').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

        const btn = document.getElementById('btnBuscarPagamentosManage');
        const loading = document.getElementById('loadingPagamentos');
        const originalHtml = btn.innerHTML;
        
        btn.innerHTML = '<span class="fas fa-spinner fa-spin"></span>';
        btn.disabled = true;
        loading.classList.remove('d-none');

        const url = `${baseUrlContaPagar}/${id}/pagamentos`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('📦 Dados pagamentos recebidos:', data);
            if (data.success) {
                const conta = data.conta;
                const pagamentos = data.pagamentos;
                
                // Exibir informações da conta
                document.getElementById('contaPagarManageDetalhes').innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>ID:</strong> ${conta.id}</p>
                            <p><strong>Descrição:</strong> ${conta.descricao || 'N/A'}</p>
                            <p><strong>Valor:</strong> R$ ${conta.valor}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Empresa:</strong> ${conta.empresa}</p>
                            <p><strong>Fornecedor:</strong> ${conta.fornecedor}</p>
                            <p><strong>Vencimento:</strong> ${conta.data_vencimento || 'N/A'}</p>
                        </div>
                    </div>
                `;
                
                // Exibir lista de pagamentos
                const containerPagamentos = document.getElementById('pagamentosManageContainer'); // ← NOME ÚNICO
                if (pagamentos.length === 0) {
                    containerPagamentos.innerHTML = '<div class="no-payments">Nenhum pagamento encontrado para esta conta.</div>';
                } else {
                    containerPagamentos.innerHTML = pagamentos.map(pagamento => `
                        <div class="payment-item">
                            <div class="d-flex align-items-center">
                                <input type="checkbox" 
                                    class="form-check-input checkbox-custom pagamento-manage-checkbox" 
                                    value="${pagamento.id}"
                                    id="pag_manage_${pagamento.id}">
                                <div class="flex-grow-1 ms-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="value-display ${pagamento.is_estorno ? 'value-negative' : 'value-positive'}">
                                                ${pagamento.is_estorno ? '-' : ''}R$ ${pagamento.valor}
                                            </span>
                                            ${pagamento.tem_conta_bancaria ? 
                                                `<span class="bank-badge ms-2" title="${pagamento.conta_bancaria_completa}">${pagamento.conta_bancaria}</span>` : 
                                                '<span class="no-bank-badge ms-2">SEM CONTA</span>'
                                            }
                                        </div>
                                        <small class="text-muted">ID: ${pagamento.id}</small>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-1">
                                        <small class="text-muted">
                                            Data: ${pagamento.data_pagamento}
                                        </small>
                                        <small class="text-muted">
                                            ${pagamento.multa !== '0,00' ? `Multa: R$ ${pagamento.multa}` : ''}
                                            ${pagamento.juros !== '0,00' ? ` | Juros: R$ ${pagamento.juros}` : ''}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `).join('');
                }
                
                // Mostrar seção
                document.getElementById('contaPagarManageInfo').classList.remove('d-none');
                
                // Reset
                document.getElementById('confirmPagamentosManage').checked = false;
                $('#selectContaBancariaPag').val('').trigger('change');
                document.getElementById('btnAtualizarPagamentos').disabled = true;
                updateSelectionCount('pagamentosManageContainer', 'totalSelecionadosPag');
                
                // Carregar contas bancárias da empresa
                if (data.empresa_id) {
                    loadContasBancarias(data.empresa_id, 'selectContaBancariaPag', 'seletorContaBancariaPag');
                } else {
                    console.warn('Empresa ID não encontrado na resposta');
                    showAlert('warning', 'Empresa ID não encontrado. Não foi possível carregar as contas bancárias.');
                }
                
                console.log('✅ Pagamentos carregados para gerenciamento!');
            } else {
                alert('Conta não encontrada!');
            }
        })
        .catch(error => {
            console.error('❌ Erro completo:', error);
            alert('Erro ao buscar conta: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
            loading.classList.add('d-none');
        });
    }

    // ==========================================
    // BUSCAR RECEBIMENTOS DA CONTA A RECEBER
    // ==========================================

    function buscarRecebimentosManage() {
        const id = document.getElementById('conta_receber_id_manage').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

        const btn = document.getElementById('btnBuscarRecebimentosManage');
        const loading = document.getElementById('loadingRecebimentos');
        const originalHtml = btn.innerHTML;
        
        btn.innerHTML = '<span class="fas fa-spinner fa-spin"></span>';
        btn.disabled = true;
        loading.classList.remove('d-none');

        const url = `${baseUrlContaReceber}/${id}/recebimentos`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('📦 Dados recebimentos recebidos:', data);
            if (data.success) {
                const conta = data.conta;
                const recebimentos = data.recebimentos;
                
                // Exibir informações da conta
                document.getElementById('contaReceberManageDetalhes').innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>ID:</strong> ${conta.id}</p>
                            <p><strong>Descrição:</strong> ${conta.descricao || 'N/A'}</p>
                            <p><strong>Valor:</strong> R$ ${conta.valor}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Cliente:</strong> ${conta.cliente}</p>
                            <p><strong>Empresa:</strong> ${conta.empresa}</p>
                            <p><strong>Conta Bancária Atual:</strong> 
                                <span class="badge bg-info">${conta.conta_bancaria_atual}</span>
                            </p>
                        </div>
                    </div>
                `;
                
                // Exibir lista de recebimentos
                const containerRecebimentos = document.getElementById('recebimentosManageContainer'); // ← NOME ÚNICO
                if (recebimentos.length === 0) {
                    containerRecebimentos.innerHTML = '<div class="no-payments">Nenhum recebimento encontrado para esta conta.</div>';
                } else {
                    containerRecebimentos.innerHTML = recebimentos.map(recebimento => `
                        <div class="payment-item">
                            <div class="d-flex align-items-center">
                                <input type="checkbox" 
                                    class="form-check-input checkbox-custom recebimento-manage-checkbox" 
                                    value="${recebimento.id}"
                                    id="rec_manage_${recebimento.id}">
                                <div class="flex-grow-1 ms-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="value-display ${recebimento.is_estorno ? 'value-negative' : 'value-positive'}">
                                                ${recebimento.is_estorno ? '-' : ''}R$ ${recebimento.valor}
                                            </span>
                                            ${recebimento.tem_conta_bancaria ? 
                                                `<span class="bank-badge ms-2" title="${recebimento.conta_bancaria_completa}">${recebimento.conta_bancaria_atual}</span>` : 
                                                '<span class="no-bank-badge ms-2">SEM CONTA</span>'
                                            }
                                        </div>
                                        <small class="text-muted">ID: ${recebimento.id}</small>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-1">
                                        <small class="text-muted">
                                            Data: ${recebimento.data_pagamento} | Tipo: ${recebimento.tipo_descricao}
                                        </small>
                                        ${recebimento.observacao ? `<small class="text-muted">Obs: ${recebimento.observacao}</small>` : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `).join('');
                }
                
                // Mostrar seção
                document.getElementById('contaReceberManageInfo').classList.remove('d-none');
                
                // Reset
                document.getElementById('confirmRecebimentosManage').checked = false;
                $('#selectContaBancariaRec').val('').trigger('change');
                document.getElementById('btnAtualizarRecebimentos').disabled = true;
                updateSelectionCount('recebimentosManageContainer', 'totalSelecionadosRec');
                
                // Carregar contas bancárias da empresa
                if (data.empresa_id) {
                    loadContasBancarias(data.empresa_id, 'selectContaBancariaRec', 'seletorContaBancariaRec');
                } else {
                    console.warn('Empresa ID não encontrado na resposta');
                    showAlert('warning', 'Empresa ID não encontrado. Não foi possível carregar as contas bancárias.');
                }
                
                console.log('✅ Recebimentos carregados para gerenciamento!');
            } else {
                alert('Conta não encontrada!');
            }
        })
        .catch(error => {
            console.error('❌ Erro completo:', error);
            alert('Erro ao buscar conta: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
            loading.classList.add('d-none');
        });
    }

    // ==========================================
    // EVENT LISTENERS
    // ==========================================
    
    // Botões de busca
    document.getElementById('btnBuscarPagamentosManage').addEventListener('click', buscarPagamentosManage);
    document.getElementById('btnBuscarRecebimentosManage').addEventListener('click', buscarRecebimentosManage);

    // Enter para buscar
    document.getElementById('conta_pagar_id_manage').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            buscarPagamentosManage();
        }
    });

    document.getElementById('conta_receber_id_manage').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            buscarRecebimentosManage();
        }
    });

    // Seleção de itens
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('pagamento-manage-checkbox') || 
            e.target.classList.contains('recebimento-manage-checkbox')) {
            
            // Visual feedback
            const item = e.target.closest('.payment-item');
            if (e.target.checked) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
            
            validateForm();
        }
    });

    // Confirmação de alteração
    document.getElementById('confirmPagamentosManage').addEventListener('change', validateForm);
    document.getElementById('confirmRecebimentosManage').addEventListener('change', validateForm);

    // ==========================================
    // BOTÕES SELEÇÃO EM MASSA
    // ==========================================
    
    // Pagamentos
    document.getElementById('btnSelecionarTodosPag').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.pagamento-manage-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = true;
            cb.closest('.payment-item').classList.add('selected');
        });
        validateForm();
    });

    document.getElementById('btnDesmarcarTodosPag').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.pagamento-manage-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = false;
            cb.closest('.payment-item').classList.remove('selected');
        });
        validateForm();
    });

    // Recebimentos
    document.getElementById('btnSelecionarTodosRec').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.recebimento-manage-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = true;
            cb.closest('.payment-item').classList.add('selected');
        });
        validateForm();
    });

    document.getElementById('btnDesmarcarTodosRec').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.recebimento-manage-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = false;
            cb.closest('.payment-item').classList.remove('selected');
        });
        validateForm();
    });

    // ==========================================
    // SUBMIT DOS FORMULÁRIOS
    // ==========================================
    
    // Atualizar pagamentos
    document.getElementById('formGerenciarPagamentos').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const contaId = document.getElementById('conta_pagar_id_manage').value;
        const checkboxes = document.querySelectorAll('.pagamento-manage-checkbox:checked');
        const pagamentosIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
        const novaContaBancariaId = $('#selectContaBancariaPag').val();
        
        if (!confirm(`⚠️ ATENÇÃO: Esta ação irá alterar a conta bancária de ${pagamentosIds.length} pagamento(s). Confirma?`)) {
            return;
        }

        const btn = document.getElementById('btnAtualizarPagamentos');
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<span class="fas fa-spinner fa-spin me-2"></span>Atualizando...';
        btn.disabled = true;

        fetch(urlUpdatePagamentos, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                conta_pagar_id: parseInt(contaId),
                pagamentos_ids: pagamentosIds,
                nova_conta_bancaria_id: parseInt(novaContaBancariaId)
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => buscarPagamentosManage(), 1000);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            console.error('❌ Erro na atualização:', error);
            showAlert('danger', 'Erro ao atualizar conta bancária: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });

    // Atualizar recebimentos
    document.getElementById('formGerenciarRecebimentos').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const contaId = document.getElementById('conta_receber_id_manage').value;
        const checkboxes = document.querySelectorAll('.recebimento-manage-checkbox:checked');
        const recebimentosIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
        const novaContaBancariaId = $('#selectContaBancariaRec').val();
        
        if (!confirm(`⚠️ ATENÇÃO: Esta ação irá alterar a conta bancária da Conta a Receber (afetando TODOS os recebimentos da conta). Confirma?`)) {
            return;
        }

        const btn = document.getElementById('btnAtualizarRecebimentos');
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<span class="fas fa-spinner fa-spin me-2"></span>Atualizando...';
        btn.disabled = true;

        fetch(urlUpdateRecebimentos, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                conta_receber_id: parseInt(contaId),
                recebimentos_ids: recebimentosIds,
                nova_conta_bancaria_id: parseInt(novaContaBancariaId)
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => buscarRecebimentosManage(), 1000);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            console.error('❌ Erro na atualização:', error);
            showAlert('danger', 'Erro ao atualizar conta bancária: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });

    // ==========================================
    // INICIALIZAÇÃO
    // ==========================================
    
    // Inicializar Select2
    initializeSelect2();
    
    // Inicializar tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    console.log('🎯 Sistema de gerenciamento de contas bancárias com Select2 configurado!');
});
</script>
@endsection