@extends('layouts.app')

@section('title', __('laboratory::messages.wizard.step_patient'))

@php
    /*
     | Everything the type-ahead says to the user, translated here and carried
     | to the bundle on a data attribute. Translations belong on this side —
     | app.js is one file for every locale.
     |
     | Nothing here for a failed request: the shared AJAX wrapper already
     | reports those, so a second message would mean two notices for one
     | failure and two places to keep the wording right.
     */
    $searchStrings = [
        'searching' => __('laboratory::messages.wizard.searching'),
        'none' => __('laboratory::messages.wizard.no_matches'),
        'selected' => __('laboratory::messages.wizard.selected'),
    ];

    /*
     | Per-field placeholder, hint and minimum length, so the box re-labels
     | itself the moment the field changes. All three come from the enum, which
     | is Patients' to define — a CNIC has to arrive whole because of how it is
     | stored, and that is not a fact Laboratory should be restating.
     */
    $fieldRules = [];

    foreach ($searchFields as $searchField) {
        $fieldRules[$searchField->value] = [
            'placeholder' => $searchField->placeholder(),
            'hint' => __('patients::messages.search.hint_'.$searchField->value),
            'minimum' => $searchField->minimumLength(),
        ];
    }
@endphp

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="h4 mb-1">{{ __('laboratory::messages.wizard.step_type_heading') }}</h1>
            <p class="px-hint mt-0 mb-0">{{ __('laboratory::messages.wizard.step_type_hint') }}</p>
        </div>

        <a href="{{ route('lab.orders.index') }}" class="btn btn-sm px-btn-ghost">
            <i class="bi bi-x-lg me-1" aria-hidden="true"></i>
            {{ __('common.cancel') }}
        </a>
    </div>

    @include('laboratory::wizard.partials.steps', ['current' => 'patient'])

    @if ($errors->any())
        <x-alert type="danger" :message="$errors->first()" />
    @endif

    {{--
        Behaviour lives in the bundled app.js, reached through the data
        attributes below.

        Not in a <script> beside this markup: the Content-Security-Policy sets
        `script-src 'self'`, so an inline block is refused by the browser and
        fails silently — the pills would still highlight, because that is CSS,
        and nothing else on the screen would work.
    --}}
    <div class="px-panel p-4"
         data-lab-patient-picker
         data-source="{{ route('patients.search') }}"
         data-rules="{{ json_encode($fieldRules, JSON_THROW_ON_ERROR) }}"
         data-strings="{{ json_encode($searchStrings, JSON_THROW_ON_ERROR) }}">
        {{--
            Searching, and registering, on one screen.

            These were two pages until it became clear what reception actually
            does: they search, half the time find nothing because the person is
            a first visit, and then need to register them. With the choice on a
            page in front of the search, that discovery meant going back — so
            the way out of an empty result sits beside the empty result.
        --}}
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3 pb-3 border-bottom">
            <div>
                <h2 class="h6 mb-1">{{ __('laboratory::messages.wizard.existing_patient') }}</h2>
                <p class="px-hint mt-0 mb-0">{{ __('laboratory::messages.wizard.existing_patient_hint') }}</p>
            </div>

            @can('patients.create')
                <div class="text-md-end">
                    <a href="{{ route('lab.new-test.register') }}" class="btn btn-sm px-btn-ghost">
                        <i class="bi bi-person-plus me-1" aria-hidden="true"></i>
                        {{ __('laboratory::messages.wizard.new_patient') }}
                    </a>
                    <span class="px-hint d-block mt-1">{{ __('laboratory::messages.wizard.new_patient_hint') }}</span>
                </div>
            @else
                {{-- Shown rather than hidden: a phlebotomist who cannot register
                     needs to know the option exists and who to ask, not to
                     wonder why their screen differs from the next desk's. --}}
                <span class="px-hint">{{ __('laboratory::messages.wizard.new_patient_denied') }}</span>
            @endcan
        </div>

        <form method="POST" action="{{ route('lab.new-test.patient.store') }}">
            @csrf

            {{--
                The chosen patient travels as a hidden field set by the list
                below. The box the user types in is deliberately not a form
                field: typing a name and pressing enter must not submit a name
                as if it were a patient.
            --}}
            <input type="hidden" name="patient" data-lab-patient-ulid
                   value="{{ old('patient', $draft['patient'] ?? '') }}">

            {{--
                The field first, then the box.

                Reading order matches the decision order: a clerk knows what
                they are holding before they start typing it. Defaulting to the
                mobile number because it is the one identifier a walk-in can
                always recite.
            --}}
            <div class="px-segmented mb-3" role="radiogroup"
                 aria-label="{{ __('patients::messages.search.field') }}"
                 data-lab-patient-field>
                <span class="px-segmented__label" aria-hidden="true">
                    {{ __('patients::messages.search.field') }}
                </span>

                @foreach ($searchFields as $searchField)
                    <label class="px-segmented__option">
                        <input type="radio" name="search_field" value="{{ $searchField->value }}"
                               @checked($searchField === $defaultField)>
                        {{ $searchField->label() }}
                    </label>
                @endforeach
            </div>

            <label for="wizard-patient-search" class="visually-hidden">
                {{ __('laboratory::messages.wizard.search_label') }}
            </label>

            {{-- Icon inside the field rather than in an addon, so the box keeps
                 one continuous border and one focus ring. --}}
            <div class="px-search">
                <i class="bi bi-search" aria-hidden="true"></i>
                <input type="search" class="form-control px-input" id="wizard-patient-search"
                       data-lab-patient-search
                       autocomplete="off" role="combobox" aria-expanded="false"
                       aria-controls="wizard-patient-results" aria-autocomplete="list"
                       placeholder="{{ $defaultField->placeholder() }}">
            </div>

            <span class="px-hint" data-lab-patient-hint>
                {{ __('patients::messages.search.hint_'.$defaultField->value) }}
            </span>

            <div class="mt-3" id="wizard-patient-results" role="listbox"
                 data-lab-patient-results
                 aria-label="{{ __('laboratory::messages.wizard.search_results') }}"></div>

            <p class="px-hint mt-3" data-lab-patient-status role="status" aria-live="polite"></p>

            {{-- No "back" here: this is the first step, and the way out is
                 Cancel in the header. Nor a second link to registration — it is
                 already at the top of this panel, where it is in view while the
                 search is being read. --}}
            <div class="d-flex flex-wrap gap-2 mt-4">
                <button type="submit" class="btn btn-sm px-btn-primary" data-lab-patient-continue
                        @disabled(($draft['patient'] ?? '') === '')>
                    {{ __('laboratory::messages.wizard.continue') }}
                    <i class="bi bi-arrow-right ms-1" aria-hidden="true"></i>
                </button>
            </div>
        </form>
    </div>
@endsection