@extends('layout.app')

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/landing.css', 'resources/css/animate.css', 'resources/css/students/student.css', 'resources/css/curriculum_class.css'])
@endpush

@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    <section class="banner-main position-relative w-100">
      <div>
        <img src="{{ asset('img/promotion/banner_class.png') }}" alt="" class="w-100">
      </div>
      <div class="banner-main-wrap position-absolute mt-2">
        <div class="banner-main-content text-white">
          <div class="banner-main-header text-uppercase">
            <h2>lớp 6 - môn toán học</h2>
          </div>
          <div class="banner-main-text fs-17">
            <p>Dashboard / Lớp 6 / Toán học</p>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      <div class="row mt-5">
        <div class="col-9">

          <div class="frame">
            <div class="head">
              <p class="kh-a-h-c-s-k-t-th-c">Khóa Học Sẽ Kết Thúc: 23/10/2024</p>
              <div class="div">
                <div class="ng-k-gia-s">Mua Thêm Gói Học</div>
                <img class="icon-lucide-icon" src="https://c.animaapp.com/2UySW0zo/img/icon-lucide-icon-1.svg" />
              </div>
            </div>
            <div class="group">
              <div class="overlap">
                <div class="overlap-group">
                  <div class="overlap-group-wrapper">
                    <div class="m-n-to-n-h-c-l-p-wrapper">
                      <div class="m-n-to-n-h-c-l-p">TOÁN HỌC<br />LỚP 6</div>
                    </div>
                  </div>
                  <div class="overlap-wrapper">
                    <div class="overlap-2">
                      <div class="ellipse"></div>
                      <img class="element-removebg"
                        src="https://c.animaapp.com/2UySW0zo/img/778899-removebg-preview-2-8@2x.png" />
                      <p class="ch-ng-t-p-h-p-c-c">
                        <span class="text-wrapper">Chương 6:</span> <span class="span"> Tập Hợp Các Số Tự Nhiên</span>
                      </p>
                    </div>
                  </div>
                  <div class="div-wrapper">
                    <div class="overlap-2">
                      <div class="ellipse"></div>
                      <img class="element-removebg"
                        src="https://c.animaapp.com/2UySW0zo/img/778899-removebg-preview-2-10@2x.png" />
                      <p class="p">
                        <span class="text-wrapper">Chương 2: </span>
                        <span class="span">Tính Chia Hết Trong Tập Hợp các số tự nhiên</span>
                      </p>
                    </div>
                  </div>
                  <div class="group-2">
                    <div class="ch-ng-t-p-h-p-c-c-wrapper">
                      <p class="ch-ng-t-p-h-p-c-c-2">
                        <span class="text-wrapper">Chương 4: </span>
                        <span class="span">Một số hình phẳng trong mặt phẳng</span>
                      </p>
                    </div>
                  </div>
                  <img class="img" src="https://c.animaapp.com/2UySW0zo/img/ellipse-524.png" />
                  <div class="ellipse-2"></div>
                  <div class="ellipse-3"></div>
                  <div class="ellipse-4"></div>
                  <div class="ellipse-5"></div>
                  <div class="ellipse-6"></div>
                  <div class="ellipse-7"></div>
                  <div class="ellipse-8"></div>
                </div>
                <div class="group-3">
                  <div class="overlap-2">
                    <div class="ellipse-9"></div>
                    <img class="element-removebg"
                      src="https://c.animaapp.com/2UySW0zo/img/778899-removebg-preview-2-5@2x.png" />
                    <p class="ch-ng-t-p-h-p-c-c">
                      <span class="text-wrapper">Chương 1: </span> <span class="span">Tập Hợp Các Số Tự Nhiên</span>
                    </p>
                  </div>
                </div>
                <div class="group-4">
                  <div class="overlap-3">
                    <p class="ch-ng-t-p-h-p-c-c-3">
                      <span class="text-wrapper">Chương 3:</span> <span class="span"> Số Nguyên</span>
                    </p>
                  </div>
                </div>
                <div class="group-5">
                  <div class="overlap-4">
                    <p class="ch-ng-t-p-h-p-c-c-4">
                      <span class="text-wrapper">Chương 5: </span>
                      <span class="span">Tính Chia Hết Trong Tập Hợp các số tự nhiên</span>
                    </p>
                  </div>
                </div>
                <div class="group-6">
                  <div class="overlap-5">
                    <p class="ch-ng-t-p-h-p-c-c-5">
                      <span class="text-wrapper">Chương 7:</span> <span class="span"> Tập Hợp Các Số Tự Nhiên</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="col-3 pt-0">
          <div class="dashboard-leaderboard px-3">
            <div class="d-flex justify-content-between mb-4">
              <div class="dashboard-leaderboard-title">
                <p class="fw-bold text-uppercase text-blue-2">Bảng xếp hạng</p>
              </div>
              <div class="dashboard-leaderboard-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path opacity="0.35" d="M18 21H6C4.343 21 3 19.657 3 18V7H21V18C21 19.657 19.657 21 18 21Z"
                    fill="#150E56" />
                  <path d="M18 3H6C4.343 3 3 4.343 3 6V7H21V6C21 4.343 19.657 3 18 3Z" fill="#150E56" />
                  <path
                    d="M14 19C14.5523 19 15 18.5523 15 18C15 17.4477 14.5523 17 14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19Z"
                    fill="#150E56" />
                  <path
                    d="M10 19C10.5523 19 11 18.5523 11 18C11 17.4477 10.5523 17 10 17C9.44772 17 9 17.4477 9 18C9 18.5523 9.44772 19 10 19Z"
                    fill="#150E56" />
                  <path
                    d="M6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19Z"
                    fill="#150E56" />
                  <path
                    d="M6 15C6.55228 15 7 14.5523 7 14C7 13.4477 6.55228 13 6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15Z"
                    fill="#150E56" />
                  <path
                    d="M10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z"
                    fill="#150E56" />
                  <path
                    d="M14 15C14.5523 15 15 14.5523 15 14C15 13.4477 14.5523 13 14 13C13.4477 13 13 13.4477 13 14C13 14.5523 13.4477 15 14 15Z"
                    fill="#150E56" />
                  <path
                    d="M18 15C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13C17.4477 13 17 13.4477 17 14C17 14.5523 17.4477 15 18 15Z"
                    fill="#150E56" />
                  <path
                    d="M18 11C18.5523 11 19 10.5523 19 10C19 9.44772 18.5523 9 18 9C17.4477 9 17 9.44772 17 10C17 10.5523 17.4477 11 18 11Z"
                    fill="#150E56" />
                  <path
                    d="M14 11C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14 9C13.4477 9 13 9.44772 13 10C13 10.5523 13.4477 11 14 11Z"
                    fill="#150E56" />
                  <path
                    d="M10 11C10.5523 11 11 10.5523 11 10C11 9.44772 10.5523 9 10 9C9.44772 9 9 9.44772 9 10C9 10.5523 9.44772 11 10 11Z"
                    fill="#150E56" />
                </svg>
              </div>
            </div>
            {{-- <div class="dashboard-leaderboard-text py-3">
              <p class="text-uppercase text-blue-2 fw-bold mb-0 text-center">bảng xếp hạng</p>
            </div> --}}
            <div class="dashboard-person-wrap d-flex flex-column">
              <div class="dashboard-person-top-rank px-3">
                <div class="dashboard-person-avatar-wrap d-flex justify-content-center mb-2">
                  <img
                    src="{{ isset($leaderBoardData['allTopLeaderBoard']) && !is_null($leaderBoardData['allTopLeaderBoard'][0]->avatar) ? Storage::url($leaderBoardData['allTopLeaderBoard'][0]->avatar) : asset('img/avatardefault.jpg') }}"
                    alt="Avatar" class="rounded-circle">
                </div>
                <div class="dashboard-person-name">
                  <p class="text-center">
                    {{ isset($leaderBoardData['allTopLeaderBoard']) ? $leaderBoardData['allTopLeaderBoard'][0]->fullname : 'Chưa có dữ liệu' }}
                  </p>
                </div>
                <div class="dashboard-person-point mb-4">
                  <p class="fs-18 text-red-main mb-0 text-center">
                    {{ isset($leaderBoardData['allTopLeaderBoard']) ? $leaderBoardData['allTopLeaderBoard'][0]->total_score : 'Chưa có dữ liệu' }}
                  </p>
                </div>
              </div>
              @if (isset($leaderBoardData['allTopLeaderBoard']))
                @foreach ($leaderBoardData['allTopLeaderBoard'] as $key => $top)
                  @if ($loop->first)
                    @continue
                  @endif
                  <div class="dashboard-person-item px-3 py-2">
                    <div class="d-flex justify-content-center justify-content-xl-between align-items-center py-1">
                      <div class="d-flex align-items-center flex-wrap">
                        <p class="fw-bold fs-12 text-uppercase text-red-sub mb-0">{{ $key + 1 }}</p>
                        <img
                          src="{{ !is_null($top->avatar) ? Storage::url($top->avatar) : asset('img/avatardefault.jpg') }}"
                          alt="Avatar" class="dashboard-person-avatar rounded-circle mx-2">
                        <p class="mb-0 pe-2 ps-1 text-center">{{ $top->fullname }}</p>
                      </div>
                      <p class="fs-18 text-red-main fw-bold mb-0 text-center">
                        {{ $top->total_score }}
                      </p>
                    </div>
                  </div>
                @endforeach
              @endif
              <div class="d-flex justify-content-center mb-3">
                <div class="leaderboard-icon rounded-circle d-flex justify-content-center align-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                    fill="none">
                    <path
                      d="M14.7087 2.38461C15.2695 2.82211 15.5445 3.50044 15.6779 4.00544C15.7745 4.37211 15.5004 4.72378 15.1204 4.71878C14.5987 4.71211 13.8737 4.60961 13.3137 4.17211C12.7529 3.73461 12.4779 3.05628 12.3445 2.55128C12.247 2.18461 12.5212 1.83294 12.9012 1.83794C13.4229 1.84461 14.1479 1.94711 14.7087 2.38461Z"
                      fill="#F0EEFD" />
                    <path
                      d="M18.5851 5.85167C18.306 6.50584 17.721 6.94584 17.2668 7.20334C16.9368 7.39084 16.5268 7.21584 16.4343 6.8475C16.3076 6.34084 16.221 5.61417 16.5001 4.96084C16.7793 4.30667 17.3643 3.86667 17.8185 3.60917C18.1485 3.42167 18.5585 3.59667 18.651 3.965C18.7776 4.47084 18.8643 5.1975 18.5851 5.85167Z"
                      fill="#F0EEFD" />
                    <path
                      d="M15.7744 5.2862C16.4486 5.51203 16.9336 6.06037 17.2277 6.49203C17.4411 6.8062 17.2994 7.2287 16.9394 7.35037C16.4444 7.51787 15.7269 7.66203 15.0536 7.4362C14.3794 7.21037 13.8936 6.66203 13.6002 6.23037C13.3869 5.9162 13.5286 5.4937 13.8877 5.37203C14.3827 5.20453 15.1002 5.06037 15.7744 5.2862Z"
                      fill="#F0EEFD" />
                    <path
                      d="M19.2309 10.2394C18.7293 10.7428 18.0226 10.9344 17.5051 11.0061C17.1293 11.0578 16.8134 10.7428 16.8643 10.3669C16.9343 9.84943 17.1234 9.14276 17.6251 8.63943C18.1268 8.13526 18.8334 7.94443 19.3509 7.87276C19.7268 7.82109 20.0426 8.13609 19.9918 8.51193C19.9226 9.02859 19.7334 9.73609 19.2309 10.2394Z"
                      fill="#F0EEFD" />
                    <path
                      d="M16.8312 8.67364C17.3737 9.13364 17.6204 9.82281 17.7329 10.3328C17.8145 10.7036 17.5262 11.0436 17.147 11.0228C16.6254 10.9945 15.9054 10.8628 15.3637 10.4028C14.8212 9.94281 14.5737 9.25364 14.4612 8.74364C14.3795 8.37281 14.6679 8.03281 15.047 8.05364C15.5695 8.08198 16.2895 8.21364 16.8312 8.67364Z"
                      fill="#F0EEFD" />
                    <path
                      d="M17.8722 14.5043C17.1963 14.726 16.4797 14.5751 15.9863 14.4043C15.628 14.2801 15.4888 13.856 15.7047 13.5435C16.0013 13.1143 16.4913 12.5701 17.1663 12.3493C17.8422 12.1276 18.5588 12.2785 19.0522 12.4493C19.4105 12.5735 19.5497 12.9976 19.3338 13.3093C19.0372 13.7393 18.548 14.2835 17.8722 14.5043Z"
                      fill="#F0EEFD" />
                    <path
                      d="M16.4435 12.0199C16.7185 12.6758 16.626 13.4024 16.4951 13.9074C16.4001 14.2749 15.9885 14.4466 15.6601 14.2566C15.2085 13.9949 14.6268 13.5508 14.3526 12.8949C14.0776 12.2391 14.1701 11.5124 14.3018 11.0074C14.3968 10.6399 14.8085 10.4683 15.1368 10.6583C15.5876 10.9199 16.1685 11.3641 16.4435 12.0199Z"
                      fill="#F0EEFD" />
                    <path
                      d="M14.6103 17.4059C13.9012 17.3592 13.292 16.9517 12.8987 16.6092C12.612 16.36 12.642 15.915 12.9587 15.7059C13.3945 15.4184 14.052 15.0959 14.7612 15.1434C15.4703 15.19 16.0795 15.5975 16.4737 15.94C16.7595 16.1892 16.7303 16.6342 16.4137 16.8434C15.977 17.1309 15.3195 17.4525 14.6103 17.4059Z"
                      fill="#F0EEFD" />
                    <path
                      d="M14.2125 14.5666C14.2225 15.2775 13.8659 15.9166 13.555 16.3366C13.3292 16.6416 12.8834 16.6483 12.65 16.3491C12.3284 15.9375 11.955 15.3083 11.945 14.5975C11.935 13.8866 12.2917 13.2466 12.6025 12.8266C12.8284 12.5216 13.2742 12.515 13.5075 12.8141C13.8292 13.2266 14.2034 13.8558 14.2125 14.5666Z"
                      fill="#F0EEFD" />
                    <path opacity="0.35"
                      d="M17.9495 9.52029C17.9495 4.45112 14.5104 2.80529 14.3637 2.73779C14.0504 2.59279 13.6829 2.72862 13.5379 3.04029C13.3912 3.35196 13.5262 3.72279 13.8362 3.87029C13.9537 3.92612 16.6995 5.28029 16.6995 9.51946C16.6995 14.3153 14.1612 14.957 11.7079 15.5786C11.3495 15.6695 10.997 15.7586 10.6579 15.8603C10.3195 15.7586 9.96621 15.6686 9.60788 15.5786C7.15454 14.9578 4.61621 14.3153 4.61621 9.51946C4.61621 5.28029 7.36204 3.92612 7.47621 3.87196C7.78954 3.72779 7.92621 3.35612 7.78121 3.04279C7.63704 2.72862 7.26288 2.59279 6.95204 2.73779C6.80538 2.80529 3.36621 4.45112 3.36621 9.52029C3.36621 15.0103 6.47121 16.0603 8.93038 16.6953C8.64538 16.9295 8.40204 17.2111 8.22788 17.5736C8.07788 17.8845 8.20954 18.2578 8.52038 18.4078C8.60704 18.4503 8.70038 18.4695 8.79038 18.4695C9.02288 18.4695 9.24704 18.3395 9.35454 18.1153C9.56954 17.6678 10.0454 17.3928 10.6579 17.1761C11.2704 17.3928 11.7462 17.6678 11.9612 18.1153C12.0687 18.3395 12.292 18.4695 12.5254 18.4695C12.6154 18.4695 12.7087 18.4503 12.7954 18.4078C13.1062 18.2578 13.237 17.8845 13.0879 17.5736C12.9137 17.212 12.6704 16.9303 12.3854 16.6953C14.8445 16.0603 17.9495 15.0095 17.9495 9.52029Z"
                      fill="#F0EEFD" />
                    <path
                      d="M8.41432 1.83794C8.79349 1.83294 9.06849 2.18461 8.97099 2.55128C8.83766 3.05628 8.56265 3.73461 8.00182 4.17211C7.44182 4.60961 6.71765 4.71211 6.19515 4.71878C5.81599 4.72378 5.54099 4.37294 5.63765 4.00544C5.77099 3.50044 6.04599 2.82211 6.60682 2.38461C7.16765 1.94711 7.89265 1.84461 8.41432 1.83794Z"
                      fill="#F0EEFD" />
                    <path
                      d="M2.66541 3.96305C2.75791 3.59472 3.16791 3.41972 3.49791 3.60722C3.95207 3.86555 4.53707 4.30555 4.81624 4.95888C5.09541 5.61305 5.00874 6.33972 4.88124 6.84638C4.78957 7.21472 4.37957 7.38972 4.04957 7.20222C3.59541 6.94388 3.01041 6.50388 2.73124 5.85055C2.45124 5.19638 2.53791 4.46972 2.66541 3.96305Z"
                      fill="#F0EEFD" />
                    <path
                      d="M7.42672 5.37203C7.78589 5.4937 7.92839 5.9162 7.71422 6.23037C7.42089 6.66203 6.93589 7.21037 6.26089 7.4362C5.58755 7.66203 4.86922 7.51787 4.37505 7.35037C4.01589 7.22953 3.87422 6.8062 4.08755 6.49287C4.38089 6.06037 4.86672 5.51203 5.54089 5.2862C6.21505 5.06037 6.93255 5.20453 7.42672 5.37203Z"
                      fill="#F0EEFD" />
                    <path
                      d="M1.32277 8.5121C1.27194 8.13543 1.58777 7.82043 1.96444 7.87293C2.48194 7.9446 3.18861 8.13543 3.69027 8.6396C4.19194 9.14293 4.38111 9.8496 4.45111 10.3671C4.50194 10.7429 4.18611 11.0579 3.81028 11.0063C3.29278 10.9346 2.58611 10.7438 2.08444 10.2396C1.58194 9.73626 1.39277 9.02876 1.32277 8.5121Z"
                      fill="#F0EEFD" />
                    <path
                      d="M6.26762 8.05364C6.64679 8.03281 6.93512 8.37281 6.85346 8.74364C6.74096 9.25364 6.49346 9.94281 5.95096 10.4028C5.40929 10.8628 4.68929 10.9945 4.16762 11.0228C3.78846 11.0436 3.50012 10.7036 3.58179 10.3328C3.69429 9.82281 3.94179 9.13364 4.48346 8.67364C5.02596 8.21364 5.74596 8.08198 6.26762 8.05364Z"
                      fill="#F0EEFD" />
                    <path
                      d="M1.98169 13.3093C1.76586 12.9968 1.90419 12.5735 2.26336 12.4493C2.75669 12.2785 3.47336 12.1276 4.14919 12.3493C4.82419 12.5701 5.31419 13.1143 5.61086 13.5435C5.82669 13.856 5.68836 14.2793 5.32919 14.4043C4.83586 14.5751 4.11919 14.726 3.44336 14.5043C2.76753 14.2826 2.27836 13.7385 1.98169 13.3093Z"
                      fill="#F0EEFD" />
                    <path
                      d="M6.18038 10.6583C6.50871 10.4683 6.92038 10.6399 7.01538 11.0074C7.14621 11.5133 7.23871 12.2391 6.96455 12.8949C6.69038 13.5508 6.10871 13.9949 5.65705 14.2566C5.32871 14.4466 4.91705 14.2749 4.82205 13.9074C4.69121 13.4016 4.59871 12.6758 4.87371 12.0199C5.14705 11.3641 5.72788 10.9199 6.18038 10.6583Z"
                      fill="#F0EEFD" />
                    <path
                      d="M4.90253 16.8434C4.58586 16.6342 4.55586 16.1892 4.84253 15.94C5.23669 15.5967 5.84503 15.19 6.55503 15.1434C7.26419 15.0959 7.92169 15.4184 8.35753 15.7059C8.67419 15.915 8.70419 16.36 8.41753 16.6092C8.02336 16.9525 7.41503 17.3592 6.70586 17.4059C5.99586 17.4525 5.33836 17.1309 4.90253 16.8434Z"
                      fill="#F0EEFD" />
                    <path
                      d="M7.80774 12.8144C8.04191 12.5153 8.48691 12.5211 8.71274 12.8269C9.02274 13.2469 9.38024 13.8861 9.37024 14.5978C9.36024 15.3086 8.98691 15.9378 8.66524 16.3494C8.43191 16.6486 7.98608 16.6428 7.76024 16.3369C7.45024 15.9169 7.09274 15.2778 7.10274 14.5669C7.11191 13.8553 7.48608 13.2261 7.80774 12.8144Z"
                      fill="#F0EEFD" />
                  </svg>
                </div>
              </div>
              <div class="dashboard-person-item active px-3 py-2">
                <div class="d-flex justify-content-center justify-content-xl-between align-items-center py-1">
                  <div class="d-flex align-items-center flex-wrap">
                    <p class="fw-bold fs-12 text-uppercase text-red-sub mb-0">
                      {{ isset($leaderBoardData['currentStudentScoreData']) ? $leaderBoardData['currentStudentScoreData']->rnk : '' }}
                    </p>
                    <img
                      src="{{ isset($leaderBoardData['currentStudentScoreData']) && !is_null($leaderBoardData['currentStudentScoreData']->avatar) ? Storage::url($leaderBoardData['currentStudentScoreData']->avatar) : asset('img/avatardefault.jpg') }}"
                      alt="Avatar" class="dashboard-person-avatar rounded-circle mx-2">
                    <p class="mb-0 pe-2 ps-1 text-center">{{ $leaderBoardData['currentStudentScoreData']->fullname }}
                    </p>
                  </div>
                  <p class="fs-18 text-red-main fw-bold mb-0 text-center">
                    {{ isset($leaderBoardData['currentStudentScoreData']) ? $leaderBoardData['currentStudentScoreData']->total_score : '' }}
                  </p>
                </div>
              </div>
              @if ($leaderBoardData['currentStudentTopLeaderBoard'])
                @foreach ($leaderBoardData['currentStudentTopLeaderBoard'] as $key => $top)
                  @if ($loop->first)
                    @continue
                  @endif
                  <div class="dashboard-person-item px-3 py-2">
                    <div class="d-flex justify-content-center justify-content-xl-between align-items-center py-1">
                      <div class="d-flex align-items-center flex-wrap">
                        <p class="fw-bold fs-12 text-uppercase text-red-sub mb-0">
                          {{ $top->rnk }}</p>
                        <img
                          src="{{ !is_null($top->avatar) ? Storage::url($top->avatar) : asset('img/avatardefault.jpg') }}"
                          alt="Avatar" class="dashboard-person-avatar rounded-circle mx-2">
                        <p class="mb-0 pe-2 ps-1 text-center">
                          {{ $top->fullname }}</p>
                      </div>
                      <p class="fs-18 text-red-main fw-bold mb-0 text-center">
                        {{ $top->total_score }}
                      </p>
                    </div>
                  </div>
                @endforeach
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection