@extends('layouts.app', ['title' => 'Conciliação Bancária'])
@section('css')
<style>
/* Força loader a sumir nesta página */
.unified-loader { display: none !important; }
/* Garante que o modal de importar fique acima de qualquer backdrop residual */
#modalImportar { z-index: 1090 !important; }
#modalImportar + .modal-backdrop,
.modal-backdrop:last-of-type { z-index: 1089 !important; }
</style>
@endsection
@section('content')
<div class="mt-4 container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold"><i class="ri-bank-line me-2 text-primary"></i>Conciliação Bancária</h4>
            <p class="text-muted mb-0 small">Importe extratos OFX e concilie com suas contas financeiras</p>
        </div>
        <div class="d-flex gap-2">
            @if($status == 1)
            <a href="{{ route('conciliacao-bancaria.index', ['empresa_id' => request()->empresa_id, 'status_ativo' => 0]) }}" class="btn btn-outline-warning">
                <i class="ri-eye-off-line me-1"></i> Contas Desativadas
            </a>
            @else
            <a href="{{ route('conciliacao-bancaria.index', ['empresa_id' => request()->empresa_id, 'status_ativo' => 1]) }}" class="btn btn-outline-primary">
                <i class="ri-eye-line me-1"></i> Contas Ativas
            </a>
            @endif
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalImportar">
                <i class="ri-upload-cloud-line me-1"></i> Importar OFX
            </button>
        </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(session('flash_error'))
    <div class="alert alert-danger alert-dismissible fade show">{{ session('flash_error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif

    <div class="row">
        @forelse($data as $item)
        <div class="col-md-4 col-xl-3 mb-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius:12px; overflow:hidden;">
                <div class="card-header border-0 py-2 px-3" style="background: {{ $item->status === 'concluida' ? 'linear-gradient(135deg,#10b981,#059669)' : 'linear-gradient(135deg,#3b82f6,#2563eb)' }}">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-white bg-opacity-25 text-white fw-semibold" style="font-size:10px;">
                                {{ $item->status === 'concluida' ? 'Concluída' : 'Pendente' }}
                            </span>
                            <p class="mb-0 text-white fw-bold mt-1" style="font-size:12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;">{{ $item->nome_arquivo }}</p>
                        </div>
                        <i class="ri-bank-line text-white" style="font-size:20px; opacity:.7"></i>
                    </div>
                </div>
                <div class="card-body px-3 py-2">
                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <small class="text-muted d-block" style="font-size: 10px;">Banco</small>
                            <span class="fw-semibold" style="font-size: 11px;">{{ $item->banco ?: '—' }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block" style="font-size: 10px;">Conta</small>
                            <span class="fw-semibold" style="font-size: 11px;">{{ $item->conta ?: '—' }}</span>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block" style="font-size: 10px;">Período</small>
                            <span class="fw-semibold" style="font-size: 11px;">
                                {{ $item->data_inicio ? \Carbon\Carbon::parse($item->data_inicio)->format('d/m/Y') : '—' }}
                                -
                                {{ $item->data_fim ? \Carbon\Carbon::parse($item->data_fim)->format('d/m/Y') : '—' }}
                            </span>
                        </div>
                        <div class="col-12">
                            <small class="text-muted d-block" style="font-size: 10px;">Saldo Final</small>
                            <span class="fw-bold text-success" style="font-size: 12px;">R$ {{ number_format($item->saldo_final, 2, ',', '.') }}</span>
                        </div>
                    </div>

                    <!-- Barra de progresso -->
                    @php
                        $pct = $item->total_itens > 0 ? round(($item->itens_conciliados / $item->total_itens) * 100) : 0;
                    @endphp
                    <div class="mb-1">
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-muted" style="font-size: 10px;">Progresso</small>
                            <small class="fw-semibold" style="font-size: 10px;">{{ $pct }}%</small>
                        </div>
                        <div class="progress" style="height:6px; border-radius:99px;">
                            <div class="progress-bar bg-success" style="width:{{ $pct }}%; border-radius:99px;"></div>
                        </div>
                        <div class="d-flex justify-content-between mt-1">
                            <small class="text-muted" style="font-size: 10px;">{{ $item->itens_conciliados }}/{{ $item->total_itens }}</small>
                            <small class="text-warning" style="font-size: 10px;">{{ $item->itens_pendentes }} pendentes</small>
                        </div>
                    </div>
                </div>
                <div class="card-footer border-0 bg-transparent px-3 pb-2 d-flex gap-1">
                    <a href="{{ route('conciliacao-bancaria.show', [$item->id, 'empresa_id' => request()->empresa_id]) }}" class="btn btn-primary btn-sm flex-fill py-1" style="font-size: 11px;">
                        <i class="ri-eye-line me-1"></i> Revisar
                    </a>
                    
                    <a href="{{ route('conciliacao-bancaria.status', $item->id) }}" class="btn btn-outline-warning btn-sm py-1" title="{{ $item->ativo ? 'Desativar' : 'Ativar' }}" style="font-size: 11px;">
                        <i class="{{ $item->ativo ? 'ri-eye-off-line' : 'ri-eye-line' }}"></i>
                    </a>

                    <form action="{{ route('conciliacao-bancaria.destroy', [$item->id, 'empresa_id' => request()->empresa_id]) }}" method="POST" class="flex-shrink-0" id="form-delete-{{ $item->id }}">
                        @csrf @method('DELETE')
                        <button type="button" class="btn btn-outline-danger btn-sm btn-delete-ofx py-1" style="font-size: 11px;">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm text-center py-5" style="border-radius:16px;">
                <i class="ri-bank-line text-muted" style="font-size:48px;"></i>
                <h5 class="mt-3 text-muted">Nenhuma conciliação importada</h5>
                <p class="text-muted small">Clique em "Importar OFX" para começar</p>
            </div>
        </div>
        @endforelse
    </div>

    {{ $data->appends(request()->query())->links() }}
</div>

<!-- Modal Importar OFX -->
<div class="modal fade" id="modalImportar" tabindex="-1" aria-labelledby="modalImportarLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalImportarLabel"><i class="ri-upload-cloud-line me-2 text-primary"></i>Importar Extrato OFX</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <form action="{{ route('conciliacao-bancaria.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="empresa_id" value="{{ request()->empresa_id ?? auth()->user()->empresa->empresa_id }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Conta Bancária</label>
                        <select name="conta_empresa_id" class="form-select" required>
                            <option value="">Selecione uma conta bancária</option>
                            @foreach($contas as $c)
                            <option value="{{ $c->id }}">{{ $c->nome }} — {{ $c->banco }} Ag: {{ $c->agencia }}</option>
                            @endforeach
                        </select>
                        @if($contas->isEmpty())
                        <small class="text-warning">
                            <i class="ri-alert-line me-1"></i>Nenhuma conta cadastrada.
                            <a href="{{ route('contas-empresa.index', ['empresa_id' => request()->empresa_id]) }}" target="_blank">Clique aqui para cadastrar</a> e vincular para atualizar o saldo automaticamente.
                        </small>
                        @else
                        <small class="text-muted">Vincule a uma conta para atualizar o saldo automaticamente.</small>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Arquivo OFX / QFX <span class="text-danger">*</span></label>
                        <div id="drop-zone" class="rounded-3 p-4 text-center" style="border: 2px dashed #6366f1; cursor:pointer;" onclick="document.getElementById('inp-ofx').click()">
                            <i class="ri-file-upload-line text-primary" style="font-size:36px;"></i>
                            <p class="mb-1 fw-semibold mt-2">Clique para selecionar ou arraste o arquivo</p>
                            <small class="text-muted">Formatos aceitos: .ofx, .qfx — Todos os bancos</small>
                            <p class="mb-0 mt-2 text-primary fw-semibold" id="nome-arquivo-ofx"></p>
                        </div>
                        <input type="file" id="inp-ofx" name="arquivo_ofx" accept=".ofx,.qfx,.txt" class="d-none" required>
                    </div>
                    <div class="alert alert-info py-2 px-3" style="font-size:13px;">
                        <i class="ri-information-line me-1"></i>
                        Compatível com todos os bancos: Bradesco, Itaú, Santander, BB, Caixa, Sicoob, Nubank e outros.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success px-4">
                        <i class="ri-upload-cloud-line me-1"></i> Importar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
$(document).on('click', '.btn-delete-ofx', function(e) {
    e.preventDefault();
    var formId = $(this).closest('form').attr('id');
    
    swal({
        title: "Você está certo?",
        text: "Uma vez deletado, você não poderá recuperar esse item novamente!",
        icon: "warning",
        buttons: ["Cancelar", "Excluir"],
        dangerMode: true,
    }).then((isConfirm) => {
        if (isConfirm) {
            document.getElementById(formId).submit();
        }
    });
});

document.getElementById('inp-ofx').addEventListener('change', function() {
    var nome = this.files[0] ? this.files[0].name : '';
    document.getElementById('nome-arquivo-ofx').textContent = nome;
});

// Remove backdrops residuais antes de abrir o modal
document.getElementById('modalImportar').addEventListener('show.bs.modal', function() {
    // Remove qualquer backdrop que não seja do nosso modal
    document.querySelectorAll('.modal-backdrop').forEach(function(el) { el.remove(); });
    document.body.classList.remove('modal-open');
    document.body.style.overflow = '';
    document.body.style.paddingRight = '';
});
</script>
@endsection