@push('style')
  <link rel="stylesheet" href="{{ asset('/css/cropper.min.css') }}">
  @vite(['resources/css/layout/student/profile_card.css', 'resources/css/modal_crop_img.css'])
@endpush

@php
  $auth = Auth::user();
  $avatar = isset($auth->avatar) ? Storage::url($auth->avatar) : '/img/avatardefault.jpg';
@endphp

<section class="profile-card">
  <div class="d-flex justify-content-center flex-column align-items-center">
    <div class="profile-avatar">
      <img class="profile-user-avatar rounded-circle" src="{{ $avatar }}" alt="Avatar">
    </div>
    <form class="avatar-submit d-flex flex-column" enctype="multipart/form-data" method="POST"
      action="{{ route('students.changeAvatar') }}">
      @csrf
      <label
        class="custom-file-upload text-decoration-underline btn-change-avatar text-blue fs-12 fw-500 mt-1 border-0 bg-transparent">
        <input name="avatar" hidden type="file">
        Thay đổi
      </label>
      @error('avatar')
        <span class="text-danger">{{ $message }}</span>
      @enderror
    </form>
    <div class="profile-name fs-32 fw-600 text-blue mb-3 mt-4">
      <p class="m-0 text-center" style="word-break: break-word;">{{ $auth->fullname }}</p>
    </div>
    <div class="profile-link w-100">
      <ul>
        <li>
          <a href="{{ route('students.viewProfile') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('students/profile') ? 'active' : '' }} mb-1 p-3 text-center">
            Hồ Sơ Cá Nhân
          </a>
        </li>
        <li>
          <a href="{{ route('students.viewChangePass') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('students/change_password') ? 'active' : '' }} mb-1 p-3 text-center">
            Đổi Mật Khẩu</a>
        </li>
        <li>
          <a href="{{ route('students.viewStudyHistory') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('students/study_history') ? 'active' : '' }} p-3 text-center">Lịch
            Sử Học Tập</a>
        </li>
        <li>
          <a href="{{ route('students.viewTestHistory') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('students/test_history') ? 'active' : '' }} p-3 text-center">Lịch
            Sử Kiểm Tra</a>
        </li>
        <li>
          <a href="{{ route('students.viewPointHistory') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('students/point_history') ? 'active' : '' }} p-3 text-center">Lịch
            Sử Tích Điểm</a>
        </li>
      </ul>
    </div>
  </div>
</section>
<script>
  var ratio = 1
</script>
@push('script')
  <script src="{{ asset('/js/cropper.min.js') }}"></script>
  @vite('resources/js/crop_img.js')
@endpush