@extends('layouts.app')

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

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

        @if (Route::has('patients.show'))
            <a href="{{ route('patients.show', $patient->ulid) }}"
               class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
                <i class="bi bi-arrow-left rtl-flip" aria-hidden="true"></i>
                {{ __('laboratory::messages.orders.patient_record') }}
            </a>
        @endif
    </div>

    <form method="POST" action="{{ route('lab.external.store') }}">
        @csrf
        <input type="hidden" name="patient" value="{{ $patient->ulid }}">

        <div class="px-layout">
            <div class="min-w-0">
                <div class="px-panel p-3 p-md-4 mb-4">
                    {{-- Who this is for. Shown large: attaching one patient's
                         results to another is the worst outcome here. --}}
                    <div class="d-flex align-items-center gap-3 pb-3 mb-4 border-bottom"
                         style="border-color: var(--px-border) !important;">
                        <div class="min-w-0">
                            <p class="mb-0 fw-semibold fs-5">{{ $patient->name }}</p>
                            <p class="mb-0 small text-body-secondary">
                                <span class="font-monospace">{{ $patient->mrn }}</span>
                                @if ($patient->ageLabel)
                                    · {{ $patient->ageLabel }}
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-12 col-md-5">
                            <label for="performed_by" class="px-field-label">
                                {{ __('laboratory::messages.external.performed_by') }}
                            </label>
                            <input type="text" id="performed_by" name="performed_by" maxlength="120" required
                                   class="form-control px-input" value="{{ old('performed_by') }}"
                                   list="known-laboratories"
                                   placeholder="{{ __('laboratory::messages.external.performed_by_placeholder') }}">

                            {{-- Suggestions from what has already been recorded,
                                 so the same laboratory is not stored under three
                                 spellings across three visits. --}}
                            <datalist id="known-laboratories">
                                @foreach ($laboratories as $laboratory)
                                    <option value="{{ $laboratory }}"></option>
                                @endforeach
                            </datalist>
                        </div>

                        <div class="col-12 col-md-3">
                            <label for="reported_on" class="px-field-label">
                                {{ __('laboratory::messages.external.reported_on') }}
                            </label>
                            <input type="date" id="reported_on" name="reported_on" required
                                   class="form-control px-input"
                                   max="{{ now()->toDateString() }}"
                                   value="{{ old('reported_on') }}">
                            <span class="px-hint">{{ __('laboratory::messages.external.reported_on_hint') }}</span>
                        </div>

                        <div class="col-12 col-md-4">
                            <label for="notes" class="px-field-label">
                                {{ __('laboratory::messages.external.notes') }}
                            </label>
                            <input type="text" id="notes" name="notes" maxlength="500"
                                   class="form-control px-input" value="{{ old('notes') }}"
                                   placeholder="{{ __('laboratory::messages.external.notes_placeholder') }}">
                        </div>
                    </div>
                </div>

                @forelse ($catalogue as $category => $tests)
                    <div class="px-panel p-3 p-md-4 mb-3">
                        <p class="px-aside__title mb-3">{{ $category }}</p>

                        <div class="row g-3">
                            @foreach ($tests as $test)
                                <div class="col-6 col-lg-4 col-xxl-3">
                                    <label for="value-{{ $test->id }}" class="px-field-label">
                                        {{ $test->name }}
                                        @if ($test->unit)
                                            <span class="px-trend__unit">{{ $test->unit }}</span>
                                        @endif
                                    </label>

                                    <input type="number" step="any" inputmode="decimal"
                                           id="value-{{ $test->id }}"
                                           name="values[{{ $test->id }}]"
                                           class="form-control px-input @error('values.'.$test->id) is-invalid @enderror"
                                           value="{{ old('values.'.$test->id) }}"
                                           autocomplete="off">

                                    @error('values.'.$test->id)
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>
                    </div>
                @empty
                    <div class="px-panel">
                        <div class="px-empty">
                            <p class="px-empty__title">{{ __('laboratory::messages.external.no_catalogue_title') }}</p>
                            <p class="px-empty__text">{{ __('laboratory::messages.external.no_catalogue_text') }}</p>

                            @if (Route::has('lab.catalogue.index'))
                                <a href="{{ route('lab.catalogue.index') }}" class="btn px-btn-primary">
                                    {{ __('laboratory::messages.orders.catalogue') }}
                                </a>
                            @endif
                        </div>
                    </div>
                @endforelse
            </div>

            <aside class="px-aside" aria-label="{{ __('laboratory::messages.external.aside') }}">
                <div class="px-aside__card">
                    <p class="px-aside__title">{{ __('laboratory::messages.external.how_title') }}</p>
                    <p class="small text-body-secondary mb-0">{{ __('laboratory::messages.external.how_text') }}</p>
                </div>

                <div class="px-aside__card">
                    <button type="submit" class="btn px-btn-primary w-100 d-inline-flex align-items-center justify-content-center gap-2">
                        <i class="bi bi-clipboard2-plus" aria-hidden="true"></i>
                        {{ __('laboratory::messages.external.record') }}
                    </button>

                    <p class="small text-body-secondary mt-2 mb-0">
                        {{ __('laboratory::messages.external.blank_ignored') }}
                    </p>
                </div>
            </aside>
        </div>
    </form>
@endsection