{{-- Table --}}
<div class="overflow-x-auto" id="prestasi-table">
    <table class="min-w-full border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden">
        <thead class="bg-gray-100 dark:bg-gray-700">
            <tr>
                <th class="px-4 py-2 text-left">#</th>
                <th class="px-4 py-2 text-left">Gambar</th>
                <th class="px-4 py-2 text-left">Judul Prestasi</th>
                <th class="px-4 py-2 text-left">Keterangan</th>
                <th class="px-4 py-2 text-center">Aksi</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800">
            @foreach ($prestasis as $item)
                <tr class="border-t dark:border-gray-700">
                    <td class="px-4 py-3">{{ $prestasis->firstItem() + $loop->index }}</td>
                    <td class="px-4 py-3">
                        @if ($item->gambar)
                            <img src="{{ asset('storage/' . $item->gambar) }}"
                                class="w-20 h-20 object-cover rounded-lg cursor-pointer preview-click"
                                data-src="{{ asset('storage/' . $item->gambar) }}"
                                alt="gambar prestasi {{ $item->judul }}">
                        @endif
                    </td>
                    <td class="px-4 py-3">{{ $item->judul }}</td>
                    <td class="px-4 py-3">{{ \Illuminate\Support\Str::limit($item->keterangan, 80) }}</td>
                    <td class="px-4 py-3 text-center space-x-2">
                        <button onclick="openEditPrestasiModal({{ $item->id }})"
                            class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow transition">
                            ✏️ Edit
                        </button>

                        <form id="deleteFormPrestasi-{{ $item->id }}"
                            action="{{ route('admin.prestasi.destroy', $item->id) }}" method="POST"
                            class="inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="button"
                                onclick="openDeletePrestasiModal('{{ $item->id }}', 'Apakah kamu yakin ingin menghapus prestasi ini?')"
                                class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow transition">
                                🗑️ Hapus
                            </button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="mt-4">
        {{ $prestasis->links() }}
    </div>
</div>