<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">{{ __('Citas') }}</h2>
            @can('appointments.manage')
                <a href="{{ route('clinica.appointments.create') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">{{ __('Nueva cita') }}</a>
            @endcan
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <form method="get" action="{{ route('clinica.appointments.index') }}" class="flex flex-wrap items-end gap-4">
                <div>
                    <x-input-label for="fecha" :value="__('Fecha')" />
                    <x-text-input id="fecha" class="block mt-1" type="date" name="fecha" :value="$fecha->toDateString()" required />
                </div>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <input type="hidden" name="incluir_canceladas" value="0" />
                    <input type="checkbox" name="incluir_canceladas" value="1" class="rounded border-gray-300 dark:border-gray-700" @checked(request()->boolean('incluir_canceladas')) />
                    {{ __('Incluir canceladas') }}
                </label>
                <x-primary-button type="submit">{{ __('Ver') }}</x-primary-button>
                <div class="flex gap-2 text-sm">
                    <a href="{{ route('clinica.appointments.index', ['fecha' => $fecha->copy()->subDay()->toDateString(), 'incluir_canceladas' => request()->boolean('incluir_canceladas')]) }}" class="text-indigo-600 hover:underline">{{ __('Anterior') }}</a>
                    <a href="{{ route('clinica.appointments.index', ['fecha' => $fecha->copy()->addDay()->toDateString(), 'incluir_canceladas' => request()->boolean('incluir_canceladas')]) }}" class="text-indigo-600 hover:underline">{{ __('Siguiente') }}</a>
                </div>
            </form>

            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg overflow-hidden">
                <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach ($appointments as $cita)
                        <li class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                            <div>
                                <a href="{{ route('clinica.appointments.show', $cita) }}" class="font-medium text-indigo-600 dark:text-indigo-400 hover:underline">
                                    {{ $cita->starts_at->format('H:i') }} - {{ $cita->ends_at->format('H:i') }}
                                </a>
                                @if ($cita->title)
                                    <span class="text-gray-900 dark:text-gray-100"> - {{ $cita->title }}</span>
                                @endif
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    {{ $cita->patient->name }}
                                    @if ($cita->patient->client)
                                        - {{ $cita->patient->client->name }}
                                    @endif
                                    @if ($cita->assignedUser)
                                        - {{ $cita->assignedUser->name }}
                                    @endif
                                </p>
                            </div>
                            <span class="text-xs shrink-0 uppercase tracking-wide">
                                @if ($cita->status === 'scheduled')
                                    <span class="text-amber-600 dark:text-amber-400">{{ __('Programada') }}</span>
                                @elseif ($cita->status === 'completed')
                                    <span class="text-green-600 dark:text-green-400">{{ __('Completada') }}</span>
                                @elseif ($cita->status === 'cancelled')
                                    <span class="text-gray-500">{{ __('Cancelada') }}</span>
                                @else
                                    <span class="text-red-600 dark:text-red-400">{{ __('No asistio') }}</span>
                                @endif
                            </span>
                        </li>
                    @endforeach
                    @if ($appointments->isEmpty())
                        <li class="p-8 text-center text-gray-500">{{ __('No hay citas este dia.') }}</li>
                    @endif
                </ul>
            </div>
        </div>
    </div>
</x-app-layout>
