<x-layouts.app title="Usuários" subtitle="Quem tem acesso ao painel desta empresa">
    <div class="grid gap-6 lg:grid-cols-3">
        {{-- Lista --}}
        <div class="lg:col-span-2">
            <div class="card 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">Usuário</th>
                                <th class="th">Perfil</th>
                                <th class="th">Último acesso</th>
                                <th class="th">Situação</th>
                                <th class="th sr-only">Ações</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($usuarios as $usuario)
                                <tr x-data="{ editando: false }">
                                    <td class="td">
                                        <p class="font-medium text-slate-900">{{ $usuario->name }}</p>
                                        <p class="text-xs text-slate-500">{{ $usuario->email }}</p>
                                    </td>
                                    <td class="td">{{ $usuario->roleLabel() }}</td>
                                    <td class="td tabular">{{ $usuario->last_login_at?->format('d/m/Y H:i') ?: '—' }}</td>
                                    <td class="td">
                                        <span class="badge {{ $usuario->is_active ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200' : 'bg-slate-100 text-slate-600' }}">
                                            {{ $usuario->is_active ? 'Ativo' : 'Inativo' }}
                                        </span>
                                    </td>
                                    <td class="td text-right whitespace-nowrap">
                                        <button type="button" @click="editando = !editando" class="btn-secondary btn-sm">Editar</button>

                                        <div x-show="editando" x-cloak class="mt-3 rounded-lg bg-slate-50 p-4 text-left">
                                            <form method="POST" action="{{ route('painel.usuarios.update', $usuario) }}" class="space-y-3">
                                                @csrf @method('PUT')

                                                <div>
                                                    <label class="label">Nome</label>
                                                    <input name="name" value="{{ $usuario->name }}" required class="input">
                                                </div>

                                                <div>
                                                    <label class="label">Perfil</label>
                                                    <select name="role" class="input">
                                                        <option value="admin" @selected($usuario->role === 'admin')>Administrador</option>
                                                        <option value="user" @selected($usuario->role === 'user')>Operador</option>
                                                    </select>
                                                </div>

                                                <div>
                                                    <label class="label">Nova senha <span class="font-normal text-slate-400">(opcional)</span></label>
                                                    <input name="password" type="password" autocomplete="new-password" class="input">
                                                </div>

                                                <div>
                                                    <label class="label">Confirmar nova senha</label>
                                                    <input name="password_confirmation" type="password" autocomplete="new-password" class="input">
                                                </div>

                                                <label class="flex cursor-pointer items-center gap-2 text-sm text-slate-600">
                                                    <input type="checkbox" name="is_active" value="1" @checked($usuario->is_active)
                                                           class="size-4 cursor-pointer rounded border-slate-300 text-brand-700 focus:ring-brand-500">
                                                    Usuário ativo
                                                </label>

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

                                            @unless ($usuario->is(auth()->user()))
                                                <form method="POST" action="{{ route('painel.usuarios.destroy', $usuario) }}" class="mt-3 border-t border-slate-200 pt-3"
                                                      onsubmit="return confirm('Remover o acesso de {{ $usuario->name }}?')">
                                                    @csrf @method('DELETE')
                                                    <button class="btn-danger btn-sm w-full">Remover usuário</button>
                                                </form>
                                            @endunless
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Novo usuário --}}
        <div class="card card-pad h-fit">
            <h2 class="text-sm font-semibold text-slate-900">Novo usuário</h2>

            <form method="POST" action="{{ route('painel.usuarios.store') }}" class="mt-5 space-y-4">
                @csrf

                <div>
                    <label for="name" class="label">Nome</label>
                    <input id="name" name="name" value="{{ old('name') }}" required class="input">
                </div>

                <div>
                    <label for="email" class="label">E-mail</label>
                    <input id="email" name="email" type="email" value="{{ old('email') }}" required class="input">
                </div>

                <div>
                    <label for="role" class="label">Perfil</label>
                    <select id="role" name="role" class="input">
                        <option value="user">Operador — consulta e baixa XMLs</option>
                        <option value="admin">Administrador — também configura o monitor</option>
                    </select>
                </div>

                <div>
                    <label for="new-password" class="label">Senha</label>
                    <input id="new-password" name="password" type="password" required autocomplete="new-password" class="input">
                </div>

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

                <button class="btn-primary w-full">Criar usuário</button>
            </form>
        </div>
    </div>
</x-layouts.app>
