@extends('layouts.app')

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

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

        {{-- The count, where a listing of a thousand rows needs it: knowing the
             formulary holds 1,183 drugs is the difference between "the search
             found nothing" and "there is nothing to find". --}}
        <span class="px-chip">
            {{ trans_choice('prescriptions::messages.formulary.count', $drugs->total(), ['count' => number_format($drugs->total())]) }}
        </span>
    </div>

    <div class="px-layout">
        <div class="min-w-0">
            {{-- ── Search ─────────────────────────────────────────────────── --}}
            {{-- Outside the results region on purpose: that region is replaced
                 wholesale when the filter runs, which would destroy the field
                 somebody is typing into. --}}
            <div class="px-panel p-3 p-md-4 mb-4">
                <form method="GET" action="{{ route('formulary.index') }}" data-clinic-filter
                      class="row g-3 align-items-end">
                    <div class="col-12 col-md-8">
                        <label for="search" class="px-field-label">{{ __('common.search') }}</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"
                                   value="{{ $search }}"
                                   placeholder="{{ __('prescriptions::messages.formulary.search_placeholder') }}">
                        </div>
                    </div>

                    <div class="col-12 col-md-4 d-flex gap-2">
                        <a href="{{ route('formulary.index') }}"
                           class="btn px-btn-ghost d-inline-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
                            {{ __('common.reset') }}
                        </a>
                        {{-- Kept even though the list filters live: without a
                             script this button is the only way to search. --}}
                        <button type="submit"
                                class="btn px-btn-primary flex-grow-1 d-inline-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-funnel" aria-hidden="true"></i>
                            {{ __('common.filter') }}
                        </button>
                    </div>
                </form>
            </div>

            {{-- ── The list ───────────────────────────────────────────────── --}}
            <x-results>
                <div class="px-panel overflow-hidden">
                    @if ($drugs->isEmpty())
                        <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">
                                    <path d="M10.5 20.5 3.5 13.5a5 5 0 0 1 7-7l7 7a5 5 0 0 1-7 7z" />
                                    <path d="M7 10l7 7" />
                                </svg>
                            </div>

                            <p class="px-empty__title">{{ __('prescriptions::messages.formulary.empty') }}</p>
                            <p class="px-empty__text mb-0">{{ __('prescriptions::messages.formulary.empty_text') }}</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table px-table px-table--sticky align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ __('prescriptions::messages.formulary.name') }}</th>
                                        <th scope="col">{{ __('prescriptions::messages.formulary.ingredients') }}</th>
                                        <th scope="col">{{ __('prescriptions::messages.formulary.form') }}</th>
                                        <th scope="col">{{ __('prescriptions::messages.formulary.strength') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($drugs as $drug)
                                        <tr>
                                            <td>
                                                <span class="fw-semibold">{{ $drug->name }}</span>

                                                @if ($drug->is_controlled)
                                                    <span class="px-pill px-pill--red">
                                                        <i class="bi bi-shield-lock-fill" aria-hidden="true"></i>
                                                        {{ __('prescriptions::messages.items.controlled') }}
                                                    </span>
                                                @endif

                                                @if ($drug->generic_name && $drug->generic_name !== $drug->name)
                                                    <span class="d-block px-hint">{{ $drug->generic_name }}</span>
                                                @endif
                                            </td>

                                            <td class="small text-body-secondary">{{ $drug->ingredients ?: '—' }}</td>

                                            <td>
                                                {{--
                                                    "Other" means the form is not
                                                    recorded, which is true of most
                                                    of the imported generics. Set
                                                    quietly so a column of them does
                                                    not read as a column of findings.
                                                --}}
                                                <span class="px-pill {{ $drug->form === \App\Modules\Prescriptions\Enums\DrugForm::Other ? 'px-pill--grey' : 'px-pill--blue' }}">
                                                    {{ $drug->form->label() }}
                                                </span>
                                            </td>

                                            <td class="small font-monospace">{{ $drug->strength ?: '—' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

                @if ($drugs->hasPages())
                    <div class="mt-3">{{ $drugs->links() }}</div>
                @endif
            </x-results>
        </div>

        {{-- ── Add a drug ─────────────────────────────────────────────────── --}}
        @can('create', \App\Modules\Prescriptions\Models\Drug::class)
            <aside class="px-aside" aria-label="{{ __('prescriptions::messages.formulary.add') }}">
                <div class="px-aside__card">
                    <p class="px-aside__title">{{ __('prescriptions::messages.formulary.add') }}</p>

                    <form method="POST" action="{{ route('formulary.store') }}">
                        @csrf

                        <x-form.input name="name" :label="__('prescriptions::messages.formulary.name')" required />
                        <x-form.input name="generic_name" :label="__('prescriptions::messages.formulary.generic_name')" />

                        {{--
                            The single most important field on this form. A patient
                            allergic to penicillin is at risk from amoxicillin, and
                            nothing but the ingredient list can connect the two.
                        --}}
                        <x-form.input name="ingredients"
                                      :label="__('prescriptions::messages.formulary.ingredients')"
                                      :help="__('prescriptions::messages.formulary.ingredients_hint')" />

                        <x-form.select name="form"
                                       :label="__('prescriptions::messages.formulary.form')"
                                       :options="$forms" required />

                        <x-form.input name="strength" :label="__('prescriptions::messages.formulary.strength')" />
                        <x-form.input name="route" :label="__('prescriptions::messages.formulary.route')" />

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_controlled" id="is_controlled" value="1"
                                   @checked(old('is_controlled'))>
                            <label class="form-check-label small" for="is_controlled">
                                {{ __('prescriptions::messages.formulary.controlled') }}
                            </label>
                        </div>

                        <button type="submit" class="btn px-btn-primary w-100">
                            {{ __('prescriptions::messages.formulary.add') }}
                        </button>
                    </form>
                </div>
            </aside>
        @endcan
    </div>
@endsection