@php
    $botaoPrincipal = 'rounded-md bg-marca-700 px-4 py-2 text-sm font-medium text-white shadow-xs transition-colors hover:bg-marca-800 disabled:opacity-60';
@endphp

<x-pagina grupo="Conta" titulo="Minha conta"
          descricao="Seu nome, seu e-mail de acesso e sua senha. Perfil, vendedor ligado, filial e situação são definidos pelo administrador.">

    @if (session('ok'))
        <p class="mb-4 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-800">{{ session('ok') }}</p>
    @endif

    <div class="grid items-start gap-6 lg:grid-cols-2">
        <x-quadro titulo="Seus dados" nota="Trocar o e-mail troca o seu login.">
            <form wire:submit="salvarDados" class="space-y-4 px-5 py-5">
                <x-campo rotulo="Nome" id="name" wire:model="name" autocomplete="name" :erro="$errors->first('name')"/>
                <x-campo rotulo="E-mail" id="email" tipo="email" wire:model.live="email" autocomplete="email" :erro="$errors->first('email')"/>

                @if ($email !== $usuario->email)
                    <x-campo rotulo="Senha atual" id="senha-atual-dados" tipo="password" wire:model="senhaAtual" autocomplete="current-password"
                             nota="para confirmar a troca de e-mail" :erro="$errors->first('senhaAtual')"/>
                @endif

                <div class="flex justify-end border-t border-fio pt-4">
                    <button type="submit" wire:loading.attr="disabled" wire:target="salvarDados" class="{{ $botaoPrincipal }}">
                        <span wire:loading.remove wire:target="salvarDados">Salvar dados</span>
                        <span wire:loading wire:target="salvarDados">Salvando…</span>
                    </button>
                </div>
            </form>
        </x-quadro>

        <div class="space-y-6">
            <x-quadro titulo="Trocar a senha" nota="Ao menos 12 caracteres.">
                <form wire:submit="trocarSenha" class="space-y-4 px-5 py-5">
                    <x-campo rotulo="Senha atual" id="senha-atual" tipo="password" wire:model="senhaAtual" autocomplete="current-password"
                             :erro="$errors->first('senhaAtual')"/>
                    <x-campo rotulo="Nova senha" id="senha-nova" tipo="password" wire:model="senhaNova" autocomplete="new-password"
                             :erro="$errors->first('senhaNova')"/>
                    <x-campo rotulo="Repita a nova senha" id="senha-nova-confirmacao" tipo="password" wire:model="senhaNovaConfirmacao" autocomplete="new-password"
                             :erro="$errors->first('senhaNovaConfirmacao')"/>

                    <div class="flex justify-end border-t border-fio pt-4">
                        <button type="submit" wire:loading.attr="disabled" wire:target="trocarSenha" class="{{ $botaoPrincipal }}">
                            <span wire:loading.remove wire:target="trocarSenha">Trocar senha</span>
                            <span wire:loading wire:target="trocarSenha">Trocando…</span>
                        </button>
                    </div>
                </form>
            </x-quadro>

            <x-quadro titulo="Seu acesso" nota="Só o administrador muda isto.">
                <dl class="divide-y divide-fio text-sm">
                    <div class="flex items-center justify-between gap-4 px-5 py-3">
                        <dt class="text-suave">Perfil</dt>
                        <dd class="font-medium text-tinta">{{ $usuario->perfil->rotulo() }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 px-5 py-3">
                        <dt class="text-suave">Vendedor ligado</dt>
                        <dd class="font-medium text-tinta">
                            @if ($usuario->vendedor)
                                {{ $usuario->vendedor->nome }}
                            @else
                                <span class="text-suave">nenhum</span>
                            @endif
                        </dd>
                    </div>
                    @if ($usuario->perfil === \App\Perfil::Gerente)
                        {{-- O gerente vê a equipe desta filial; sem ela, não vê ninguém. --}}
                        <div class="flex items-center justify-between gap-4 px-5 py-3">
                            <dt class="text-suave">Equipe da filial</dt>
                            <dd class="font-medium text-tinta">
                                @php $filial = $usuario->unidade_id ? \Illuminate\Support\Facades\DB::table('unidades')->where('id', $usuario->unidade_id)->value('nome') : null; @endphp
                                @if ($filial)
                                    <x-filial :nome="$filial"/>
                                @else
                                    <span class="text-suave">nenhuma</span>
                                @endif
                            </dd>
                        </div>
                    @endif
                    <div class="flex items-center justify-between gap-4 px-5 py-3">
                        <dt class="text-suave">Situação</dt>
                        <dd>
                            <span class="rounded-sm bg-emerald-50 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.05em] text-emerald-800 ring-1 ring-emerald-200">ativo</span>
                        </dd>
                    </div>
                </dl>
            </x-quadro>
        </div>
    </div>
</x-pagina>