<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">{{ __('Cita') }}</h2>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('clinica.appointments.index', ['fecha' => $appointment->starts_at->toDateString()]) }}" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Lista del dia') }}</a>
                @can('update', $appointment)
                    <a href="{{ route('clinica.appointments.edit', $appointment) }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500">{{ __('Editar') }}</a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 text-sm space-y-3">
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Horario') }}:</span>
                    {{ $appointment->starts_at->translatedFormat('d M Y H:i') }} - {{ $appointment->ends_at->format('H:i') }}</p>
                @if ($appointment->title)
                    <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Motivo') }}:</span> {{ $appointment->title }}</p>
                @endif
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Paciente') }}:</span>
                    <a href="{{ route('clients.patients.show', [$appointment->client, $appointment->patient]) }}" class="text-indigo-600 hover:underline">{{ $appointment->patient->name }}</a></p>
                <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Titular') }}:</span>
                    <a href="{{ route('clients.show', $appointment->client) }}" class="text-indigo-600 hover:underline">{{ $appointment->client->name }}</a></p>
                @if ($appointment->assignedUser)
                    <p><span class="font-medium text-gray-900 dark:text-gray-100">{{ __('Medico') }}:</span> {{ $appointment->assignedUser->name }}</p>
                @endif
                @if ($appointment->author)
                    <p class="text-gray-500 text-xs">{{ __('Registrada por') }} {{ $appointment->author->name }}</p>
                @endif
                @if ($appointment->notes)
                    <p class="pt-2 border-t border-gray-200 dark:border-gray-700">{{ $appointment->notes }}</p>
                @endif
            </div>

            @can('delete', $appointment)
                @if ($appointment->status !== 'cancelled')
                    <form method="post" action="{{ route('clinica.appointments.destroy', $appointment) }}" onsubmit="return confirm(@js(__('Cancelar esta cita?')));">
                        @csrf
                        @method('delete')
                        <button type="submit" class="text-sm text-red-600 dark:text-red-400 hover:underline">{{ __('Cancelar cita') }}</button>
                    </form>
                @endif
            @endcan
        </div>
    </div>
</x-app-layout>
