@extends('layouts.app')
@php
    $editing = $user->exists;
    $self = $editing && $user->is(auth()->user());
@endphp
@section('title', $editing ? 'Edit '.$user->name : 'New user')

@section('content')
<x-page-header :title="$editing ? 'Edit user' : 'New user'" :subtitle="$editing ? $user->email : 'Give someone a login and a role'" />

<form method="POST" action="{{ $editing ? route('users.update', $user) : route('users.store') }}" id="user-form" data-validate novalidate>
    @csrf
    @if ($editing) @method('PUT') @endif
    @include('partials.error-summary')

    <div class="row g-3">
        <div class="col-xl-7">
            <x-form-section title="Account" icon="person-badge">
                <x-field name="name" label="Full name" :value="$user->name" required maxlength="255" autofocus />
                <x-field name="email" data-live type="email" label="Email (used to sign in)" :value="$user->email" required maxlength="255" autocomplete="off" />
                <x-select name="role_id" label="Role" required col="12" hint="The role decides what this person can see and do.">
                    <option value="">Choose a role…</option>
                    @foreach ($roles as $r)
                        <option value="{{ $r->id }}" data-desc="{{ $r->description }}" data-count="{{ $r->permissionCount() }}" @selected(old('role_id', $user->role_id) == $r->id)>{{ $r->name }}</option>
                    @endforeach
                </x-select>
                <div class="col-12"><div class="confirm-box small" id="role-desc" hidden></div></div>
                <x-switch name="is_active" label="Active" :checked="$user->is_active" hint="Deactivated people can't sign in; their history stays." />
            </x-form-section>

            <x-form-section :title="$editing ? 'Change password' : 'Password'" icon="key" :desc="$editing ? 'Leave both empty to keep the current password' : 'At least 8 characters, with a letter and a number'">
                <x-field name="password" data-live type="password" label="{{ $editing ? 'New password' : 'Password' }}" :required="! $editing" autocomplete="new-password" />
                <x-field name="password_confirmation" type="password" label="Confirm password" :required="! $editing" autocomplete="new-password" />
            </x-form-section>
        </div>
        <div class="col-xl-5">
            <div class="card card-body" style="background: var(--app-primary-soft); border-color: transparent">
                <div class="d-flex gap-2"><i class="bi bi-lightbulb text-primary mt-1" aria-hidden="true"></i>
                    <div class="small"><strong>Good to know</strong>
                        <ul class="ps-3 mb-0 mt-1">
                            <li>Roles are managed under <a href="{{ route('roles.index') }}">Roles</a> — you can make your own, e.g. a "Warehouse" role.</li>
                            <li>Changing a password or deactivating someone signs them out straight away.</li>
                            <li>There must always be one active Owner, so the last Owner can't be demoted, deactivated or deleted.</li>
                            @if ($self)<li>You are editing your own account, so you can't deactivate it.</li>@endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ route('users.index') }}" class="btn btn-ghost">Cancel</a>
        <span class="dirty-note"><i class="bi bi-circle-fill text-warning" style="font-size:.5rem"></i> Unsaved changes</span>
        <span class="spacer"></span>
        <button class="btn btn-primary">{{ $editing ? 'Save changes' : 'Add user' }}</button>
    </div>
</form>
@endsection