@props([
'headers' => [],
'rows' => [],
'emptyMessage' => 'No se encontraron resultados.',
'pagination' => null,
])

<form method="GET" class="mb-6 flex flex-wrap items-center gap-4 dark:text-white">
    <input type="text" name="search" id="nombre" value="{{ request('search') }}" placeholder="Buscar por nombre o email"
        class="border text-xs border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 dark:text-white rounded-lg px-4 py-2 shadow-sm focus:ring focus:ring-blue-300 focus:outline-none" />

    <input type="text" name="from" id="from_date" value="{{ request('from') }}" autocomplete="off" placeholder="Desde"
        class="border text-xs border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 dark:text-white rounded-lg px-4 py-2 shadow-sm focus:ring focus:ring-blue-300 focus:outline-none" />

    <input type="text" name="to" id="to_date" value="{{ request('to') }}" autocomplete="off" placeholder="Hasta"
        class="border text-xs border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 dark:text-white rounded-lg px-4 py-2 shadow-sm focus:ring focus:ring-blue-300 focus:outline-none" />

    <button type="submit" class="bg-sky-600 text-xs text-white px-4 py-2 rounded-lg hover:bg-sky-700 transition">
        Filtrar
    </button>

    <button type="button" id="resetFilters"
        class="bg-gray-300 dark:bg-gray-600 text-xs dark:text-white text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">
        Ver todo
    </button>
</form>

<div class="overflow-x-auto rounded-2xl shadow mb-10">
    <table class="min-w-full divide-y divide-gray-200 text-sm text-left bg-white dark:bg-gray-900 dark:text-white">
        <thead class="bg-sky-900 text-white dark:bg-cyan-800 dark:text-white">
            <tr>
                @foreach ($headers as $header)
                <th scope="col" class="px-4 py-3 font-semibold uppercase tracking-wider whitespace-nowrap">
                    {{ $header }}
                </th>
                @endforeach
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @forelse ($rows as $index => $row)
            <tr
                class="{{ $index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700' }} hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                @foreach ($row as $cell)
                <td class="px-4 py-3 whitespace-nowrap">
                    {!! $cell !!}
                </td>
                @endforeach
            </tr>
            @empty
            <tr>
                <td colspan="{{ count($headers) }}" class="px-4 py-4 text-center text-gray-500 dark:text-gray-400">
                    {{ $emptyMessage }}
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if ($pagination)
<div class="mt-4 dark:text-white">
    {{ $pagination->links() }}
</div>
@endif