@extends('simaju.layouts.main')
@section('title', 'Input Nilai Kokurikuler')
@section('page-title', 'Input Nilai Kokurikuler')

@section('content')
<!-- Hero Header with Gradient -->
<div class="bg-gradient-to-br from-green-500 via-emerald-500 to-teal-600 rounded-2xl shadow-2xl p-8 mb-6 text-white relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mr-32 -mt-32"></div>
    <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-24 -mb-24"></div>
    
    <div class="relative z-10">
        <div class="flex items-start justify-between mb-6">
            <div class="flex items-center gap-4">
                <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl p-4 shadow-lg">
                    <i class="fas fa-clipboard-check text-4xl"></i>
                </div>
                <div>
                    <h1 class="text-4xl font-heading font-bold mb-2">Input Nilai: {{ $kokurikuler->nama }}</h1>
                    <p class="text-white text-opacity-90 text-lg">Periode: {{ $tahunAjaran }} - Semester {{ ucfirst($semester) }}</p>
                </div>
            </div>
            <a href="{{ route('simaju.kokurikuler.show', $kokurikuler) }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-emerald-600 rounded-xl hover:bg-emerald-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 font-medium">
                <i class="fas fa-arrow-left"></i>
                <span>Kembali</span>
            </a>
        </div>

        <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-4 border border-white border-opacity-20">
            <div class="flex flex-wrap items-center gap-4 text-white text-sm">
                <div class="flex items-center gap-2">
                    <div class="bg-green-500 rounded-lg px-3 py-1 font-semibold">A</div>
                    <span>Sangat Baik (85-100)</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="bg-blue-500 rounded-lg px-3 py-1 font-semibold">B</div>
                    <span>Baik (70-84)</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="bg-yellow-500 rounded-lg px-3 py-1 font-semibold">C</div>
                    <span>Cukup (55-69)</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="bg-red-500 rounded-lg px-3 py-1 font-semibold">D</div>
                    <span>Kurang (&lt;55)</span>
                </div>
            </div>
        </div>
    </div>
</div>

@if($siswas->isEmpty())
<!-- Empty State -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
    <div class="text-center py-20">
        <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
            <i class="fas fa-users text-4xl text-gray-400"></i>
        </div>
        <h3 class="text-2xl font-heading font-bold text-gray-900 mb-3">Belum Ada Peserta</h3>
        <p class="text-gray-500 mb-8 max-w-md mx-auto">Silakan tambahkan peserta terlebih dahulu sebelum melakukan input nilai</p>
        <a href="{{ route('simaju.kokurikuler.manage-students', $kokurikuler) }}" class="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 font-medium text-lg">
            <i class="fas fa-user-plus"></i>
            <span>Kelola Peserta</span>
        </a>
    </div>
</div>
@else
<!-- Form Card -->
<form action="{{ route('simaju.kokurikuler.update-nilai', $kokurikuler) }}" method="POST">
    @csrf
    @method('PUT')
    
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="bg-gradient-to-r from-emerald-600 to-teal-600 p-6">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-heading font-bold text-white flex items-center gap-3">
                    <div class="bg-white bg-opacity-20 rounded-lg p-2">
                        <i class="fas fa-list-check"></i>
                    </div>
                    Daftar Peserta & Nilai
                </h3>
                <span class="bg-white bg-opacity-20 backdrop-blur-sm px-4 py-2 rounded-xl text-white text-sm font-medium">
                    {{ $siswas->count() }} Siswa
                </span>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b-2 border-gray-200">
                            <th class="text-left py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50">No</th>
                            <th class="text-left py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50">NIS</th>
                            <th class="text-left py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50">Nama Siswa</th>
                            <th class="text-left py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50">Kelas</th>
                            <th class="text-center py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50 min-w-[120px]">Nilai (0-100)</th>
                            <th class="text-center py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50 min-w-[150px]">Predikat</th>
                            <th class="text-left py-4 px-4 font-bold text-gray-700 text-sm bg-gray-50 min-w-[200px]">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($siswas as $siswa)
                        <tr class="hover:bg-emerald-50 transition-colors duration-150">
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center justify-center w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-500 text-white rounded-lg font-bold text-sm">
                                    {{ $loop->iteration }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center gap-2 text-sm font-medium text-gray-900">
                                    <div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
                                    {{ $siswa->nis }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center text-white font-bold">
                                        {{ substr($siswa->nama, 0, 1) }}
                                    </div>
                                    <span class="font-semibold text-gray-900">{{ $siswa->nama }}</span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-lg text-xs font-medium">
                                    <i class="fas fa-graduation-cap text-xs"></i>
                                    {{ $siswa->nama_kelas }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <input type="hidden" name="siswa_ids[]" value="{{ $siswa->id }}">
                                <input type="number" 
                                       class="nilai-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent text-center font-bold text-lg transition-all" 
                                       name="nilai[]" 
                                       value="{{ $siswa->nilai }}" 
                                       min="0" 
                                       max="100" 
                                       step="1"
                                       placeholder="0-100"
                                       data-row="{{ $loop->index }}">
                            </td>
                            <td class="py-4 px-4">
                                <select class="predikat-select w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent font-semibold transition-all appearance-none bg-white" 
                                        name="predikat[]" 
                                        data-row="{{ $loop->index }}">
                                    <option value="">Pilih Predikat</option>
                                    <option value="A" {{ $siswa->predikat == 'A' ? 'selected' : '' }} class="font-semibold">A - Sangat Baik</option>
                                    <option value="B" {{ $siswa->predikat == 'B' ? 'selected' : '' }} class="font-semibold">B - Baik</option>
                                    <option value="C" {{ $siswa->predikat == 'C' ? 'selected' : '' }} class="font-semibold">C - Cukup</option>
                                    <option value="D" {{ $siswa->predikat == 'D' ? 'selected' : '' }} class="font-semibold">D - Kurang</option>
                                </select>
                            </td>
                            <td class="py-4 px-4">
                                <input type="text" 
                                       class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all" 
                                       name="keterangan[]" 
                                       value="{{ $siswa->keterangan }}" 
                                       placeholder="Keterangan (opsional)">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Actions Footer -->
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2 text-sm text-gray-600">
                    <i class="fas fa-info-circle text-emerald-500"></i>
                    <span>Nilai akan otomatis menentukan predikat sesuai ketentuan</span>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('simaju.kokurikuler.show', $kokurikuler) }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all font-medium">
                        <i class="fas fa-times"></i>
                        <span>Batal</span>
                    </a>
                    <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 font-medium">
                        <i class="fas fa-save"></i>
                        <span>Simpan Semua Nilai</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
@endif

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.font-heading {
    font-family: 'Inter', sans-serif;
}

/* Custom select arrow */
.predikat-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Input number arrows removal for cleaner look */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}
</style>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto calculate predikat based on nilai
    const nilaiInputs = document.querySelectorAll('.nilai-input');
    
    nilaiInputs.forEach(input => {
        input.addEventListener('input', function() {
            const row = this.dataset.row;
            const predikatSelect = document.querySelector(`.predikat-select[data-row="${row}"]`);
            const nilai = parseFloat(this.value);
            
            if (isNaN(nilai) || nilai === '') {
                predikatSelect.value = '';
            } else if (nilai >= 85) {
                predikatSelect.value = 'A';
                this.classList.remove('border-gray-200');
                this.classList.add('border-green-400', 'bg-green-50');
            } else if (nilai >= 70) {
                predikatSelect.value = 'B';
                this.classList.remove('border-gray-200');
                this.classList.add('border-blue-400', 'bg-blue-50');
            } else if (nilai >= 55) {
                predikatSelect.value = 'C';
                this.classList.remove('border-gray-200');
                this.classList.add('border-yellow-400', 'bg-yellow-50');
            } else if (nilai < 55 && nilai >= 0) {
                predikatSelect.value = 'D';
                this.classList.remove('border-gray-200');
                this.classList.add('border-red-400', 'bg-red-50');
            }
        });
        
        // Trigger on page load for existing values
        if(input.value) {
            input.dispatchEvent(new Event('input'));
        }
    });
});
</script>
@endpush
@endsection