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

@push('css')
<style>
    .form-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }
    
    .form-container::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: pulse 15s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.1) rotate(180deg); }
    }
    
    .form-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        transition: all 0.3s ease;
    }
    
    .form-input:focus + .input-icon {
        color: #3b82f6;
    }
    
    .form-input {
        padding-left: 48px;
        transition: all 0.3s ease;
    }
    
    .form-input:focus {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
    }
    
    .section-divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 32px 0;
    }
    
    .section-divider::before,
    .section-divider::after {
        content: '';
        flex: 1;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .section-divider span {
        padding: 0 16px;
        font-weight: 600;
        color: #6366f1;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .progress-steps {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;
    }
    
    .step {
        flex: 1;
        text-align: center;
        position: relative;
    }
    
    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: #e5e7eb;
        z-index: -1;
    }
    
    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e5e7eb;
        color: #9ca3af;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-bottom: 8px;
        transition: all 0.3s ease;
    }
    
    .step.active .step-circle {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .step-label {
        font-size: 12px;
        color: #6b7280;
        font-weight: 500;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-slide-up {
        animation: slideInUp 0.6s ease-out;
    }
</style>
@endpush

@section('content')
<div class="form-container min-h-screen py-12 px-4">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-8 animate-slide-up">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-blue rounded-full shadow-xl mb-4">
                <i class="fas fa-graduation-cap text-4xl text-purple-600"></i>
            </div>
            <h1 class="text-4xl font-bold text-black mb-2">Input Nilai Siswa</h1>
            <p class="text-black-100 text-lg">Lengkapi formulir di bawah ini untuk menginput nilai siswa</p>
        </div>

        <!-- Progress Steps
        <div class="form-card rounded-2xl shadow-2xl p-8 animate-slide-up" style="animation-delay: 0.2s;">
            <div class="progress-steps">
                <div class="step active">
                    <div class="step-circle">
                        <i class="fas fa-school"></i>
                    </div>
                </div>
                <div class="step">
                    <div class="step-circle">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="step">
                    <div class="step-circle">
                        <i class="fas fa-edit"></i>
                    </div>
                </div>
                <div class="step">
                    <div class="step-circle">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
            </div> -->

            <form action="{{ route('simaju.nilai.store') }}" method="POST" id="nilaiForm">
                @csrf
                
                <!-- Section 1: Pilih Kelas & Siswa -->
                <div class="space-y-6">
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border-l-4 border-blue-500">
                        <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                            <i class="fas fa-users mr-3 text-blue-600"></i>
                            Informasi Siswa
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Pilih Kelas -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Kelas <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-school input-icon"></i>
                                    <select id="kelasSelect" 
                                            class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">-- Pilih Kelas --</option>
                                        @foreach($kelasList as $k)
                                        <option value="{{ $k->id }}">{{ $k->nama_kelas }} {{ $k->jurusan ? '- ' . $k->jurusan->nama_jurusan : '' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Pilih Siswa -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Nama Siswa <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-user-graduate input-icon"></i>
                                    <select name="siswa_id" id="siswaSelect" required
                                            class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">-- Pilih kelas terlebih dahulu --</option>
                                    </select>
                                </div>
                                <div id="siswaLoading" class="hidden mt-3 flex items-center text-blue-600 text-sm">
                                    <i class="fas fa-spinner fa-spin mr-2"></i> Memuat data siswa...
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section-divider">
                        <span>Detail Penilaian</span>
                    </div>

                    <!-- Section 2: Detail Nilai -->
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border-l-4 border-green-500">
                        <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                            <i class="fas fa-clipboard-check mr-3 text-green-600"></i>
                            Informasi Nilai
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Mata Pelajaran -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Mata Pelajaran <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-book-open input-icon"></i>
                                    <select name="mata_pelajaran_id" required
                                            class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                        <option value="">-- Pilih Mata Pelajaran --</option>
                                        @foreach($mapelList as $m)
                                        <option value="{{ $m->id }}">{{ $m->kode_mapel }} - {{ $m->nama_mapel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Tipe Nilai -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Tipe Penilaian <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-tag input-icon"></i>
                                    <select name="tipe" required
                                            class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                        <option value="">-- Pilih Tipe --</option>
                                        @foreach(['uh'=>'Ulangan Harian','uts'=>'Ujian Tengah Semester','uas'=>'Ujian Akhir Semester','praktek'=>'Praktikum','proyek'=>'Proyek','tugas'=>'Tugas'] as $k=>$v)
                                        <option value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Nilai -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Nilai (0-100) <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-star input-icon"></i>
                                    <input type="number" name="nilai" min="0" max="100" step="0.01" required
                                           class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                                           placeholder="Masukkan nilai (0-100)">
                                </div>
                                <p class="mt-2 text-xs text-gray-500 flex items-center">
                                    <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                                    Nilai harus antara 0 hingga 100
                                </p>
                            </div>

                            <!-- Tahun Ajaran -->
                            <div class="input-group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Tahun Ajaran <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-calendar-alt input-icon"></i>
                                    <input type="text" name="tahun_ajaran" value="{{ date('Y') }}/{{ date('Y')+1 }}" required
                                           class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                           placeholder="2026/2027">
                                </div>
                            </div>

                            <!-- Semester -->
                            <div class="input-group md:col-span-2">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    Semester <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <i class="fas fa-clock input-icon"></i>
                                    <select name="semester" required
                                            class="form-input w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                        <option value="">-- Pilih Semester --</option>
                                        <option value="ganjil">Semester Ganjil</option>
                                        <option value="genap">Semester Genap</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 border-t-2 border-gray-200">
                    <a href="{{ route('simaju.nilai.index') }}" 
                       class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-semibold hover:bg-gray-50 transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Batal
                    </a>
                    <button type="submit" 
                            class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Nilai
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const kelasSelect = document.getElementById('kelasSelect');
    const siswaSelect = document.getElementById('siswaSelect');
    const siswaLoading = document.getElementById('siswaLoading');
    const form = document.getElementById('nilaiForm');

    kelasSelect.addEventListener('change', function() {
        const kelasId = this.value;
        
        if (!kelasId) {
            siswaSelect.innerHTML = '<option value="">-- Pilih kelas terlebih dahulu --</option>';
            return;
        }

        // Show loading
        siswaLoading.classList.remove('hidden');
        siswaSelect.disabled = true;
        siswaSelect.innerHTML = '<option value="">Memuat data siswa...</option>';

        // Fetch students using AJAX
        fetch(`{{ route('simaju.nilai.create') }}?kelas_id=${kelasId}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            siswaSelect.innerHTML = '<option value="">-- Pilih Siswa --</option>';
            
            if (data.siswas && data.siswas.length > 0) {
                data.siswas.forEach(siswa => {
                    const option = document.createElement('option');
                    option.value = siswa.id;
                    option.textContent = `${siswa.nama} (${siswa.nis})`;
                    siswaSelect.appendChild(option);
                });
            } else {
                siswaSelect.innerHTML = '<option value="">Tidak ada siswa aktif di kelas ini</option>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            siswaSelect.innerHTML = '<option value="">Gagal memuat data siswa</option>';
        })
        .finally(() => {
            siswaLoading.classList.add('hidden');
            siswaSelect.disabled = false;
        });
    });

    // Form validation enhancement
    form.addEventListener('submit', function(e) {
        const nilai = parseFloat(document.querySelector('input[name="nilai"]').value);
        
        if (nilai < 0 || nilai > 100) {
            e.preventDefault();
            alert('Nilai harus antara 0 hingga 100!');
            return false;
        }
        
        // Show loading state on submit button
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';
    });
});
</script>
@endpush