@extends('layouts.admin')

@section('title', 'Input Cek Rekomendasi')

@section('content')
<div class="container-fluid px-3">

    <!-- Header & Tombol Kembali -->
    <div class="d-flex align-items-center justify-content-between my-3">
        <div>
            <h1 class="h4 mb-0 text-gray-800 font-weight-bold">
                <i class="fa-solid fa-compass text-primary me-2"></i>Input Data Cek Rekomendasi
            </h1>
            <p class="text-muted small mb-0">Masukkan data kriteria siswa untuk dianalisis oleh algoritma C4.5.</p>
        </div>
        <a href="{{ route('c45.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 shadow-sm">
            <i class="fas fa-arrow-left me-1"></i> Kembali
        </a>
    </div>

    {{-- Alert Jika Ada Error Validasi --}}
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show rounded-3 mb-3 shadow-sm" role="alert">
            <strong><i class="fas fa-exclamation-triangle me-1"></i> Periksa Inputan Anda:</strong>
            <ul class="mb-0 mt-2 ps-3 small">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Card Form Input Standalone -->
    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <div class="card-header py-3 bg-white border-bottom">
            <h6 class="m-0 font-weight-bold text-primary small">
                <i class="fas fa-user-graduate me-1"></i> Form Kriteria Rekomendasi Siswa
            </h6>
        </div>
        
        <form action="{{ route('prediksi.hitung') }}" method="POST" id="formRekomendasi">
            @csrf
            <div class="card-body p-4">
                <div class="row">
                    <!-- Sisi Kiri: Form Input Kriteria -->
                    <div class="col-lg-8 border-end pr-lg-4">
                        <h6 class="font-weight-bold text-primary mb-3">
                            <i class="fas fa-list me-1"></i> Atribut Kriteria Siswa (Features)
                        </h6>

                        <!-- Input Nama Siswa (Searchable Datalist / Ketik Manual) -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Nama Siswa <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-user text-muted"></i></span>
                                <input 
                                    type="text" 
                                    name="nama" 
                                    id="nama_siswa" 
                                    class="form-control" 
                                    list="list_siswa" 
                                    placeholder="Ketik atau pilih nama siswa..." 
                                    value="{{ old('nama') }}" 
                                    autocomplete="off" 
                                    oninput="updateSiswaId(this)"
                                    required
                                >
                                <datalist id="list_siswa">
                                    @if(isset($daftar_siswa))
                                        @foreach($daftar_siswa as $siswa)
                                            <option value="{{ $siswa->name }}" data-id="{{ $siswa->id }}"></option>
                                        @endforeach
                                    @endif
                                </datalist>
                            </div>
                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">
                                *Pilih siswa yang sudah terdaftar atau ketik nama langsung jika belum terdaftar.
                            </small>
                            <!-- Hidden input untuk menyimpan user_id jika siswa terdaftar -->
                            <input type="hidden" name="siswa_id" id="siswa_id" value="{{ old('siswa_id') }}">
                        </div>

                        <!-- Input Nilai Rapor -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Nilai Rata-rata Rapor <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-award text-muted"></i></span>
                                <input type="number" name="nilai" step="0.01" min="0" max="100" class="form-control" placeholder="Contoh: 85.50" value="{{ old('nilai') }}" required>
                                <span class="input-group-text bg-light text-secondary">Skala 100</span>
                            </div>
                        </div>

                        <!-- Input Mata Pelajaran Favorit -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Mata Pelajaran Favorit <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-book text-muted"></i></span>
                                <input type="text" name="mapel_favorit" list="list_mapel_siswa" class="form-control" placeholder="Ketik atau pilih mata pelajaran..." value="{{ old('mapel_favorit') }}" autocomplete="off" required>
                            </div>
                        </div>

                        <!-- Input Preferensi Studi -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Preferensi Studi / Rumpun Keilmuan <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-book-reader text-muted"></i></span>
                                <input type="text" name="preferensi_studi" list="list_studi_siswa" class="form-control" placeholder="Ketik atau pilih rumpun studi..." value="{{ old('preferensi_studi') }}" autocomplete="off" required>
                            </div>
                        </div>

                        <!-- Input Cita-Cita -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Cita-Cita / Orientasi Karier <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-briefcase text-muted"></i></span>
                                <input type="text" name="cita_cita" list="list_cita_siswa" class="form-control" placeholder="Ketik cita-cita..." value="{{ old('cita_cita') }}" autocomplete="off" required>
                            </div>
                        </div>

                        <!-- Input Minat -->
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-secondary small">Minat Spesifik Siswa <span class="text-danger">*</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light"><i class="fas fa-heart text-muted"></i></span>
                                <input type="text" name="minat" list="list_minat_siswa" class="form-control" placeholder="Ketik minat spesifik..." value="{{ old('minat') }}" autocomplete="off" required>
                            </div>
                        </div>
                    </div>

                    <!-- Sisi Kanan: Panduan Pengisian -->
                    <div class="col-lg-4 pl-lg-4 mt-3 mt-lg-0">
                        <div class="p-3 bg-light rounded border">
                            <h6 class="font-weight-bold text-dark small mb-2">
                                <i class="fas fa-info-circle text-info me-1"></i> Panduan Pengisian
                            </h6>
                            <p class="small text-muted mb-2">
                                Isikan kriteria siswa sesuai dengan data riil. Algoritma C4.5 akan melakukan pencocokan data ini berdasarkan pohon keputusan (*decision tree*) yang terbentuk dari data training.
                            </p>
                            <hr class="my-2">
                            <small class="text-secondary d-block">
                                <i class="fas fa-check-circle text-success me-1"></i> Pilih nama dari daftar rekomendasi jika siswa sudah memiliki akun.
                            </small>
                            <small class="text-secondary d-block mt-1">
                                <i class="fas fa-check-circle text-success me-1"></i> Anda dapat langsung mengetikkan nama siswa baru jika belum terdaftar.
                            </small>
                            <small class="text-secondary d-block mt-1">
                                <i class="fas fa-check-circle text-success me-1"></i> Nilai diisi dalam rentang 0 - 100.
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tombol Aksi -->
            <div class="card-footer bg-light py-2 px-4 d-flex justify-content-end gap-2">
                <a href="{{ route('c45.index') }}" class="btn btn-secondary btn-sm rounded-pill px-3">Batal</a>
                <button type="submit" class="btn btn-primary btn-sm rounded-pill font-weight-bold px-4 shadow-sm">
                    <i class="fa-solid fa-wand-magic-sparkles me-1"></i> Analisis Rekomendasi
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Datalist Autocomplete Features -->
<datalist id="list_mapel_siswa">
    <option value="Matematika">
    <option value="Bahasa Inggris">
    <option value="Biologi">
    <option value="Fisika">
    <option value="Ekonomi">
    <option value="Sejarah">
</datalist>

<datalist id="list_studi_siswa">
    <option value="Pertanian & Hortikultura">
    <option value="Komputer & Informatika">
    <option value="Ekonomi & Agribisnis">
    <option value="Bahasa & Komunikasi">
    <option value="Kesehatan & Gizi">
    <option value="Bisnis & Manajemen">
    <option value="Ilmu Peternakan">
    <option value="Rekayasa Otomotif">
    <option value="Sains & Teknologi">
</datalist>

<datalist id="list_cita_siswa">
    <option value="Ahli Agronomi">
    <option value="Peternak">
    <option value="Pengusaha">
    <option value="Ahli Gizi">
    <option value="Manager Rantai Pasok">
    <option value="Manajer">
    <option value="Quality Control">
    <option value="Petani Modern">
    <option value="Teknisi">
    <option value="Bahasa & Pariwisata">
    <option value="IT">
</datalist>

<datalist id="list_minat_siswa">
    <option value="Budidaya Tanaman">
    <option value="Kimia Pangan">
    <option value="Budidaya Ternak">
    <option value="Teknologi Info & Pemrograman">
    <option value="Energi & Tek Mesin">
    <option value="Bahasa & Komunikasi">
    <option value="Bisnis">
    <option value="Kesehatan">
</datalist>

<!-- JavaScript Sinkronisasi ID Siswa Jika Nama Cocok -->
<script>
    function updateSiswaId(input) {
        var options = document.getElementById('list_siswa').options;
        var siswaIdInput = document.getElementById('siswa_id');
        
        siswaIdInput.value = ''; // Reset ID

        for (var i = 0; i < options.length; i++) {
            if (options[i].value.trim().toLowerCase() === input.value.trim().toLowerCase()) {
                siswaIdInput.value = options[i].getAttribute('data-id');
                break;
            }
        }
    }
</script>
@endsection