<x-layouts.app title="Certificado digital A1" subtitle="Credencial usada para consultar a SEFAZ em nome da empresa">
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2">
            <div class="card card-pad">
                @if ($company->hasCertificate())
                    <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 pb-5">
                        <div>
                            <div class="flex items-center gap-2">
                                <h2 class="text-sm font-semibold text-slate-900">Certificado instalado</h2>
                                @if ($company->certificateExpired())
                                    <span class="badge bg-rose-50 text-rose-700 ring-1 ring-rose-200">Vencido</span>
                                @elseif ($company->certificateExpiringSoon())
                                    <span class="badge bg-amber-50 text-amber-800 ring-1 ring-amber-200">Vence em breve</span>
                                @else
                                    <span class="badge bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200">Válido</span>
                                @endif
                            </div>
                            <p class="mt-2 text-sm text-slate-600">{{ $company->cert_subject }}</p>
                            <p class="tabular mt-1 text-sm text-slate-500">
                                Válido de {{ $company->cert_valid_from?->format('d/m/Y') }}
                                até {{ $company->cert_valid_to?->format('d/m/Y') }}
                            </p>
                        </div>

                        <form method="POST" action="{{ route('painel.certificado.destroy') }}"
                              onsubmit="return confirm('Remover o certificado? O monitor será desativado.')">
                            @csrf @method('DELETE')
                            <button class="btn-danger btn-sm">Remover</button>
                        </form>
                    </div>
                @endif

                <form method="POST" action="{{ route('painel.certificado.update') }}" enctype="multipart/form-data"
                      class="space-y-5 {{ $company->hasCertificate() ? 'pt-5' : '' }}">
                    @csrf

                    <h2 class="text-sm font-semibold text-slate-900">
                        {{ $company->hasCertificate() ? 'Substituir certificado' : 'Enviar certificado' }}
                    </h2>

                    <div>
                        <label for="certificado" class="label">Arquivo .pfx ou .p12</label>
                        <input id="certificado" name="certificado" type="file" accept=".pfx,.p12" required
                               class="block w-full cursor-pointer rounded-lg border border-slate-300 text-sm text-slate-600
                                      file:mr-4 file:cursor-pointer file:border-0 file:bg-slate-100 file:px-4 file:py-2.5
                                      file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
                        <p class="mt-1.5 text-xs text-slate-500">Somente certificado A1 (arquivo). Cartões e tokens A3 não funcionam em servidor.</p>
                    </div>

                    <div class="max-w-sm">
                        <label for="senha" class="label">Senha do certificado</label>
                        <input id="senha" name="senha" type="password" required autocomplete="off" class="input">
                    </div>

                    <button class="btn-primary">Validar e instalar</button>
                </form>
            </div>
        </div>

        <div class="space-y-6">
            <div class="card card-pad">
                <h2 class="text-sm font-semibold text-slate-900">Como o arquivo é guardado</h2>
                <ul class="mt-4 space-y-3 text-sm text-slate-600">
                    @foreach ([
                        'O .pfx fica em diretório privado, fora da pasta pública do servidor.',
                        'A senha é criptografada com a chave da aplicação (AES-256) antes de ir ao banco.',
                        'O certificado é usado apenas para assinar as consultas à SEFAZ em nome desta empresa.',
                        'O CNPJ do titular é conferido contra o CNPJ cadastrado no momento do envio.',
                    ] as $item)
                        <li class="flex items-start gap-2.5">
                            <svg class="mt-0.5 size-4 shrink-0 text-brand-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                            </svg>
                            {{ $item }}
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="card card-pad">
                <h2 class="text-sm font-semibold text-slate-900">Empresa</h2>
                <dl class="mt-4 space-y-3 text-sm">
                    <div class="flex justify-between gap-4">
                        <dt class="text-slate-500">Razão social</dt>
                        <dd class="text-right font-medium text-slate-900">{{ $company->razao_social }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-slate-500">CNPJ</dt>
                        <dd class="tabular text-right font-medium text-slate-900">{{ $company->cnpj_formatado }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-slate-500">UF</dt>
                        <dd class="text-right font-medium text-slate-900">{{ $company->uf }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</x-layouts.app>
