@extends('simaju.layouts.main')

@section('title', 'Buat Rapor Baru')
@section('page-title', 'Buat Rapor Baru')
@section('page-subtitle', 'Generate rapor siswa dari data nilai')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <!-- Back Button -->
    <div>
        <a href="{{ route('simaju.rapor.index') }}" class="inline-flex items-center gap-2 text-gray-600 hover:text-primary transition">
            <i class="fas fa-arrow-left"></i>
            <span>Kembali ke Daftar Rapor</span>
        </a>
    </div>

    <!-- Info Card -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-info text-white text-xl"></i>
            </div>
            <div>
                <h3 class="font-semibold text-blue-900 mb-2">Informasi</h3>
                <ul class="text-sm text-blue-800 space-y-1">
                    <li>• Rapor akan dibuat berdasarkan data nilai siswa yang sudah diinput</li>
                    <li>• Pastikan data nilai siswa sudah lengkap sebelum membuat rapor</li>
                    <li>• Anda hanya dapat membuat rapor untuk siswa di kelas yang Anda bimbing sebagai wali kelas</li>
                    <li>• Setiap siswa hanya bisa memiliki satu rapor per tahun ajaran dan semester</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
        <form action="{{ route('simaju.rapor.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Siswa -->
            <div>
                <label for="siswa_id" class="block text-sm font-semibold text-gray-700 mb-2">
                    Pilih Siswa <span class="text-red-500">*</span>
                </label>
                <select name="siswa_id" id="siswa_id" required class="w-full rounded-lg border-gray-300 focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('siswa_id') border-red-500 @enderror">
                    <option value="">-- Pilih Siswa --</option>
                    @foreach($siswaList as $siswa)
                        <option value="{{ $siswa->id }}" {{ old('siswa_id') == $siswa->id ? 'selected' : '' }}>
                            {{ $siswa->nis }} - {{ $siswa->nama }} ({{ $siswa->kelas->nama_kelas }})
                        </option>
                    @endforeach
                </select>
                @error('siswa_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-gray-500">Pilih siswa dari kelas yang Anda bimbing</p>
            </div>

            <!-- Tahun Ajaran -->
            <div>
                <label for="tahun_ajaran" class="block text-sm font-semibold text-gray-700 mb-2">
                    Tahun Ajaran <span class="text-red-500">*</span>
                </label>
                <input type="text" name="tahun_ajaran" id="tahun_ajaran" value="{{ old('tahun_ajaran', $tahunSekarang . '/' . ($tahunSekarang + 1)) }}" placeholder="2024/2025" required class="w-full rounded-lg border-gray-300 focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('tahun_ajaran') border-red-500 @enderror">
                @error('tahun_ajaran')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-gray-500">Format: YYYY/YYYY (contoh: 2024/2025)</p>
            </div>

            <!-- Semester -->
            <div>
                <label for="semester" class="block text-sm font-semibold text-gray-700 mb-2">
                    Semester <span class="text-red-500">*</span>
                </label>
                <div class="grid grid-cols-2 gap-4">
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:border-primary {{ old('semester') == 'ganjil' ? 'border-primary bg-blue-50' : 'border-gray-200' }}">
                        <input type="radio" name="semester" value="ganjil" required class="sr-only" {{ old('semester') == 'ganjil' ? 'checked' : '' }}>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-calendar text-primary"></i>
                            </div>
                            <div>
                                <div class="font-semibold text-gray-900">Ganjil</div>
                                <div class="text-xs text-gray-500">Semester 1</div>
                            </div>
                        </div>
                    </label>
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition hover:border-primary {{ old('semester') == 'genap' ? 'border-primary bg-blue-50' : 'border-gray-200' }}">
                        <input type="radio" name="semester" value="genap" required class="sr-only" {{ old('semester') == 'genap' ? 'checked' : '' }}>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="fas fa-calendar-alt text-green-600"></i>
                            </div>
                            <div>
                                <div class="font-semibold text-gray-900">Genap</div>
                                <div class="text-xs text-gray-500">Semester 2</div>
                            </div>
                        </div>
                    </label>
                </div>
                @error('semester')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Actions -->
            <div class="flex items-center gap-4 pt-6 border-t border-gray-200">
                <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg hover:shadow-lg transition font-semibold flex items-center justify-center gap-2">
                    <i class="fas fa-file-invoice"></i>
                    <span>Generate Rapor</span>
                </button>
                <a href="{{ route('simaju.rapor.index') }}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-semibold">
                    Batal
                </a>
            </div>
        </form>
    </div>

    <!-- Warning Card -->
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
        <div class="flex items-start gap-4">
            <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-white"></i>
            </div>
            <div>
                <h4 class="font-semibold text-yellow-900 mb-1">Perhatian</h4>
                <p class="text-sm text-yellow-800">
                    Rapor akan dibuat secara otomatis berdasarkan data nilai yang tersedia. 
                    Pastikan semua nilai siswa sudah diinput dengan benar sebelum membuat rapor.
                </p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Add active class to selected radio
    document.querySelectorAll('input[name="semester"]').forEach(radio => {
        radio.addEventListener('change', function() {
            document.querySelectorAll('input[name="semester"]').forEach(r => {
                r.parentElement.classList.remove('border-primary', 'bg-blue-50');
                r.parentElement.classList.add('border-gray-200');
            });
            if (this.checked) {
                this.parentElement.classList.add('border-primary', 'bg-blue-50');
                this.parentElement.classList.remove('border-gray-200');
            }
        });
    });
</script>
@endpush
@endsection