@extends('layouts.app')

@section('title', 'NFS-e - Documentos de Saida')
@section('page_title', 'NFS-e')
@section('page_subtitle', 'Notas Fiscais de Servico importadas')
@section('page_actions')
    <a class="button" href="{{ route('home') }}">Voltar</a>
    <a class="button primary" href="{{ route('outgoing-xml.nfse.create') }}">Cadastrar</a>
@endsection

@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-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; }
    .pill.ok     { background: #dcfce7; color: #15803d; }
    .pill.warn   { background: #fef3c7; color: #92400e; }
    .pill.danger { background: #fee2e2; color: #b91c1c; }
    .pill.neutral { background: #e5edf2; color: #475569; }
    .act-cell { white-space: nowrap; }
    .act-cell a, .act-cell button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; text-decoration: none; vertical-align: middle; }
    .act-cell a:hover, .act-cell button:hover { background: var(--surface-2); }
    .act-cell .del:hover { border-color: #fecaca; color: var(--danger); background: #fff7f7; }
    @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>Documentos NFS-e</h2>
            <span>{{ $documents->total() }} registro(s)</span>
        </div>
    </div>

    <form class="filter-bar" method="GET" action="{{ route('outgoing-xml.nfse.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="Cod. verificacao, CNPJ, prestador ou tomador">
        </div>
        <div class="filter-actions">
            <button class="button primary" type="submit">Filtrar</button>
            @if ($search || $companyFilter)
                <a class="button" href="{{ route('outgoing-xml.nfse.index') }}">Limpar</a>
            @endif
        </div>
    </form>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Cod. Verificacao</th>
                    <th>Emissao</th>
                    <th>Prestador</th>
                    <th>Tomador</th>
                    <th>Valor</th>
                    <th>Status</th>
                    <th>XML</th>
                    <th style="width:100px">Acoes</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($documents as $doc)
                    @php
                        $key = $doc->access_key;
                        $keyShort = $key ? Str::limit($key, 20) : '-';
                    @endphp
                    <tr>
                        <td><span class="key-cell" title="{{ $key }}">{{ $keyShort }}</span></td>
                        <td style="white-space:nowrap">{{ $doc->issued_at?->format('d/m/Y') ?? '-' }}</td>
                        <td>
                            <div>{{ Str::limit($doc->issuer_name ?? '-', 30) }}</div>
                            @if ($doc->issuer_cnpj) <div class="row-text">{{ $doc->issuer_cnpj }}</div> @endif
                        </td>
                        <td>
                            <div>{{ Str::limit($doc->recipient_name ?? '-', 30) }}</div>
                            @if ($doc->recipient_cnpj) <div class="row-text">{{ $doc->recipient_cnpj }}</div>
                            @elseif ($doc->recipient_cpf) <div class="row-text">CPF {{ $doc->recipient_cpf }}</div>
                            @endif
                        </td>
                        <td style="white-space:nowrap">{{ $doc->total_amount ? 'R$ '.number_format((float) $doc->total_amount, 2, ',', '.') : '-' }}</td>
                        <td>
                            @php
                                $statusMap = [
                                    'pending'     => ['Pendente', 'neutral'],
                                    'authorized'  => ['Autorizado', 'ok'],
                                    'cancelled'   => ['Cancelado', 'danger'],
                                    'denied'      => ['Denegado', 'danger'],
                                ];
                                [$sLabel, $sClass] = $statusMap[$doc->status] ?? [$doc->status, 'neutral'];
                            @endphp
                            <span class="pill {{ $sClass }}">{{ $sLabel }}</span>
                        </td>
                        <td>
                            @if ($doc->xml_content)
                                <span class="pill ok">OK</span>
                            @else
                                <span class="pill neutral">Sem XML</span>
                            @endif
                        </td>
                        <td class="act-cell">
                            <a href="{{ route('outgoing-xml.show', $doc) }}" title="Visualizar">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </a>
                            @if ($doc->xml_content)
                                <a href="{{ route('outgoing-xml.download', $doc) }}" title="Download XML">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                </a>
                            @endif
                            <form class="inline-form" method="POST" action="{{ route('outgoing-xml.destroy', $doc) }}"
                                  onsubmit="return confirm('Excluir este documento permanentemente?')">
                                @csrf @method('DELETE')
                                <button class="del" type="submit" title="Excluir">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8"><div class="empty">Nenhum documento NFS-e cadastrado.</div></td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if ($documents->hasPages())
        <div class="pagination-bar" style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border)">
            @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" style="font-size:13px;color:var(--muted);margin:0 auto">
                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