<x-guru-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Prestasi Santri') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="p-6">

                    <form action="{{ route('guru.prestasis.index') }}" method="GET" class="mb-4">
                        <input type="text" name="search" placeholder="Cari nama santri..."
                            value="{{ request('search') }}" class="border px-3 py-2 rounded-lg">
                        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Cari</button>
                    </form>

                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">Data Prestasi Santri</h2>
                        <a href="{{ route('guru.prestasis.create') }}"
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                            + Tambah Prestasi
                        </a>
                    </div>

                    @if(session('success'))
                        <div class="mb-4 p-4 bg-green-100 text-green-800 rounded-lg">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 text-sm text-left">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2">No</th>
                                    <th class="px-4 py-2">Santri</th>
                                    <th class="px-4 py-2">Kelas</th>
                                    <th class="px-4 py-2">Nama Prestasi</th>
                                    <th class="px-4 py-2">Jenis</th>
                                    <th class="px-4 py-2">Tingkat</th>
                                    <th class="px-4 py-2">Peringkat</th>
                                    <th class="px-4 py-2">Tanggal</th>
                                    <th class="px-3 py-2">Sertifikat</th>
                                    <!-- <th class="px-4 py-2">Aksi</th> -->
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($prestasis as $i => $p)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-2">{{ $i + 1 }}</td>
                                        <td class="px-4 py-2">{{ $p->santri->nama ?? '-' }}</td>
                                        <td class="px-4 py-2">{{ $p->kelas->nama_kelas ?? '-' }}</td>
                                        <td class="px-4 py-2">{{ $p->nama_prestasi }}</td>
                                        <td class="px-4 py-2">{{ $p->jenis_prestasi }}</td>
                                        <td class="px-4 py-2">{{ $p->tingkat }}</td>
                                        <td class="px-4 py-2">{{ $p->peringkat }}</td>
                                        <td class="px-4 py-2">
                                            {{ \Carbon\Carbon::parse($p->tanggal_prestasi)->format('d M Y') }}</td>
                                        <td class="px-3 py-2">
                                            @if ($p->sertifikat)
                                                <a href="{{ asset('storage/' . $p->sertifikat) }}"
                                                    class="text-blue-500 underline text-xs" target="_blank">Lihat</a>
                                            @else
                                                <span class="text-gray-400 text-xs">-</span>
                                            @endif
                                        </td>
                                        <!-- <td class="px-4 py-2 flex gap-2">
                                                <a href="{{ route('prestasis.edit', $p) }}" class="inline-block px-3 py-1 text-sm bg-green-600 text-white rounded hover:bg-green-700">
                                                    Edit
                                                </a>
                                                <form action="{{ route('prestasis.destroy', $p) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600">
                                                        Hapus
                                                    </button>
                                                </form>
                                            </td> -->
                                    </tr>
                                @endforeach
                                @if($prestasis->isEmpty())
                                    <tr>
                                        <td colspan="9" class="text-center px-4 py-4 text-gray-500">
                                            Belum ada data prestasi.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-6">
                        {{ $prestasis->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guru-layout>