@extends('layouts.app')
@section('title', 'XML Pendentes - ERP-PLUS')
@section('page_title', 'XML Pendentes')
@section('page_subtitle', 'NF-e sem manifestacao, sem XML completo e dentro do prazo de 90 dias.')

@push('styles')
<style>
    .key-cell { font-family: monospace; font-size: 12px; letter-spacing: .3px; }
</style>
@endpush

@section('content')

<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Filtrar</h2>
        </div>
    </div>
    <form method="GET" style="padding:16px;display:flex;gap:12px;align-items:end;flex-wrap:wrap">
        <div class="form-field" style="min-width:200px">
            <label for="company_id">Empresa</label>
            <select id="company_id" name="company_id" style="min-height:40px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;background:#fff">
                <option value="">Todas</option>
                @foreach ($companies as $company)
                    <option value="{{ $company->id }}" @selected(request('company_id') == $company->id)>{{ $company->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="display:flex;gap:8px">
            <button class="button primary" type="submit">Filtrar</button>
            <a class="button" href="{{ route('xml-pendentes.index') }}">Limpar</a>
            <a class="button" href="{{ route('xml-pendentes.export.txt', request()->query()) }}">Baixar TXT</a>
            <a class="button" href="{{ route('xml-pendentes.export.pdf', request()->query()) }}" target="_blank">Baixar PDF</a>
        </div>
    </form>
</div>

<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Documentos pendentes ({{ $documents->total() }})</h2>
            <span>Documentos sem XML completo que ainda estao dentro do prazo de 90 dias da emissao.</span>
        </div>
    </div>

    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Chave de acesso</th>
                    <th>Empresa</th>
                    <th>Emitente</th>
                    <th>Emissao</th>
                    <th>Valor</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($documents as $doc)
                    <tr>
                        <td>{{ $documents->firstItem() + $loop->index }}</td>
                        <td class="key-cell" style="font-size:11px">{{ $doc->access_key }}</td>
                        <td>{{ $doc->company->name }}</td>
                        <td>{{ $doc->issuer_name ?: '-' }}</td>
                        <td>{{ $doc->issued_at?->format('d/m/Y') ?: '-' }}</td>
                        <td>R$ {{ number_format((float) $doc->total_amount, 2, ',', '.') }}</td>
                        <td><span class="pill warn">Pendente</span></td>
                    </tr>
                @empty
                    <tr><td colspan="7" style="text-align:center;padding:24px;color:var(--muted)">Nenhum documento pendente.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
        <span style="font-size:13px;color:var(--muted)">{{ $documents->firstItem() }}–{{ $documents->lastItem() }} de {{ $documents->total() }}</span>
        <div style="display:flex;gap:6px">
            @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
            @if ($documents->hasMorePages())
                <a class="button" style="min-height:32px;font-size:13px;padding:6px 12px" href="{{ $documents->nextPageUrl() }}">Proximo</a>
            @else
                <span class="button" style="opacity:.4;cursor:default;min-height:32px;font-size:13px;padding:6px 12px">Proximo</span>
            @endif
        </div>
    </div>
</div>

@endsection