@extends('layouts.app')

@section('title', 'Input Prestasi')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Penilaian</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Raport<i class="bi bi-chevron-right" aria-hidden="true"></i>Input Prestasi</p>
            <h1 class="pkbm-dashboard__title">Input Prestasi Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Catat pencapaian non-akademik siswa untuk lampiran rapor. Satu siswa dapat memiliki beberapa prestasi.</p>
        </div>
        @if ($period)
            <div class="pkbm-settings__period">
                <span class="pkbm-settings__period-icon"><i class="bi bi-calendar2-week" aria-hidden="true"></i></span>
                <span>
                    <span class="pkbm-settings__period-label">@if ($activePeriod && $activePeriod->tahun_pelajaran === $period->tahun_pelajaran && $activePeriod->semester === $period->semester) Periode aktif @else Periode dipilih @endif</span>
                    <span class="pkbm-settings__period-value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                </span>
            </div>
        @endif
    </header>

    @if (! $period)
        <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            <i class="bi bi-exclamation-triangle mr-2" aria-hidden="true"></i>Pengaturan tahun pelajaran dan semester aktif belum tersedia.
        </section>
    @else
        @include('pkbm.partials.period-selector', [
            'periods' => $periods,
            'period' => $period,
            'activePeriod' => $activePeriod,
        ])
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Pilih kelas</h2>
                <p class="mt-1 text-xs text-slate-500">Daftar siswa mengikuti roster aktif pada periode {{ $period->tahun_pelajaran }} · {{ $period->semester }}.</p>
            </div>
            <form id="input-prestasi-filter" method="GET" action="{{ route('pkbm.raport.input-prestasi') }}" class="p-4 sm:max-w-md">
                <label class="sp-form-label" for="input-prestasi-class">Kelas</label>
                <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="input-prestasi-class" name="id_kelas" required>
                    <option value="">Pilih kelas</option>
                    @foreach ($classes as $class)
                        <option value="{{ $class->id_kelas }}" @selected($selectedClassId === (int) $class->id_kelas)>{{ $class->nama_kelas }} · Tingkat {{ $class->tingkatan }}</option>
                    @endforeach
                </select>
            </form>
        </section>

        @if ($selectedClassId)
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header">
                    <h2 class="sp-section-title">Daftar capaian prestasi</h2>
                    <p class="mt-1 text-xs text-slate-500">Isi jenis prestasi, tahun pencapaian, dan keterangan atau tingkat. Baris tambahan tersedia untuk setiap siswa.</p>
                </div>

                @if (session('status'))
                    <div class="mx-4 mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800" role="status">
                        <i class="bi bi-check-circle mr-2" aria-hidden="true"></i>{{ session('status') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="mx-4 mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
                        {{ $errors->first() }}
                    </div>
                @endif

                @if ($students->isNotEmpty())
                    <form method="POST" action="{{ route('pkbm.raport.input-prestasi.save') }}">
                        @csrf
                        <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}">
                        <input type="hidden" name="semester" value="{{ $period->semester }}">
                        <input type="hidden" name="id_kelas" value="{{ $selectedClassId }}">
                        <div class="overflow-x-auto">
                            <table class="w-full min-w-[980px] text-left text-sm">
                                <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-600">
                                    <tr>
                                        <th scope="col" class="w-16 px-4 py-3 text-center">No.</th>
                                        <th scope="col" class="min-w-56 px-4 py-3">Nama siswa</th>
                                        <th scope="col" class="min-w-56 px-4 py-3">Jenis prestasi</th>
                                        <th scope="col" class="w-36 px-4 py-3">Tahun</th>
                                        <th scope="col" class="min-w-64 px-4 py-3">Keterangan / tingkat</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100">
                                    @php
                                        $rowIndex = 0;
                                    @endphp
                                    @foreach ($students as $student)
                                        @php
                                            $rows = $student->achievements->isNotEmpty()
                                                ? $student->achievements->push((object) ['id' => 0, 'jenis_prestasi' => '', 'tahun' => now()->year, 'keterangan' => null])
                                                : collect([(object) ['id' => 0, 'jenis_prestasi' => '', 'tahun' => now()->year, 'keterangan' => null]]);
                                        @endphp
                                        @foreach ($rows as $achievement)
                                            @php($currentRowIndex = $rowIndex++)
                                            <tr @class(['bg-amber-50/40' => $achievement->id === 0 && $student->achievements->count() > 1])>
                                                @if ($loop->first)
                                                    <td rowspan="{{ $rows->count() }}" class="border-r border-slate-100 px-4 py-3 text-center font-semibold text-slate-500">{{ $loop->parent->iteration }}</td>
                                                    <td rowspan="{{ $rows->count() }}" class="border-r border-slate-100 px-4 py-3 font-semibold text-slate-800">
                                                        <div class="flex items-center gap-3">
                                                            <span class="grid size-9 shrink-0 place-items-center rounded-lg bg-amber-50 font-bold text-amber-700">{{ mb_substr($student->nama_siswa, 0, 1) }}</span>
                                                            <span>{{ $student->nama_siswa }}</span>
                                                        </div>
                                                    </td>
                                                @endif
                                                <td class="px-4 py-2.5">
                                                    <input type="hidden" name="id_siswa[]" value="{{ $student->id }}">
                                                    <input type="hidden" name="id_prestasi[]" value="{{ $achievement->id }}">
                                                    <input class="sp-form-control w-full px-3 py-2 text-sm" type="text"
                                                        name="jenis_prestasi[]" maxlength="100"
                                                        value="{{ old('jenis_prestasi.'.$currentRowIndex, $achievement->jenis_prestasi) }}"
                                                        placeholder="Contoh: Juara 1 Karate"
                                                        aria-label="Jenis prestasi untuk {{ $student->nama_siswa }}">
                                                </td>
                                                <td class="px-4 py-2.5">
                                                    <input class="sp-form-control w-32 px-3 py-2 text-sm" type="number"
                                                        name="tahun[]" min="1900" max="2100" step="1"
                                                        value="{{ old('tahun.'.$currentRowIndex, $achievement->tahun) }}"
                                                        placeholder="{{ now()->year }}"
                                                        aria-label="Tahun prestasi untuk {{ $student->nama_siswa }}">
                                                </td>
                                                <td class="px-4 py-2.5">
                                                    <input class="sp-form-control w-full px-3 py-2 text-sm" type="text"
                                                        name="keterangan[]" maxlength="5000"
                                                        value="{{ old('keterangan.'.$currentRowIndex, $achievement->keterangan) }}"
                                                        placeholder="Contoh: Tingkat kabupaten"
                                                        aria-label="Keterangan prestasi untuk {{ $student->nama_siswa }}">
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-4">
                            <p class="max-w-2xl text-xs leading-relaxed text-slate-500">
                                Untuk menghapus prestasi, kosongkan kolom jenis dan keterangan pada baris tersebut. Setiap siswa mendapat satu baris kosong untuk menambahkan prestasi.
                            </p>
                            <button type="submit" class="sp-btn-primary">
                                <i class="bi bi-save" aria-hidden="true"></i>Simpan seluruh prestasi
                            </button>
                        </div>
                    </form>
                @else
                    <div class="p-8 text-center text-sm text-slate-500">
                        <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                        Tidak ada siswa aktif pada kelas ini.
                    </div>
                @endif
            </section>
        @else
            <section class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                <i class="bi bi-award mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                Pilih kelas untuk mengelola prestasi siswa.
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        (() => {
            const filter = document.getElementById('input-prestasi-filter');
            if (!filter) return;

            const classSelect = filter.querySelector('[name="id_kelas"]');
            classSelect.addEventListener('change', () => {
                if (classSelect.value) filter.requestSubmit();
            });
        })();
    </script>
@endpush