@extends('layouts.app')

@push('head')
    <style>
        .admin-warning {
            background: linear-gradient(45deg, #dc3545, #fd7e14);
            color: white;
            border: none;
        }
        .danger-zone {
            border: 2px solid #dc3545;
            border-radius: 8px;
            background-color: #fff5f5;
        }
        .warning-zone {
            border: 2px solid #ffc107;
            border-radius: 8px;
            background-color: #fffbf0;
        }
        .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;
        }
        .estorno-badge {
            background-color: #dc3545;
            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;
        }
        .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); }
        }
        .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;
        }
    </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-warning admin-warning d-flex align-items-center" role="alert">
                    <span class="fas fa-exclamation-triangle me-3 fs-1"></span>
                    <div>
                        <h4 class="alert-heading mb-2">🔒 EXCLUSÃO SELETIVA DE PAGAMENTOS/RECEBIMENTOS</h4>
                        <p class="mb-0">Esta área permite a exclusão seletiva de pagamentos e recebimentos específicos. Use com extrema cautela!</p>
                    </div>
                </div>
            </div>
        </div>

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

        <div class="row">
            <!-- Exclusão Seletiva de Pagamentos -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">
                            <span class="fas fa-money-bill-wave me-2"></span>
                            Excluir Pagamentos Seletivamente
                        </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>Confirme a operação de exclusão</li>
                                <li>Utiliza soft delete (recuperável)</li>
                            </ul>
                        </div>

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

                            <!-- Área de informações da conta -->
                            <div id="contaPagarInfo" class="d-none">
                                <div class="danger-zone p-3 mb-3">
                                    <h6 class="text-danger mb-2">📋 Informações da Conta:</h6>
                                    <div id="contaPagarDetalhes"></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="totalSelecionados">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 que deseja excluir:
                                                </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="btnSelecionarTodos"
                                                            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="btnDesmarcarTodos"
                                                            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="pagamentosContainer">
                                        <!-- Pagamentos serão carregados aqui via AJAX -->
                                    </div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmPagamentos">
                                    <label class="form-check-label text-danger" for="confirmPagamentos">
                                        <strong>Confirmo que desejo excluir os pagamentos selecionados</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-danger w-100" 
                                    id="btnExcluirPagamentos" 
                                    disabled>
                                <span class="fas fa-trash me-2"></span>
                                Excluir Pagamentos Selecionados
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Exclusão Seletiva de Recebimentos -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="card-title mb-0">
                            <span class="fas fa-hand-holding-usd me-2"></span>
                            Excluir Recebimentos Seletivamente
                        </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 específicos</li>
                                <li>Confirme a operação de exclusão</li>
                                <li>Utiliza soft delete (recuperável)</li>
                            </ul>
                        </div>

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

                            <!-- Área de informações da conta -->
                            <div id="contaReceberInfo" class="d-none">
                                <div class="warning-zone p-3 mb-3">
                                    <h6 class="text-warning mb-2">📋 Informações da Conta:</h6>
                                    <div id="contaReceberDetalhes"></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-warning text-dark 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 os recebimentos que deseja excluir:
                                                </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="recebimentosContainer">
                                        <!-- Recebimentos serão carregados aqui via AJAX -->
                                    </div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmRecebimentos">
                                    <label class="form-check-label text-warning" for="confirmRecebimentos">
                                        <strong>Confirmo que desejo excluir os recebimentos selecionados</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-warning w-100" 
                                    id="btnExcluirRecebimentos" 
                                    disabled>
                                <span class="fas fa-trash me-2"></span>
                                Excluir Recebimentos Selecionados
                            </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 Exclusão Seletiva
                        </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>Selecione pagamentos/recebimentos específicos</li>
                                    <li>Marque a caixa de confirmação</li>
                                    <li>Execute a exclusão seletiva</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h6 class="text-success">✅ Segurança:</h6>
                                <ul>
                                    <li>Todas as operações são logadas</li>
                                    <li>Utiliza soft delete (recuperável)</li>
                                    <li>Validação de relacionamentos</li>
                                    <li>Confirmação obrigatória</li>
                                    <li>Controle granular de seleção</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <h6 class="text-warning">⚠️ Atenção:</h6>
                                <ul>
                                    <li>Valores negativos são estornos</li>
                                    <li>Verifique antes de confirmar</li>
                                    <li>Operação afeta saldos</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 exclusão seletiva carregado com sucesso!');
    
    // URLs base
    const baseUrlContaPagar = '{{ url("admin/system/conta-pagar") }}';
    const baseUrlContaReceber = '{{ url("admin/system/conta-receber") }}';
    const urlDeletePagamentos = '{{ route("admin.delete-pagamentos-seletivos") }}';
    const urlDeleteRecebimentos = '{{ route("admin.delete-recebimentos-seletivos") }}';
    
    console.log('🔗 URLs configuradas:', {
        baseUrlContaPagar,
        baseUrlContaReceber,
        urlDeletePagamentos,
        urlDeleteRecebimentos
    });

    // ==========================================
    // 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;
        
        // Auto-dismiss after 5 seconds
        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;
    }

    // ==========================================
    // BUSCAR PAGAMENTOS DA CONTA A PAGAR
    // ==========================================
    
    function buscarPagamentos() {
        const id = document.getElementById('conta_pagar_id').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

        const btn = document.getElementById('btnBuscarPagamentos');
        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`;
        console.log('🚀 Buscando pagamentos:', url);

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            console.log('📡 Status da resposta:', response.status);
            if (!response.ok) {
                throw new Error(`Erro HTTP: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('📦 Dados recebidos:', data);
            if (data.success) {
                const conta = data.conta;
                const pagamentos = data.pagamentos;
                
                // Exibir informações da conta
                document.getElementById('contaPagarDetalhes').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 container = document.getElementById('pagamentosContainer');
                if (pagamentos.length === 0) {
                    container.innerHTML = '<div class="no-payments">Nenhum pagamento encontrado para esta conta.</div>';
                } else {
                    container.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-checkbox" 
                                       value="${pagamento.id}"
                                       id="pag_${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.is_estorno ? '<span class="estorno-badge ms-2">ESTORNO</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} | Conta: ${pagamento.conta_bancaria}
                                        </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('contaPagarInfo').classList.remove('d-none');
                
                // Reset checkboxes e botões
                document.getElementById('confirmPagamentos').checked = false;
                document.getElementById('btnExcluirPagamentos').disabled = true;
                updateSelectionCount('pagamentosContainer', 'totalSelecionados');
                
                console.log('✅ Pagamentos carregados com sucesso!');
            } 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 buscarRecebimentos() {
        const id = document.getElementById('conta_receber_id').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

        const btn = document.getElementById('btnBuscarRecebimentos');
        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`;
        console.log('🚀 Buscando recebimentos:', url);

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            console.log('📡 Status da resposta:', response.status);
            if (!response.ok) {
                throw new Error(`Erro HTTP: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('📦 Dados recebidos:', data);
            if (data.success) {
                const conta = data.conta;
                const recebimentos = data.recebimentos;
                
                // Exibir informações da conta
                document.getElementById('contaReceberDetalhes').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>Vencimento:</strong> ${conta.data_vencimento || 'N/A'}</p>
                        </div>
                    </div>
                `;
                
                // Exibir lista de recebimentos
                const container = document.getElementById('recebimentosContainer');
                if (recebimentos.length === 0) {
                    container.innerHTML = '<div class="no-payments">Nenhum recebimento encontrado para esta conta.</div>';
                } else {
                    container.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-checkbox" 
                                       value="${recebimento.id}"
                                       id="rec_${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.is_estorno ? '<span class="estorno-badge ms-2">ESTORNO</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('contaReceberInfo').classList.remove('d-none');
                
                // Reset checkboxes e botões
                document.getElementById('confirmRecebimentos').checked = false;
                document.getElementById('btnExcluirRecebimentos').disabled = true;
                updateSelectionCount('recebimentosContainer', 'totalSelecionadosRec');
                
                console.log('✅ Recebimentos carregados com sucesso!');
            } 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('btnBuscarPagamentos').addEventListener('click', buscarPagamentos);
    document.getElementById('btnBuscarRecebimentos').addEventListener('click', buscarRecebimentos);

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

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

    // Seleção de pagamentos
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('pagamento-checkbox')) {
            const selected = updateSelectionCount('pagamentosContainer', 'totalSelecionados');
            const confirmChecked = document.getElementById('confirmPagamentos').checked;
            document.getElementById('btnExcluirPagamentos').disabled = !(selected > 0 && confirmChecked);
            
            // Visual feedback
            const item = e.target.closest('.payment-item');
            if (e.target.checked) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
        }
        
        if (e.target.classList.contains('recebimento-checkbox')) {
            const selected = updateSelectionCount('recebimentosContainer', 'totalSelecionadosRec');
            const confirmChecked = document.getElementById('confirmRecebimentos').checked;
            document.getElementById('btnExcluirRecebimentos').disabled = !(selected > 0 && confirmChecked);
            
            // Visual feedback
            const item = e.target.closest('.payment-item');
            if (e.target.checked) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
        }
    });

    // Botões de seleção em massa - Pagamentos
    document.getElementById('btnSelecionarTodos').addEventListener('click', function() {
        const btn = this;
        btn.classList.add('btn-feedback');
        
        const checkboxes = document.querySelectorAll('.pagamento-checkbox');
        const total = checkboxes.length;
        
        if (total === 0) {
            showAlert('warning', 'Nenhum pagamento disponível para seleção');
            return;
        }
        
        // Animação de seleção gradual
        checkboxes.forEach((cb, index) => {
            setTimeout(() => {
                cb.checked = true;
                cb.closest('.payment-item').classList.add('selected');
                
                // Atualizar contador em tempo real
                const selected = document.querySelectorAll('.pagamento-checkbox:checked').length;
                document.getElementById('totalSelecionados').textContent = selected;
                
                // Última iteração
                if (index === total - 1) {
                    const confirmChecked = document.getElementById('confirmPagamentos').checked;
                    document.getElementById('btnExcluirPagamentos').disabled = !confirmChecked;
                    
                    // Feedback de sucesso
                    btn.innerHTML = '<i class="fas fa-check me-1"></i><span class="d-none d-lg-inline">Selecionado!</span>';
                    setTimeout(() => {
                        btn.innerHTML = '<i class="fas fa-check-double me-1"></i><span class="d-none d-lg-inline">Todos</span>';
                        btn.classList.remove('btn-feedback');
                    }, 1000);
                }
            }, index * 50); // Delay progressivo para efeito visual
        });
    });

    document.getElementById('btnDesmarcarTodos').addEventListener('click', function() {
        const btn = this;
        btn.classList.add('btn-feedback');
        
        const checkboxes = document.querySelectorAll('.pagamento-checkbox');
        const selected = document.querySelectorAll('.pagamento-checkbox:checked').length;
        
        if (selected === 0) {
            showAlert('info', 'Nenhum pagamento está selecionado');
            return;
        }
        
        // Animação de deseleção
        checkboxes.forEach((cb, index) => {
            setTimeout(() => {
                cb.checked = false;
                cb.closest('.payment-item').classList.remove('selected');
                
                // Atualizar contador
                const stillSelected = document.querySelectorAll('.pagamento-checkbox:checked').length;
                document.getElementById('totalSelecionados').textContent = stillSelected;
                
                // Última iteração
                if (index === checkboxes.length - 1) {
                    document.getElementById('btnExcluirPagamentos').disabled = true;
                    
                    // Feedback visual
                    btn.innerHTML = '<i class="fas fa-check me-1"></i><span class="d-none d-lg-inline">Limpo!</span>';
                    setTimeout(() => {
                        btn.innerHTML = '<i class="fas fa-times-circle me-1"></i><span class="d-none d-lg-inline">Limpar</span>';
                        btn.classList.remove('btn-feedback');
                    }, 1000);
                }
            }, index * 30);
        });
    });

    // Botões de seleção em massa - Recebimentos
    document.getElementById('btnSelecionarTodosRec').addEventListener('click', function() {
        const btn = this;
        btn.classList.add('btn-feedback');
        
        const checkboxes = document.querySelectorAll('.recebimento-checkbox');
        const total = checkboxes.length;
        
        if (total === 0) {
            showAlert('warning', 'Nenhum recebimento disponível para seleção');
            return;
        }
        
        // Animação de seleção gradual
        checkboxes.forEach((cb, index) => {
            setTimeout(() => {
                cb.checked = true;
                cb.closest('.payment-item').classList.add('selected');
                
                // Atualizar contador em tempo real
                const selected = document.querySelectorAll('.recebimento-checkbox:checked').length;
                document.getElementById('totalSelecionadosRec').textContent = selected;
                
                // Última iteração
                if (index === total - 1) {
                    const confirmChecked = document.getElementById('confirmRecebimentos').checked;
                    document.getElementById('btnExcluirRecebimentos').disabled = !confirmChecked;
                    
                    // Feedback de sucesso
                    btn.innerHTML = '<i class="fas fa-check me-1"></i><span class="d-none d-lg-inline">Selecionado!</span>';
                    setTimeout(() => {
                        btn.innerHTML = '<i class="fas fa-check-double me-1"></i><span class="d-none d-lg-inline">Todos</span>';
                        btn.classList.remove('btn-feedback');
                    }, 1000);
                }
            }, index * 50);
        });
    });

    document.getElementById('btnDesmarcarTodosRec').addEventListener('click', function() {
        const btn = this;
        btn.classList.add('btn-feedback');
        
        const checkboxes = document.querySelectorAll('.recebimento-checkbox');
        const selected = document.querySelectorAll('.recebimento-checkbox:checked').length;
        
        if (selected === 0) {
            showAlert('info', 'Nenhum recebimento está selecionado');
            return;
        }
        
        // Animação de deseleção
        checkboxes.forEach((cb, index) => {
            setTimeout(() => {
                cb.checked = false;
                cb.closest('.payment-item').classList.remove('selected');
                
                // Atualizar contador
                const stillSelected = document.querySelectorAll('.recebimento-checkbox:checked').length;
                document.getElementById('totalSelecionadosRec').textContent = stillSelected;
                
                // Última iteração  
                if (index === checkboxes.length - 1) {
                    document.getElementById('btnExcluirRecebimentos').disabled = true;
                    
                    // Feedback visual
                    btn.innerHTML = '<i class="fas fa-check me-1"></i><span class="d-none d-lg-inline">Limpo!</span>';
                    setTimeout(() => {
                        btn.innerHTML = '<i class="fas fa-times-circle me-1"></i><span class="d-none d-lg-inline">Limpar</span>';
                        btn.classList.remove('btn-feedback');
                    }, 1000);
                }
            }, index * 30);
        });
    });

    // Confirmação de exclusão
    document.getElementById('confirmPagamentos').addEventListener('change', function() {
        const selected = updateSelectionCount('pagamentosContainer', 'totalSelecionados');
        document.getElementById('btnExcluirPagamentos').disabled = !(selected > 0 && this.checked);
    });

    document.getElementById('confirmRecebimentos').addEventListener('change', function() {
        const selected = updateSelectionCount('recebimentosContainer', 'totalSelecionadosRec');
        document.getElementById('btnExcluirRecebimentos').disabled = !(selected > 0 && this.checked);
    });

    // ==========================================
    // EXCLUSÃO DE PAGAMENTOS
    // ==========================================
    
    document.getElementById('formPagamentos').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const contaId = document.getElementById('conta_pagar_id').value;
        const checkboxes = document.querySelectorAll('.pagamento-checkbox:checked');
        const pagamentosIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
        
        if (pagamentosIds.length === 0) {
            alert('Selecione pelo menos um pagamento');
            return;
        }
        
        if (!confirm(`⚠️ ATENÇÃO: Esta ação irá excluir ${pagamentosIds.length} pagamento(s) selecionado(s). Confirma?`)) {
            return;
        }

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

        fetch(urlDeletePagamentos, {
            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_id: parseInt(contaId),
                pagamentos_ids: pagamentosIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                // Recarregar lista
                setTimeout(() => {
                    buscarPagamentos();
                }, 1000);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            console.error('❌ Erro na exclusão:', error);
            showAlert('danger', 'Erro ao excluir pagamentos: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });

    // ==========================================
    // EXCLUSÃO DE RECEBIMENTOS
    // ==========================================
    
    document.getElementById('formRecebimentos').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const contaId = document.getElementById('conta_receber_id').value;
        const checkboxes = document.querySelectorAll('.recebimento-checkbox:checked');
        const recebimentosIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
        
        if (recebimentosIds.length === 0) {
            alert('Selecione pelo menos um recebimento');
            return;
        }
        
        if (!confirm(`⚠️ ATENÇÃO: Esta ação irá excluir ${recebimentosIds.length} recebimento(s) selecionado(s). Confirma?`)) {
            return;
        }

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

        fetch(urlDeleteRecebimentos, {
            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_id: parseInt(contaId),
                recebimentos_ids: recebimentosIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                // Recarregar lista
                setTimeout(() => {
                    buscarRecebimentos();
                }, 1000);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            console.error('❌ Erro na exclusão:', error);
            showAlert('danger', 'Erro ao excluir recebimentos: ' + error.message);
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });

    console.log('🎯 Todos os event listeners configurados para exclusão seletiva!');
    
    // Inicializar tooltips do Bootstrap
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    console.log('💡 Tooltips inicializados:', tooltipList.length);
});
</script>
@endsection