@extends('layouts.app')

@section('title', 'XML Tratamento - ERP-PLUS')
@section('page_title', 'XML Tratamento')
@section('page_subtitle', 'Listagem de documentos com filtros para download e gerenciamento de XMLs.')

@push('styles')
<style>
    .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); align-items: flex-end; }
    .filter-field { display: grid; gap: 4px; }
    .filter-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
    .filter-field input, .filter-field select { min-height: 34px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--text); font-family: inherit; }
    .filter-field input { min-width: 200px; }
    .filter-field select { min-width: 140px; }
    .filter-field input[type="date"] { min-width: 140px; }
    .filter-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
    .key-cell { font-family: monospace; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
    .pagination-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
    .pagination-bar .pages { font-size: 13px; color: var(--muted); margin: 0 auto; }
    .inline-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    @media (max-width: 840px) {
        .filter-bar { gap: 8px; }
        .filter-field input { min-width: 140px; }
        .filter-actions { margin-left: 0; width: 100%; }
    }
</style>
@endpush

@section('content')
<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Notas encontradas</h2>
            <span>{{ $documents->total() }} nota(s) @if ($hasFilters) com filtros aplicados @endif</span>
        </div>
        <div style="display:flex; gap:8px; font-size:13px; color:var(--muted); align-items:center;">
            <span>XML completo: <strong>{{ $fullDocumentsCount }}</strong></span>
            <span>Resumo: <strong>{{ $summaryDocumentsCount }}</strong></span>
        </div>
    </div>

    {{-- Filter bar --}}
    <form class="filter-bar" method="GET" action="{{ route('xml-tratamento.index') }}">
        <div class="filter-field">
            <label>Empresa</label>
            <select name="company_id">
                <option value="">Todas</option>
                @foreach ($companies as $company)
                    <option value="{{ $company->id }}" @selected($companyFilter == $company->id)>{{ $company->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="filter-field">
            <label>Busca</label>
            <input type="search" name="q" value="{{ $search }}" placeholder="Chave, CNPJ ou fornecedor">
        </div>

        <div class="filter-field">
            <label>Emissao de</label>
            <input type="date" name="date_from" value="{{ $dateFrom }}">
        </div>

        <div class="filter-field">
            <label>ate</label>
            <input type="date" name="date_to" value="{{ $dateTo }}">
        </div>

        <div class="filter-field">
            <label>XML</label>
            <select name="xml">
                <option value="all"     @selected($xmlFilter === 'all')>Todos</option>
                <option value="full"    @selected($xmlFilter === 'full')>Completo</option>
                <option value="summary" @selected($xmlFilter === 'summary')>Resumo</option>
            </select>
        </div>

        <div class="filter-field">
            <label>Ciencia</label>
            <select name="event">
                <option value="all"             @selected($eventFilter === 'all')>Todas</option>
                <option value="pending_ciencia" @selected($eventFilter === 'pending_ciencia')>Pendente</option>
                <option value="ciencia"         @selected($eventFilter === 'ciencia')>Com ciencia</option>
            </select>
        </div>

        <div class="filter-actions">
            <button class="button primary" type="submit">Filtrar</button>
            @if ($hasFilters)
                <a class="button" href="{{ route('xml-tratamento.index') }}">Limpar</a>
            @endif
        </div>
    </form>

    <form method="POST" action="{{ route('xml-tratamento.buscar-xml') }}" id="batch-form">
        @csrf
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th style="width:32px"><input type="checkbox" id="select-all" onchange="document.querySelectorAll('.doc-checkbox').forEach(c=>c.checked=this.checked)"></th>
                    <th>Chave de acesso</th>
                    <th>Emissao</th>
                    <th>Fornecedor</th>
                    <th>Valor</th>
                    <th>XML</th>
                    <th>Ciencia</th>
                    <th>Acoes</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($documents as $document)
                    @php
                        $key = $document->access_key;
                        $keyShort = strlen($key) === 44
                            ? substr($key, 0, 10).'...'.substr($key, -10)
                            : $key;
                    @endphp
                    <tr @if($document->naoPodeCiencia) style="background:#fef2f2" @endif>
                        <td><input class="doc-checkbox" type="checkbox" name="document_ids[]" value="{{ $document->id }}"></td>
                        <td>
                            <span class="key-cell" title="{{ $key }}">{{ $keyShort }}</span>
                            <div class="row-text">{{ $document->company->name }} &middot; NSU {{ $document->nsu ?? '-' }}</div>
                        </td>
                        <td style="white-space:nowrap">{{ $document->issued_at?->format('d/m/Y') ?? '-' }}</td>
                        <td>
                            <div>{{ Str::limit($document->issuer_name ?? '-', 30) }}</div>
                            @if ($document->issuer_cnpj)
                                <div class="row-text">{{ $document->issuer_cnpj }}</div>
                            @endif
                        </td>
                        <td style="white-space:nowrap">
                            {{ $document->total_amount ? 'R$ '.number_format((float) $document->total_amount, 2, ',', '.') : '-' }}
                        </td>
                        <td>
                            @if ($document->xml_content)
                                <span class="pill ok">Completo</span>
                            @elseif ($document->raw_summary_xml)
                                <span class="pill warn">Resumo</span>
                            @else
                                <span class="pill neutral">Sem XML</span>
                            @endif
                        </td>
                        <td>
                            @if ($document->hasCiencia)
                                <span class="pill ok">Ciencia</span>
                            @else
                                <span class="pill">Pendente</span>
                            @endif
                        </td>
                        <td>
                            <div class="inline-actions">
                                @can('manifest-documents')
                                    @if ($document->naoPodeCiencia)
                                        <span class="pill" style="background:#fecaca;color:#991b1b;font-size:11px">Indisponivel</span>
                                    @elseif (! $document->hasCiencia)
                                        <form class="inline-form" method="POST" action="{{ route('sync.documents.acknowledge', $document) }}">
                                            @csrf
                                            <button class="button primary" type="submit" style="min-height:32px;font-size:12px;padding:6px 10px">Dar ciencia</button>
                                        </form>
                                    @endif
                                @endcan

                                @if ($document->xml_content)
                                    <a class="button" style="min-height:32px;font-size:12px;padding:6px 10px"
                                       href="{{ route('sync.documents.xml.full', $document) }}">XML</a>
                                @else
                                    @can('sync-documents')
                                        <form class="inline-form" method="POST" action="{{ route('sync.documents.fetch_xml', $document) }}">
                                            @csrf
                                            <button class="button" style="min-height:32px;font-size:12px;padding:6px 10px" type="submit">Buscar XML</button>
                                        </form>
                                    @endcan
                                @endif

                                @if ($document->raw_summary_xml)
                                    <a class="button" style="min-height:32px;font-size:12px;padding:6px 10px"
                                       href="{{ route('sync.documents.xml.summary', $document) }}">Resumo</a>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8">
                            <div class="empty">
                                @if ($hasFilters)
                                    Nenhum documento encontrado com os filtros aplicados.
                                    <a href="{{ route('xml-tratamento.index') }}">Limpar filtros</a>
                                @else
                                    Nenhum documento sincronizado ainda.
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @can('sync-documents')
        <div style="padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center">
            <button class="button primary" type="submit" style="min-height:34px;font-size:13px">Buscar XML selecionados</button>
            <span style="font-size:12px;color:var(--muted)" id="selected-count">Nenhum selecionado</span>
        </div>
    @endcan
    </form>

    <script>
        document.querySelectorAll('.doc-checkbox').forEach(cb => {
            cb.addEventListener('change', function() {
                const checked = document.querySelectorAll('.doc-checkbox:checked').length;
                document.getElementById('selected-count').textContent = checked > 0 ? checked + ' selecionado(s)' : 'Nenhum selecionado';
            });
        });
    </script>

    @if ($documents->hasPages())
        <div class="pagination-bar">
            @if ($documents->onFirstPage())
                <span class="button" style="opacity:.4;cursor:default;min-height:32px;font-size:13px;padding:6px 12px">Anterior</span>
            @else
                <a class="button" style="min-height:32px;font-size:13px;padding:6px 12px" href="{{ $documents->previousPageUrl() }}">Anterior</a>
            @endif

            <span class="pages">
                Pagina {{ $documents->currentPage() }} de {{ $documents->lastPage() }}
                &mdash; {{ $documents->total() }} registro(s)
            </span>

            @if ($documents->hasMorePages())
                <a class="button" style="min-height:32px;font-size:13px;padding:6px 12px" href="{{ $documents->nextPageUrl() }}">Proxima</a>
            @else
                <span class="button" style="opacity:.4;cursor:default;min-height:32px;font-size:13px;padding:6px 12px">Proxima</span>
            @endif
        </div>
    @endif
</div>
@endsection