@extends('layouts.app')
@section('title', 'Busca por Chave - ERP-PLUS')
@section('page_title', 'Busca por Chave de Acesso')
@section('page_subtitle', 'Busque NF-e pela chave de acesso e registre a ciencia automaticamente.')

@push('styles')
<style>
    .result-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: #f8fafb; display: grid; gap: 10px; }
    .result-row  { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
    .result-item { display: grid; gap: 2px; }
    .result-item span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .result-item strong { font-size: 14px; }
    .status-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
    .badge.ok     { background: #dcfce7; color: #15803d; }
    .badge.warn   { background: #fef3c7; color: #92400e; }
    .badge.info   { background: #dbeafe; color: #1d4ed8; }
    .badge.muted  { background: #e5edf2; color: #475569; }
    .badge.danger { background: #fee2e2; color: #b91c1c; }
    .key-display  { font-family: monospace; font-size: 13px; word-break: break-all; color: var(--muted); }
    .progress-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
    .progress-track { height: 8px; background: #e5edf2; border-radius: 4px; overflow: hidden; margin: 10px 0; }
    .progress-fill  { height: 8px; background: var(--primary); border-radius: 4px; transition: width .3s; }
    .countdown-ring { font-size: 22px; font-weight: 700; color: var(--primary); min-width: 52px; text-align: center; }
    .batch-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .batch-table td, .batch-table th { padding: 10px 12px; font-size: 12px; }
    .spin { display: inline-block; animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .processing-row { background: #fffbeb; }
</style>
@endpush

@section('content')

{{-- ═══════════════════ BUSCA INDIVIDUAL ═══════════════════ --}}
<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Busca individual</h2>
            <span>Informe a empresa e a chave de acesso. O sistema busca o XML e registra a ciencia automaticamente.</span>
        </div>
    </div>

    <div style="padding:16px;display:grid;gap:14px">
        <div style="display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:end" id="individual-form">
            <div class="form-field">
                <label for="ind-company">Empresa</label>
                <select id="ind-company" style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;background:#fff">
                    <option value="">Selecione...</option>
                    @foreach ($companies as $company)
                        <option value="{{ $company->id }}">{{ $company->name }} — {{ $company->cnpj }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-field">
                <label for="ind-chave">Chave de acesso (44 digitos)</label>
                <input id="ind-chave" type="text" maxlength="50"
                       placeholder="00000000000000000000000000000000000000000000"
                       style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:monospace;font-size:13px;background:#fff;width:100%">
            </div>
            <div>
                @can('sync-documents')
                    <button id="ind-btn" class="button primary" style="min-height:40px;padding:8px 18px"
                            onclick="buscaIndividual()">Buscar e dar ciencia</button>
                @else
                    <span class="pill neutral">Sem permissao</span>
                @endcan
            </div>
        </div>

        <div id="ind-resultado" style="display:none"></div>
    </div>
</div>

{{-- ═══════════════════ UPLOAD XML ═══════════════════ --}}
<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Cadastrar NF-e de entrada</h2>
            <span>Selecione um ou mais arquivos XML. O sistema processa um por vez e mostra o resultado de cada um.</span>
        </div>
    </div>

    <div style="padding:16px;display:grid;gap:14px;max-width:700px">
        <div class="form-field">
            <label for="up-company">Empresa</label>
            <select id="up-company" style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;background:#fff">
                <option value="">Selecione...</option>
                @foreach ($companies as $company)
                    <option value="{{ $company->id }}">{{ $company->name }} — {{ $company->cnpj }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-field">
            <label for="up-xml">Arquivos XML da NF-e</label>
            <input id="up-xml" type="file" accept=".xml" multiple onchange="uploadContarArquivos(this)"
                   style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:#fff;width:100%">
            <div style="font-size:12px;color:var(--muted);margin-top:4px">
                <span id="up-count">Nenhum arquivo selecionado</span>
            </div>
        </div>

        @can('sync-documents')
            <div>
                <button id="up-btn" class="button primary" style="min-height:40px;padding:8px 18px" onclick="uploadIniciar()">Enviar XMLs</button>
            </div>
        @else
            <span class="pill neutral">Sem permissao</span>
        @endcan

        {{-- Progresso --}}
        <div id="up-progresso" style="display:none">
            <div class="progress-box">
                <div style="display:flex;justify-content:space-between;font-size:13px">
                    <span id="up-status-text">Aguardando...</span>
                    <span id="up-countdown" class="countdown-ring">—</span>
                </div>
                <div class="progress-track">
                    <div id="up-bar" class="progress-fill" style="width:0%"></div>
                </div>
                <div id="up-sub-text" style="font-size:12px;color:var(--muted)"></div>
                <div class="batch-controls" style="margin-top:10px">
                    <button id="up-cancelar" class="button" style="font-size:12px;padding:4px 12px" onclick="uploadCancelar()">Cancelar</button>
                </div>
            </div>

            <div style="overflow-x:auto">
                <table class="batch-table" style="width:100%;border-collapse:collapse">
                    <thead><tr>
                        <th>#</th>
                        <th>Arquivo</th>
                        <th>Resultado</th>
                        <th>Chave</th>
                        <th>Emitente</th>
                        <th>Ciencia</th>
                        <th>Detalhe</th>
                    </tr></thead>
                    <tbody id="up-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>


{{-- ═══════════════════ BUSCA EM LOTE ═══════════════════ --}}
<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Busca em lote</h2>
            <span>Cole as chaves separadas por virgula, ponto-e-virgula ou nova linha. O sistema processa uma por vez com 30 segundos de intervalo.</span>
        </div>
    </div>

    <div style="padding:16px;display:grid;gap:14px">
        <div style="display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start">
            <div class="form-field">
                <label for="lot-company">Empresa</label>
                <select id="lot-company" style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;background:#fff">
                    <option value="">Selecione...</option>
                    @foreach ($companies as $company)
                        <option value="{{ $company->id }}">{{ $company->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-field">
                <label for="lot-chaves">Chaves de acesso</label>
                <textarea id="lot-chaves" rows="5"
                    placeholder="Cole aqui as chaves separadas por virgula, ponto-e-virgula ou nova linha..."
                    style="width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:monospace;font-size:12px;resize:vertical;background:#fff;font-family:monospace"></textarea>
                <div class="row-text"><span id="lot-count">0 chaves detectadas</span></div>
            </div>
        </div>

        @can('sync-documents')
        <div style="display:flex;gap:10px;flex-wrap:wrap">
            <button id="lot-iniciar" class="button primary" onclick="loteIniciar()">Iniciar lote</button>
            <button id="lot-pausar" class="button" onclick="lotePausar()" style="display:none">Pausar</button>
            <button id="lot-retomar" class="button" onclick="loteRetomar()" style="display:none">Retomar</button>
            <button id="lot-cancelar" class="button danger" onclick="loteCancelar()" style="display:none">Cancelar</button>
        </div>
        @endcan

        {{-- Progresso --}}
        <div id="lot-progresso" style="display:none">
            <div class="progress-box">
                <div class="batch-controls">
                    <div class="countdown-ring" id="lot-countdown">—</div>
                    <div style="flex:1">
                        <div style="font-size:13px;font-weight:700" id="lot-status-text">Aguardando...</div>
                        <div class="progress-track">
                            <div class="progress-fill" id="lot-bar" style="width:0%"></div>
                        </div>
                        <div style="font-size:12px;color:var(--muted)" id="lot-sub-text"></div>
                    </div>
                </div>
            </div>

            {{-- Tabela de resultados --}}
            <div class="table-wrap" style="margin-top:14px">
                <table class="batch-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Chave de acesso</th>
                            <th>Status</th>
                            <th>XML</th>
                            <th>Ciencia</th>
                            <th>Protocolo / Detalhe</th>
                        </tr>
                    </thead>
                    <tbody id="lot-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
const CSRF = '{{ csrf_token() }}';
const BUSCA_URL = '{{ route("busca-chave.buscar") }}';

// ─── UTILITÁRIOS ─────────────────────────────────────────────────────────────

function parseKeys(raw) {
    return raw.split(/[,;\n\r]+/)
        .map(k => k.replace(/\D/g, ''))
        .filter(k => k.length === 44);
}

function badgeHtml(text, type) {
    return `<span class="badge ${type}">${text}</span>`;
}

function fetchStatusBadge(s) {
    const map = {
        fetched:            badgeHtml('XML obtido', 'ok'),
        already_downloaded: badgeHtml('XML ja disponivel', 'muted'),
        summary_only:       badgeHtml('Resumo obtido', 'info'),
        not_found:          badgeHtml('Nao encontrado', 'warn'),
        error:              badgeHtml('Erro ao buscar', 'danger'),
        skipped:            badgeHtml('Nao buscado', 'muted'),
    };
    return map[s] || badgeHtml(s, 'muted');
}

function manifestStatusBadge(s) {
    const map = {
        acknowledged:        badgeHtml('Ciencia registrada', 'ok'),
        already_acknowledged:badgeHtml('Ja possuia ciencia', 'muted'),
        error:               badgeHtml('Erro na ciencia', 'danger'),
        skipped:             badgeHtml('—', 'muted'),
    };
    return map[s] || badgeHtml(s, 'muted');
}

async function callBuscar(companyId, accessKey) {
    const res = await fetch(BUSCA_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify({ company_id: companyId, access_key: accessKey }),
    });
    const data = await res.json();
    if (!res.ok) throw new Error(data.message || 'Erro na requisicao');
    return data;
}

// ─── BUSCA INDIVIDUAL ─────────────────────────────────────────────────────────

async function buscaIndividual() {
    const btn      = document.getElementById('ind-btn');
    const company  = document.getElementById('ind-company').value;
    const chave    = document.getElementById('ind-chave').value.replace(/\D/g, '');
    const result   = document.getElementById('ind-resultado');

    if (!company) { alert('Selecione a empresa.'); return; }
    if (chave.length !== 44) { alert('A chave deve ter 44 digitos.'); return; }

    btn.disabled = true;
    btn.textContent = 'Buscando...';
    result.style.display = 'none';

    try {
        const data = await callBuscar(company, chave);
        result.innerHTML = renderIndividualResult(data);
        result.style.display = '';
    } catch (e) {
        result.innerHTML = `<div class="notice error">${e.message}</div>`;
        result.style.display = '';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Buscar e dar ciencia';
    }
}

function renderIndividualResult(d) {
    const doc = d.document;
    return `<div class="result-card">
        <div class="status-badges">
            ${fetchStatusBadge(d.fetch_status)}
            ${manifestStatusBadge(d.manifest_status)}
            ${d.manifest_data?.protocol ? badgeHtml('Prot. ' + d.manifest_data.protocol, 'info') : ''}
        </div>
        <div class="key-display">${d.access_key}</div>
        ${doc ? `<div class="result-row">
            <div class="result-item"><span>Emitente</span><strong>${doc.issuer_name || '—'}</strong></div>
            <div class="result-item"><span>CNPJ</span><strong>${doc.issuer_cnpj || '—'}</strong></div>
            <div class="result-item"><span>Emissao</span><strong>${doc.issued_at || '—'}</strong></div>
            <div class="result-item"><span>Valor</span><strong>${doc.total_amount || '—'}</strong></div>
        </div>` : `<div style="font-size:13px;color:var(--muted)">Documento nao localizado na SEFAZ para esta empresa.</div>`}
        ${d.fetch_error ? `<div style="font-size:12px;color:var(--danger)">Erro busca: ${d.fetch_error}</div>` : ''}
        ${d.manifest_error ? `<div style="font-size:12px;color:var(--danger)">Erro ciencia: ${d.manifest_error}</div>` : ''}
    </div>`;
}

// ─── BUSCA EM LOTE ────────────────────────────────────────────────────────────

let loteState = null;

document.getElementById('lot-chaves').addEventListener('input', function () {
    const keys = parseKeys(this.value);
    document.getElementById('lot-count').textContent =
        keys.length > 0 ? `${keys.length} chave(s) detectada(s)` : '0 chaves detectadas';
});

function loteIniciar() {
    const company = document.getElementById('lot-company').value;
    const raw     = document.getElementById('lot-chaves').value;
    const keys    = parseKeys(raw);

    if (!company) { alert('Selecione a empresa.'); return; }
    if (keys.length === 0) { alert('Nenhuma chave valida encontrada (44 digitos).'); return; }

    // Inicializa estado
    loteState = {
        keys, company,
        index: 0,
        paused: false,
        cancelled: false,
        secondsLeft: 0,
        timer: null,
    };

    // Monta tabela
    const tbody = document.getElementById('lot-tbody');
    tbody.innerHTML = keys.map((k, i) => `
        <tr id="lot-row-${i}">
            <td>${i + 1}</td>
            <td class="key-display">${k.substring(0, 10)}...${k.substring(34)}</td>
            <td id="lot-st-${i}">${badgeHtml('Aguardando', 'muted')}</td>
            <td id="lot-xml-${i}">—</td>
            <td id="lot-man-${i}">—</td>
            <td id="lot-det-${i}" style="font-size:11px;color:var(--muted)">—</td>
        </tr>`).join('');

    document.getElementById('lot-progresso').style.display = '';
    document.getElementById('lot-iniciar').style.display = 'none';
    document.getElementById('lot-pausar').style.display = '';
    document.getElementById('lot-cancelar').style.display = '';
    document.getElementById('lot-chaves').disabled = true;
    document.getElementById('lot-company').disabled = true;

    loteProcessarProximo();
}

async function loteProcessarProximo() {
    if (!loteState || loteState.cancelled) { loteFinalizar('Lote cancelado.'); return; }
    if (loteState.index >= loteState.keys.length) { loteFinalizar('Lote concluido!'); return; }

    const i   = loteState.index;
    const key = loteState.keys[i];
    const total = loteState.keys.length;

    // Atualiza UI
    document.getElementById(`lot-st-${i}`).innerHTML = `<span class="badge warn"><span class="spin">⟳</span> Processando</span>`;
    document.getElementById(`lot-row-${i}`).className = 'processing-row';
    atualizarProgresso(i, total, key);

    try {
        const data = await callBuscar(loteState.company, key);
        document.getElementById(`lot-st-${i}`).innerHTML = badgeHtml('Concluido', 'ok');
        document.getElementById(`lot-xml-${i}`).innerHTML = fetchStatusBadge(data.fetch_status);
        document.getElementById(`lot-man-${i}`).innerHTML = manifestStatusBadge(data.manifest_status);
        document.getElementById(`lot-det-${i}`).textContent =
            data.manifest_data?.protocol || data.fetch_error || data.manifest_error || '';
    } catch (e) {
        document.getElementById(`lot-st-${i}`).innerHTML = badgeHtml('Erro', 'danger');
        document.getElementById(`lot-det-${i}`).textContent = e.message;
    }

    document.getElementById(`lot-row-${i}`).className = '';
    loteState.index++;

    if (loteState.index >= loteState.keys.length || loteState.cancelled) {
        loteFinalizar(loteState.cancelled ? 'Lote cancelado.' : 'Lote concluido!');
        return;
    }

    // Aguarda 30 segundos antes da próxima
    loteState.secondsLeft = 30;
    loteContagem();
}

function loteContagem() {
    clearInterval(loteState.timer);
    atualizarCountdown(loteState.secondsLeft);

    loteState.timer = setInterval(() => {
        if (loteState.paused) return;
        loteState.secondsLeft--;
        atualizarCountdown(loteState.secondsLeft);
        if (loteState.secondsLeft <= 0) {
            clearInterval(loteState.timer);
            loteProcessarProximo();
        }
    }, 1000);
}

function atualizarCountdown(s) {
    document.getElementById('lot-countdown').textContent = s > 0 ? `${s}s` : '—';
    const next = loteState.index < loteState.keys.length
        ? loteState.keys[loteState.index]
        : null;
    document.getElementById('lot-sub-text').textContent =
        next ? `Proxima: ${next.substring(0, 10)}...${next.substring(34)}` : '';
}

function atualizarProgresso(i, total, current) {
    const pct = Math.round((i / total) * 100);
    document.getElementById('lot-bar').style.width = pct + '%';
    document.getElementById('lot-status-text').textContent = `Processando ${i + 1} de ${total}`;
    document.getElementById('lot-countdown').textContent = '…';
    document.getElementById('lot-sub-text').textContent = current.substring(0, 10) + '...' + current.substring(34);
}

function lotePausar() {
    if (!loteState) return;
    loteState.paused = true;
    document.getElementById('lot-pausar').style.display  = 'none';
    document.getElementById('lot-retomar').style.display = '';
    document.getElementById('lot-status-text').textContent = 'Pausado — aguardando retomada.';
}

function loteRetomar() {
    if (!loteState) return;
    loteState.paused = false;
    document.getElementById('lot-retomar').style.display = 'none';
    document.getElementById('lot-pausar').style.display  = '';
    document.getElementById('lot-status-text').textContent = 'Retomando...';

    // Se estava em contagem, continua; se estava processando, re-inicia
    if (loteState.secondsLeft > 0) {
        loteContagem();
    } else {
        loteProcessarProximo();
    }
}

function loteCancelar() {
    if (!loteState) return;
    if (!confirm('Cancelar o processamento do lote?')) return;
    loteState.cancelled = true;
    clearInterval(loteState.timer);

    // Marca restantes como cancelados
    for (let j = loteState.index; j < loteState.keys.length; j++) {
        document.getElementById(`lot-st-${j}`).innerHTML = badgeHtml('Cancelado', 'muted');
    }
    loteFinalizar('Lote cancelado pelo usuario.');
}

function loteFinalizar(msg) {
    clearInterval(loteState?.timer);
    const pct = loteState ? Math.round((loteState.index / loteState.keys.length) * 100) : 100;
    document.getElementById('lot-bar').style.width = '100%';
    document.getElementById('lot-status-text').textContent = msg;
    document.getElementById('lot-countdown').textContent = '✓';
    document.getElementById('lot-sub-text').textContent = '';
    document.getElementById('lot-pausar').style.display  = 'none';
    document.getElementById('lot-retomar').style.display = 'none';
    document.getElementById('lot-cancelar').style.display = 'none';
    document.getElementById('lot-iniciar').style.display = '';
    document.getElementById('lot-chaves').disabled = false;
    document.getElementById('lot-company').disabled = false;
    loteState = null;
}

// ─── UPLOAD XML ────────────────────────────────────────────────────────────────

let uploadState = null;

function uploadContarArquivos(input) {
    const n = input.files.length;
    document.getElementById('up-count').textContent = n > 0 ? `${n} arquivo(s) selecionado(s)` : 'Nenhum arquivo selecionado';
}

async function uploadIniciar() {
     const company = document.getElementById('up-company').value;
     const files   = document.getElementById('up-xml').files;

     if (!company) { alert('Selecione a empresa.'); return; }
     if (files.length === 0) { alert('Selecione os arquivos XML.'); return; }
     if (files.length > 20) { alert('Você pode selecionar no máximo 20 arquivos XML.'); return; }

     uploadState = { index: 0, total: files.length, files, company, cancelled: false };
     const total = files.length;

     // Monta tabela
     const tbody = document.getElementById('up-tbody');
     tbody.innerHTML = Array.from(files).map((f, i) => `
         <tr id="up-row-${i}">
             <td>${i + 1}</td>
             <td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${f.name}">${f.name}</td>
             <td id="up-st-${i}">${badgeHtml('Aguardando', 'muted')}</td>
             <td id="up-key-${i}" style="font-size:11px">—</td>
             <td id="up-emit-${i}" style="font-size:11px">—</td>
             <td id="up-man-${i}" style="font-size:11px">—</td>
             <td id="up-det-${i}" style="font-size:11px;color:var(--muted)">—</td>
         </tr>`).join('');

     document.getElementById('up-progresso').style.display = '';
     document.getElementById('up-btn').disabled = true;
     document.getElementById('up-xml').disabled = true;
     document.getElementById('up-company').disabled = true;

     await uploadProcessarProximo();
 }

async function uploadProcessarProximo() {
    if (!uploadState || uploadState.cancelled) { uploadFinalizar('Cancelado'); return; }
    if (uploadState.index >= uploadState.total) { uploadFinalizar('Concluido!'); return; }

    const i      = uploadState.index;
    const file   = uploadState.files[i];
    const total  = uploadState.total;

    document.getElementById(`up-st-${i}`).innerHTML = `<span class="badge warn"><span class="spin">⟳</span> Enviando</span>`;
    document.getElementById(`up-row-${i}`).className = 'processing-row';
    uploadAtualizarProgresso(i, total, file.name);

    try {
        const fd = new FormData();
        fd.append('company_id', uploadState.company);
        fd.append('xml_file', file);

        const resp = await fetch('{{ route('busca-chave.upload-json') }}', {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: fd,
        });

        if (!resp.ok) {
            const text = await resp.text();
            throw new Error('HTTP ' + resp.status + ': ' + text.substring(0, 200));
        }

        const data = await resp.json();

             if (data.ok) {
                 const label = data.action === 'replaced' ? 'Substituido' : 'Cadastrado';
             document.getElementById(`up-st-${i}`).innerHTML = badgeHtml(label, 'ok');
             document.getElementById(`up-key-${i}`).textContent = data.access_key.substring(0, 10) + '...';
             document.getElementById(`up-emit-${i}`).textContent = data.issuer || '—';
             document.getElementById(`up-man-${i}`).innerHTML = data.manifest ? badgeHtml('Ciencia', 'ok') : badgeHtml('—', 'muted');
             document.getElementById(`up-det-${i}`).textContent = data.manifest?.protocol || `${data.amount} | ${data.issued_at}`;
         } else {
             document.getElementById(`up-st-${i}`).innerHTML = badgeHtml('Erro', 'danger');
             document.getElementById(`up-det-${i}`).textContent = data.error || 'Erro desconhecido';
         }
    } catch (e) {
        document.getElementById(`up-st-${i}`).innerHTML = badgeHtml('Erro', 'danger');
        document.getElementById(`up-det-${i}`).textContent = e.message;
    }

    document.getElementById(`up-row-${i}`).className = '';
    uploadState.index++;

    if (uploadState.index >= uploadState.total || uploadState.cancelled) {
        uploadFinalizar(uploadState.cancelled ? 'Cancelado' : 'Concluido!');
        return;
    }

    uploadProcessarProximo();
}

function uploadAtualizarProgresso(i, total, current) {
    const pct = Math.round((i / total) * 100);
    document.getElementById('up-bar').style.width = pct + '%';
    document.getElementById('up-status-text').textContent = `Processando ${i + 1} de ${total}`;
    document.getElementById('up-countdown').textContent = `${Math.round((i/total)*100)}%`;
    document.getElementById('up-sub-text').textContent = current;
}

function uploadCancelar() {
    if (!uploadState) return;
    if (!confirm('Cancelar o upload dos XMLs restantes?')) return;
    uploadState.cancelled = true;
    for (let j = uploadState.index; j < uploadState.total; j++) {
        document.getElementById(`up-st-${j}`).innerHTML = badgeHtml('Cancelado', 'muted');
    }
    uploadFinalizar('Cancelado pelo usuario.');
}

function uploadFinalizar(msg) {
    document.getElementById('up-bar').style.width = '100%';
    document.getElementById('up-status-text').textContent = msg;
    document.getElementById('up-countdown').textContent = '✓';
    document.getElementById('up-sub-text').textContent = '';
    document.getElementById('up-cancelar').style.display = 'none';
    document.getElementById('up-btn').disabled = false;
    document.getElementById('up-xml').disabled = false;
    document.getElementById('up-company').disabled = false;
    uploadState = null;
}
</script>
@endsection

@push('styles')
<style>
    table.batch-table { min-width: 0; }
    .batch-table th, .batch-table td { border-bottom: 1px solid var(--border); vertical-align: middle; }
    .batch-table tr:last-child td { border-bottom: 0; }
</style>
@endpush