@props([
    'link' => '#',     // SVG o HTML del ícono
    'filters' => [],
    'showCreate' => true,
])

<div class="p-4" x-data="{ search: '' }">
   <div class="flex items-center gap-2 mb-4">

        <!-- Búsqueda -->
        <x-ui.form 
            class="flex items-center gap-2"
            action="{{route($link.'.search')}}"
            method="GET"
            x-data="{ search: '' }"
        >
            <input
                name="search" 
                type="text"
                placeholder="Buscar..."
                x-model="search"
                class="px-4 py-2 border border-gray-300 rounded-md shadow-sm
                   focus:ring focus:ring-indigo-200 focus:outline-none w-64"
            >

            <x-ui.button 
                icon="lucide-search"
                type="submit" 
            />

            <x-ui.option-dropdown 
                label="Opciones"
                icon="lucide-funnel"
                :filters="$filters"
            />

        </x-ui.form>
        
       
        @if($showCreate)
            <x-ui.button-link 
                icon="lucide-circle-plus"
                value="Nuevo registro"
                link="{{ route($link.'.create') }}"
            />
        @endif
     
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 bg-white shadow-md rounded-lg">
            <thead class="bg-gray-50">
                <tr>
                    @foreach ($columns as $column)
                        <th scope="col" 
                            class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer">
                            {{ $column['label'] }}
                        </th>
                    @endforeach

                    @if(isset($actionsSlot))
                        <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Acciones
                        </th>
                    @endif
                </tr>
            </thead>

            <tbody class="bg-white divide-y divide-gray-200">
                @foreach ($rows as $row)
                    @php
                        // Generamos un string con todos los valores de la fila para Alpine
                        $rowText = collect($columns)->map(fn($col) => data_get($row, $col['field']))->implode(' ');
                    @endphp
                    <tr 
                        class="hover:bg-gray-100 transition duration-150 ease-in-out"
                        x-show="search === '' || '{{ strtolower($rowText) }}'.includes(search.toLowerCase())"
                    >
                        @foreach ($columns as $column)
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                @if(isset($column['render']) && is_callable($column['render']))
                                    {!! $column['render']($row) !!}
                                @else
                                    {{ data_get($row, $column['field']) }}
                                @endif
                            </td>
                        @endforeach

                        @if(isset($actionsSlot))
                            <td class="px-6 py-4 whitespace-nowrap flex gap-2">
                                {{ $actionsSlot($row) }}
                            </td>
                        @endif
                    </tr>
                @endforeach

                @if($rows->isEmpty())
                    <tr>
                        <td colspan="{{ count($columns) + (isset($actionsSlot) ? 1 : 0) }}" class="px-6 py-4 text-center text-gray-500">
                            No hay registros.
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $rows->links('vendor.pagination.tailwind') }}
    </div>
</div>