@extends('layouts.appLayout')

@section('title', $course->title.' — Exam Score')
@section('nav_title', 'Exam Score')

@section('content')
@php
    // Decide colors based on percentage
    if ($percentage < 50) {
        $textClass = 'text-danger';
        $barClass  = 'bg-danger';
    } elseif ($percentage < 70) {
        $textClass = 'text-warning';
        $barClass  = 'bg-warning';
    } else {
        $textClass = 'text-success';
        $barClass  = 'bg-success';
    }
@endphp

<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card shadow-sm">
        <div class="card-body text-center">
          <h1 class="card-title mb-3">{{ $course->title }} — Exam Complete</h1>
          <h4 class="card-subtitle mb-4 text-muted">
            Chapter {{ $chapter->chapter_number }}: {{ $chapter->title }}
          </h4>

          <div class="mb-4">
            <div class="progress" style="height: 1.5rem;">
              <div class="progress-bar {{ $barClass }}" role="progressbar"
                   style="width: {{ $percentage }}%;"
                   aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100">
                {{ $percentage }}%
              </div>
            </div>
          </div>

          <p class="fs-5">
            You got 
            <span class="{{ $textClass }} fw-bold">{{ $correct }}</span> 
            out of 
            <span class="{{ $textClass }} fw-bold">{{ $total }}</span>.
          </p>

          <div class="mt-4">
            <a href="{{ route('showCourseInfo',['id' => $course->id]) }}"
               class="btn btn1 me-2">
              &larr; Back to Course Info
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
