@extends('layouts.app')

@section('title', $user->exists ? 'Edit user' : 'Add user')

@section('content')
<div class="users-form-page">
    <p class="users-back"><a href="{{ route('users.index') }}">← Users</a></p>

    <header class="users-form-header">
        <h1>{{ $user->exists ? 'Edit user' : 'Add user' }}</h1>
        <p class="users-subtitle">Set a username and default password. The user can change their password after signing in.</p>
    </header>

    <section class="users-card">
        <form action="{{ $user->exists ? route('users.update', $user) : route('users.store') }}" method="POST" class="users-form">
            @csrf
            @if($user->exists)
                @method('PUT')
            @endif

            <div class="users-field">
                <label for="name">Display name</label>
                <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required maxlength="120">
                @error('name') <div class="users-error">{{ $message }}</div> @enderror
            </div>

            <div class="users-field">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" value="{{ old('username', $user->username) }}" required maxlength="80" autocomplete="off" pattern="[A-Za-z0-9._-]+">
                <p class="users-hint">Used to sign in. Letters, numbers, dots, dashes, and underscores only.</p>
                @error('username') <div class="users-error">{{ $message }}</div> @enderror
            </div>

            <div class="users-field">
                <label for="email">Email (optional)</label>
                <input type="email" id="email" name="email" value="{{ old('email', str_ends_with((string) $user->email, '@staff.local') ? '' : $user->email) }}" maxlength="255">
                @error('email') <div class="users-error">{{ $message }}</div> @enderror
            </div>

            <div class="users-field">
                <label for="password">{{ $user->exists ? 'New password (leave blank to keep current)' : 'Password' }}</label>
                <input type="password" id="password" name="password" {{ $user->exists ? '' : 'required' }} minlength="8" autocomplete="new-password">
                <p class="users-hint">Minimum 8 characters.</p>
                @error('password') <div class="users-error">{{ $message }}</div> @enderror
            </div>

            <div class="users-field">
                <label for="role">Role</label>
                <select id="role" name="role" required>
                    @foreach($roles as $value => $label)
                        <option value="{{ $value }}" @selected(old('role', $user->role ?: \App\Models\User::ROLE_MANAGER) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('role') <div class="users-error">{{ $message }}</div> @enderror
            </div>

            <div class="users-actions">
                <button type="submit" class="btn btn-primary">{{ $user->exists ? 'Save changes' : 'Create user' }}</button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </section>
</div>

@push('styles')
<style>
    .users-back { margin: 0 0 1rem; }
    .users-back a { color: #2563eb; text-decoration: none; }
    .users-back a:hover { text-decoration: underline; }
    .users-form-header h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
    .users-subtitle { margin: 0 0 1.25rem; color: #6b7280; max-width: 42rem; }
    .users-card { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); max-width: 560px; }
    .users-form { display: grid; gap: 1rem; }
    .users-field label { display: block; margin-bottom: .35rem; font-weight: 600; }
    .users-field input, .users-field select { width: 100%; padding: .55rem .7rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
    .users-hint { margin: .35rem 0 0; font-size: .85rem; color: #6b7280; }
    .users-error { margin-top: .35rem; color: #b91c1c; font-size: .875rem; }
    .users-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
</style>
@endpush
@endsection