@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('tutors.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 class="profile-info-wrap-item">
        <div class="d-flex align-items-center justify-content-center">
          <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
            fill="none">
            <path
              d="M11.5 15V13C10.7044 13 9.94129 12.6839 9.37868 12.1213C8.81607 11.5587 8.5 10.7956 8.5 10C8.5 9.20435 8.81607 8.44129 9.37868 7.87868C9.94129 7.31607 10.7044 7 11.5 7V6C11.5 5.73478 11.6054 5.48043 11.7929 5.29289C11.9804 5.10536 12.2348 5 12.5 5C12.7652 5 13.0196 5.10536 13.2071 5.29289C13.3946 5.48043 13.5 5.73478 13.5 6V7H13.522C14.3118 7 15.0693 7.31375 15.6278 7.87224C16.1862 8.43072 16.5 9.18819 16.5 9.978C16.5 10.2432 16.3946 10.4976 16.2071 10.6851C16.0196 10.8726 15.7652 10.978 15.5 10.978C15.2348 10.978 14.9804 10.8726 14.7929 10.6851C14.6054 10.4976 14.5 10.2432 14.5 9.978C14.5 9.71862 14.397 9.46986 14.2136 9.28645C14.0301 9.10304 13.7814 9 13.522 9H13.5V11C14.2956 11 15.0587 11.3161 15.6213 11.8787C16.1839 12.4413 16.5 13.2044 16.5 14C16.5 14.7956 16.1839 15.5587 15.6213 16.1213C15.0587 16.6839 14.2956 17 13.5 17V18C13.5 18.2652 13.3946 18.5196 13.2071 18.7071C13.0196 18.8946 12.7652 19 12.5 19C12.2348 19 11.9804 18.8946 11.7929 18.7071C11.6054 18.5196 11.5 18.2652 11.5 18V17H11.449C10.6669 17 9.91679 16.6893 9.36374 16.1363C8.8107 15.5832 8.5 14.8331 8.5 14.051C8.5 13.7858 8.60536 13.5314 8.79289 13.3439C8.98043 13.1564 9.23478 13.051 9.5 13.051C9.76522 13.051 10.0196 13.1564 10.2071 13.3439C10.3946 13.5314 10.5 13.7858 10.5 14.051C10.5003 14.3026 10.6003 14.5438 10.7782 14.7218C10.9562 14.8997 11.1974 14.9997 11.449 15H11.5ZM13.5 15C13.7652 15 14.0196 14.8946 14.2071 14.7071C14.3946 14.5196 14.5 14.2652 14.5 14C14.5 13.7348 14.3946 13.4804 14.2071 13.2929C14.0196 13.1054 13.7652 13 13.5 13V15ZM11.5 9C11.2348 9 10.9804 9.10536 10.7929 9.29289C10.6054 9.48043 10.5 9.73478 10.5 10C10.5 10.2652 10.6054 10.5196 10.7929 10.7071C10.9804 10.8946 11.2348 11 11.5 11V9ZM12.5 22C6.977 22 2.5 17.523 2.5 12C2.5 6.477 6.977 2 12.5 2C18.023 2 22.5 6.477 22.5 12C22.5 17.523 18.023 22 12.5 22ZM12.5 20C14.6217 20 16.6566 19.1571 18.1569 17.6569C19.6571 16.1566 20.5 14.1217 20.5 12C20.5 9.87827 19.6571 7.84344 18.1569 6.34315C16.6566 4.84285 14.6217 4 12.5 4C10.3783 4 8.34344 4.84285 6.84315 6.34315C5.34285 7.84344 4.5 9.87827 4.5 12C4.5 14.1217 5.34285 16.1566 6.84315 17.6569C8.34344 19.1571 10.3783 20 12.5 20Z"
              fill="#CC3A3D" />
          </svg>
          <span
            class="fs-4 fw-600 text-neutral-04 lh-base ms-2">{{ number_format(getWalletRemaining($auth->id)->coin, 0, '.', ',') }}</span>
        </div>
      </div>
    </div>
    <div class="profile-link w-100">
      <ul>
        <li>
          <a href="{{ route('tutors.viewProfile') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('tutors/profile*') ? 'active' : '' }} mb-1 p-3 text-center">
            Hồ Sơ Cá Nhân
          </a>
        </li>
        <li>
          <a href="{{ route('tutors.viewChangePassword') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('tutors/change_password*') ? 'active' : '' }} mb-1 p-3 text-center">
            Đổi Mật Khẩu</a>
        </li>
        <li>
          <a href="{{ route('tutors.withdraw_history') }}"
            class="profile-link-item d-block text-decoration-none text-neutral-06 {{ Request::is('tutors/withdraw_history*') ? 'active' : '' }} p-3 text-center">Lịch
            Sử Rút
            Tiền</a>
        </li>
      </ul>
    </div>
    <div class="button-money-wrap">
      <a class="btn-takeout-money btn btn-fill-primary fw-600 fs-18 px-5"
        href="{{ route('transactions.tutor.requestWithdraw.index') }}" role="button">Yêu
        cầu rút tiền</a>
    </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