@extends('layouts.app')
@section('title', 'Download de XMLs - ERP-PLUS')
@section('page_title', 'Download de XMLs')
@section('page_subtitle', 'Pesquise NF-es por periodo e empresa e baixe os XMLs em ZIP.')

@push('styles')
<style>
    .filter-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; align-items: flex-end; }
    .filter-row .form-field { display: grid; gap: 4px; }
    .filter-row label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
    .filter-row select, .filter-row input { min-height: 38px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font: inherit; background: #fff; }
    .filter-row select { min-width: 200px; }
    .filter-row input  { min-width: 150px; }
    .sel-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
    .dl-table td, .dl-table th { padding: 11px 14px; font-size: 13px; }
    .check-col { width: 38px; text-align: center; }
    .key-mono { font-family: monospace; font-size: 12px; }
    #dl-progress { display: none; }
</style>
@endpush

@section('content')

<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Filtros</h2>
            <span>Selecione o periodo, empresa e tipo de XML. Maximo de 500 documentos por pesquisa.</span>
        </div>
    </div>

    <div class="filter-row">
        <div class="form-field">
            <label>Empresa</label>
            <select id="f-company">
                <option value="">Todas</option>
                @foreach ($companies as $c)
                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-field">
            <label>Emissao de</label>
            <input type="date" id="f-from">
        </div>
        <div class="form-field">
            <label>ate</label>
            <input type="date" id="f-to">
        </div>
        <div class="form-field">
            <label>Tipo XML</label>
            <select id="f-type">
                <option value="any">Todos com XML</option>
                <option value="full">Somente XML completo</option>
                <option value="summary">Somente resumo</option>
            </select>
        </div>
        <div style="display:flex;gap:8px;align-items:flex-end">
            <button class="button primary" onclick="pesquisar()" style="min-height:38px">Pesquisar</button>
        </div>
    </div>
</div>

<div class="panel" id="resultado-panel" style="display:none">
    <div class="panel-header">
        <div>
            <h2>Resultados</h2>
            <span id="result-count">0 documentos encontrados</span>
        </div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <label style="font-size:13px;display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer">
                <input type="checkbox" id="sel-all" onchange="selecionarTodos(this.checked)"
                       style="width:15px;min-height:0;accent-color:var(--primary)">
                Selecionar todos
            </label>
            <span id="sel-count" style="font-size:13px;color:var(--muted)">0 selecionados</span>
        </div>
    </div>

    <div class="sel-bar">
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            <button class="button primary" onclick="baixarZip('full')" id="btn-full">
                Baixar XML completo (ZIP)
            </button>
            <button class="button" onclick="baixarZip('summary')" id="btn-summary">
                Baixar resumos (ZIP)
            </button>
        </div>
        <span id="dl-progress" style="font-size:13px;color:var(--muted)">Gerando ZIP...</span>
    </div>

    <div class="table-wrap">
        <table class="dl-table">
            <thead>
                <tr>
                    <th class="check-col">
                        <input type="checkbox" id="sel-all2" onchange="selecionarTodos(this.checked)"
                               style="width:15px;min-height:0;accent-color:var(--primary)">
                    </th>
                    <th>Chave de acesso</th>
                    <th>Emitente</th>
                    <th>Empresa</th>
                    <th>Emissao</th>
                    <th>Valor</th>
                    <th>XML</th>
                </tr>
            </thead>
            <tbody id="result-tbody"></tbody>
        </table>
    </div>
</div>

@endsection

<script>
const SEARCH_URL = '{{ route("xml-download.search") }}';
const ZIP_URL    = '{{ route("xml-download.zip") }}';
const CSRF       = '{{ csrf_token() }}';

let allDocs = [];

async function pesquisar() {
    const params = new URLSearchParams({
        company_id: document.getElementById('f-company').value,
        date_from:  document.getElementById('f-from').value,
        date_to:    document.getElementById('f-to').value,
        xml_type:   document.getElementById('f-type').value,
    });

    document.getElementById('resultado-panel').style.display = 'none';
    document.getElementById('result-tbody').innerHTML =
        '<tr><td colspan="7" style="text-align:center;padding:20px;color:var(--muted)">Pesquisando...</td></tr>';
    document.getElementById('resultado-panel').style.display = '';

    try {
        const res  = await fetch(SEARCH_URL + '?' + params, { headers: { Accept: 'application/json' } });
        const data = await res.json();
        allDocs    = data.items || [];
        renderTabela(allDocs);
        document.getElementById('result-count').textContent = `${data.total} documento(s) encontrado(s)`;
    } catch (e) {
        document.getElementById('result-tbody').innerHTML =
            `<tr><td colspan="7"><div class="empty" style="color:var(--danger)">${e.message}</div></td></tr>`;
    }
}

function renderTabela(docs) {
    const tbody = document.getElementById('result-tbody');
    if (docs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7"><div class="empty">Nenhum documento encontrado para os filtros selecionados.</div></td></tr>';
        atualizarSel();
        return;
    }

    tbody.innerHTML = docs.map(d => `
        <tr>
            <td class="check-col">
                <input type="checkbox" class="doc-check" value="${d.id}"
                       onchange="atualizarSel()"
                       style="width:15px;min-height:0;accent-color:var(--primary)"
                       ${d.has_full_xml || d.has_summary_xml ? '' : 'disabled'}>
            </td>
            <td>
                <span class="key-mono" title="${d.access_key}">
                    ${d.access_key.substring(0, 10)}...${d.access_key.substring(34)}
                </span>
            </td>
            <td>
                <div>${d.issuer_name || '—'}</div>
                ${d.issuer_cnpj ? `<div class="row-text">${d.issuer_cnpj}</div>` : ''}
            </td>
            <td style="font-size:12px">${d.company_name}</td>
            <td style="white-space:nowrap">${d.issued_at || '—'}</td>
            <td style="white-space:nowrap">${d.total_amount || '—'}</td>
            <td>
                ${d.has_full_xml    ? '<span class="pill ok"  style="min-width:0;padding:3px 8px;font-size:11px">Completo</span>' : ''}
                ${d.has_summary_xml && !d.has_full_xml ? '<span class="pill" style="min-width:0;padding:3px 8px;font-size:11px;background:#fef3c7;color:#92400e">Resumo</span>' : ''}
                ${!d.has_full_xml && !d.has_summary_xml ? '<span style="font-size:11px;color:var(--muted)">Sem XML</span>' : ''}
            </td>
        </tr>`).join('');

    atualizarSel();
}

function selecionarTodos(checked) {
    document.querySelectorAll('.doc-check:not(:disabled)').forEach(cb => cb.checked = checked);
    document.getElementById('sel-all').checked  = checked;
    document.getElementById('sel-all2').checked = checked;
    atualizarSel();
}

function atualizarSel() {
    const total    = document.querySelectorAll('.doc-check:not(:disabled)').length;
    const checked  = document.querySelectorAll('.doc-check:checked').length;
    document.getElementById('sel-count').textContent = `${checked} selecionado(s)`;
    document.getElementById('sel-all').checked  = total > 0 && checked === total;
    document.getElementById('sel-all2').checked = total > 0 && checked === total;
    document.getElementById('btn-full').disabled    = checked === 0;
    document.getElementById('btn-summary').disabled = checked === 0;
}

async function baixarZip(tipo) {
    const ids = [...document.querySelectorAll('.doc-check:checked')].map(cb => cb.value);
    if (ids.length === 0) { alert('Selecione ao menos um documento.'); return; }

    const progress = document.getElementById('dl-progress');
    progress.style.display = '';
    progress.textContent = `Gerando ZIP com ${ids.length} arquivo(s)...`;

    try {
        const res = await fetch(ZIP_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ ids, xml_type: tipo }),
        });

        if (!res.ok) {
            const err = await res.json();
            throw new Error(err.message || 'Erro ao gerar ZIP');
        }

        const blob = await res.blob();
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href     = url;
        a.download = `nfe_xmls_${new Date().toISOString().slice(0,10)}.zip`;
        a.click();
        URL.revokeObjectURL(url);
        progress.textContent = `ZIP baixado com sucesso (${ids.length} arquivo(s)).`;
    } catch (e) {
        progress.textContent = 'Erro: ' + e.message;
        progress.style.color = 'var(--danger)';
    }
}
</script>