@php $canManage = $canManageVitals ?? false; @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">Vitals</h3>
            <p class="mt-0.5 text-xs text-slate-500">Record BP, pulse, SpO₂, temperature, and respiratory rate on this ED visit.</p>
        </div>
    </div>

    @if ($canManage)
        <form method="POST" action="{{ route('care.specialty.emergency.vitals', $workspaceVisit) }}" class="mt-4 grid gap-3 sm:grid-cols-4">
            @csrf
            <div>
                <label class="block text-xs font-medium text-slate-600">BP systolic</label>
                <input type="number" name="bp_systolic" 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">BP diastolic</label>
                <input type="number" name="bp_diastolic" 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">Pulse</label>
                <input type="number" name="pulse" 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">SpO₂ %</label>
                <input type="number" name="spo2" 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">Temperature °C</label>
                <input type="number" step="0.1" name="temperature" 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">Respiratory rate</label>
                <input type="number" name="respiratory_rate" 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">Weight kg</label>
                <input type="number" step="0.1" name="weight_kg" 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">Height cm</label>
                <input type="number" step="0.1" name="height_cm" class="mt-1 w-full rounded-xl border border-slate-200 px-3 py-2 text-sm">
            </div>
            <div class="sm:col-span-4">
                <button type="submit" class="btn-primary">Save vitals</button>
            </div>
        </form>
    @endif

    <div @class(['mt-6 border-t border-slate-100 pt-4' => $canManage, 'mt-4' => ! $canManage])>
        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">History</p>
        <ul class="mt-2 divide-y divide-slate-100 text-sm">
            @forelse ($emergencyVitals as $row)
                <li class="flex flex-wrap justify-between gap-2 py-2">
                    <span>
                        BP {{ $row->bp_systolic ?? '—' }}/{{ $row->bp_diastolic ?? '—' }}
                        · P {{ $row->pulse ?? '—' }}
                        · SpO₂ {{ $row->spo2 ?? '—' }}%
                        · T {{ $row->temperature ?? '—' }}
                        · RR {{ $row->respiratory_rate ?? '—' }}
                    </span>
                    <span class="text-slate-500">{{ $row->recorded_at?->format('d M Y H:i') }}</span>
                </li>
            @empty
                <li class="py-3 text-slate-500">No vitals recorded yet.</li>
            @endforelse
        </ul>
    </div>
</section>