<x-layouts.app title="Certificados digitais" subtitle="Situação do certificado A1 de cada empresa">
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <a href="{{ route('master.certificados') }}"
           class="{{ $filtro === '' ? 'ring-2 ring-brand-500' : '' }} block rounded-xl">
            <x-stat label="Empresas" :value="number_format($resumo['total'], 0, ',', '.')" tone="brand" />
        </a>
        <a href="{{ route('master.certificados', ['status' => 'ok']) }}"
           class="{{ $filtro === 'ok' ? 'ring-2 ring-brand-500' : '' }} block rounded-xl">
            <x-stat label="Em dia" :value="number_format($resumo['ok'], 0, ',', '.')" tone="emerald" />
        </a>
        <a href="{{ route('master.certificados', ['status' => 'vencendo']) }}"
           class="{{ $filtro === 'vencendo' ? 'ring-2 ring-brand-500' : '' }} block rounded-xl">
            <x-stat label="Vencem em 30 dias" :value="number_format($resumo['vencendo'], 0, ',', '.')" tone="amber" />
        </a>
        <a href="{{ route('master.certificados', ['status' => 'vencido']) }}"
           class="{{ $filtro === 'vencido' ? 'ring-2 ring-brand-500' : '' }} block rounded-xl">
            <x-stat label="Vencidos" :value="number_format($resumo['vencido'], 0, ',', '.')"
                    :hint="$resumo['sem'].' sem certificado'" tone="rose" />
        </a>
    </div>

    @if ($filtro)
        <p class="mt-4 text-sm text-slate-500">
            Filtrando por <strong>{{ $filtro }}</strong>.
            <a href="{{ route('master.certificados') }}" class="font-semibold text-brand-700 hover:text-brand-800">Ver todas</a>
        </p>
    @endif

    <div class="card mt-6 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="th">Empresa</th>
                        <th class="th">Titular do certificado</th>
                        <th class="th">Validade</th>
                        <th class="th">Situação</th>
                        <th class="th">Monitor</th>
                        <th class="th sr-only">Ações</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($empresas as $empresa)
                        <tr x-data="{ enviando: false }" class="align-top">
                            <td class="td">
                                <a href="{{ route('master.empresas.show', $empresa) }}" class="font-medium text-slate-900 hover:text-brand-700">
                                    {{ $empresa->razao_social }}
                                </a>
                                <p class="tabular text-xs text-slate-500">{{ $empresa->cnpj_formatado }}</p>
                            </td>

                            <td class="td text-xs text-slate-600">{{ $empresa->cert_subject ?: '—' }}</td>

                            <td class="td tabular whitespace-nowrap">
                                {{ $empresa->cert_valid_to?->format('d/m/Y') ?: '—' }}
                            </td>

                            <td class="td">
                                @switch($situacoes[$empresa->id])
                                    @case('sem')
                                        <span class="badge bg-slate-100 text-slate-600">sem certificado</span>
                                        @break
                                    @case('vencido')
                                        <span class="badge bg-rose-50 text-rose-700 ring-1 ring-rose-200">vencido</span>
                                        @break
                                    @case('vencendo')
                                        <span class="badge bg-amber-50 text-amber-800 ring-1 ring-amber-200">vence em breve</span>
                                        @break
                                    @default
                                        <span class="badge bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200">válido</span>
                                @endswitch
                            </td>

                            <td class="td">
                                <span class="badge {{ $empresa->monitor_enabled ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600' }}">
                                    {{ $empresa->monitor_enabled ? 'ativo' : 'pausado' }}
                                </span>
                            </td>

                            <td class="td text-right whitespace-nowrap">
                                <button type="button" @click="enviando = !enviando" class="btn-secondary btn-sm">
                                    {{ $empresa->hasCertificate() ? 'Substituir' : 'Instalar' }}
                                </button>

                                <div x-show="enviando" x-cloak class="mt-3 w-72 rounded-lg bg-slate-50 p-4 text-left">
                                    <form method="POST" action="{{ route('master.certificados.store', $empresa) }}"
                                          enctype="multipart/form-data" class="space-y-3">
                                        @csrf

                                        <div>
                                            <label class="label">Arquivo .pfx ou .p12</label>
                                            <input type="file" name="certificado" accept=".pfx,.p12" required
                                                   class="block w-full cursor-pointer rounded-lg border border-slate-300 text-xs
                                                          file:mr-2 file:cursor-pointer file:border-0 file:bg-slate-200 file:px-2 file:py-1.5
                                                          file:text-xs file:font-semibold">
                                        </div>

                                        <div>
                                            <label class="label">Senha do certificado</label>
                                            <input type="password" name="senha" required autocomplete="off" class="input">
                                        </div>

                                        <div class="flex gap-2">
                                            <button class="btn-primary btn-sm">Instalar</button>
                                            <button type="button" @click="enviando = false" class="btn-secondary btn-sm">Cancelar</button>
                                        </div>
                                    </form>

                                    @if ($empresa->hasCertificate())
                                        <form method="POST" action="{{ route('master.certificados.destroy', $empresa) }}"
                                              class="mt-3 border-t border-slate-200 pt-3"
                                              onsubmit="return confirm('Remover o certificado de {{ $empresa->razao_social }}? O monitor será desativado.')">
                                            @csrf @method('DELETE')
                                            <button class="btn-danger btn-sm w-full">Remover certificado</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-16 text-center text-sm text-slate-500">
                                Nenhuma empresa neste filtro.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <p class="mt-4 text-xs text-slate-500">
        Certificado vencido para o monitor da empresa: sem ele a SEFAZ recusa a consulta.
        O arquivo fica em diretório privado e a senha é criptografada com a chave da aplicação.
    </p>
</x-layouts.app>
