@extends('dashboard.layouts.default')
@section('content')
<section class="top-section dashboard">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-{{ !$is_plan?10:12 }}">
        <div class="card shadow rounded-5 performance">
          <div class="card-body">
            <div class="row g-3">
              <div class="col-lg-12">
                <div class="card bg-kay rounded-4 mb-3 parent-card">
                  <div class="card-body">
                    <div class="row align-items-center justify-content-between g-3">
                      <div class="col-lg-7 order-md-1 order-2">
                        <div class="row g-3 align-items-center">
                          <div class="col-lg-6">
                            <div class="card shadow rounded-3">
                              <div class="card-body">
                                <h5>{{$earnedPoint}} / {{$totalQuizPoint}}</h5>
                                <h6 class="mb-0">{{$last_attended_quiz}} </h6>
                                <p class="text-primary fw-semibold">Last Quiz</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card shadow rounded-3">
                              <div class="card-body">
                                <h5> {{ $student_total_points }}</h5>
                                <p class="text-primary fw-semibold">Total Points</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card shadow rounded-3">
                              <div class="card-body">
                                <h5>{{ $weekly_class_rank }}</h5>
                                <p class="text-primary fw-semibold">Weekly Rank</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card shadow rounded-3">
                              <div class="card-body">
                                <h5>
                                  @if($student_this_week_points) {{$student_this_week_points}} @else
                                  0 @endif /100
                                </h5>
                                <p class="text-primary fw-semibold">Weekly Points Target</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-lg-5 order-md-2 order-1 text-end">
                        <h2 class="text-white">Worldwide KayScience Rank</h2>
                        <h1 class="text-white rank-txt">{{ $overall_student_rank }}</h1>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row g-3">
                  <div class="col-lg-3">
                    <div class="card bg-kay shadow rounded-3">
                      <div class="card-body">
                        <h5 class="text-white">
                          @if($student_average) {{$student_average}}  @else
                          0 @endif
                        </h5>
                        <p class="text-white">% of Questions Answered Correctly</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="card bg-kay shadow rounded-3">
                      <div class="card-body">
                        <h5 class="text-white">{{ $student_answered }}</h5>
                        <p class="text-white">Quiz Questions Answered</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="card bg-kay shadow rounded-3">
                      <div class="card-body">
                        <h5 class="text-white">{{ $video_watched_count }}</h5>
                        <p class="text-white">Total Videos Watched</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="card bg-kay shadow rounded-3">
                      <div class="card-body">
                        <h5 class="text-white">{{ $video_watched_minutes }}</h5>
                        <p class="text-white">Minutes of Videos Watched</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <p class="col-12 text-center mb-0 mt-3"><small>* Please wait roughly 1 minute for some of the data to be updated</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection