@extends('layouts.app')
@section('title', 'Users')
@section('content')
<div><h2 class="text-2xl font-bold">Team access</h2><p class="mt-1 text-slate-400">Create accounts and manage dashboard permissions.</p></div>
<form method="post" action="{{ route('users.store') }}" class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900 p-6 md:grid-cols-2">@csrf
    <h3 class="text-lg font-semibold md:col-span-2">Add a user</h3>
    <input name="username" placeholder="Username" required class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3">
    <input name="email" type="email" placeholder="Email address" required class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3">
    <input name="password" type="password" minlength="12" placeholder="Password (12+ characters)" required class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3">
    <select name="role" class="rounded-xl border border-slate-700 bg-slate-950 px-4 py-3"><option value="user">User</option><option value="admin">Admin</option></select>
    <div><button class="rounded-xl bg-brand px-5 py-3 font-semibold text-slate-950">Create user</button></div>
</form>
<div class="grid gap-3">@foreach($users as $user)
    <article class="rounded-2xl border border-slate-800 bg-slate-900 p-5">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div><p class="font-semibold">{{ $user->username }} <span class="ml-2 rounded-full bg-slate-800 px-2 py-1 text-xs text-slate-300">{{ $user->role }}</span></p><p class="mt-1 text-sm text-slate-400">{{ $user->email }} · {{ $user->disabled ? 'Disabled' : 'Active' }}</p></div>
            <div class="flex flex-wrap gap-2">
                <form method="post" action="{{ route('users.update', $user) }}">@csrf @method('PATCH')<input type="hidden" name="disabled" value="{{ $user->disabled ? 0 : 1 }}"><button class="rounded-lg border border-slate-700 px-3 py-2 text-sm">{{ $user->disabled ? 'Enable' : 'Disable' }}</button></form>
                <form method="post" action="{{ route('users.destroy', $user) }}" onsubmit="return confirm('Delete this account?')">@csrf @method('DELETE')<button class="rounded-lg border border-rose-500/40 px-3 py-2 text-sm text-rose-300">Delete</button></form>
            </div>
        </div>
        <details class="mt-4 border-t border-slate-800 pt-4"><summary class="cursor-pointer text-sm text-brand">Edit account or reset password</summary>
            <form method="post" action="{{ route('users.update', $user) }}" class="mt-4 grid gap-3 md:grid-cols-2">@csrf @method('PATCH')
                <label class="grid gap-1 text-sm text-slate-400">Email<input name="email" type="email" value="{{ $user->email }}" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100"></label>
                <label class="grid gap-1 text-sm text-slate-400">Role<select name="role" class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100"><option value="user" @selected($user->role === 'user')>User</option><option value="admin" @selected($user->role === 'admin')>Admin</option></select></label>
                <label class="grid gap-1 text-sm text-slate-400">New password (leave blank to keep current)<input name="password" type="password" minlength="12" class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100"></label>
                <div class="md:col-span-2"><button class="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-slate-950">Save changes</button></div>
            </form>
        </details>
    </article>
@endforeach</div>
{{ $users->links() }}
@endsection