@extends('crm.layouts.app')

@section('title', 'Body Map · '.($appointment->client?->name ?? 'Appointment'))

@section('content')
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-8">

    <div class="sm:flex sm:items-start sm:justify-between mb-8">
        <div>
            <a href="{{ route('crm.body-map.index') }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; Body map</a>
            <h1 class="mt-2 text-2xl font-semibold text-gray-900">Placement</h1>
            <p class="mt-1 text-sm text-gray-600">
                {{ $appointment->client?->name ?? 'Unknown client' }}
                &middot; {{ $appointment->scheduled_at?->format('M j, Y \a\t g:i A') }}
            </p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ route('crm.appointments.show', $appointment) }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                Open appointment
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <!-- Placements -->
        <div class="lg:col-span-2 rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-900">Marked areas</h2>
            </div>
            <ul role="list" class="divide-y divide-gray-100">
                @forelse($appointment->bodyParts as $part)
                    <li class="px-6 py-4">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-900">{{ $part->label ?? $part->name }}</p>
                                @if($part->pivot?->notes)
                                    <p class="mt-1 text-sm text-gray-600">{{ $part->pivot->notes }}</p>
                                @endif
                            </div>
                            @if($part->pivot?->status)
                                <span class="shrink-0 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
                                    {{ ucfirst($part->pivot->status) }}
                                </span>
                            @endif
                        </div>
                        @if($part->pivot?->photo_path)
                            <img src="{{ Storage::url($part->pivot->photo_path) }}" alt="{{ $part->label ?? $part->name }}"
                                 class="mt-3 h-32 w-auto rounded-md object-cover ring-1 ring-gray-200">
                        @endif
                    </li>
                @empty
                    <li class="px-6 py-12 text-center">
                        <p class="text-sm font-semibold text-gray-900">No placement recorded</p>
                        <p class="mt-1 text-sm text-gray-500">Mark body areas from the appointment to see them here.</p>
                    </li>
                @endforelse
            </ul>
        </div>

        <!-- Session photos -->
        <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h2 class="text-sm font-semibold text-gray-900 mb-4">Session photos</h2>
            @if($appointment->images->isNotEmpty())
                <div class="grid grid-cols-2 gap-3">
                    @foreach($appointment->images as $image)
                        <figure>
                            <img src="{{ Storage::url($image->path) }}" alt="{{ $image->type }}"
                                 class="h-24 w-full rounded-md object-cover ring-1 ring-gray-200">
                            <figcaption class="mt-1 text-xs text-gray-500">
                                {{ ucfirst(str_replace('_', ' ', $image->type)) }}
                            </figcaption>
                        </figure>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-gray-500">None uploaded.</p>
            @endif
        </div>
    </div>
</div>
@endsection