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

@php
  $auth = Auth::user();
  $name = isset($auth->fullname) ? $auth->fullname : $auth->username;
  $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('agencies.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">
      <p class="m-0 text-center">{{ $name }}</p>
    </div>
    <div class="profile-info-wrap">
      <div class="profile-info-wrap-item">
        <div class="d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
            <path
              d="M3.16732 3.16602H13.834C14.5673 3.16602 15.1673 3.76602 15.1673 4.49935V12.4993C15.1673 13.2327 14.5673 13.8327 13.834 13.8327H3.16732C2.43398 13.8327 1.83398 13.2327 1.83398 12.4993V4.49935C1.83398 3.76602 2.43398 3.16602 3.16732 3.16602Z"
              stroke="#FDC898" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M15.1673 4.5L8.50065 9.16667L1.83398 4.5" stroke="#FDC898" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <span class="fs-14 text-neutral-04 ms-2">{{ $auth->email }}</span>
        </div>
      </div>
    </div>
    <div class="profile-link w-100">
      <ul>
        <li>
          <a href="{{ route('agencies.viewProfile') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('agencies/profile*') ? 'active' : '' }} mb-1 p-3 text-center">
            Hồ Sơ Cá Nhân
          </a>
        </li>
        <li>
          <a href="{{ route('agencies.viewChangePassword') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('agencies/change_password*') ? 'active' : '' }} mb-1 p-3 text-center">
            Đổi Mật Khẩu</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