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

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl">
                <div class="p-8">
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-800 mb-2">Edit Prestasi</h2>
                        <p class="text-gray-600">Perbarui informasi prestasi santri</p>
                    </div>

                    <form action="{{ route('prestasis.update', $prestasi) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Prestasi</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                                {{-- Santri --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Santri</label>
                                    <select name="santri_id" class="w-full px-4 py-3 border border-gray-300 rounded-lg" required>
                                        <option value="">Pilih Santri</option>
                                        @foreach($santris as $s)
                                            <option value="{{ $s->id }}" {{ old('santri_id', $prestasi->santri_id) == $s->id ? 'selected' : '' }}>
                                                {{ $s->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('santri_id')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Kelas --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Kelas</label>
                                    <select name="kelas_id" class="w-full px-4 py-3 border border-gray-300 rounded-lg" required>
                                        <option value="">Pilih Kelas</option>
                                        @foreach($kelas as $k)
                                            <option value="{{ $k->id }}" {{ old('kelas_id', $prestasi->kelas_id) == $k->id ? 'selected' : '' }}>
                                                {{ $k->nama_kelas }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('kelas_id')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Nama Prestasi --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Nama Prestasi</label>
                                    <input type="text" name="nama_prestasi" class="w-full px-4 py-3 border border-gray-300 rounded-lg"
                                        value="{{ old('nama_prestasi', $prestasi->nama_prestasi) }}" required>
                                    @error('nama_prestasi')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Jenis Prestasi --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Prestasi</label>
                                    <select name="jenis_prestasi" class="w-full px-4 py-3 border border-gray-300 rounded-lg" required>
                                        <option value="">Pilih Jenis</option>
                                        @foreach(['Akademik','Non-Akademik','Olahraga','Seni','Keagamaan'] as $jenis)
                                            <option value="{{ $jenis }}" {{ old('jenis_prestasi', $prestasi->jenis_prestasi) == $jenis ? 'selected' : '' }}>
                                                {{ $jenis }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('jenis_prestasi')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Tingkat --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Tingkat</label>
                                    <select name="tingkat" class="w-full px-4 py-3 border border-gray-300 rounded-lg" required>
                                        @foreach(['Sekolah','Kecamatan','Kabupaten','Provinsi','Nasional','Internasional'] as $tingkat)
                                            <option value="{{ $tingkat }}" {{ old('tingkat', $prestasi->tingkat) == $tingkat ? 'selected' : '' }}>
                                                {{ $tingkat }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tingkat')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Peringkat --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Peringkat</label>
                                    <input type="text" name="peringkat" class="w-full px-4 py-3 border border-gray-300 rounded-lg"
                                        value="{{ old('peringkat', $prestasi->peringkat) }}" required>
                                    @error('peringkat')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Tanggal --}}
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal Prestasi</label>
                                    <input type="date" name="tanggal_prestasi" class="w-full px-4 py-3 border border-gray-300 rounded-lg"
                                        value="{{ old('tanggal_prestasi', $prestasi->tanggal_prestasi) }}" required>
                                    @error('tanggal_prestasi')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Deskripsi --}}
                            <div class="mt-6">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Deskripsi</label>
                                <textarea name="deskripsi" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg"
                                    placeholder="Deskripsi">{{ old('deskripsi', $prestasi->deskripsi) }}</textarea>
                                @error('deskripsi')
                                    <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Sertifikat --}}
                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Sertifikat / Piagam</h3>
                            @if($prestasi->sertifikat)
                                <p class="text-sm text-gray-600 mb-2">
                                    File saat ini: 
                                    <a href="{{ asset('storage/'.$prestasi->sertifikat) }}" target="_blank" class="text-blue-600 underline">
                                        Lihat Sertifikat
                                    </a>
                                </p>
                            @endif
                            <input type="file" name="sertifikat" class="w-full px-4 py-3 border border-gray-300 rounded-lg" accept="image/*,.pdf">
                            <p class="text-sm text-gray-500 mt-1">Format: JPG, PNG, PDF. Maksimal 5MB.</p>
                            @error('sertifikat')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Aksi --}}
                        <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                            <a href="{{ route('prestasis.index') }}" class="inline-flex items-center px-6 py-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
                                <i class="fas fa-arrow-left mr-2"></i> Kembali
                            </a>
                            <button type="submit" class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
                                <i class="fas fa-save mr-2"></i> Update Prestasi
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
