@extends('layouts.main', ['title' => 'Gia sư | Lịch sử rút tiền'])

@push('style')
  @vite(['resources/css/layout/tutor/breadcrumb.css', 'resources/css/tutor.css'])
@endpush

@php
  use Carbon\Carbon;
  use App\Enums\TransactionStatus;
  $statusClass = [
      1 => 'text-pending-blue',
      2 => 'text-approved-green',
      3 => 'text-red-main',
  ];
@endphp

@section('content')
  <section class="tutor-wrap">
    <div class="breadcrumb-tutor-wrap pb-2 pt-3">
      <nav aria-label="breadcrumb-tutor">
        <ol class="breadcrumb-tutor d-flex">
          <li class="breadcrumb-tutor-item">
            <a href="#" class="breadcrumb-tutor-link text-capitalize text-decoration-none">Trang Chủ</a>
          </li>
          <span class="breadcrumb-tutor-separation fw-light">/</span>
          <li class="breadcrumb-tutor-item active text-neutral-05 fw-semibold text-capitalize text-decoration-none"
            aria-current="page">
            Lịch sử rút tiền
          </li>
        </ol>
      </nav>
    </div>
    <section class="tutor-content-wrap">
      <div class="tutor-container">
        <div class="row bg-white">
          <div class="col-xl-3 ps-0">
            @include('tutors.tutor_profile_card')
          </div>
          <div class="col-xl-9">
            <div class="pe-5 ps-3 pt-3">
              @include('custom_errors.session-errors')
              <div class="ms-3 mt-3 pb-3">
                <span class="fs-5 fw-600 text-blue">
                  Lịch sử rút tiền
                </span>
              </div>
              @if (count($transactionsData) > 0)
                <div class="table-responsive ms-3 mt-3">
                  <table class="table-hover text-nowrap table-w-800 table">
                    <tbody>
                      @foreach ($transactionsData as $transaction)
                        <tr class="text-neutral-04">
                          <td>
                            <div class="d-flex flex-column">
                              <span class="fw-500">{{ $transaction->created_at->format('d/m/Y') }}</span>
                              <span class="fs-14"><i>{{ $transaction->created_at->format('h:i a') }}</i></span>
                            </div>
                          </td>
                          <td class="text-wrap align-middle">
                            <span>
                              Sieuhoc.com: Bạn đã yêu cầu rút tiền “
                              <span class="text-red-main fw-semibold">
                                -{{ number_format($transaction->coin, 0, '.', ',') }}
                              </span>
                              “vào số TK
                              <span class="bank_account_number">{{ $transaction->account_number }}</span>
                              <span
                                class="bank-name">{{ $transaction->bank ? $transaction->bank->short_name : '' }}</span>
                              @if ($transaction->status !== TransactionStatus::UNAPPROVED->value)
                                số tiền còn lại
                                <span
                                  class="text-blue fw-semibold">{{ number_format($transaction->remaining_coin, 0, '.', ',') }}
                                </span>
                              @endif
                              @if (
                                  $transaction->status == TransactionStatus::UNAPPROVED->value &&
                                      $descriptionData->where('transaction_id', $transaction->id)->first())
                                <div class="mt-2">
                                  {!! $descriptionData->where('transaction_id', $transaction->id)->first()->content !!}
                                </div>
                              @endif
                            </span>
                          </td>
                          <td class="align-start text-center">
                            <span class="{{ $statusClass[$transaction->status] }} fw-semibold fs-12">
                              {{ \App\Enums\TransactionStatus::transactionsArray[$transaction->status] }}
                            </span>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              @else
                <div class="d-flex justify-content-center mt-3">
                  <p class="mt-3">Không có giao dịch rút tiền nào</p>
                </div>
              @endif

            </div>
          </div>
        </div>
      </div>
    </section>
  </section>
@endsection

@push('script')
  @vite('resources/js/tutor.js')
@endpush