@extends('layouts.admin')

@section('page_kicker', 'Patient')
@section('page_title', $patient->name)

@section('content')
    <div class="mb-6">
        <a href="{{ route('aim4wellness.patients') }}" class="inline-flex items-center gap-1 text-sm font-semibold text-slate-600 transition hover:text-teal-700">
            <span aria-hidden="true">←</span> Back to patients
        </a>
    </div>
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="admin-content-card lg:col-span-1">
            <h3 class="admin-card-title">Profile</h3>
            <dl class="mt-5 space-y-4 text-sm">
                <div>
                    <dt class="admin-form-label !mb-1 !normal-case !tracking-normal text-slate-500">Email</dt>
                    <dd class="font-medium text-slate-900">{{ $patient->email }}</dd>
                </div>
                @if($patient->phone)
                    <div>
                        <dt class="admin-form-label !mb-1 !normal-case !tracking-normal text-slate-500">Phone</dt>
                        <dd class="font-medium text-slate-900">{{ $patient->phone }}</dd>
                    </div>
                @endif
            </dl>
        </div>
        <div class="space-y-6 lg:col-span-2">
            <div class="admin-content-card">
                <h3 class="admin-card-title">Consultations</h3>
                <ul class="mt-4 space-y-2 text-sm">
                    @forelse($consultations as $c)
                        <li class="rounded-xl border border-slate-100 bg-slate-50/80 px-4 py-2.5">#{{ $c->id }} · {{ $c->type }} · {{ $c->status }} · {{ $c->created_at->format('M j, Y') }}</li>
                    @empty
                        <li class="text-slate-500">None yet.</li>
                    @endforelse
                </ul>
            </div>
            <div class="admin-content-card">
                <h3 class="admin-card-title">Appointments</h3>
                <ul class="mt-4 space-y-2 text-sm">
                    @forelse($appointments as $a)
                        <li class="rounded-xl border border-slate-100 bg-slate-50/80 px-4 py-2.5">#{{ $a->id }} · {{ $a->status }} · {{ optional($a->scheduled_at)->format('M j, Y g:i A') }}</li>
                    @empty
                        <li class="text-slate-500">None yet.</li>
                    @endforelse
                </ul>
            </div>
            <div class="admin-content-card">
                <h3 class="admin-card-title">Your notes</h3>
                <ul class="mt-4 space-y-4 text-sm">
                    @forelse($notes as $n)
                        <li class="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm">
                            <p class="text-xs text-slate-500">{{ $n->created_at->format('M j, Y g:i A') }}</p>
                            <p class="mt-2 whitespace-pre-wrap text-slate-800">{{ $n->notes }}</p>
                            @if($n->advice)
                                <p class="mt-3 rounded-lg bg-teal-50/80 p-2 text-slate-700 ring-1 ring-teal-100"><span class="font-semibold text-teal-900">Advice:</span> {{ $n->advice }}</p>
                            @endif
                        </li>
                    @empty
                        <li class="text-slate-500">No notes saved.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
@endsection