@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;
        }
        .info-card {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
    </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">🔒 ÁREA ADMINISTRATIVA RESTRITA</h4>
                        <p class="mb-0">Esta área permite a exclusão em massa de contas e seus relacionamentos. Use com extrema cautela!</p>
                    </div>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <span class="fas fa-check-circle me-2"></span>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="fas fa-exclamation-circle me-2"></span>
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="row">
            <!-- Contas a Pagar -->
            <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-file-invoice-dollar me-2"></span>
                            Excluir Conta a Pagar + Pagamentos
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="info-card p-3 mb-3">
                            <p class="mb-2"><strong>O que será excluído:</strong></p>
                            <ul class="mb-0">
                                <li>A conta a pagar selecionada</li>
                                <li>Todos os pagamentos vinculados</li>
                                <li>Utiliza soft delete (recuperável)</li>
                            </ul>
                        </div>

                        <form id="formContaPagar" action="{{ route('admin.delete-conta-pagar') }}" method="POST">
                            @csrf
                            <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" 
                                           name="conta_id" 
                                           placeholder="Digite o ID da conta..."
                                           required>
                                    <button type="button" 
                                            class="btn btn-outline-primary" 
                                            id="btnBuscarContaPagar">
                                        <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>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmContaPagar">
                                    <label class="form-check-label text-danger" for="confirmContaPagar">
                                        <strong>Confirmo que desejo excluir esta conta e TODOS os seus pagamentos</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-danger w-100" 
                                    id="btnContaPagar" 
                                    disabled>
                                <span class="fas fa-trash me-2"></span>
                                Excluir Conta a Pagar
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Contas a Receber -->
            <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-file-invoice me-2"></span>
                            Excluir Conta a Receber + Recebimentos
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="info-card p-3 mb-3">
                            <p class="mb-2"><strong>O que será excluído:</strong></p>
                            <ul class="mb-0">
                                <li>A conta a receber selecionada</li>
                                <li>Todos os recebimentos vinculados</li>
                                <li>Utiliza soft delete (recuperável)</li>
                            </ul>
                        </div>

                        <form id="formContaReceber" action="{{ route('admin.delete-conta-receber') }}" method="POST">
                            @csrf
                            <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" 
                                           name="conta_id" 
                                           placeholder="Digite o ID da conta..."
                                           required>
                                    <button type="button" 
                                            class="btn btn-outline-primary" 
                                            id="btnBuscarContaReceber">
                                        <span class="fas fa-search"></span>
                                    </button>
                                </div>
                            </div>

                            <!-- Área de informações da conta -->
                            <div id="contaReceberInfo" class="d-none">
                                <div class="danger-zone p-3 mb-3">
                                    <h6 class="text-warning mb-2">📋 Informações da Conta:</h6>
                                    <div id="contaReceberDetalhes"></div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="confirmContaReceber">
                                    <label class="form-check-label text-warning" for="confirmContaReceber">
                                        <strong>Confirmo que desejo excluir esta conta e TODOS os seus recebimentos</strong>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" 
                                    class="btn btn-warning w-100" 
                                    id="btnContaReceber" 
                                    disabled>
                                <span class="fas fa-trash me-2"></span>
                                Excluir 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
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">🔍 Como usar:</h6>
                                <ul>
                                    <li>Digite o ID da conta que deseja excluir</li>
                                    <li>Clique na lupa para buscar informações</li>
                                    <li>Confirme os dados exibidos</li>
                                    <li>Marque a caixa de confirmação</li>
                                    <li>Clique no botão de exclusão</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <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>Exibe informações antes da exclusão</li>
                                    <li>Requer confirmação explícita</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// SCRIPT DIRETO NO HTML - SOLUÇÃO DEFINITIVA
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Script de administração carregado com sucesso!');
    
    // URLs base
    const baseUrlContaPagar = '{{ url("admin/system/conta-pagar") }}';
    const baseUrlContaReceber = '{{ url("admin/system/conta-receber") }}';
    
    console.log('🔗 URL Conta Pagar:', baseUrlContaPagar);
    console.log('🔗 URL Conta Receber:', baseUrlContaReceber);

    // FUNÇÃO BUSCAR CONTA A PAGAR
    function buscarContaPagar() {
        const id = document.getElementById('conta_pagar_id').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

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

        const url = `${baseUrlContaPagar}/${id}/info`;
        console.log('🚀 Fazendo requisição para:', 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;
                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>
                            <p><strong>Vencimento:</strong> ${conta.data_vencimento || 'N/A'}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Empresa:</strong> ${conta.empresa}</p>
                            <p><strong>Fornecedor:</strong> ${conta.fornecedor}</p>
                            <p><strong>Total Pago:</strong> R$ ${conta.total_pago}</p>
                            <p><strong>Pagamentos:</strong> ${conta.total_pagamentos}</p>
                        </div>
                    </div>
                `;
                document.getElementById('contaPagarInfo').classList.remove('d-none');
                document.getElementById('confirmContaPagar').checked = false;
                document.getElementById('btnContaPagar').disabled = true;
                console.log('✅ Dados da conta 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;
        });
    }

    // FUNÇÃO BUSCAR CONTA A RECEBER
    function buscarContaReceber() {
        const id = document.getElementById('conta_receber_id').value;
        if (!id) {
            alert('Digite um ID válido');
            return;
        }

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

        const url = `${baseUrlContaReceber}/${id}/info`;
        console.log('🚀 Fazendo requisição para:', 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;
                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>
                            <p><strong>Vencimento:</strong> ${conta.data_vencimento || 'N/A'}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Cliente:</strong> ${conta.cliente}</p>
                            <p><strong>Empresa:</strong> ${conta.empresa}</p>
                            <p><strong>Total Recebido:</strong> R$ ${conta.total_recebido}</p>
                            <p><strong>Recebimentos:</strong> ${conta.total_recebimentos}</p>
                        </div>
                    </div>
                `;
                document.getElementById('contaReceberInfo').classList.remove('d-none');
                document.getElementById('confirmContaReceber').checked = false;
                document.getElementById('btnContaReceber').disabled = true;
                console.log('✅ Dados da conta 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;
        });
    }

    // EVENT LISTENERS
    document.getElementById('btnBuscarContaPagar').addEventListener('click', buscarContaPagar);
    document.getElementById('btnBuscarContaReceber').addEventListener('click', buscarContaReceber);

    // Controle dos checkboxes
    document.getElementById('confirmContaPagar').addEventListener('change', function() {
        document.getElementById('btnContaPagar').disabled = !this.checked;
    });

    document.getElementById('confirmContaReceber').addEventListener('change', function() {
        document.getElementById('btnContaReceber').disabled = !this.checked;
    });

    // Confirmações finais
    document.getElementById('formContaPagar').addEventListener('submit', function(e) {
        if (!confirm('⚠️ ATENÇÃO: Esta ação irá excluir a conta e TODOS os seus pagamentos. Confirma?')) {
            e.preventDefault();
        }
    });

    document.getElementById('formContaReceber').addEventListener('submit', function(e) {
        if (!confirm('⚠️ ATENÇÃO: Esta ação irá excluir a conta e TODOS os seus recebimentos. Confirma?')) {
            e.preventDefault();
        }
    });

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

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

    console.log('🎯 Todos os event listeners configurados!');
});
</script>
@endsection