@extends('layouts.app')

@section('title', __('prescriptions::messages.prescriptions.new'))

@php
    $activeField = \App\Modules\Patients\Enums\PatientSearchField::tryFrom($filters['search_field'])
        ?? $defaultSearchField;

    // Read by Clinic.searchField, so the box re-labels itself the moment the
    // pill changes rather than after a round trip.
    $searchRules = [];

    foreach ($searchFields as $searchField) {
        $searchRules[$searchField->value] = ['placeholder' => $searchField->placeholder()];
    }
@endphp

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('prescriptions::messages.prescriptions.choose_patient') }}</h1>
            <p class="px-subtitle">{{ __('prescriptions::messages.prescriptions.choose_patient_hint') }}</p>
        </div>

        <a href="{{ route('prescriptions.index') }}"
           class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
            <i class="bi bi-x-lg" aria-hidden="true"></i>
            {{ __('common.cancel') }}
        </a>
    </div>

    {{-- Outside the swapped region, so the caret stays in the box while the
         matches change underneath. --}}
    <div class="px-panel p-3 p-md-4 mb-4">
        <form method="GET" action="{{ route('prescriptions.create') }}" data-clinic-filter
              class="px-filters"
              data-clinic-search-scope
              data-rules="{{ json_encode($searchRules, JSON_THROW_ON_ERROR) }}">
            <div class="px-filters__scope">
                <div class="px-segmented" role="radiogroup" aria-label="{{ __('patients::messages.search.field') }}"
                     data-clinic-search-fields>
                    <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 === $activeField)>
                            {{ $searchField->label() }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="px-filters__field px-filters__field--wide">
                {{-- Hidden, not deleted: the pills above already say "search by", and
                     the placeholder repeats it. It stays in the markup so a screen
                     reader still gets the field a name rather than reading the
                     hint as one. --}}
                <label for="search" class="visually-hidden">
                    {{ __('prescriptions::messages.prescriptions.search_patient') }}
                </label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="search" name="search" class="form-control px-input"
                           data-clinic-search-input autofocus
                           value="{{ $filters['search'] }}"
                           placeholder="{{ $activeField->placeholder() }}">
                </div>
            </div>
        </form>
    </div>

    <x-results>
        <div class="px-panel overflow-hidden">
            @forelse ($matches as $match)
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 p-3 border-bottom"
                     data-clinic-row>
                    <div class="d-flex align-items-center gap-2 min-w-0">
                        <div class="min-w-0">
                            <span class="fw-semibold d-block text-truncate">{{ $match->name }}</span>
                            <span class="px-hint font-monospace">
                                {{ $match->mrn }}@if ($match->phone) · {{ $match->phone }}@endif
                            </span>
                        </div>
                    </div>

                    {{-- Starts the draft and lands on it: the next thing to do
                         is add the medicines, and this is the click that gets
                         there. --}}
                    <form method="POST" action="{{ route('prescriptions.store') }}">
                        @csrf
                        <input type="hidden" name="patient" value="{{ $match->ulid }}">

                        <button type="submit"
                                class="btn btn-sm px-btn-primary d-inline-flex align-items-center gap-2 text-nowrap">
                            <i class="bi bi-plus-lg" aria-hidden="true"></i>
                            {{ __('prescriptions::messages.prescriptions.prescribe_for') }}
                        </button>
                    </form>
                </div>
            @empty
                <div class="px-empty">
                    <div class="px-empty__art" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                             stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="7" />
                            <path d="M21 21l-4.3-4.3" />
                        </svg>
                    </div>

                    {{-- Two different nothings: nobody has typed yet, or they
                         typed and nobody matched. The second needs to say so —
                         silence reads as a broken search. --}}
                    <p class="px-empty__title">
                        {{ $searched
                            ? __('prescriptions::messages.prescriptions.no_patient_match')
                            : __('prescriptions::messages.prescriptions.start_typing') }}
                    </p>
                    <p class="px-empty__text">
                        {{ $searched
                            ? __('prescriptions::messages.prescriptions.no_patient_match_hint')
                            : __('prescriptions::messages.prescriptions.start_typing_hint') }}
                    </p>
                </div>
            @endforelse
        </div>
    </x-results>
@endsection