@extends('layouts.app')

@section('title', 'Input Nilai | E-Rapor GTech')

@section('content')
<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Input Nilai PTS</h1>
        <p class="text-gray-600">Pilih mata pelajaran dan kelas untuk melihat atau mengedit nilai CBT siswa.</p>
    </div>
</div>

<div class="glass-panel rounded-2xl shadow-sm mb-8 overflow-hidden">
    <div class="bg-white/50 p-6 border-b border-gray-200/50">
        <form method="GET" action="/input-nilai" class="flex flex-col md:flex-row gap-4 items-end">
            <div class="w-full md:w-1/3">
                <label class="block text-sm font-medium text-gray-700 mb-1">Mata Pelajaran</label>
                <select name="subject_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 p-2.5 border bg-white" required>
                    <option value="">-- Pilih Mata Pelajaran --</option>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ ($selectedSubject->id ?? '') == $subject->id ? 'selected' : '' }}>
                            {{ $subject->nama_mapel }} ({{ $subject->kelompokLabel }})
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="w-full md:w-1/3">
                <label class="block text-sm font-medium text-gray-700 mb-1">Kelas</label>
                <select name="class_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 p-2.5 border bg-white" required>
                    <option value="">-- Pilih Kelas --</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ ($selectedClass->id ?? '') == $class->id ? 'selected' : '' }}>
                            {{ $class->nama_kelas }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="w-full md:w-auto">
                <button type="submit" class="w-full md:w-auto bg-brand-600 hover:bg-brand-700 text-white font-medium py-2.5 px-6 rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    Tampilkan
                </button>
            </div>
        </form>
    </div>
</div>

@if($selectedClass && $selectedSubject)
    <div class="glass-panel rounded-2xl shadow-sm overflow-hidden">
        <div class="bg-white/70 p-4 border-b border-gray-200/50 flex justify-between items-center">
            <h2 class="text-lg font-bold text-gray-800">
                Nilai {{ $selectedSubject->nama_mapel }} - Kelas {{ $selectedClass->nama_kelas }}
            </h2>
            <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200">
                {{ $students->count() }} Siswa
            </span>
        </div>

        @if($students->isEmpty())
            <div class="p-12 text-center text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                <p>Data siswa atau nilai tidak ditemukan pada sistem CBT untuk parameter ini.</p>
            </div>
        @else
            <form action="/input-nilai" method="POST">
                @csrf
                <input type="hidden" name="class_id" value="{{ $selectedClass->id }}">
                <input type="hidden" name="subject_id" value="{{ $selectedSubject->id }}">

                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-600">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50/80">
                            <tr>
                                <th scope="col" class="px-6 py-4 font-semibold w-16">No</th>
                                <th scope="col" class="px-6 py-4 font-semibold">NISN / NIS</th>
                                <th scope="col" class="px-6 py-4 font-semibold">Nama Siswa</th>
                                <th scope="col" class="px-6 py-4 font-semibold text-center w-32">Nilai Asli CBT</th>
                                <th scope="col" class="px-6 py-4 font-semibold text-center w-40 text-brand-600">Nilai Akhir Rapor</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($students as $index => $siswa)
                                <tr class="bg-white/40 border-b border-gray-100 hover:bg-white/60 transition-colors">
                                    <td class="px-6 py-4">{{ $index + 1 }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $siswa->nisn_formatted }} / {{ $siswa->nis ?? '-' }}</td>
                                    <td class="px-6 py-4 font-medium text-gray-900">{{ $siswa->nama }}</td>
                                    <td class="px-6 py-4 text-center">
                                        @if($siswa->cbt_score_val !== null)
                                            <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-gray-800 bg-gray-200 rounded-full">
                                                {{ $siswa->cbt_score_val }}
                                            </span>
                                            <input type="hidden" name="grades[{{ $index }}][sts_cbt]" value="{{ $siswa->cbt_score_val }}">
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                        <input type="hidden" name="grades[{{ $index }}][cbt_siswa_id]" value="{{ $siswa->id_siswa }}">
                                    </td>
                                    <td class="px-6 py-3">
                                        <input type="number" step="0.01" min="0" max="100" 
                                               name="grades[{{ $index }}][sts]" 
                                               value="{{ $siswa->display_score }}"
                                               class="bg-white border {{ ($siswa->saved_grade && $siswa->saved_grade->isEdited) ? 'border-amber-400 bg-amber-50' : 'border-gray-300' }} text-gray-900 text-sm rounded-lg focus:ring-brand-500 focus:border-brand-500 block w-full p-2.5 text-center font-semibold" 
                                               placeholder="0.00">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="p-6 bg-white/50 border-t border-gray-200/50 flex justify-end">
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-8 rounded-lg shadow-sm transition-colors flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        Simpan Nilai
                    </button>
                </div>
            </form>
        @endif
    </div>
@endif
@endsection