<x-layouts.tenant pageTitle="Historial clínico">
    <x-page-header title="Historial clínico" subtitle="Consulta y actualiza las fichas clínicas de tus clientes." />

    <x-card>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <thead class="bg-gray-50 text-left text-xs font-semibold uppercase text-gray-500">
                    <tr>
                        <th class="px-4 py-3">Cliente</th>
                        <th class="px-4 py-3">Contacto</th>
                        <th class="px-4 py-3">Última actualización</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($customers as $customer)
                        <tr>
                            <td class="px-4 py-3 font-medium text-gray-900">{{ $customer->fullName() }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $customer->phone ?? $customer->email ?? 'Sin contacto' }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $customer->clinicalHistory?->updated_at?->diffForHumans() ?? 'Sin ficha' }}</td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ route('tenant.clinical-histories.show', $customer) }}" class="font-medium text-indigo-600 hover:text-indigo-700">Abrir</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-8">
                                <x-empty-state title="No hay clientes" message="Crea clientes para empezar a documentar sus historiales." />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">{{ $customers->links() }}</div>
    </x-card>
</x-layouts.tenant>
