@php
    $selectedStudent = $students->firstWhere('id', old('student_id', $achievement->student_id ?? null));
@endphp

<div class="space-y-6">
    <div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-amber-50/25 p-5 shadow-sm ring-1 ring-white/70">
        <div class="mb-5 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
            <div>
                <h3 class="text-base font-semibold text-slate-900">Identitas Prestasi</h3>
                <p class="mt-1 text-sm text-slate-500">Pilih siswa lalu lengkapi inti informasi prestasinya terlebih dahulu.</p>
            </div>
            <div class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">
                Field inti dulu, lampiran bisa menyusul
            </div>
        </div>

        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div class="md:col-span-2">
                <label for="student_id_search" class="mb-2 block text-sm font-medium text-slate-700">Siswa</label>
                <div class="relative" data-searchable-student-select>
                    <input
                        id="student_id_search"
                        type="text"
                        value="{{ $selectedStudent?->full_name ? $selectedStudent->full_name . ' — NIS: ' . ($selectedStudent->student_number ?: '-') . ' — NISN: ' . ($selectedStudent->nisn ?: '-') : '' }}"
                        class="h-12 w-full rounded-2xl border border-slate-200 bg-white px-4 pr-12 text-sm text-slate-700 placeholder:text-slate-400 focus:border-indigo-300 focus:outline-none focus:ring-4 focus:ring-indigo-100"
                        placeholder="Ketik nama siswa / NIS / NISN"
                        autocomplete="off"
                        data-student-search-input
                        required
                    >
                    <input type="hidden" name="student_id" value="{{ old('student_id', $achievement->student_id ?? '') }}" data-student-search-value>
                    <button type="button" class="absolute inset-y-0 right-0 flex items-center px-4 text-slate-400 transition hover:text-slate-600" data-student-search-toggle aria-label="Tampilkan daftar siswa">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m6 9 6 6 6-6" />
                        </svg>
                    </button>
                    <div class="absolute z-30 mt-2 hidden max-h-72 w-full overflow-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-xl shadow-slate-200/60" data-student-search-dropdown>
                        @foreach ($students as $studentOption)
                            <button
                                type="button"
                                class="flex w-full flex-col rounded-xl px-3 py-3 text-left text-sm transition hover:bg-slate-50"
                                data-student-option
                                data-value="{{ $studentOption->id }}"
                                data-label="{{ $studentOption->full_name }} — NIS: {{ $studentOption->student_number ?: '-' }} — NISN: {{ $studentOption->nisn ?: '-' }}"
                                data-search="{{ strtolower($studentOption->full_name . ' ' . ($studentOption->student_number ?: '') . ' ' . ($studentOption->nisn ?: '')) }}"
                            >
                                <span class="font-semibold text-slate-800">{{ $studentOption->full_name }}</span>
                                <span class="mt-1 text-xs text-slate-500">NIS: {{ $studentOption->student_number ?: '-' }} · NISN: {{ $studentOption->nisn ?: '-' }}</span>
                            </button>
                        @endforeach
                        <div class="hidden px-3 py-3 text-sm text-slate-500" data-student-empty-state>Tidak ada siswa yang cocok.</div>
                    </div>
                </div>
                @if ($selectedStudent)
                    <div class="mt-3 rounded-2xl border border-indigo-100 bg-indigo-50/70 px-4 py-3 text-xs text-indigo-700 shadow-sm ring-1 ring-white/70">
                        Siswa terpilih: <span class="font-semibold">{{ $selectedStudent->full_name }}</span>
                        @if ($selectedStudent->student_number)
                            · NIS {{ $selectedStudent->student_number }}
                        @endif
                        @if ($selectedStudent->nisn)
                            · NISN {{ $selectedStudent->nisn }}
                        @endif
                    </div>
                @endif
                @error('student_id')
                    <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <x-form-input name="achievement_name" label="Nama Prestasi" :value="old('achievement_name', $achievement->achievement_name ?? '')" required />
            <x-form-input name="category" label="Kategori Prestasi" :value="old('category', $achievement->category ?? '')" placeholder="Akademik / Non Akademik / lainnya" />
            <x-form-select name="level" label="Tingkat Prestasi" :options="$levelOptions" :value="old('level', $achievement->level ?? '')" placeholder="-- Pilih tingkat --" />
            <x-form-input name="rank" label="Peringkat / Predikat" :value="old('rank', $achievement->rank ?? '')" placeholder="Juara 1 / Finalis / Best Speaker" />
            <x-form-input name="organizer" label="Penyelenggara" :value="old('organizer', $achievement->organizer ?? '')" placeholder="Nama sekolah / instansi / event" />

            <div class="grid grid-cols-1 gap-5 md:col-span-2 md:grid-cols-2">
                <x-form-input name="achievement_year" label="Tahun Prestasi" type="number" :value="old('achievement_year', $achievement->achievement_year ?? '')" placeholder="2026" />
                <x-form-input name="achievement_date" label="Tanggal Prestasi" type="date" :value="old('achievement_date', isset($achievement->achievement_date) && $achievement->achievement_date ? $achievement->achievement_date->format('Y-m-d') : '')" />
            </div>

            <div class="md:col-span-2">
                <label for="description" class="mb-2 block text-sm font-medium text-slate-700">Keterangan</label>
                <textarea id="description" name="description" rows="4" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-4 focus:ring-indigo-100" placeholder="Catatan tambahan tentang prestasi siswa, misalnya konteks lomba atau capaian khusus.">{{ old('description', $achievement->description ?? '') }}</textarea>
                <p class="mt-2 text-xs text-slate-500">Opsional, tapi berguna saat admin lain perlu memahami konteks prestasi ini.</p>
                @error('description')
                    <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5 shadow-sm ring-1 ring-white/70">
            <div class="mb-4 flex items-start justify-between gap-3">
                <div>
                    <label for="certificate_file" class="block text-sm font-medium text-slate-700">Upload Piagam</label>
                    <p class="mt-1 text-xs text-slate-500">Simpan file sertifikat atau piagam bila sudah tersedia.</p>
                </div>
                <span class="rounded-full bg-indigo-100 px-3 py-1 text-[11px] font-semibold text-indigo-700">PDF / Gambar</span>
            </div>
            <div class="flex min-h-[3rem] items-center rounded-2xl border border-slate-200 bg-white px-3 py-2 transition focus-within:border-indigo-300 focus-within:ring-4 focus-within:ring-indigo-100">
                <input id="certificate_file" name="certificate_file" type="file" class="block w-full text-sm text-slate-700 file:mr-3 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100" accept=".pdf,.jpg,.jpeg,.png,.webp">
            </div>
            <p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG, WEBP · maksimal 5 MB.</p>
            @if (!empty($achievement->certificate_file))
                <div class="mt-3 rounded-2xl border border-indigo-100 bg-white px-4 py-3 text-xs text-slate-500 shadow-sm">
                    File tersimpan:
                    <a href="{{ asset('storage/' . $achievement->certificate_file) }}" target="_blank" class="font-semibold text-indigo-600 hover:text-indigo-700">Lihat Piagam</a>
                </div>
            @endif
            @error('certificate_file')
                <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5 shadow-sm ring-1 ring-white/70">
            <div class="mb-4 flex items-start justify-between gap-3">
                <div>
                    <label for="activity_photo" class="block text-sm font-medium text-slate-700">Upload Foto Kegiatan</label>
                    <p class="mt-1 text-xs text-slate-500">Tambahkan dokumentasi kegiatan jika ingin tampilan data lebih kaya.</p>
                </div>
                <span class="rounded-full bg-emerald-100 px-3 py-1 text-[11px] font-semibold text-emerald-700">Gambar</span>
            </div>
            <div class="flex min-h-[3rem] items-center rounded-2xl border border-slate-200 bg-white px-3 py-2 transition focus-within:border-indigo-300 focus-within:ring-4 focus-within:ring-indigo-100">
                <input id="activity_photo" name="activity_photo" type="file" class="block w-full text-sm text-slate-700 file:mr-3 file:rounded-xl file:border-0 file:bg-emerald-50 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-emerald-700 hover:file:bg-emerald-100" accept=".jpg,.jpeg,.png,.webp">
            </div>
            <p class="mt-2 text-xs text-slate-500">Format: JPG, JPEG, PNG, WEBP · maksimal 5 MB.</p>
            @if (!empty($achievement->activity_photo))
                <div class="mt-3 rounded-2xl border border-emerald-100 bg-white px-4 py-3 text-xs text-slate-500 shadow-sm">
                    File tersimpan:
                    <a href="{{ asset('storage/' . $achievement->activity_photo) }}" target="_blank" class="font-semibold text-emerald-600 hover:text-emerald-700">Lihat Foto</a>
                </div>
            @endif
            @error('activity_photo')
                <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>