@extends('layouts.app', ['title' => 'Revisar Conciliação'])
@section('css')
<style>
/* Força loader a sumir nesta página */
.unified-loader { display: none !important; }
/* Garante que os modais fiquem acima de qualquer backdrop residual */
#modalAcao { z-index: 1090 !important; }
.modal-backdrop:last-of-type { z-index: 1089 !important; }
.item-card { border-radius: 12px; border: 1px solid rgba(0,0,0,.08); transition: all .2s ease; }
.item-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }
.item-card.conciliado { border-left: 4px solid #10b981; opacity: .75; }
.item-card.ignorado   { border-left: 4px solid #94a3b8; opacity: .55; }
.item-card.pendente   { border-left: 4px solid #f59e0b; }
.badge-credito { background: rgba(16,185,129,.15); color: #059669; border: 1px solid rgba(16,185,129,.3); }
.badge-debito  { background: rgba(239,68,68,.12); color: #dc2626; border: 1px solid rgba(239,68,68,.25); }
[data-bs-theme='dark'] .item-card { border-color: rgba(255,255,255,.1); background: #1e293b; }
[data-bs-theme='dark'] .badge-credito { color: #34d399; }
[data-bs-theme='dark'] .badge-debito  { color: #f87171; }
.filtro-btn.active { background: #6366f1 !important; color: #fff !important; border-color: #6366f1 !important; }
</style>
@endsection
@section('content')
<div class="mt-4 container-fluid">

    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-start mb-4 gap-3">
        <div>
            <a href="{{ route('conciliacao-bancaria.index', ['empresa_id' => request()->empresa_id]) }}" class="btn btn-sm btn-outline-secondary mb-2">
                <i class="ri-arrow-left-line me-1"></i> Voltar
            </a>
            <h4 class="mb-1 fw-bold"><i class="ri-bank-line me-2 text-primary"></i>{{ $conciliacao->nome_arquivo }}</h4>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <span class="badge {{ $conciliacao->status === 'concluida' ? 'bg-success' : 'bg-warning text-dark' }}">
                    {{ $conciliacao->status === 'concluida' ? 'Concluída' : 'Pendente' }}
                </span>
                @if($conciliacao->banco)
                <span class="badge bg-secondary">Banco: {{ $conciliacao->banco }}</span>
                @endif
                @if($conciliacao->conta)
                <span class="badge bg-secondary">Conta: {{ $conciliacao->conta }}</span>
                @endif
                @if($conciliacao->data_inicio)
                <span class="text-muted small">
                    {{ \Carbon\Carbon::parse($conciliacao->data_inicio)->format('d/m/Y') }}
                    até
                    {{ \Carbon\Carbon::parse($conciliacao->data_fim)->format('d/m/Y') }}
                </span>
                @endif
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @if($conciliacao->itens_pendentes > 0)
            <form action="{{ route('conciliacao-bancaria.processar-todos', [$conciliacao->id, 'empresa_id' => request()->empresa_id]) }}" method="POST" class="d-flex gap-2 align-items-center">
                @csrf
                <select name="tipo_automata" class="form-select form-select-sm" style="width: 200px;">
                    <option value="exata">Data Exata (do dia)</option>
                    <option value="intervalo" selected>Com Intervalo (±3 dias)</option>
                </select>
                <button type="submit" class="btn btn-primary" onclick="return confirm('Conciliar automaticamente todos os itens com correspondência de valor?')">
                    <i class="ri-magic-line me-1"></i> Conciliar Automaticamente
                </button>
            </form>
            @endif
        </div>
    </div>

    @if(session('flash_success'))
    <div class="alert alert-success alert-dismissible fade show">{{ session('flash_success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif

    @if(!$conciliacao->conta_empresa_id)
    <div class="alert alert-warning d-flex align-items-center gap-3 mb-3">
        <i class="ri-alert-line fs-4"></i>
        <div class="flex-grow-1">
            <strong>Nenhuma conta bancária vinculada.</strong> As movimentações não serão registradas sem uma conta vinculada.
        </div>
        <form action="{{ route('conciliacao-bancaria.vincular-conta', [$conciliacao->id]) }}" method="POST" class="d-flex gap-2 align-items-center">
            @csrf
            <input type="hidden" name="empresa_id" value="{{ request()->empresa_id }}">
            <select name="conta_empresa_id" class="form-select form-select-sm" style="min-width:200px;" required>
                <option value="">Selecione a conta</option>
                @foreach($contas as $c)
                <option value="{{ $c->id }}">{{ $c->nome }} — {{ $c->banco }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-warning btn-sm text-nowrap">
                <i class="ri-link me-1"></i> Vincular
            </button>
        </form>
    </div>
    @endif

    <!-- Resumo -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3" style="border-radius:12px;">
                <h3 class="fw-bold mb-0">{{ $conciliacao->total_itens }}</h3>
                <small class="text-muted">Total</small>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3" style="border-radius:12px; border-left:4px solid #10b981 !important;">
                <h3 class="fw-bold mb-0 text-success">{{ $conciliacao->itens_conciliados }}</h3>
                <small class="text-muted">Conciliados</small>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3" style="border-radius:12px; border-left:4px solid #f59e0b !important;">
                <h3 class="fw-bold mb-0 text-warning">{{ $conciliacao->itens_pendentes }}</h3>
                <small class="text-muted">Pendentes</small>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center py-3" style="border-radius:12px;">
                <h3 class="fw-bold mb-0 text-success">R$ {{ number_format($conciliacao->saldo_final, 2, ',', '.') }}</h3>
                <small class="text-muted">Saldo Final OFX</small>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="d-flex gap-2 mb-3 flex-wrap">
        <button class="btn btn-sm btn-outline-secondary filtro-btn active" data-filtro="todos">Todos</button>
        <button class="btn btn-sm btn-outline-warning filtro-btn" data-filtro="pendente">Pendentes</button>
        <button class="btn btn-sm btn-outline-success filtro-btn" data-filtro="conciliado">Conciliados</button>
        <button class="btn btn-sm btn-outline-secondary filtro-btn" data-filtro="ignorado">Ignorados</button>
        <button class="btn btn-sm btn-outline-success filtro-btn" data-filtro="credito">Créditos</button>
        <button class="btn btn-sm btn-outline-danger filtro-btn" data-filtro="debito">Débitos</button>
    </div>

    <!-- Lista de itens -->
    <div id="lista-itens">
        @foreach($itens as $item)
        <div class="card item-card mb-3 {{ $item->status }}" 
             data-status="{{ $item->status }}" 
             data-tipo="{{ $item->tipo }}"
             id="item-{{ $item->id }}">
            <div class="card-body py-3 px-4">
                <div class="row align-items-center g-2">
                    <!-- Data e tipo -->
                    <div class="col-md-2 col-6">
                        <div class="fw-semibold">{{ $item->data ? \Carbon\Carbon::parse($item->data)->format('d/m/Y') : '—' }}</div>
                        <span class="badge {{ $item->tipo === 'credito' ? 'badge-credito' : 'badge-debito' }} mt-1" style="font-size:11px; border-radius:6px; padding:3px 8px;">
                            <i class="ri-{{ $item->tipo === 'credito' ? 'arrow-down' : 'arrow-up' }}-line me-1"></i>
                            {{ $item->tipo === 'credito' ? 'Crédito' : 'Débito' }}
                        </span>
                    </div>

                    <!-- Descrição -->
                    <div class="col-md-4 col-6">
                        <div class="fw-semibold text-truncate" title="{{ $item->descricao }}">{{ $item->descricao }}</div>
                        @if($item->memo && $item->memo !== $item->descricao)
                        <small class="text-muted text-truncate d-block">{{ $item->memo }}</small>
                        @endif
                        @if($item->id_transacao)
                        <small class="text-muted" style="font-size:10px;">ID: {{ $item->id_transacao }}</small>
                        @endif
                    </div>

                    <!-- Valor -->
                    <div class="col-md-2 col-6">
                        <span class="fw-bold fs-5 {{ $item->tipo === 'credito' ? 'text-success' : 'text-danger' }}">
                            {{ $item->tipo === 'credito' ? '+' : '-' }}R$ {{ number_format($item->valor, 2, ',', '.') }}
                        </span>
                    </div>

                    <!-- Status / Ação realizada -->
                    <div class="col-md-2 col-6">
                        @if($item->status === 'conciliado')
                            <span class="badge bg-success"><i class="ri-check-line me-1"></i>Conciliado</span>
                            <div class="mt-1" style="font-size:11px; color:#6b7280;">
                                @if($item->acao === 'baixa_pagar') Baixou C. Pagar #{{ $item->conta_pagar_id }}
                                @elseif($item->acao === 'baixa_receber') Baixou C. Receber #{{ $item->conta_receber_id }}
                                @elseif($item->acao === 'novo_pagar') Criou C. Pagar #{{ $item->conta_pagar_id }}
                                @elseif($item->acao === 'novo_receber') Criou C. Receber #{{ $item->conta_receber_id }}
                                @endif
                            </div>
                        @elseif($item->status === 'ignorado')
                            <span class="badge bg-secondary"><i class="ri-eye-off-line me-1"></i>Ignorado</span>
                        @else
                            <span class="badge bg-warning text-dark"><i class="ri-time-line me-1"></i>Pendente</span>
                        @endif
                    </div>

                    <!-- Botões de ação -->
                    <div class="col-md-2 col-12 text-md-end">
                        @if($item->status === 'pendente')
                        <button class="btn btn-sm btn-primary" onclick="abrirAcao({{ $item->id }}, '{{ $item->tipo }}', {{ $item->valor }}, '{{ addslashes($item->descricao) }}')">
                            <i class="ri-settings-3-line me-1"></i> Ação
                        </button>
                        @else
                        <button class="btn btn-sm btn-outline-secondary" onclick="desfazer({{ $item->id }})">
                            <i class="ri-arrow-go-back-line me-1"></i> Desfazer
                        </button>
                        @endif
                    </div>
                </div>

                @if($item->status === 'conciliado')
                <div class="mt-2 pt-2 border-top" style="font-size:12px; color:#6b7280;">
                    @if($item->contaPagar)
                    <i class="ri-link me-1"></i> Conta a Pagar: <strong>{{ $item->contaPagar->descricao }}</strong>
                    @elseif($item->contaReceber)
                    <i class="ri-link me-1"></i> Conta a Receber: <strong>{{ $item->contaReceber->descricao }}</strong>
                    @endif
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- Modal de Ação -->
<div class="modal fade" id="modalAcao" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold" id="modalAcaoTitulo">Conciliar Transação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-secondary py-2 px-3 mb-3" id="info-transacao" style="border-radius:10px; font-size:13px;"></div>

                <!-- Tabs de ação -->
                <ul class="nav nav-pills mb-3" id="tabs-acao">
                    <li class="nav-item">
                        <button class="nav-link active" data-tab="baixar">Baixar Existente</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-tab="criar">Criar Novo</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-tab="ignorar">Ignorar</button>
                    </li>
                </ul>

                <!-- Tab: Baixar existente -->
                <div id="tab-baixar">
                    <p class="text-muted small mb-2">Selecione uma conta existente para dar baixa:</p>
                    <div id="lista-sugestoes" class="mb-3"></div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Ou buscar por ID:</label>
                        <input type="number" id="inp-conta-id" class="form-control" placeholder="ID da conta a pagar/receber">
                    </div>
                    <button class="btn btn-success w-100" onclick="confirmarBaixar()">
                        <i class="ri-check-line me-1"></i> Confirmar Baixa
                    </button>
                </div>

                <!-- Tab: Criar novo -->
                <div id="tab-criar" class="d-none">
                    <p class="text-muted small mb-2">Cria uma nova conta já marcada como paga/recebida:</p>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Descrição</label>
                        <input type="text" id="inp-descricao-nova" class="form-control" placeholder="Descrição da conta">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Categoria</label>
                        <div class="input-group">
                            <select id="inp-categoria" class="form-select">
                                <option value="">Sem categoria</option>
                                @foreach($categorias as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->nome }}</option>
                                @endforeach
                                @if($categorias->isEmpty())
                                <optgroup label="── Categorias padrão ──">
                                    <option value="_receita_vendas">Receita de Vendas</option>
                                    <option value="_receita_servicos">Receita de Serviços</option>
                                    <option value="_receita_outros">Outras Receitas</option>
                                    <option value="_despesa_fornecedor">Pagamento a Fornecedor</option>
                                    <option value="_despesa_salario">Salários e Pró-labore</option>
                                    <option value="_despesa_aluguel">Aluguel</option>
                                    <option value="_despesa_energia">Energia / Água / Internet</option>
                                    <option value="_despesa_impostos">Impostos e Taxas</option>
                                    <option value="_despesa_manutencao">Manutenção</option>
                                    <option value="_despesa_outros">Outras Despesas</option>
                                    <option value="_transferencia">Transferência entre Contas</option>
                                    <option value="_taxa_bancaria">Tarifas Bancárias</option>
                                </optgroup>
                                @endif
                            </select>
                            <button type="button" class="btn btn-outline-secondary" id="btn-nova-categoria">
                                <i class="ri-add-line"></i>
                            </button>
                        </div>
                    </div>
                    <button class="btn btn-primary w-100" onclick="confirmarCriar()">
                        <i class="ri-add-line me-1"></i> Criar e Conciliar
                    </button>
                </div>

                <!-- Tab: Ignorar -->
                <div id="tab-ignorar" class="d-none">
                    <div class="text-center py-3">
                        <i class="ri-eye-off-line text-muted" style="font-size:40px;"></i>
                        <p class="mt-2 text-muted">Esta transação será marcada como ignorada e não afetará o financeiro.</p>
                        <button class="btn btn-secondary px-5" onclick="confirmarIgnorar()">
                            <i class="ri-eye-off-line me-1"></i> Ignorar Transação
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
var itemAtual = null;
var tipoAtual = null;
var empresaId = '{{ request()->empresa_id ?? auth()->user()->empresa->empresa_id }}';
var sugestoesPagar   = @json($sugestoesPagar);
var sugestoesReceber = @json($sugestoesReceber);

// ── Filtros ──────────────────────────────────────────────────────────────────
document.querySelectorAll('.filtro-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filtro-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        var filtro = this.dataset.filtro;
        document.querySelectorAll('.item-card').forEach(function(card) {
            var status = card.dataset.status;
            var tipo   = card.dataset.tipo;
            var mostrar = filtro === 'todos'
                || filtro === status
                || filtro === tipo;
            card.style.display = mostrar ? '' : 'none';
        });
    });
});

// ── Abrir modal de ação ──────────────────────────────────────────────────────
function abrirAcao(id, tipo, valor, descricao) {
    itemAtual = id;
    tipoAtual = tipo;

    document.getElementById('modalAcaoTitulo').textContent =
        (tipo === 'credito' ? 'Crédito' : 'Débito') + ' — R$ ' + valor.toFixed(2).replace('.', ',');

    document.getElementById('info-transacao').innerHTML =
        '<strong>' + descricao + '</strong> &nbsp;|&nbsp; ' +
        (tipo === 'credito' ? '<span class="text-success">+R$ ' : '<span class="text-danger">-R$ ') +
        valor.toFixed(2).replace('.', ',') + '</span>';

    // Preenche sugestões
    var lista = document.getElementById('lista-sugestoes');
    lista.innerHTML = '';
    var sugestoes = tipo === 'debito' ? (sugestoesPagar[id] || []) : (sugestoesReceber[id] || []);

    if (sugestoes.length) {
        sugestoes.forEach(function(s) {
            var div = document.createElement('div');
            div.className = 'border rounded-3 p-2 mb-2 d-flex justify-content-between align-items-center';
            div.style.cursor = 'pointer';
            div.innerHTML = '<div><strong>' + (s.descricao || '—') + '</strong><br>' +
                '<small class="text-muted">Venc: ' + (s.data_vencimento || '') + ' | R$ ' + parseFloat(s.valor_integral || 0).toFixed(2).replace('.', ',') + '</small></div>' +
                '<button class="btn btn-sm btn-success" onclick="selecionarConta(' + s.id + ')">Selecionar</button>';
            lista.appendChild(div);
        });
    } else {
        lista.innerHTML = '<p class="text-muted small">Nenhuma sugestão encontrada. Use o campo abaixo.</p>';
    }

    document.getElementById('inp-descricao-nova').value = descricao;
    trocarTab('baixar');

    // Remove backdrops residuais de outros modais
    document.querySelectorAll('.modal-backdrop').forEach(function(el) { el.remove(); });
    document.body.classList.remove('modal-open');
    document.body.style.overflow = '';
    document.body.style.paddingRight = '';

    new bootstrap.Modal(document.getElementById('modalAcao')).show();
}

function selecionarConta(id) {
    document.getElementById('inp-conta-id').value = id;
}

function trocarTab(tab) {
    ['baixar','criar','ignorar'].forEach(function(t) {
        document.getElementById('tab-' + t).classList.toggle('d-none', t !== tab);
    });
    document.querySelectorAll('#tabs-acao .nav-link').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.tab === tab);
    });
}

document.querySelectorAll('#tabs-acao .nav-link').forEach(function(btn) {
    btn.addEventListener('click', function() { trocarTab(this.dataset.tab); });
});

// ── Confirmar ações ──────────────────────────────────────────────────────────
function confirmarBaixar() {
    var contaId = document.getElementById('inp-conta-id').value;
    if (!contaId) { alert('Selecione ou informe o ID da conta.'); return; }
    var acao = tipoAtual === 'debito' ? 'baixar_pagar' : 'baixar_receber';
    var campo = tipoAtual === 'debito' ? 'conta_pagar_id' : 'conta_receber_id';
    enviarAcao(itemAtual, acao, { [campo]: contaId });
}

function confirmarCriar() {
    var acao = tipoAtual === 'debito' ? 'criar_pagar' : 'criar_receber';
    enviarAcao(itemAtual, acao, {
        descricao: document.getElementById('inp-descricao-nova').value,
        categoria_conta_id: document.getElementById('inp-categoria').value,
    });
}

function confirmarIgnorar() {
    enviarAcao(itemAtual, 'ignorar', {});
}

function desfazer(id) {
    enviarAcao(id, 'desfazer', {});
}

function enviarAcao(itemId, acao, extra) {
    var dados = Object.assign({ acao: acao, empresa_id: empresaId, _token: '{{ csrf_token() }}' }, extra);
    fetch('{{ url("conciliacao-bancaria-item") }}/' + itemId, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify(dados)
    })
    .then(r => r.json())
    .then(function(res) {
        if (res.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalAcao'))?.hide();
            location.reload();
        } else {
            alert('Erro: ' + (res.msg || 'Tente novamente.'));
        }
    })
    .catch(function() { alert('Erro de comunicação.'); });
}

document.getElementById('btn-nova-categoria').addEventListener('click', function () {
    var nome = prompt('Nome da categoria:');
    if (!nome) return;
    var tipo = tipoAtual === 'debito' ? 'pagar' : 'receber';
    fetch('{{ route('categoria-conta.ajax') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: JSON.stringify({ empresa_id: empresaId, nome: nome, tipo: tipo })
    })
    .then(r => r.json())
    .then(function (res) {
        if (!res || !res.success) {
            alert('Não foi possível criar a categoria.');
            return;
        }
        var sel = document.getElementById('inp-categoria');
        var opt = document.createElement('option');
        opt.value = res.data.id;
        opt.textContent = res.data.nome;
        sel.appendChild(opt);
        sel.value = res.data.id;
    })
    .catch(function () { alert('Erro de comunicação.'); });
});
</script>
@endsection