@extends('layouts.portal')

@section('title', __('Add 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>{{ __('Add system user') }}</h1>
                    <p>{{ __('Link an account to an existing person or create the person and account together.') }}</p>
                </div>
            </div>

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

            <form id="system-user-enrollment-form" class="form-panel" method="POST" action="{{ route('persons.user-accounts.store') }}" data-person-enrollment data-person-search-url="{{ route('persons.user-accounts.people-search') }}">
                @csrf

                <div class="choice-control" role="radiogroup" aria-label="{{ __('Person record') }}">
                    <label class="choice-option"><input type="radio" name="person_mode" value="existing" @checked(old('person_mode', 'existing') === 'existing')> {{ __('Select existing person') }}</label>
                    <label class="choice-option"><input type="radio" name="person_mode" value="new" @checked(old('person_mode') === 'new')> {{ __('Add new person') }}</label>
                </div>

                <section id="existing-person-panel" class="person-mode-panel" aria-label="{{ __('Select existing person') }}">
                    <div class="form-field form-field-wide" style="margin-top: 20px">
                        <label for="person-search">{{ __('Find a person') }}</label>
                        <div class="person-picker">
                            <input id="person-search" type="search" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="person-search-results" aria-describedby="person-search-help" placeholder="{{ __('Type a name, ID number, email, or phone') }}">
                            <div id="person-search-results" class="person-options" role="listbox" hidden></div>
                        </div>
                        <small id="person-search-help">{{ __('Only active people without a system account are shown.') }}</small>
                        <input id="person_id" name="person_id" type="hidden" value="{{ old('person_id') }}">
                        <div id="selected-person" class="selected-person" style="margin-top: 10px" hidden>
                            <div><div id="selected-person-name" class="selected-person-name"></div><div id="selected-person-detail" class="selected-person-detail"></div></div>
                            <button id="clear-person" class="text-button" type="button">{{ __('Change') }}</button>
                        </div>
                        @error('person_id')<span class="validation-error">{{ $message }}</span>@enderror
                        <p id="person-search-status" class="validation-error" role="status" aria-live="polite"></p>
                    </div>
                </section>

                <section id="new-person-panel" class="person-mode-panel" aria-label="{{ __('Create a new person') }}" hidden>
                    <h2 class="section-heading">{{ __('Person details') }}</h2>
                    <p class="section-note">{{ __('The person and account are saved together. New people start active.') }}</p>
                    @include('persons.people.shared-fields', ['person' => null])
                </section>

                <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') }}" autocomplete="username" required>
                        @error('username')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="password">{{ __('Password') }}</label>
                        <input id="password" name="password" type="password" autocomplete="new-password" minlength="12" required>
                        <small>{{ __('Use at least 12 characters.') }}</small>
                        @error('password')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="password_confirmation">{{ __('Confirm password') }}</label>
                        <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" minlength="12" required>
                    </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" data-active-label="{{ __('Active') }}" data-inactive-label="{{ __('Inactive') }}" @checked(old('is_active', '1') === '1') onchange="this.nextElementSibling.nextElementSibling.textContent = this.checked ? this.dataset.activeLabel : this.dataset.inactiveLabel">
                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
                            <span class="toggle-switch-label">{{ old('is_active', '1') === '1' ? __('Active') : __('Inactive') }}</span>
                        </label>
                        @error('is_active')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                </div>

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

    @include('partials.person-picker-script')
@endsection