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

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <form method="get" action="{{ route('clients.index') }}" class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end">
                <div class="flex-1">
                    <x-input-label for="q" :value="__('Buscar')" />
                    <x-text-input id="q" class="block mt-1 w-full" type="search" name="q" :value="request('q')"
                                  placeholder="{{ __('Nombre, documento, teléfono, correo…') }}" />
                </div>
                <x-primary-button type="submit">{{ __('Buscar') }}</x-primary-button>
            </form>

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-0 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-900/50">
                        <tr>
                            <th class="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300">{{ __('Cliente') }}</th>
                            <th class="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300 hidden md:table-cell">{{ __('Documento') }}</th>
                            <th class="px-4 py-3 text-left font-medium text-gray-600 dark:text-gray-300 hidden lg:table-cell">{{ __('Contacto') }}</th>
                            <th class="px-4 py-3 text-right font-medium text-gray-600 dark:text-gray-300">{{ __('Acciones') }}</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse ($clients as $client)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-900/30">
                                <td class="px-4 py-3">
                                    <a href="{{ route('clients.show', $client) }}" class="font-medium text-indigo-600 dark:text-indigo-400 hover:underline">
                                        {{ $client->name }}
                                    </a>
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 hidden md:table-cell">
                                    @if ($client->document_number)
                                        {{ trim(($client->document_type ? $client->document_type.'-' : '').$client->document_number) }}
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 hidden lg:table-cell">
                                    {{ $client->phone ?? '—' }}
                                    @if ($client->email)
                                        <br><span class="text-xs">{{ $client->email }}</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-right whitespace-nowrap">
                                    <a href="{{ route('clients.show', $client) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('Ver') }}</a>
                                    @can('clients.manage')
                                        <span class="text-gray-300 dark:text-gray-600 mx-1">|</span>
                                        <a href="{{ route('clients.edit', $client) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('Editar') }}</a>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                    {{ __('No hay clientes registrados.') }}
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($clients->hasPages())
                    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                        {{ $clients->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
