@extends('layouts.app')

@section('title', 'Contas a Pagar & Operações Bancárias')
@section('topbar_title', '🏦 Contas a Pagar & Fila de Pagamentos Bancários')

@section('styles')
<style>
    .finance-dashboard {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 40px;
    }

    /* Banner Bancário */
    .bank-hero-card {
        background: linear-gradient(135deg, rgba(236, 0, 0, 0.08) 0%, rgba(236, 0, 0, 0.02) 100%);
        border: 1px solid rgba(236, 0, 0, 0.2);
        border-radius: var(--radius-lg, 14px);
        padding: 20px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .bank-hero-info {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .bank-logo-badge {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        background: {{ $bancoCodigo === '033' ? '#ec0000' : '#cc092f' }};
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 22px;
        box-shadow: 0 4px 12px {{ $bancoCodigo === '033' ? 'rgba(236, 0, 0, 0.35)' : 'rgba(204, 9, 47, 0.35)' }};
    }

    .bank-hero-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .bank-hero-sub {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .bank-hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Seletor de Banco */
    .bank-selector-pill {
        display: inline-flex;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 3px;
        gap: 4px;
    }

    .bank-selector-btn {
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        color: var(--text-muted);
        transition: all 0.2s ease;
    }

    .bank-selector-btn.active-san {
        background: #ec0000;
        color: #ffffff;
    }

    .bank-selector-btn.active-bra {
        background: #cc092f;
        color: #ffffff;
    }

    /* KPI Cards */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
    }

    .kpi-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        padding: 18px 20px;
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        border-color: rgba(236, 0, 0, 0.3);
    }

    .kpi-label {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kpi-value {
        font-size: 1.55rem;
        font-weight: 800;
        color: var(--text-main);
        margin-top: 8px;
        letter-spacing: -0.02em;
    }

    .kpi-sub {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .kpi-card.kpi-san {
        border-left: 4px solid #ec0000;
    }

    .kpi-card.kpi-warning {
        border-left: 4px solid var(--accent-amber);
    }

    .kpi-card.kpi-success {
        border-left: 4px solid var(--accent-green);
    }

    .kpi-card.kpi-blue {
        border-left: 4px solid var(--accent-blue);
    }

    /* Barra de Filtros */
    .filter-section {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        padding: 16px 20px;
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .filter-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 12px;
        overflow-x: auto;
    }

    .filter-tab {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .filter-tab:hover {
        color: var(--text-main);
        background: var(--bg-card-hover);
    }

    .filter-tab.active {
        background: rgba(236, 0, 0, 0.1);
        color: #ec0000;
        font-weight: 700;
    }

    .filter-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .filter-inputs {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        flex: 1;
    }

    .form-control-custom {
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.85rem;
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s ease;
    }

    .form-control-custom:focus {
        border-color: #ec0000;
    }

    /* Tabela de Títulos */
    .table-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }

    .table-custom {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .table-custom th {
        background: var(--bg-base);
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .table-custom td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color-subtle);
        color: var(--text-main);
        vertical-align: middle;
    }

    .table-custom tr:hover td {
        background: var(--bg-card-hover);
    }

    /* Badges */
    .badge-modalidade {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .badge-pix {
        background: rgba(16, 185, 129, 0.12);
        color: #059669;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .badge-dda {
        background: rgba(37, 99, 235, 0.12);
        color: #2563eb;
        border: 1px solid rgba(37, 99, 235, 0.3);
    }

    .badge-ted {
        background: rgba(147, 51, 234, 0.12);
        color: #9333ea;
        border: 1px solid rgba(147, 51, 234, 0.3);
    }

    .badge-pendente {
        background: rgba(245, 158, 11, 0.12);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    /* Badges de Fila */
    .badge-fila-hoje {
        background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .badge-fila-agendada {
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .badge-fila-aberta {
        background: var(--bg-base);
        color: var(--text-muted);
        border: 1px solid var(--border-color);
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }

    .badge-status-pago {
        background: #f0fdf4;
        color: #16a34a;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.72rem;
    }

    .badge-status-erro {
        background: #fef2f2;
        color: #dc2626;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        cursor: pointer;
    }

    /* Botões */
    .btn-primary-action {
        background: #ec0000;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 9px 18px;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(236, 0, 0, 0.25);
    }

    .btn-primary-action:hover {
        background: #c70000;
        transform: translateY(-1px);
    }

    .btn-secondary-action {
        background: var(--bg-base);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-secondary-action:hover {
        background: var(--bg-card-hover);
        border-color: var(--text-muted);
    }

    /* Floating Action Bar */
    .floating-action-bar {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 12px 28px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        gap: 20px;
        z-index: 100;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .floating-action-bar.hidden {
        transform: translate(-50%, 100px);
        opacity: 0;
        pointer-events: none;
    }
</style>
@endsection

@section('content')
<div class="finance-dashboard">

    {{-- 1. Alertas de Sessão --}}
    @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #059669; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>✅</span> <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('warning'))
        <div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #d97706; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>⚠️</span> <span>{{ session('warning') }}</span>
        </div>
    @endif

    @if(session('danger'))
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #dc2626; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>🚨</span> <span>{{ session('danger') }}</span>
        </div>
    @endif

    {{-- 2. Hero Card Banco Ativo (Santander / Bradesco) & Conta Centralizada Matriz --}}
    <div class="bank-hero-card">
        <div class="bank-hero-info">
            <div class="bank-logo-badge">
                {{ $bancoCodigo === '033' ? 'S' : 'B' }}
            </div>
            <div>
                <div class="bank-hero-title">
                    <span>{{ $bancoCodigo === '033' ? 'Banco Santander (033)' : 'Banco Bradesco (237)' }} - Pagamentos via API</span>

                    {{-- Seletor de Banco Ativo --}}
                    <div class="bank-selector-pill">
                        <a href="{{ route('financeiro.contas.index', array_merge(request()->query(), ['banco' => '033'])) }}" 
                           class="bank-selector-btn {{ $bancoCodigo === '033' ? 'active-san' : '' }}">
                            🔴 Santander (033)
                        </a>
                        <a href="{{ route('financeiro.contas.index', array_merge(request()->query(), ['banco' => '237'])) }}" 
                           class="bank-selector-btn {{ $bancoCodigo === '237' ? 'active-bra' : '' }}">
                            🔺 Bradesco (237)
                        </a>
                    </div>

                    @if($statusConexao['sucesso'] ?? false)
                        <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;">
                            <span style="width: 6px; height: 6px; border-radius: 50%; background: #16a34a;"></span>
                            API Conectada ({{ strtoupper($matrizConta['ambiente'] ?? 'SANDBOX') }})
                        </span>
                    @else
                        <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;">
                            Desconectado
                        </span>
                    @endif
                </div>
                <div class="bank-hero-sub">
                    Conta Débito Centralizada Matriz (Filial 01) | Agência: <strong>{{ $matrizConta['agencia'] ?? '2245' }}</strong> | Conta: <strong>{{ $matrizConta['conta'] ?? '13009876' }}-{{ $matrizConta['conta_digito'] ?? '5' }}</strong> | CNPJ: {{ $matrizConta['cnpj'] ?? '05.432.100/0001-99' }}
                </div>
            </div>
        </div>
        <div class="bank-hero-actions">
            <button type="button" class="btn-secondary-action" onclick="abrirModalDda()">
                🔍 Consultar DDA {{ $bancoCodigo === '033' ? 'Santander' : 'Bradesco' }}
            </button>
            <a href="{{ route('financeiro.erros.index') }}" class="btn-secondary-action" style="position: relative;">
                🚨 Tela de Erros Diários
                @if($totalErrosHoje > 0)
                    <span style="background: #ec0000; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; padding: 1px 6px; margin-left: 4px;">{{ $totalErrosHoje }}</span>
                @endif
            </a>
            @if($bancoCodigo === '033')
                <a href="{{ route('financeiro.configuracoes.santander') }}" class="btn-secondary-action">
                    ⚙️ Configurar API Santander
                </a>
            @else
                <a href="{{ route('financeiro.configuracoes.bradesco') }}" class="btn-secondary-action">
                    ⚙️ Configurar API Bradesco
                </a>
            @endif
        </div>
    </div>

    {{-- 3. KPIs Financeiros & Fila de Provisionamento --}}
    <div class="kpi-grid">
        <div class="kpi-card kpi-san">
            <div class="kpi-label">
                <span>Total a Pagar (ERP Viman)</span>
                <span>📋</span>
            </div>
            <div class="kpi-value">R$ {{ number_format($valorTotal, 2, ',', '.') }}</div>
            <div class="kpi-sub">{{ $totalTitulos }} duplicata(s) consultadas</div>
        </div>

        <div class="kpi-card kpi-success">
            <div class="kpi-label">
                <span>🔥 Fila: Liberados Hoje</span>
                <span>⚡</span>
            </div>
            <div class="kpi-value" style="color: #16a34a;">R$ {{ number_format($valorFilaHoje, 2, ',', '.') }}</div>
            <div class="kpi-sub">{{ $totalFilaHoje }} título(s) com baixa no Viman para hoje</div>
        </div>

        <div class="kpi-card kpi-blue">
            <div class="kpi-label">
                <span>📅 Fila: Provisionados Futuros</span>
                <span>🕒</span>
            </div>
            <div class="kpi-value" style="color: #2563eb;">R$ {{ number_format($valorFilaAgendada, 2, ',', '.') }}</div>
            <div class="kpi-sub">{{ $totalFilaAgendada }} título(s) agendados para datas futuras</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">
                <span>Boletos no DDA</span>
                <span>📄</span>
            </div>
            <div class="kpi-value">{{ $totalDda }}</div>
            <div class="kpi-sub">Localizados na CIP / Banco</div>
        </div>

        @if($totalPendencias > 0)
        <div class="kpi-card kpi-warning">
            <div class="kpi-label">
                <span>Pendências no Viman</span>
                <span>⚠️</span>
            </div>
            <div class="kpi-value" style="color: #d97706;">{{ $totalPendencias }}</div>
            <div class="kpi-sub">Fornecedor sem dados bancários</div>
        </div>
        @endif

        @if($totalErrosHoje > 0)
        <div class="kpi-card kpi-danger" style="border-left: 4px solid #ec0000;">
            <div class="kpi-label">
                <span>Erros Hoje (Bloqueados)</span>
                <span>🚨</span>
            </div>
            <div class="kpi-value" style="color: #ec0000;">{{ $totalErrosHoje }}</div>
            <div class="kpi-sub">R$ {{ number_format($valorErrosHoje, 2, ',', '.') }} aguardando tratativa</div>
        </div>
        @endif
    </div>

    {{-- 4. Barra de Filtros & Abas de Modalidade e Fila --}}
    <div class="filter-section">
        <form method="GET" action="{{ route('financeiro.contas.index') }}" id="filterForm">
            <input type="hidden" name="banco" value="{{ $bancoCodigo }}">
            <input type="hidden" name="modalidade" id="modalidadeInput" value="{{ $filtros['modalidade'] }}">
            <input type="hidden" name="fila" id="filaInput" value="{{ $filtros['fila'] }}">

            {{-- Abas por Fila de Pagamento / Provisionamento --}}
            <div class="filter-tabs">
                <button type="button" class="filter-tab {{ $filtros['fila'] === 'TODAS' ? 'active' : '' }}" onclick="setFila('TODAS')">
                    📑 Todos os Títulos ({{ $totalTitulos }})
                </button>
                <button type="button" class="filter-tab {{ $filtros['fila'] === 'PAGAR_HOJE' ? 'active' : '' }}" onclick="setFila('PAGAR_HOJE')">
                    🔥 1. Fila de Hoje: Liberados para Pagar ({{ $totalFilaHoje }})
                </button>
                <button type="button" class="filter-tab {{ $filtros['fila'] === 'PROVISIONADO_FUTURO' ? 'active' : '' }}" onclick="setFila('PROVISIONADO_FUTURO')">
                    📅 2. Fila Provisionada: Pagamento Futuro ({{ $totalFilaAgendada }})
                </button>
                <button type="button" class="filter-tab {{ $filtros['fila'] === 'AGUARDANDO_BAIXA' ? 'active' : '' }}" onclick="setFila('AGUARDANDO_BAIXA')">
                    ⏳ 3. Aguardando Baixa no Viman ({{ $totalAguardandoBaixa }})
                </button>
            </div>

            {{-- Filtros de Busca, Filial e Modalidade --}}
            <div class="filter-row" style="margin-top: 14px;">
                <div class="filter-inputs">
                    <input type="text" name="busca" value="{{ $filtros['busca'] }}" placeholder="Buscar por fornecedor, CNPJ ou documento..." class="form-control-custom" style="min-width: 280px;">

                    <select name="filial" class="form-control-custom" onchange="this.form.submit()">
                        <option value="todas" {{ $filtros['filial'] === 'todas' ? 'selected' : '' }}>🏢 Todas as Filiais</option>
                        <option value="01" {{ $filtros['filial'] === '01' ? 'selected' : '' }}>01 - Vitória Hospitalar Matriz (ES)</option>
                        <option value="02" {{ $filtros['filial'] === '02' ? 'selected' : '' }}>02 - Vitória Hospitalar Filial SP</option>
                        <option value="03" {{ $filtros['filial'] === '03' ? 'selected' : '' }}>03 - Vitória Hospitalar Filial MG</option>
                        <option value="04" {{ $filtros['filial'] === '04' ? 'selected' : '' }}>04 - Vitória Hospitalar Filial RJ</option>
                        <option value="05" {{ $filtros['filial'] === '05' ? 'selected' : '' }}>05 - Vitória Hospitalar Filial RP</option>
                        <option value="10" {{ $filtros['filial'] === '10' ? 'selected' : '' }}>10 - VH Conecta Matriz (RJ)</option>
                    </select>

                    <select name="modalidade_select" class="form-control-custom" onchange="setModalidade(this.value)">
                        <option value="TODAS" {{ $filtros['modalidade'] === 'TODAS' ? 'selected' : '' }}>Modalidade: Todas</option>
                        <option value="PIX" {{ $filtros['modalidade'] === 'PIX' ? 'selected' : '' }}>⚡ PIX</option>
                        <option value="BOLETO_DDA" {{ $filtros['modalidade'] === 'BOLETO_DDA' ? 'selected' : '' }}>📄 Boleto DDA</option>
                        <option value="TED" {{ in_array($filtros['modalidade'], ['TED', 'TEF']) ? 'selected' : '' }}>🏦 Transferência (TED/TEF)</option>
                        <option value="PENDENCIA_DADOS" {{ $filtros['modalidade'] === 'PENDENCIA_DADOS' ? 'selected' : '' }}>⚠️ Pendência Viman</option>
                    </select>

                    <select name="status" class="form-control-custom" onchange="this.form.submit()">
                        <option value="TODOS" {{ $filtros['status'] === 'TODOS' ? 'selected' : '' }}>Status Bancário: Todos</option>
                        <option value="PENDENTE" {{ $filtros['status'] === 'PENDENTE' ? 'selected' : '' }}>Não Enviados ao Banco</option>
                        <option value="SUCESSO" {{ $filtros['status'] === 'SUCESSO' ? 'selected' : '' }}>Liquidados / Agendados</option>
                        <option value="ERRO" {{ $filtros['status'] === 'ERRO' ? 'selected' : '' }}>Com Erro / Rejeição</option>
                    </select>

                    <button type="submit" class="btn-secondary-action">Filtrar</button>
                    @if(!empty($filtros['busca']) || $filtros['filial'] !== 'todas' || $filtros['modalidade'] !== 'TODAS' || $filtros['fila'] !== 'TODAS' || $filtros['status'] !== 'TODOS')
                        <a href="{{ route('financeiro.contas.index', ['banco' => $bancoCodigo]) }}" class="btn-secondary-action" style="color: #ec0000;">Limpar Filtros</a>
                    @endif
                </div>

                <div>
                    <span style="font-size: 0.82rem; color: var(--text-muted);">
                        Exibindo <strong>{{ count($titulos) }}</strong> de <strong>{{ $totalTitulos }}</strong> título(s) no ERP Viman
                    </span>
                </div>
            </div>
        </form>
    </div>

    {{-- 5. Formulário de Execução de Pagamentos --}}
    <form id="formPagamentos" method="POST" action="{{ route('financeiro.contas.pagar') }}">
        @csrf
        <input type="hidden" name="banco_codigo" value="{{ $bancoCodigo }}">

        <div class="table-card">
            <table class="table-custom">
                <thead>
                    <tr>
                        <th style="width: 40px; text-align: center;">
                            <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)" style="cursor: pointer;">
                        </th>
                        <th>Filial</th>
                        <th>Nº Doc / Parc</th>
                        <th>Fornecedor / Razão Social</th>
                        <th>Baixa Viman vs. Pagamento</th>
                        <th>Valor Líquido</th>
                        <th>Modalidade</th>
                        <th>Status Bancário</th>
                        <th style="text-align: right;">Ação</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($titulos as $index => $t)
                        @php
                            $podePagar = $t['modalidade_sugerida'] !== 'PENDENCIA_DADOS' && !in_array($t['status_bancario'], ['SUCESSO', 'AGENDADO']);
                        @endphp
                        <tr>
                            <td style="text-align: center;">
                                @if($podePagar)
                                    <input type="checkbox" 
                                           class="titulo-checkbox" 
                                           name="titulos[{{ $index }}][id_referencia]" 
                                           value="{{ $t['filial'] }}_{{ $t['numero_documento'] }}_{{ $t['desdobramento'] }}"
                                           data-valor="{{ $t['valor_liquido'] }}"
                                           data-doc="{{ $t['numero_documento'] }}"
                                           data-datapag="{{ $t['data_pagamento_programada'] }}"
                                           onchange="atualizarBarraFlutuante()"
                                           style="cursor: pointer;">
                                    
                                    {{-- Campos ocultos enviados no POST --}}
                                    <input type="hidden" name="titulos[{{ $index }}][filial]" value="{{ $t['filial'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][numero_documento]" value="{{ $t['numero_documento'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][desdobramento]" value="{{ $t['desdobramento'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][fornecedor_codigo]" value="{{ $t['fornecedor_codigo'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][fornecedor_nome]" value="{{ $t['fornecedor_nome'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][fornecedor_cnpj_cpf]" value="{{ $t['fornecedor_cnpj'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][modalidade]" value="{{ $t['modalidade_sugerida'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][valor]" value="{{ $t['valor_liquido'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][data_vencimento]" value="{{ $t['data_vencimento'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][data_pagamento_programada]" value="{{ $t['data_pagamento_programada'] }}">
                                    <input type="hidden" name="titulos[{{ $index }}][chave_pix]" value="{{ $t['chave_pix'] ?? '' }}">
                                    <input type="hidden" name="titulos[{{ $index }}][codigo_barras]" value="{{ $t['codigo_barras'] ?? '' }}">
                                    <input type="hidden" name="titulos[{{ $index }}][agencia_favorecido]" value="{{ $t['agencia'] ?? '' }}">
                                    <input type="hidden" name="titulos[{{ $index }}][conta_favorecido]" value="{{ $t['conta'] ?? '' }}">
                                    <input type="hidden" name="titulos[{{ $index }}][digito_conta_favorecido]" value="{{ $t['digito'] ?? '' }}">
                                @else
                                    <span style="color: var(--text-muted); font-size: 11px;">—</span>
                                @endif
                            </td>
                            <td>
                                <span style="font-weight: 700; color: var(--text-muted);">{{ $t['filial'] }}</span>
                            </td>
                            <td>
                                <strong>{{ $t['numero_documento'] }}</strong>
                                <span style="color: var(--text-muted); font-size: 0.78rem;">/{{ $t['desdobramento'] }}</span>
                            </td>
                            <td>
                                <div style="font-weight: 700;">{{ $t['fornecedor_nome'] }}</div>
                                <div style="font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;">
                                    CNPJ: {{ $t['fornecedor_cnpj'] ?: 'N/D' }} | Cód: {{ $t['fornecedor_codigo'] }}
                                </div>
                            </td>
                            <td>
                                {{-- Visão da Baixa vs. Pagamento Programado --}}
                                @if(($t['status_fila'] ?? '') === 'PAGAR_HOJE')
                                    <span class="badge-fila-hoje">
                                        🔥 Pagar Hoje ({{ $t['data_pagamento_programada_br'] }})
                                    </span>
                                    @if($t['data_baixa_viman_br'])
                                        <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">
                                            Baixado no Viman em: {{ $t['data_baixa_viman_br'] }}
                                        </div>
                                    @endif
                                @elseif(($t['status_fila'] ?? '') === 'PROVISIONADO_FUTURO')
                                    <span class="badge-fila-agendada">
                                        📅 Provisionado p/ {{ $t['data_pagamento_programada_br'] }}
                                    </span>
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">
                                        Baixado em {{ $t['data_baixa_viman_br'] ?? 'Viman' }} (daqui a {{ $t['dias_para_pagamento'] }} dias)
                                    </div>
                                @else
                                    <span class="badge-fila-aberta">
                                        ⏳ Aguardando Baixa Viman
                                    </span>
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">
                                        Vence em: {{ $t['data_vencimento_br'] }}
                                    </div>
                                @endif
                            </td>
                            <td>
                                <div style="font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem;">
                                    R$ {{ number_format($t['valor_liquido'], 2, ',', '.') }}
                                </div>
                            </td>
                            <td>
                                @if($t['modalidade_sugerida'] === 'PIX')
                                    <span class="badge-modalidade badge-pix">⚡ PIX</span>
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">{{ Str::limit($t['chave_pix'] ?? 'Chave cadastrada', 22) }}</div>
                                @elseif($t['modalidade_sugerida'] === 'BOLETO_DDA')
                                    <span class="badge-modalidade badge-dda">📄 Boleto DDA</span>
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">CIP / DDA</div>
                                @elseif(in_array($t['modalidade_sugerida'], ['TED', 'TEF']))
                                    <span class="badge-modalidade badge-ted">🏦 {{ $t['modalidade_sugerida'] }}</span>
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">Ag: {{ $t['agencia'] }} / Cc: {{ $t['conta'] }}</div>
                                @else
                                    <span class="badge-modalidade badge-pendente">⚠️ Pendência Viman</span>
                                    <div style="font-size: 10px; color: #d97706; margin-top: 2px;">Sem dados bancários</div>
                                @endif
                            </td>
                            <td>
                                @if($t['status_bancario'] === 'SUCESSO')
                                    <span class="badge-status-pago">✅ Liquidado via API</span>
                                @elseif($t['status_bancario'] === 'AGENDADO')
                                    <span style="background: #eff6ff; color: #2563eb; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;">
                                        📅 Agendado no Banco
                                    </span>
                                @elseif($t['status_bancario'] === 'ERRO')
                                    <a href="{{ route('financeiro.erros.index', ['busca' => $t['numero_documento']]) }}" class="badge-status-erro" title="Ver motivo do erro">
                                        🚨 Falha na API
                                    </a>
                                @else
                                    <span style="color: var(--text-muted); font-size: 0.75rem;">Aguardando Envio</span>
                                @endif
                            </td>
                            <td style="text-align: right;">
                                @if($podePagar)
                                    <button type="button" class="btn-primary-action" style="padding: 5px 10px; font-size: 0.75rem;" onclick="pagarIndividual({{ $index }})">
                                        Pagar via {{ $bancoCodigo === '033' ? 'Santander' : 'Bradesco' }}
                                    </button>
                                @elseif($t['modalidade_sugerida'] === 'PENDENCIA_DADOS')
                                    <span style="font-size: 11px; color: #d97706;" title="O fornecedor precisa cadastrar os dados bancários diretamente no ERP Viman">
                                        Corrigir no Viman
                                    </span>
                                @else
                                    <span style="color: var(--text-muted); font-size: 11px;">Concluído</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style="text-align: center; padding: 40px; color: var(--text-muted);">
                                <div>🔍</div>
                                <div style="margin-top: 8px; font-weight: 600;">Nenhum título encontrado para os filtros selecionados.</div>
                                <div style="font-size: 0.8rem; margin-top: 4px;">Tente alterar a fila de provisionamento ou os filtros de busca.</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- 6. Barra Flutuante de Ação em Massa --}}
        <div id="floatingActionBar" class="floating-action-bar hidden">
            <div>
                <span id="floatingSelectedCount" style="font-weight: 800; color: #ec0000; font-size: 1.1rem;">0</span>
                <span style="font-weight: 600; color: var(--text-main);">título(s) selecionado(s)</span>
                <span style="color: var(--text-muted); margin: 0 8px;">|</span>
                <span style="color: var(--text-muted);">Total:</span>
                <strong id="floatingSelectedTotal" style="font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--text-main);">R$ 0,00</strong>
            </div>

            <div style="display: flex; align-items: center; gap: 10px;">
                <button type="button" class="btn-primary-action" onclick="confirmarTransmissaoLote()">
                    🚀 Liquidar / Agendar via {{ $bancoCodigo === '033' ? 'Santander (033)' : 'Bradesco (237)' }} API
                </button>
            </div>
        </div>
    </form>
</div>

{{-- Modal de Consulta DDA --}}
<div id="modalDda" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
    <div style="background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; width: 90%; max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);">
        <div style="padding: 18px 24px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between;">
            <div style="font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 8px;">
                <span>📄</span> Boletos no DDA {{ $bancoCodigo === '033' ? 'Santander' : 'Bradesco' }} (CIP)
            </div>
            <button type="button" onclick="fecharModalDda()" style="background: transparent; border: none; font-size: 1.4rem; color: var(--text-muted); cursor: pointer;">&times;</button>
        </div>
        <div style="padding: 20px 24px; overflow-y: auto; flex: 1;" id="modalDdaConteudo">
            <div style="text-align: center; padding: 30px; color: var(--text-muted);">
                <span>⏳</span> Consultando base DDA para o CNPJ da Matriz...
            </div>
        </div>
        <div style="padding: 14px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; background: var(--bg-base);">
            <button type="button" class="btn-secondary-action" onclick="fecharModalDda()">Fechar</button>
        </div>
    </div>
</div>

<script>
    function setFila(fila) {
        document.getElementById('filaInput').value = fila;
        document.getElementById('filterForm').submit();
    }

    function setModalidade(modalidade) {
        document.getElementById('modalidadeInput').value = modalidade;
        document.getElementById('filterForm').submit();
    }

    function toggleSelectAll(masterCheckbox) {
        const checkboxes = document.querySelectorAll('.titulo-checkbox');
        checkboxes.forEach(cb => cb.checked = masterCheckbox.checked);
        atualizarBarraFlutuante();
    }

    function atualizarBarraFlutuante() {
        const checkboxes = document.querySelectorAll('.titulo-checkbox:checked');
        const bar = document.getElementById('floatingActionBar');
        const countSpan = document.getElementById('floatingSelectedCount');
        const totalSpan = document.getElementById('floatingSelectedTotal');

        let total = 0;
        checkboxes.forEach(cb => {
            total += parseFloat(cb.getAttribute('data-valor') || 0);
        });

        countSpan.textContent = checkboxes.length;
        totalSpan.textContent = 'R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

        if (checkboxes.length > 0) {
            bar.classList.remove('hidden');
        } else {
            bar.classList.add('hidden');
        }
    }

    function pagarIndividual(index) {
        const checkboxes = document.querySelectorAll('.titulo-checkbox');
        checkboxes.forEach(cb => cb.checked = false);

        const targetCheckbox = document.querySelector(`input[name="titulos[${index}][id_referencia]"]`);
        if (targetCheckbox) {
            targetCheckbox.checked = true;
            atualizarBarraFlutuante();
            const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
            Swal.fire({
                title: 'Confirmar Transmissão',
                text: `Confirma a transmissão via API {{ $bancoCodigo === '033' ? 'Santander' : 'Bradesco' }} para o título selecionado?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#c8102e',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Sim, transmitir',
                cancelButtonText: 'Cancelar',
                background: isDark ? '#111827' : '#ffffff',
                color: isDark ? '#f3f4f6' : '#0f172a'
            }).then((res) => {
                if (res.isConfirmed) {
                    document.getElementById('formPagamentos').submit();
                }
            });
        }
    }

    function confirmarTransmissaoLote() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
        Swal.fire({
            title: 'Transmitir Pagamentos',
            text: 'Deseja transmitir os pagamentos selecionados via API {{ $bancoCodigo === '033' ? 'Santander (033)' : 'Bradesco (237)' }} com débito na Matriz?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#c8102e',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Sim, transmitir',
            cancelButtonText: 'Cancelar',
            background: isDark ? '#111827' : '#ffffff',
            color: isDark ? '#f3f4f6' : '#0f172a'
        }).then((res) => {
            if (res.isConfirmed) {
                document.getElementById('formPagamentos').submit();
            }
        });
    }

    let todosBoletosDda = [];

    function abrirModalDda() {
        const modal = document.getElementById('modalDda');
        const container = document.getElementById('modalDdaConteudo');
        modal.style.display = 'flex';

        container.innerHTML = `
            <div style="text-align: center; padding: 40px; color: var(--text-muted);">
                <div style="font-size: 2.2rem; margin-bottom: 12px; animation: pulse 1.5s infinite;">⏳</div>
                <div style="font-weight: 700; font-size: 1.05rem; color: var(--text-main);">Consultando DDA Santander Produção...</div>
                <div style="font-size: 0.85rem; margin-top: 6px; color: var(--text-muted);">Sincronizando todos os boletos ativos da matriz e filiais via mTLS CIP. Aguarde...</div>
            </div>`;

        fetch('{{ route("financeiro.contas.consultar-dda", ["banco" => $bancoCodigo]) }}')
            .then(res => res.json())
            .then(data => {
                if (!data.boletos || data.boletos.length === 0) {
                    container.innerHTML = `
                        <div style="text-align: center; padding: 35px; color: var(--text-muted);">
                            Nenhum boleto pendente localizado no DDA Santander no momento.
                        </div>`;
                    return;
                }

                todosBoletosDda = data.boletos;
                renderizarListaDda(todosBoletosDda, data.total, data.banco);
            })
            .catch(err => {
                container.innerHTML = `
                    <div style="text-align: center; padding: 25px; color: #dc2626;">
                        <strong>Falha ao consultar DDA Santander:</strong> ${err.message}
                    </div>`;
            });
    }

    function renderizarListaDda(boletos, totalGeral, bancoNome) {
        const container = document.getElementById('modalDdaConteudo');
        let html = `
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;">
                <div style="font-size: 0.85rem; color: var(--text-muted);">
                    Total sincronizado: <strong style="color: var(--text-main);">${totalGeral} boleto(s)</strong> (${bancoNome})
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="text" id="filtroDdaInput" placeholder="Buscar por fornecedor ou CNPJ..." 
                           oninput="filtrarBoletosDda(this.value)"
                           style="padding: 6px 12px; font-size: 0.85rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-base); color: var(--text-main); width: 240px;">
                    <button type="button" onclick="location.reload()" class="btn-secondary-action" style="padding: 6px 12px; font-size: 0.8rem;" title="Recarregar tela para atualizar vínculos DDA">
                        🔄 Atualizar Contas a Pagar
                    </button>
                </div>
            </div>
            <div id="listaDdaItens" style="display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; padding-right: 4px;">`;

        boletos.forEach(b => {
            html += `
                <div class="item-dda" style="background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                    <div style="flex: 1; min-width: 0;">
                        <div style="font-weight: 700; font-size: 0.92rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            ${b.beneficiario_nome}
                        </div>
                        <div style="font-size: 0.78rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px;">
                            CNPJ: ${b.beneficiario_cnpj_cpf} | Linha: ${b.linha_digitavel || b.codigo_barras}
                        </div>
                        <div style="font-size: 0.78rem; color: var(--text-muted); margin-top: 3px;">
                            Vencimento: <strong style="color: var(--text-main);">${b.data_vencimento}</strong> 
                            ${b.data_limite_pagamento ? `| Limite: <strong>${b.data_limite_pagamento}</strong>` : ''} 
                            | Banco: ${b.banco_emissor || 'Santander'}
                        </div>
                    </div>
                    <div style="text-align: right; flex-shrink: 0;">
                        <div style="font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--text-main);">
                            R$ ${parseFloat(b.valor_nominal).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                        </div>
                        <span style="display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: #eff6ff; color: #2563eb; margin-top: 4px;">
                            ${b.situacao}
                        </span>
                    </div>
                </div>`;
        });

        html += `</div>`;
        container.innerHTML = html;
    }

    function filtrarBoletosDda(termo) {
        const limpo = termo.trim().toLowerCase();
        if (!limpo) {
            document.querySelectorAll('#listaDdaItens .item-dda').forEach(el => el.style.display = 'flex');
            return;
        }
        document.querySelectorAll('#listaDdaItens .item-dda').forEach(el => {
            const txt = el.textContent.toLowerCase();
            el.style.display = txt.includes(limpo) ? 'flex' : 'none';
        });
    }

    function fecharModalDda() {
        document.getElementById('modalDda').style.display = 'none';
    }
</script>
@endsection