@extends('ortu.layout')

@section('content')

<h5 class="mb-4">📘 Kartu Hasil Studi (KHS)</h5>

<div class="card-box">

    <div class="row mb-3">

        {{-- NIM --}}
        <div class="col-md-4">
            <label>NIM</label>
            <input type="text" class="form-control" value="{{ $mahasiswa->nim }}" readonly>
        </div>

        {{-- NAMA --}}
        <div class="col-md-4">
            <label>Nama Mahasiswa</label>
            <input type="text" class="form-control" value="{{ $mahasiswa->nama }}" readonly>
        </div>

        {{-- TAHUN --}}
        <div class="col-md-4">
            <label>Tahun Akademik</label>
            <select id="tahun" class="form-control">
                <option value="">-- Pilih Tahun Akademik --</option>
                @foreach($tahun as $t)
                <option value="{{ $t->id }}">{{ $t->tahun }}</option>
                @endforeach
            </select>
        </div>

    </div>

    {{-- BUTTON --}}
    <button onclick="loadNilai()" class="btn btn-custom mb-3">
        Tampilkan
    </button>

    {{-- HASIL --}}
    <div id="khsResult">
        <div class="text-center text-muted py-3">
            Silakan pilih tahun akademik terlebih dahulu
        </div>
    </div>

</div>

{{-- ================= GRAFIK ================= --}}
<div class="card-box mt-4">
    <h6 class="mb-3">📊 Grafik IP Mahasiswa</h6>
    <canvas id="chartIP" height="100"></canvas>
</div>

@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

{{-- ================= LOAD NILAI ================= --}}
<script>
    function loadNilai() {

        let tahun = document.getElementById('tahun').value;

        if (!tahun) {
            alert('Pilih tahun akademik terlebih dahulu!');
            return;
        }

        let url = "/ortu/nilai/filter?id_mahasiswa={{ $mahasiswa->id }}&tahun=" + encodeURIComponent(tahun);

        fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('khsResult').innerHTML = data;
            })
            .catch(error => {
                console.log(error);
                alert('Gagal memuat data');
            });
    }
</script>

{{-- ================= GRAFIK ================= --}}
<script>
    let chart;

    function loadChart(data) {

        if (!data || data.length === 0) return;

        let labels = data.map(d => d.tahun);
        let values = data.map(d => parseFloat(d.ip));

        if (chart) chart.destroy();

        chart = new Chart(document.getElementById('chartIP'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Indeks Prestasi (IP)',
                    data: values,
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        });
    }

    // 🔥 hanya load grafik (tanpa load tabel)
    window.onload = function() {
        loadChart(@json($ip));
    }
</script>

@endsection