ladill-care/resources/views/care/appointments/show.blade.php

<x-app-layout title="Appointment">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ $statuses[$appointment->status] ?? $appointment->status }}</p>
            <h1 class="text-2xl font-semibold text-slate-900">{{ $appointment->patient->fullName() }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                {{ $appointment->scheduled_at?->format('d M Y H:i') ?? 'Walk-in' }}
                @if ($appointment->practitioner) · {{ $appointment->practitioner->name }} @endif
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if ($canManage && $appointment->status === \App\Models\Appointment::STATUS_SCHEDULED)
                <form method="POST" action="{{ route('care.appointments.check-in', $appointment) }}">
                    @csrf
                    <button type="submit" class="btn-primary">Check in</button>
                </form>
                <form method="POST" action="{{ route('care.appointments.no-show', $appointment) }}">
                    @csrf
                    <button type="submit" class="rounded-lg border border-amber-200 px-4 py-2 text-sm text-amber-700 hover:bg-amber-50">No show</button>
                </form>
            @endif
            @if ($canConsult && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN], true))
                <form method="POST" action="{{ route('care.queue.start', $appointment) }}">
                    @csrf
                    <button type="submit" class="btn-primary">Start consultation</button>
                </form>
            @endif
            @if ($canConsult && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN, \App\Models\Appointment::STATUS_IN_CONSULTATION], true))
                @if ($appointment->meet_join_url)
                    <a href="{{ $appointment->meet_join_url }}" target="_blank" rel="noopener" class="btn-primary">Join video visit</a>
                @else
                    <form method="POST" action="{{ route('care.appointments.start-meet', $appointment) }}">
                        @csrf
                        <button type="submit" class="btn-primary">Start video visit</button>
                    </form>
                @endif
            @endif
            @if ($canManage && $appointment->status === \App\Models\Appointment::STATUS_SCHEDULED && ! $appointment->meet_join_url)
                <form method="POST" action="{{ route('care.appointments.schedule-meet', $appointment) }}">
                    @csrf
                    <button type="submit" class="rounded-lg border border-sky-200 px-4 py-2 text-sm text-sky-700 hover:bg-sky-50">Schedule video visit</button>
                </form>
            @endif
            @if ($canManage && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN], true))
                @if ($appointment->consultation)
                    <a href="{{ route('care.consultations.show', $appointment->consultation) }}" class="rounded-lg border border-sky-200 px-4 py-2 text-sm text-sky-700 hover:bg-sky-50">View consultation</a>
                @endif
            @endif
            @if ($canManage && ! in_array($appointment->status, [\App\Models\Appointment::STATUS_COMPLETED, \App\Models\Appointment::STATUS_CANCELLED], true))
                <form method="POST" action="{{ route('care.appointments.cancel', $appointment) }}" onsubmit="return confirm('Cancel this appointment?')">
                    @csrf
                    <button type="submit" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-600 hover:bg-red-50">Cancel</button>
                </form>
            @endif
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <section class="rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Details</h2>
            <dl class="mt-4 space-y-3 text-sm">
                <div><dt class="text-slate-500">Patient</dt><dd class="font-medium"><a href="{{ route('care.patients.show', $appointment->patient) }}" class="text-sky-600">{{ $appointment->patient->fullName() }}</a></dd></div>
                <div><dt class="text-slate-500">Branch</dt><dd class="font-medium">{{ $appointment->branch?->name ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Department</dt><dd class="font-medium">{{ $appointment->department?->name ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Type</dt><dd class="font-medium capitalize">{{ str_replace('_', ' ', $appointment->type) }}</dd></div>
                @if ($appointment->meet_join_url)
                    <div><dt class="text-slate-500">Video visit</dt><dd class="font-medium flex flex-wrap items-center gap-2"><a href="{{ $appointment->meet_join_url }}" target="_blank" rel="noopener" class="text-sky-600">Join link</a><x-copy-button :text="$appointment->meet_join_url" icon copied-class="text-emerald-600" class="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600" /></dd></div>
                @endif
                <div><dt class="text-slate-500">Reason</dt><dd class="font-medium">{{ $appointment->reason ?? '—' }}</dd></div>
                @if ($appointment->notes)
                    <div><dt class="text-slate-500">Notes</dt><dd class="font-medium">{{ $appointment->notes }}</dd></div>
                @endif
            </dl>
        </section>

        <section class="rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Timeline</h2>
            <dl class="mt-4 space-y-3 text-sm">
                <div><dt class="text-slate-500">Checked in</dt><dd class="font-medium">{{ $appointment->checked_in_at?->format('d M Y H:i') ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Waiting since</dt><dd class="font-medium">{{ $appointment->waiting_at?->format('d M Y H:i') ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Queue position</dt><dd class="font-medium">{{ $appointment->queue_position ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Started</dt><dd class="font-medium">{{ $appointment->started_at?->format('d M Y H:i') ?? '—' }}</dd></div>
                <div><dt class="text-slate-500">Completed</dt><dd class="font-medium">{{ $appointment->completed_at?->format('d M Y H:i') ?? '—' }}</dd></div>
            </dl>
        </section>
    </div>
</x-app-layout>