@extends('layouts.app')

@section('title', $test->name)

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div class="min-w-0">
            {{-- This screen is reached from the catalogue listing, which is
                 where its way back points. --}}
            <a href="{{ route('lab.catalogue.index') }}" class="btn btn-sm px-btn-ghost mb-2">
                <i class="bi bi-arrow-left rtl-flip" aria-hidden="true"></i>
                {{ __('laboratory::messages.catalogue.title') }}
            </a>

            <h1 class="px-title">{{ $test->name }}</h1>
            <p class="px-subtitle font-monospace">{{ $test->code }}</p>
        </div>

        {{-- Availability sits with the Super Admin alone. Everyone else sees
             the state without a control, rather than a button that refuses
             them — a disabled button invites the question "why not me?", and
             the answer is a policy, not a bug. --}}
        @can('activate', $test)
            <form method="POST" action="{{ route('lab.catalogue.tests.availability', $test) }}">
                @csrf
                @method('PATCH')
                <button type="submit"
                        class="btn {{ $test->is_active ? 'px-btn-ghost' : 'px-btn-primary' }}"
                        @disabled(! $test->is_active && $blockers !== [])>
                    {{ $test->is_active
                        ? __('laboratory::messages.catalogue.withdraw')
                        : __('laboratory::messages.catalogue.make_available') }}
                </button>
            </form>
        @endcan
    </div>

    {{-- What this test is, as a row of pills rather than a run-on sentence.
         Each fact is one chip, so an empty one simply is not drawn. --}}
    <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <span class="px-pill {{ $test->is_active ? 'px-pill--green' : 'px-pill--grey' }}">
            <span class="px-dot" aria-hidden="true"></span>
            {{ $test->is_active
                ? __('laboratory::messages.catalogue.available')
                : __('laboratory::messages.catalogue.not_available') }}
        </span>

        <span class="px-pill px-pill--violet">{{ $test->kind->label() }}</span>
        <span class="px-pill px-pill--blue">{{ $test->category->label() }}</span>

        @if ($test->unit)
            <span class="px-pill px-pill--grey">{{ __('laboratory::messages.catalogue.unit') }}: {{ $test->unit }}</span>
        @endif

        @if ($test->specimen_type)
            <span class="px-pill px-pill--grey">
                <i class="bi bi-droplet" aria-hidden="true"></i> {{ $test->specimen_type }}
            </span>
        @endif

        @if ($test->billing_code)
            <span class="px-pill px-pill--grey font-monospace">
                {{ __('laboratory::messages.catalogue.billing_code') }}: {{ $test->billing_code }}
            </span>
        @endif
    </div>

    {{-- Why a test cannot be offered, stated where it can be fixed. Finding
         this out only at activation means a round trip through a command. --}}
    @if ($blockers !== [])
        <div class="px-advice px-advice--caution d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-exclamation-triangle px-advice__icon" aria-hidden="true"></i>
            <div class="min-w-0">
                <strong>{{ __('laboratory::messages.setup.not_ready') }}</strong>
                <ul class="mb-0 mt-1 small">
                    @foreach ($blockers as $blocker)
                        <li>{{ $blocker }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @elseif ($warnings !== [])
        <div class="px-advice px-advice--info d-flex align-items-start gap-2 mb-3">
            <i class="bi bi-info-circle px-advice__icon" aria-hidden="true"></i>
            <ul class="mb-0 small min-w-0">
                @foreach ($warnings as $warning)
                    <li>{{ $warning }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            @can('update', $test)
                @include('laboratory::catalogue.partials.setup')
            @endcan

            @if ($test->isPanel())
                @php($canEditPanel = auth()->user()?->can('update', $test) ?? false)

                <x-px.panel :title="__('laboratory::messages.catalogue.components')" icon="bi-diagram-3"
                            heading="title">
                    <x-slot:subtitle>
                        {{ trans_choice('laboratory::messages.catalogue.components_count', $test->components->count(), [
                            'count' => $test->components->count(),
                        ]) }}
                    </x-slot:subtitle>

                    @error('component')
                        <div class="px-advice px-advice--danger mb-3" role="alert">
                            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                            <div>{{ $message }}</div>
                        </div>
                    @enderror

                    @if ($canEditPanel)
                        {{--
                            Above the list, not below it.

                            A full blood count carries thirteen analytes, and with
                            the box underneath them the one thing somebody came to
                            do was a scroll away — while the list they were adding
                            to had scrolled off the top.

                            Searched for rather than picked from a dropdown: the
                            catalogue holds over a thousand tests, and a picker
                            script would not survive the content security policy.
                        --}}
                        <div class="px-editor mb-3">
                            <p class="px-field-label">{{ __('laboratory::messages.catalogue.add_component') }}</p>

                            <form method="GET" action="{{ route('lab.catalogue.tests.show', $test) }}" class="px-filters">
                                <div class="px-filters__field px-filters__field--wide">
                                    <label for="add" class="visually-hidden">
                                        {{ __('laboratory::messages.catalogue.add_component') }}
                                    </label>
                                    <div class="px-search">
                                        <i class="bi bi-search" aria-hidden="true"></i>
                                        <input type="search" id="add" name="add" class="form-control px-input"
                                               value="{{ $adding }}"
                                               placeholder="{{ __('laboratory::messages.catalogue.add_component_placeholder') }}">
                                    </div>
                                </div>

                                <div class="px-filters__actions">
                                    <button type="submit" class="btn px-btn-primary">{{ __('common.search') }}</button>

                                    @if ($adding !== '')
                                        <a href="{{ route('lab.catalogue.tests.show', $test) }}" class="btn px-btn-ghost">
                                            {{ __('common.clear') }}
                                        </a>
                                    @endif
                                </div>
                            </form>

                            @if ($adding !== '')
                                @if ($candidates === [])
                                    <p class="px-hint mt-3 mb-0">{{ __('laboratory::messages.catalogue.no_candidates') }}</p>
                                @else
                                    <ul class="list-unstyled mt-3 mb-0">
                                        @foreach ($candidates as $candidate)
                                            <li class="d-flex justify-content-between align-items-center gap-2 py-2 border-bottom">
                                                <div class="min-w-0">
                                                    <span class="fw-medium d-block">{{ $candidate->name }}</span>
                                                    <span class="px-hint font-monospace">
                                                        {{ $candidate->code }}{{ $candidate->unit ? ' · '.$candidate->unit : '' }}
                                                    </span>
                                                </div>

                                                <form method="POST" action="{{ route('lab.catalogue.components.store', $test) }}">
                                                    @csrf
                                                    <input type="hidden" name="component" value="{{ $candidate->id }}">
                                                    <button type="submit" class="btn btn-sm px-btn-primary text-nowrap">
                                                        {{ __('common.add') }}
                                                    </button>
                                                </form>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            @endif
                        </div>
                    @endif

                    {{-- A table rather than a list of links: the code is what a
                         clinician orders by and what every result is stamped
                         with, so it belongs beside the name rather than one
                         click away. --}}
                    <div class="table-responsive">
                        <table class="px-table table align-middle mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">{{ __('laboratory::messages.catalogue.code') }}</th>
                                    <th scope="col">{{ __('laboratory::messages.catalogue.name') }}</th>
                                    <th scope="col">{{ __('laboratory::messages.catalogue.unit') }}</th>
                                    @if ($canEditPanel)
                                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                                    @endif
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($test->components as $component)
                                    <tr>
                                        <td class="font-monospace small">{{ $component->code }}</td>

                                        <td>
                                            <a href="{{ route('lab.catalogue.tests.show', $component) }}" class="fw-medium">
                                                {{ $component->name }}
                                            </a>

                                            @if (! $component->is_active)
                                                <span class="px-pill px-pill--grey">
                                                    {{ __('laboratory::messages.catalogue.inactive') }}
                                                </span>
                                            @endif
                                        </td>

                                        <td>
                                            @if ($component->unit)
                                                <span class="px-pill px-pill--grey">{{ $component->unit }}</span>
                                            @else
                                                {{-- Named, not left blank: a panel whose component has no
                                                     unit cannot report a number against a range. --}}
                                                <span class="px-hint">{{ __('laboratory::messages.catalogue.no_unit') }}</span>
                                            @endif
                                        </td>

                                        @if ($canEditPanel)
                                            <td class="text-end">
                                                {{-- Asked where the button is, and only about
                                                     the panel: orders already placed keep their
                                                     own lines. --}}
                                                <form method="POST" class="px-confirm" data-clinic-confirm-inline
                                                      action="{{ route('lab.catalogue.components.destroy', [$test, $component]) }}">
                                                    @csrf
                                                    @method('DELETE')

                                                    <button type="button" class="btn btn-sm px-btn-ghost text-danger"
                                                            data-confirm-trigger
                                                            title="{{ __('laboratory::messages.catalogue.remove_component') }}">
                                                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                                                        <span class="visually-hidden">
                                                            {{ __('laboratory::messages.catalogue.remove_component') }}
                                                        </span>
                                                    </button>

                                                    <span class="px-confirm__ask" data-confirm-ask hidden>
                                                        <span class="px-confirm__text">
                                                            {{ __('laboratory::messages.catalogue.remove_confirm', ['test' => $component->name]) }}
                                                        </span>

                                                        <button type="submit" class="btn btn-sm px-btn-primary" data-confirm-yes>
                                                            {{ __('common.yes') }}
                                                        </button>

                                                        <button type="button" class="btn btn-sm px-btn-ghost" data-confirm-no>
                                                            {{ __('common.no') }}
                                                        </button>
                                                    </span>
                                                </form>
                                            </td>
                                        @endif
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ $canEditPanel ? 4 : 3 }}">
                                            <p class="px-hint mb-0 py-2">
                                                {{ __('laboratory::messages.catalogue.components_none') }}
                                            </p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </x-px.panel>
            @else
                <x-px.panel :title="__('laboratory::messages.catalogue.ranges')" icon="bi-rulers" heading="title">
                    <div class="table-responsive">
                        <table class="px-table mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">{{ __('laboratory::messages.catalogue.sex') }}</th>
                                    <th scope="col">{{ __('laboratory::messages.catalogue.age_from') }}</th>
                                    <th scope="col" class="text-end">{{ __('laboratory::messages.catalogue.low') }}</th>
                                    <th scope="col" class="text-end">{{ __('laboratory::messages.catalogue.high') }}</th>
                                    <th scope="col" class="text-end">{{ __('laboratory::messages.catalogue.critical_low') }}</th>
                                    <th scope="col" class="text-end">{{ __('laboratory::messages.catalogue.critical_high') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($test->referenceRanges as $range)
                                    <tr>
                                        <td class="small">{{ __('laboratory::messages.catalogue.sex_'.$range->sex) }}</td>
                                        <td class="small">
                                            @if ($range->min_age_days === null && $range->max_age_days === null)
                                                —
                                            @else
                                                {{ $range->min_age_days === null ? '0' : round($range->min_age_days / 365.25, 1) }}
                                                –
                                                {{ $range->max_age_days === null ? '∞' : round($range->max_age_days / 365.25, 1) }}
                                            @endif
                                        </td>
                                        <td class="text-end font-monospace">{{ $range->low ?? '—' }}</td>
                                        <td class="text-end font-monospace">{{ $range->high ?? '—' }}</td>
                                        {{-- The critical columns are the two that get somebody
                                             telephoned, so they are the two that are coloured. --}}
                                        <td class="text-end font-monospace" style="color: #b91c1c;">{{ $range->critical_low ?? '—' }}</td>
                                        <td class="text-end font-monospace" style="color: #b91c1c;">{{ $range->critical_high ?? '—' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6">
                                            <div class="px-empty py-4">
                                                <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">
                                                        <rect x="2" y="8" width="20" height="8" rx="2" />
                                                        <path d="M6 8v3M10 8v4M14 8v3M18 8v4" />
                                                    </svg>
                                                </div>

                                                <p class="px-empty__title">{{ __('laboratory::messages.catalogue.no_ranges') }}</p>
                                                <p class="px-empty__text mb-0">{{ __('laboratory::messages.catalogue.no_ranges_text') }}</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-px.panel>
            @endif
        </div>

        @can('update', $test)
            @if (! $test->isPanel())
                <div class="col-12 col-xl-4">
                    <x-px.panel :title="__('laboratory::messages.catalogue.add_range')" icon="bi-plus-lg">
                        <form method="POST" action="{{ route('lab.catalogue.ranges.store', $test) }}">
                            @csrf

                            <x-form.select name="sex" :label="__('laboratory::messages.catalogue.sex')"
                                           :options="[
                                               'any' => __('laboratory::messages.catalogue.sex_any'),
                                               'male' => __('laboratory::messages.catalogue.sex_male'),
                                               'female' => __('laboratory::messages.catalogue.sex_female'),
                                           ]" required />

                            <div class="row g-2">
                                <div class="col-6">
                                    <x-form.input name="min_age_years" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.age_from')" />
                                </div>
                                <div class="col-6">
                                    <x-form.input name="max_age_years" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.age_to')" />
                                </div>
                                <div class="col-6">
                                    <x-form.input name="low" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.low')" />
                                </div>
                                <div class="col-6">
                                    <x-form.input name="high" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.high')" />
                                </div>
                                <div class="col-6">
                                    <x-form.input name="critical_low" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.critical_low')" />
                                </div>
                                <div class="col-6">
                                    <x-form.input name="critical_high" inputmode="decimal"
                                                  :label="__('laboratory::messages.catalogue.critical_high')" />
                                </div>
                            </div>

                            <p class="px-hint">{{ __('laboratory::messages.catalogue.critical_hint') }}</p>

                            <x-form.input name="text_range" :label="__('laboratory::messages.catalogue.text_range')" />

                            <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-plus-lg" aria-hidden="true"></i>
                                {{ __('laboratory::messages.catalogue.add_range') }}
                            </button>
                        </form>
                    </x-px.panel>
                </div>
            @endif
        @endcan
    </div>
@endsection