@extends('guru.layouts.app')

@section('title', 'Grafik Nilai Tugas')

@section('content')
<section class="section">
  <div class="section-header">
    <h1>Grafik Nilai Tugas</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item"><a href="{{ route('guru.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item"><a href="{{ route('guru.tugas.index') }}">Tugas</a></div>
      <div class="breadcrumb-item active">Grafik</div>
    </div>
  </div>

  <div class="section-body">
    <div class="card">
      <div class="card-header">
        <h4>Perkembangan Nilai Tugas - {{ $kelas->nama_kelas }} {{ $kelas->tingkat }}</h4>
      </div>
      <div class="card-body">
        @if (count($labels))
        <canvas id="grafikNilaiTugas" height="170"></canvas>

        {{-- Progress per tugas --}}
        @foreach ($labels as $index => $judul)
          @php
            $rataRata = $values[$index] ?? 0;
          @endphp
          <div class="mb-4 mt-4">
            <div class="text-small float-right font-weight-bold text-muted">{{ $rataRata }}</div>
            <div class="font-weight-bold mb-1">{{ $judul }}</div>
            <div class="progress" style="height: 6px;">
              <div class="progress-bar bg-success" role="progressbar" style="width: {{ $rataRata }}%" aria-valuenow="{{ $rataRata }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        @endforeach
        @else
          <p class="text-muted">Belum ada data nilai tugas untuk kelas ini.</p>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('grafikNilaiTugas').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: {!! json_encode($labels) !!},
        datasets: [{
          label: 'Rata-rata Nilai',
          data: {!! json_encode($values) !!},
          fill: false,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(75, 192, 192, 0.5)',
          tension: 0.3,
          borderWidth: 2,
          pointRadius: 4,
          pointHoverRadius: 6,
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: 100,
            ticks: { stepSize: 20 }
          }
        },
        plugins: {
          legend: { display: true }
        }
      }
    });
  });
</script>
@endpush

<style>
  #grafikNilaiTugas {
    width: 100% !important;
    height: 130px !important;
  }
</style>