<x-layouts.guest title="Cadastrar" wide heading="Cadastre sua empresa"
                sub="14 dias de teste. Depois do cadastro você envia o certificado A1 e o monitor começa a baixar os XMLs.">
    <form method="POST" action="{{ route('register') }}" class="space-y-8">
        @csrf

        @if ($errors->any())
            <div class="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                <ul class="space-y-1">
                    @foreach ($errors->all() as $erro)
                        <li>{{ $erro }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <fieldset class="space-y-5">
            <legend class="mb-4 text-sm font-semibold tracking-wide text-slate-400 uppercase">Dados da empresa</legend>

            <div class="grid gap-5 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label for="razao_social" class="label">Razão social</label>
                    <input id="razao_social" name="razao_social" value="{{ old('razao_social') }}" required
                           class="input @error('razao_social') input-error @enderror">
                </div>

                <div class="sm:col-span-2">
                    <label for="nome_fantasia" class="label">Nome fantasia <span class="font-normal text-slate-400">(opcional)</span></label>
                    <input id="nome_fantasia" name="nome_fantasia" value="{{ old('nome_fantasia') }}" class="input">
                </div>

                <div>
                    <label for="cnpj" class="label">CNPJ</label>
                    <input id="cnpj" name="cnpj" value="{{ old('cnpj') }}" required inputmode="numeric"
                           placeholder="00.000.000/0000-00" class="input tabular @error('cnpj') input-error @enderror">
                </div>

                <div>
                    <label for="ie" class="label">Inscrição estadual <span class="font-normal text-slate-400">(opcional)</span></label>
                    <input id="ie" name="ie" value="{{ old('ie') }}" class="input tabular">
                </div>

                <div>
                    <label for="uf" class="label">UF</label>
                    <select id="uf" name="uf" required class="input @error('uf') input-error @enderror">
                        <option value="">Selecione</option>
                        @foreach ($ufs as $uf)
                            <option value="{{ $uf }}" @selected(old('uf') === $uf)>{{ $uf }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="telefone" class="label">Telefone</label>
                    <input id="telefone" name="telefone" value="{{ old('telefone') }}" class="input tabular"
                           placeholder="(00) 00000-0000">
                </div>
            </div>
        </fieldset>

        <fieldset class="space-y-5">
            <legend class="mb-4 text-sm font-semibold tracking-wide text-slate-400 uppercase">Administrador da conta</legend>

            <div class="grid gap-5 sm:grid-cols-2">
                <div>
                    <label for="name" class="label">Seu nome</label>
                    <input id="name" name="name" value="{{ old('name') }}" required
                           class="input @error('name') input-error @enderror">
                </div>

                <div>
                    <label for="email" class="label">E-mail de acesso</label>
                    <input id="email" name="email" type="email" value="{{ old('email') }}" required
                           autocomplete="username" class="input @error('email') input-error @enderror">
                </div>

                <div>
                    <label for="password" class="label">Senha</label>
                    <input id="password" name="password" type="password" required autocomplete="new-password"
                           class="input @error('password') input-error @enderror">
                    <p class="mt-1.5 text-xs text-slate-500">Mínimo de 8 caracteres, com letras e números.</p>
                </div>

                <div>
                    <label for="password_confirmation" class="label">Confirme a senha</label>
                    <input id="password_confirmation" name="password_confirmation" type="password" required
                           autocomplete="new-password" class="input">
                </div>
            </div>
        </fieldset>

        <label class="flex cursor-pointer items-start gap-3 text-sm text-slate-600">
            <input type="checkbox" name="termos" value="1" @checked(old('termos'))
                   class="mt-0.5 size-4 cursor-pointer rounded border-slate-300 text-brand-700 focus:ring-brand-500">
            <span>
                Declaro que represento a empresa informada e autorizo o uso do certificado digital A1
                para consultar, em nome dela, os documentos fiscais destinados ao seu CNPJ.
            </span>
        </label>

        <button type="submit" class="btn-primary w-full">Criar conta</button>
    </form>

    <p class="mt-8 text-center text-sm text-slate-500">
        Já tem conta?
        <a href="{{ route('login') }}" class="font-semibold text-brand-700 hover:text-brand-800">Entrar</a>
    </p>
</x-layouts.guest>
