@extends('layouts.app')

@section('title', 'User Accounts')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">User Accounts</h1>
            <p class="text-xs text-muted-foreground">System access accounts, roles and status</p>
        </div>

        <div class="grid gap-6 lg:grid-cols-3">
            <div class="rounded-xl border border-border bg-card lg:col-span-2">
                <div class="flex flex-col gap-3 p-3">
                    <form method="get" action="{{ route('settings.users') }}" class="flex gap-2">
                        <input name="q" value="{{ $q }}" placeholder="Search by name or email..."
                               class="h-9 min-w-52 flex-1 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <button class="rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Search</button>
                    </form>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                                    <th class="py-2 pr-3 font-medium">User</th>
                                    <th class="py-2 pr-3 font-medium">Role</th>
                                    <th class="py-2 pr-3 font-medium">Status</th>
                                    <th class="py-2 pr-3 font-medium">Last Login</th>
                                    <th class="py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $u)
                                    <tr class="border-b last:border-0 hover:bg-accent/40">
                                        <td class="py-2.5 pr-3">
                                            <div class="flex items-center gap-2.5">
                                                <span class="flex size-7 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">{{ strtoupper(substr($u->name, 0, 1)) }}</span>
                                                <div class="flex flex-col leading-tight">
                                                    <span class="font-medium">{{ $u->name }}</span>
                                                    <span class="font-mono text-[11px] text-muted-foreground">{{ $u->email }}</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-2.5 pr-3">{{ $u->role }}@if ($u->type)<span class="block text-[11px] text-muted-foreground">{{ $u->type }}</span>@endif</td>
                                        <td class="py-2.5 pr-3">
                                            <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $u->status === 'Active' ? 'bg-emerald-500/15 text-emerald-700' : ($u->status === 'Suspended' ? 'bg-red-500/15 text-red-700' : 'bg-slate-500/15 text-slate-600') }}">{{ $u->status }}</span>
                                        </td>
                                        <td class="py-2.5 pr-3 text-muted-foreground">{{ $u->last_login?->format('d M Y') ?? '—' }}</td>
                                        <td class="py-2.5">
                                            <div class="flex items-center justify-end gap-1">
                                                <form method="post" action="{{ route('settings.users.lock', $u) }}">
                                                    @csrf
                                                    <button class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">{{ $u->status === 'Suspended' ? 'Reactivate' : 'Suspend' }}</button>
                                                </form>
                                                @if ($u->id !== auth()->id())
                                                    <form method="post" action="{{ route('settings.users.destroy', $u) }}" onsubmit="return confirm('Delete account for {{ $u->name }}?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                @if ($users->isEmpty())
                                    <tr><td colspan="5" class="py-10 text-center text-sm text-muted-foreground">No users found.</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    {{ $users->links() }}
                </div>
            </div>

            <div class="rounded-xl border border-border bg-card">
                <form method="post" action="{{ route('settings.users.store') }}" class="flex flex-col gap-3 p-4">
                    @csrf
                    <h2 class="text-sm font-semibold">Add User</h2>
                    <x-field label="Full name" required>
                        <x-input name="name" required />
                    </x-field>
                    <x-field label="Email" required>
                        <x-input type="email" name="email" required />
                    </x-field>
                    <x-field label="Phone">
                        <x-input name="phone" />
                    </x-field>
                    <x-field label="Role">
                        <x-input name="role" placeholder="e.g. Teacher" />
                    </x-field>
                    <x-field label="Type">
                        <x-input name="type" placeholder="e.g. Admin" />
                    </x-field>
                    <x-field label="Temporary password" required>
                        <x-input type="password" name="password" required />
                    </x-field>
                    <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Create Account</button>
                </form>
            </div>
        </div>
    </div>
@endsection