@extends('layouts.portal')

@section('title', __('Add employee'))

@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.employees.index') }}">{{ __('EMPLOYEES') }}</a></p>
                    <h1>{{ __('Add employee') }}</h1>
                    <p>{{ __('Enroll an existing person or create the person and employee record together.') }}</p>
                </div>
            </div>

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

            <form id="employee-enrollment-form" class="form-panel" method="POST" action="{{ route('persons.employees.store') }}">
                @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">{{ __('Type at least two characters. People already enrolled as employees are excluded.') }}</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">{{ __('This creates the shared person record together with the employee enrollment.') }}</p>
                    @include('persons.people.shared-fields', ['person' => null])
                </section>

                <h2 class="section-heading">{{ __('Employee details') }}</h2>
                <div class="form-grid">
                    <div class="form-field">
                        <label for="employee_number">{{ __('Employee number') }}</label>
                        <input id="employee_number" name="employee_number" value="{{ old('employee_number') }}" maxlength="60">
                        @error('employee_number')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="job_title">{{ __('Job title') }}</label>
                        <input id="job_title" name="job_title" value="{{ old('job_title') }}" maxlength="255">
                        @error('job_title')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="hired_on">{{ __('Hire date') }}</label>
                        <input id="hired_on" name="hired_on" type="date" value="{{ old('hired_on') }}">
                        @error('hired_on')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="status">{{ __('Status') }}</label>
                        <select id="status" name="status" required>
                            <option value="active" @selected(old('status', 'active') === 'active')>{{ __('Active') }}</option>
                            <option value="inactive" @selected(old('status') === 'inactive')>{{ __('Inactive') }}</option>
                        </select>
                        @error('status')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="form-actions">
                    <a class="module-link" href="{{ route('persons.employees.index') }}">{{ __('Cancel') }}</a>
                    <button class="action-button" type="submit">{{ __('Save employee') }}</button>
                </div>
            </form>
        </main>
    </div>

    <script>
        (() => {
            const form = document.querySelector('#employee-enrollment-form');
            const existingPanel = document.querySelector('#existing-person-panel');
            const newPanel = document.querySelector('#new-person-panel');
            const personSearch = document.querySelector('#person-search');
            const personId = document.querySelector('#person_id');
            const resultList = document.querySelector('#person-search-results');
            const selectedPerson = document.querySelector('#selected-person');
            const status = document.querySelector('#person-search-status');
            const messages = {
                noResults: @json(__('No eligible matching person found.')),
                searching: @json(__('Looking up people...')),
                failed: @json(__('Lookup failed')),
                unavailable: @json(__('Unable to search at the moment.')),
                selectPerson: @json(__('Select a person from the results, or choose Add new person.')),
            };
            const newPersonFields = newPanel.querySelectorAll('input, select');
            let requestController;
            let debounceTimer;

            function setMode(mode) {
                const isNew = mode === 'new';
                existingPanel.hidden = isNew;
                newPanel.hidden = !isNew;
                personSearch.disabled = isNew;
                personId.disabled = isNew;

                newPersonFields.forEach((field) => {
                    field.disabled = !isNew;
                    field.required = isNew && ['first_name', 'last_name', 'identity_document_number', 'preferred_locale'].includes(field.name);
                });

                if (isNew) {
                    personId.value = '';
                    personSearch.value = '';
                    selectedPerson.hidden = true;
                    resultList.hidden = true;
                    status.textContent = '';
                }
            }

            function renderResults(people) {
                resultList.replaceChildren();

                if (people.length === 0) {
                    status.textContent = messages.noResults;
                    resultList.hidden = true;
                    personSearch.setAttribute('aria-expanded', 'false');
                    return;
                }

                status.textContent = '';
                people.forEach((person) => {
                    const option = document.createElement('button');
                    option.type = 'button';
                    option.className = 'person-option';
                    option.setAttribute('role', 'option');
                    option.setAttribute('aria-selected', 'false');

                    const name = document.createElement('span');
                    name.className = 'person-option-name';
                    name.textContent = person.name;

                    const detail = document.createElement('span');
                    detail.className = 'person-option-detail';
                    detail.textContent = person.detail;

                    option.append(name, detail);
                    option.addEventListener('click', () => {
                        personId.value = person.id;
                        personSearch.value = '';
                        selectedPerson.querySelector('#selected-person-name').textContent = person.name;
                        selectedPerson.querySelector('#selected-person-detail').textContent = person.detail;
                        selectedPerson.hidden = false;
                        resultList.hidden = true;
                        personSearch.setAttribute('aria-expanded', 'false');
                        status.textContent = '';
                    });

                    resultList.append(option);
                });

                resultList.hidden = false;
                personSearch.setAttribute('aria-expanded', 'true');
            }

            document.querySelectorAll('input[name="person_mode"]').forEach((control) => {
                control.addEventListener('change', () => setMode(control.value));
            });

            personSearch.addEventListener('input', () => {
                window.clearTimeout(debounceTimer);
                personId.value = '';
                selectedPerson.hidden = true;

                const query = personSearch.value.trim();

                if (query.length < 2) {
                    resultList.replaceChildren();
                    resultList.hidden = true;
                    personSearch.setAttribute('aria-expanded', 'false');
                    status.textContent = '';
                    return;
                }

                debounceTimer = window.setTimeout(async () => {
                    requestController?.abort();
                    requestController = new AbortController();
                    status.textContent = messages.searching;

                    try {
                        const url = new URL(@json(route('persons.employees.people-search')), window.location.origin);
                        url.searchParams.set('q', query);

                        const response = await fetch(url, {
                            headers: { Accept: 'application/json' },
                            signal: requestController.signal,
                        });

                        if (!response.ok) {
                            throw new Error(messages.failed);
                        }

                        renderResults(await response.json());
                    } catch (error) {
                        if (error.name !== 'AbortError') {
                            status.textContent = messages.unavailable;
                        }
                    }
                }, 220);
            });

            document.querySelector('#clear-person').addEventListener('click', () => {
                personId.value = '';
                selectedPerson.hidden = true;
                personSearch.focus();
            });

            document.addEventListener('click', (event) => {
                if (!event.target.closest('.person-picker')) {
                    resultList.hidden = true;
                    personSearch.setAttribute('aria-expanded', 'false');
                }
            });

            const initialMode = document.querySelector('input[name="person_mode"]:checked')?.value || 'existing';
            setMode(initialMode);
            form.addEventListener('submit', (event) => {
                if (document.querySelector('input[name="person_mode"]:checked').value === 'existing' && !personId.value) {
                    event.preventDefault();
                    status.textContent = messages.selectPerson;
                    personSearch.focus();
                }
            });
        })();
    </script>
@endsection