@extends('layouts.app')
@section('title', 'Appointment Details')
@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <div class="flex justify-between items-start mb-5">
            <div>
                <h3 class="text-lg font-bold text-gray-900">{{ $appointment->patient->full_name ?? '' }}</h3>
                <p class="text-sm text-gray-500 font-mono">{{ $appointment->patient->mrn ?? '' }}</p>
            </div>
            @php $sc = ['scheduled'=>'badge-info','checked_in'=>'badge-success','completed'=>'badge-success','no_show'=>'badge-danger','cancelled'=>'badge-gray']; @endphp
            <span class="badge {{ $sc[$appointment->status] ?? 'badge-gray' }}">{{ ucfirst(str_replace('_',' ',$appointment->status)) }}</span>
        </div>
        <div class="space-y-3 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Date</span><span class="font-medium">{{ $appointment->appointment_date->format('l, d M Y') }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Time</span><span>{{ $appointment->appointment_time ?? 'Any time' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Type</span><span class="capitalize">{{ str_replace('_',' ',$appointment->type) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Department</span><span>{{ $appointment->department->name ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Clinician</span><span>{{ $appointment->clinician->name ?? 'Any available' }}</span></div>
            @if($appointment->reason)<div class="flex justify-between"><span class="text-gray-500">Reason</span><span>{{ $appointment->reason }}</span></div>@endif
            @if($appointment->notes)<div class="pt-2 border-t"><p class="text-xs text-gray-400 mb-1">Notes</p><p class="text-sm whitespace-pre-line">{{ $appointment->notes }}</p></div>@endif
        </div>
        <div class="flex gap-2 mt-6 pt-4 border-t">
            @if($appointment->status === 'scheduled')
                <form method="POST" action="{{ route('appointments.checkin', $appointment) }}">@csrf<button class="btn-success text-xs">Check In</button></form>
                <a href="{{ route('appointments.edit', $appointment) }}" class="btn-primary text-xs">Edit</a>
                <form method="POST" action="{{ route('appointments.destroy', $appointment) }}" onsubmit="return confirm('Cancel?')">@csrf @method('DELETE')<button class="btn-danger text-xs">Cancel</button></form>
            @endif
            <a href="{{ route('appointments.index') }}" class="btn-secondary text-xs">Back</a>
        </div>
    </div>
</div>
@endsection