@extends('layouts.app')

@section('content')
<div class="container py-3">
    <div class="row justify-content-center">
        <div class="col-md-9 animate__animated animate__fadeInUp">
            
            <!-- Header Navigasi / Kembali ke Dashboard -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary rounded-3 px-3 fw-semibold">
                    <i class="fa-solid fa-arrow-left me-2"></i> Kembali ke Dashboard
                </a>
                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-bold">
                    <i class="fa-solid fa-circle-info me-1"></i> Form Cek Rekomendasi
                </span>
            </div>

            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4 p-md-5">
                    
                    <div class="text-center mb-4">
                        <div class="bg-primary-subtle text-primary d-inline-block p-3 rounded-circle mb-3">
                            <i class="fa-solid fa-compass fs-2"></i>
                        </div>
                        <h2 class="fw-bold text-dark mb-1">Cek Rekomendasi Jurusan</h2>
                        <p class="text-muted">Masukkan data nilai dan preferensi Anda untuk dianalisis oleh Sistem Rekomendasi.</p>
                    </div>

                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show rounded-3 mb-4" role="alert">
                            <strong><i class="fas fa-exclamation-triangle me-1"></i> Periksa Inputan Anda:</strong>
                            <ul class="mb-0 mt-2 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif
                    
                    <form action="{{ route('prediksi.hitung') }}" method="POST" id="formRekomendasi">
                        @csrf
                        
                        <!-- Step 1: Profil Siswa -->
                        <div class="mb-4 p-3 bg-light rounded-3 border-start border-4 border-primary">
                            <label class="form-label fw-bold text-dark mb-2">
                                <i class="fa-solid fa-user me-2 text-primary"></i> Identitas Siswa
                            </label>
                            <input type="text" 
                                   name="nama" 
                                   class="form-control form-control-lg bg-white rounded-3" 
                                   placeholder="Masukkan nama lengkap" 
                                   value="{{ old('nama', request('nama', $previousInput['nama'] ?? (Auth::user()->name ?? ''))) }}" 
                                   required>
                        </div>

                        <!-- Step 2: Nilai Rapor -->
                        <div class="mb-4 p-3 bg-light rounded-3 border-start border-4 border-info">
                            <label class="form-label fw-bold text-dark mb-1">
                                <i class="fa-solid fa-file-invoice me-2 text-info"></i>1. Nilai Rata-Rata Rapor <span class="text-danger">*</span>
                            </label>
                            <small class="text-muted d-block mb-2">Gunakan skala 0 - 100.</small>
                            <div class="input-group">
                                <input type="number" 
                                       step="0.01" 
                                       min="0" 
                                       max="100" 
                                       name="nilai" 
                                       class="form-control form-control-lg bg-white rounded-start-3" 
                                       placeholder="Contoh: 85.50" 
                                       value="{{ old('nilai', request('nilai', $previousInput['nilai'] ?? '')) }}" 
                                       required>
                                <span class="input-group-text bg-white text-secondary rounded-end-3">Skala 100</span>
                            </div>
                        </div>

                        <!-- Step 3: Mata Pelajaran Favorit (Atribut Baru) -->
                        <div class="mb-4 p-3 bg-light rounded-3 border-start border-4 border-danger">
                            <label class="form-label fw-bold text-dark mb-1">
                                <i class="fa-solid fa-book me-2 text-danger"></i>2. Mata Pelajaran Favorit <span class="text-danger">*</span>
                            </label>
                            <small class="text-muted d-block mb-2">Pilih atau ketikkan mata pelajaran yang paling Anda kuasai/sukai.</small>
                            <input type="text" 
                                   name="mapel_favorit" 
                                   list="list_mapel_siswa" 
                                   class="form-control form-control-lg bg-white rounded-3" 
                                   placeholder="Contoh: Matematika / Informatika / Bahasa Inggris" 
                                   value="{{ old('mapel_favorit', request('mapel_favorit', $previousInput['mapel_favorit'] ?? '')) }}" 
                                   required>
                            <datalist id="list_mapel_siswa">
                                <option value="Matematika">
                                <option value="Informatika">
                                <option value="Fisika">
                                <option value="Biologi">
                                <option value="Kimia">
                                <option value="Bahasa Inggris">
                                <option value="Ekonomi">
                            </datalist>
                        </div>

                        <!-- Step 4: Minat Utama -->
                        <div class="mb-4 p-3 bg-light rounded-3 border-start border-4 border-success">
                            <label class="form-label fw-bold text-dark mb-1">
                                <i class="fa-solid fa-heart me-2 text-success"></i>3. Minat Utama <span class="text-danger">*</span>
                            </label>
                            <small class="text-muted d-block mb-2">Pilih dari rekomendasi atau ketikkan deskripsi minat Anda secara bebas.</small>
                            <input type="text" 
                                   name="minat" 
                                   list="list_minat_siswa" 
                                   class="form-control form-control-lg bg-white rounded-3" 
                                   placeholder="Contoh: TI & Pemrograman / Rekayasa Perangkat Lunak" 
                                   value="{{ old('minat', request('minat', $previousInput['minat'] ?? '')) }}" 
                                   required>
                            <datalist id="list_minat_siswa">
                                <option value="TI & Pemrograman">
                                <option value="Energi & Tek Mesin">
                                <option value="Budidaya Tanaman">
                                <option value="Budidaya Ternak">
                                <option value="Kimia Pangan">
                            </datalist>
                        </div>

                        <!-- Step 5: Cita-Cita Masa Depan -->
                        <div class="mb-4 p-3 bg-light rounded-3 border-start border-4 border-warning">
                            <label class="form-label fw-bold text-dark mb-1">
                                <i class="fa-solid fa-bullseye me-2 text-warning"></i>4. Cita-Cita Masa Depan <span class="text-danger">*</span>
                            </label>
                            <small class="text-muted d-block mb-2">Profesi atau pekerjaan yang ingin dicapai setelah lulus.</small>
                            <input type="text" 
                                   name="cita_cita" 
                                   list="list_cita_siswa" 
                                   class="form-control form-control-lg bg-white rounded-3" 
                                   placeholder="Contoh: Programmer / Data Analyst" 
                                   value="{{ old('cita_cita', request('cita_cita', $previousInput['cita_cita'] ?? '')) }}" 
                                   required>
                            <datalist id="list_cita_siswa">
                                <option value="Programmer">
                                <option value="Manajer">
                                <option value="Akuntan Publik">
                                <option value="Ahli Gizi">
                                <option value="Pengusaha">
                                <option value="Teknisi">
                            </datalist>
                        </div>

                        <!-- Step 6: Preferensi Studi -->
                        <div class="mb-5 p-3 bg-light rounded-3 border-start border-4 border-purple" style="border-left-color: #8b5cf6 !important;">
                            <label class="form-label fw-bold text-dark mb-1">
                                <i class="fa-solid fa-book-open me-2" style="color: #8b5cf6;"></i>5. Rumpun Keilmuan Disukai <span class="text-danger">*</span>
                            </label>
                            <small class="text-muted d-block mb-2">Bidang keilmuan yang paling diminati untuk dipelajari.</small>
                            <input type="text" 
                                   name="preferensi_studi" 
                                   list="list_studi_siswa" 
                                   class="form-control form-control-lg bg-white rounded-3" 
                                   placeholder="Contoh: Komputer & Informatika" 
                                   value="{{ old('preferensi_studi', request('preferensi_studi', $previousInput['preferensi_studi'] ?? '')) }}" 
                                   required>
                            <datalist id="list_studi_siswa">
                                <option value="Komputer & Informatika">
                                <option value="Bisnis & Manajemen">
                                <option value="Sains & Teknologi">
                                <option value="Kesehatan & Gizi">
                                <option value="Pertanian & Hortikultura">
                                <option value="Bahasa & Komunikasi">
                            </datalist>
                        </div>

                        <!-- Tombol Aksi Utama -->
                        <div class="row g-3">
                            <div class="col-md-4">
                                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-lg w-100 py-3 fw-bold rounded-3">
                                    <i class="fa-solid fa-xmark me-2"></i> Batal
                                </a>
                            </div>
                            <div class="col-md-8">
                                <button type="submit" id="btnSubmit" class="btn btn-primary btn-lg w-100 py-3 fw-bold shadow rounded-3">
                                    <i class="fa-solid fa-wand-magic-sparkles me-2"></i> Analisis Rekomendasi
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('formRekomendasi').addEventListener('submit', function() {
        var btn = document.getElementById('btnSubmit');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i> Memproses Analisis Sistem Rekomendasi...';
    });
</script>
@endsection