@php
    $transfusion = $bloodBankTransfusion;
    $payload = $transfusion?->payload ?? [];
    $canManage = $canManageClinical ?? $canConsult ?? false;
    $defaults = [
        'started_at' => $payload['started_at'] ?? now()->format('Y-m-d H:i'),
        'units_transfused' => $payload['units_transfused'] ?? '',
        'vitals_ok' => old('payload.vitals_ok', $payload['vitals_ok'] ?? true),
        'reaction' => $payload['reaction'] ?? 'None',
        'outcome' => $payload['outcome'] ?? '',
        'notes' => $payload['notes'] ?? '',
    ];
@endphp

<section class="rounded-2xl border border-slate-200 bg-white p-5">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Transfusion</h3>
            <p class="mt-0.5 text-xs text-slate-500">Document transfusion progress, reactions, and outcome.</p>
        </div>
    </div>

    @if ($canManage)
        <form method="POST" action="{{ route('care.specialty.blood-bank.transfusion', $workspaceVisit) }}" class="mt-4 space-y-4">
            @csrf
            <input type="hidden" name="tab" value="transfusion">

            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="block text-xs font-medium text-slate-600">Started at</label>
                    <input type="text" name="payload[started_at]" value="{{ old('payload.started_at', $defaults['started_at']) }}" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Units transfused</label>
                    <input type="number" name="payload[units_transfused]" min="0" value="{{ old('payload.units_transfused', $defaults['units_transfused']) }}" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Reaction</label>
                    <select name="payload[reaction]" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                        @foreach (['None', 'Mild (fever / itch)', 'Moderate', 'Severe / stop transfusion'] as $option)
                            <option value="{{ $option }}" @selected(old('payload.reaction', $defaults['reaction']) === $option)>{{ $option }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-600">Outcome</label>
                    <select name="payload[outcome]" required class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
                        <option value="">Select…</option>
                        @foreach (['In progress', 'Completed uneventfully', 'Stopped — reaction', 'Stopped — other'] as $option)
                            <option value="{{ $option }}" @selected(old('payload.outcome', $defaults['outcome']) === $option)>{{ $option }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <label class="inline-flex items-center gap-2 text-sm">
                <input type="checkbox" name="payload[vitals_ok]" value="1" @checked(old('payload.vitals_ok', $defaults['vitals_ok'])) class="rounded border-slate-300">
                Pre-/intra-transfusion vitals acceptable
            </label>

            <div>
                <label class="block text-xs font-medium text-slate-600">Notes</label>
                <textarea name="payload[notes]" rows="3" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">{{ old('payload.notes', $defaults['notes']) }}</textarea>
            </div>

            <button type="submit" class="btn-primary">Save transfusion</button>
        </form>
    @elseif ($transfusion)
        <dl class="mt-4 grid gap-3 text-sm sm:grid-cols-2">
            <div>
                <dt class="text-slate-500">Outcome</dt>
                <dd class="font-medium text-slate-900">{{ $payload['outcome'] ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Reaction</dt>
                <dd class="font-medium text-slate-900">{{ $payload['reaction'] ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Units transfused</dt>
                <dd class="font-medium text-slate-900">{{ $payload['units_transfused'] ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-slate-500">Notes</dt>
                <dd class="font-medium text-slate-900">{{ $payload['notes'] ?? '—' }}</dd>
            </div>
        </dl>
    @else
        <p class="mt-3 text-sm text-slate-500">No transfusion record yet.</p>
    @endif
</section>
