140 lines
11 KiB
PHP
140 lines
11 KiB
PHP
@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>
|