@extends('siswa.layouts.app')

@section('page_title', 'Evaluasi')
@section('page_description', 'Lihat evaluasi nilai tugas dan ujian')

@section('content')
<section class="section">
    <div class="section-header">
    <h1>Evaluasi</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item active"><a href="{{ route('siswa.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item">evaluasi</div>
    </div>
  </div>

 

  <div class="section-body">

    {{-- Row untuk grafik nilai ujian dan tugas --}}
    <div class="row">
      <div class="col-md-6">
        <div class="card mb-3">
          <div class="card-header"><h5>Nilai Ujian</h5></div>
          <div class="card-body">
            <canvas id="nilaiUjianChart" height="170"></canvas>

            @forelse ($nilaiUjian as $nilai)
              @php
                $judul = $nilai->ujian->judul ?? '-';
                $nilai_total = $nilai->nilai_total ?? 0;
              @endphp
              <div class="mb-4 mt-4">
                <div class="text-small float-right font-weight-bold text-muted">{{ $nilai_total }}</div>
                <div class="font-weight-bold mb-1">{{ $judul }}</div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-info" role="progressbar" style="width: {{ $nilai_total }}%" aria-valuenow="{{ $nilai_total }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>                          
              </div>
            @empty
              <p class="text-muted">Belum ada nilai ujian.</p>
            @endforelse
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header"><h5>Nilai Tugas</h5></div>
          <div class="card-body">
            <canvas id="nilaiTugasChart" height="170"></canvas>

            @forelse ($nilaiTugas as $nilai)
              @php
                $judul = $nilai->tugas->judul ?? '-';
                $nilaiTugasValue = $nilai->nilai ?? 0;
              @endphp
              <div class="mb-4 mt-4">
                <div class="text-small float-right font-weight-bold text-muted">{{ $nilaiTugasValue }}</div>
                <div class="font-weight-bold mb-1">{{ $judul }}</div>
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $nilaiTugasValue }}%" aria-valuenow="{{ $nilaiTugasValue }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            @empty
              <p class="text-muted">Belum ada nilai tugas.</p>
            @endforelse
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Data Nilai Ujian
    const labelsUjian = [
      @foreach ($nilaiUjian as $nilai)
        "{{ $nilai->ujian->judul ?? '-' }}",
      @endforeach
    ];
    const dataUjian = [
      @foreach ($nilaiUjian as $nilai)
        {{ $nilai->nilai_total ?? 0 }},
      @endforeach
    ];

    // Grafik Nilai Ujian (line chart)
    const ctxUjian = document.getElementById('nilaiUjianChart').getContext('2d');
    new Chart(ctxUjian, {
      type: 'line',
      data: {
        labels: labelsUjian,
        datasets: [{
          label: 'Nilai Ujian',
          data: dataUjian,
          fill: false,
          borderColor: 'rgba(54, 162, 235, 1)',
          backgroundColor: 'rgba(54, 162, 235, 0.7)',
          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 }
        }
      }
    });

    // Data Nilai Tugas
    const labelsTugas = [
      @foreach ($nilaiTugas as $nilai)
        "{{ $nilai->tugas->judul ?? '-' }}",
      @endforeach
    ];
    const dataTugas = [
      @foreach ($nilaiTugas as $nilai)
        {{ $nilai->nilai ?? 0 }},
      @endforeach
    ];

    // Grafik Nilai Tugas (line chart)
    const ctxTugas = document.getElementById('nilaiTugasChart').getContext('2d');
    new Chart(ctxTugas, {
      type: 'line',
      data: {
        labels: labelsTugas,
        datasets: [{
          label: 'Nilai Tugas',
          data: dataTugas,
          fill: false,
          borderColor: 'rgba(220, 53, 69, 1)', // merah
          backgroundColor: 'rgba(220, 53, 69, 0.7)',
          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>
  /* Grafik Nilai Ujian dan Nilai Tugas dengan tinggi lebih kecil */
  #nilaiUjianChart,
  #nilaiTugasChart {
    width: 100% !important;
    height: 130px !important;
  }
</style>