@extends('layouts.portal')

@section('title', 'Edit system user')

@section('content')
    <div class="portal-page">
        @include('partials.portal-header')

        <main class="module-main">
            <div class="module-heading">
                <div>
                    <p class="eyebrow"><a href="{{ route('persons.index') }}">PERSONS</a> / <a href="{{ route('persons.directory', 'system-users') }}">SYSTEM USERS</a></p>
                    <h1>Edit system user</h1>
                    <p>{{ $user->username }} · Person ID {{ $user->person_id }}</p>
                </div>
            </div>

            @if($errors->any())
                <p class="form-error" role="alert">Please review the highlighted fields.</p>
            @endif

            <form class="form-panel" method="POST" action="{{ route('persons.user-accounts.update', $user) }}">
                @csrf
                @method('PUT')

                <h2 class="section-heading">Person details</h2>
                @include('persons.people.shared-fields', ['person' => $user->person])

                <h2 class="section-heading">System account</h2>
                <div class="form-grid">
                    <div class="form-field">
                        <label for="username">Username</label>
                        <input id="username" name="username" value="{{ old('username', $user->username) }}" autocomplete="username" required>
                        @error('username')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="account_email">Login email</label>
                        <input id="account_email" name="account_email" type="email" value="{{ old('account_email', $user->email) }}" autocomplete="email" required>
                        @error('account_email')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="is_active">Account status</label>
                        <label class="toggle-switch">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" id="is_active" name="is_active" value="1" @checked(old('is_active', $user->is_active ? '1' : '0') === '1') onchange="this.nextElementSibling.nextElementSibling.textContent = this.checked ? 'Active' : 'Inactive'">
                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
                            <span class="toggle-switch-label">{{ old('is_active', $user->is_active ? '1' : '0') === '1' ? 'Active' : 'Inactive' }}</span>
                        </label>
                        @error('is_active')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field form-field-wide">
                        <label for="password">Reset password</label>
                        <input id="password" name="password" type="password" autocomplete="new-password" minlength="12">
                        <small>Leave both password fields blank to keep the current password. Enter a new password to replace it.</small>
                        @error('password')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field form-field-wide">
                        <label for="password_confirmation">Confirm new password</label>
                        <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" minlength="12">
                    </div>
                </div>

                <div class="form-actions">
                    <a class="module-link" href="{{ route('persons.directory', 'system-users') }}">Cancel</a>
                    <button class="action-button" type="submit">Save system user</button>
                </div>
            </form>
        </main>
    </div>
@endsection