@php
  $infor = getMenuData(); //for registering teachingClass
@endphp
@extends('layouts.main', ['title' => 'Cộng tác viên | Dashboard', 'sidebarSelected' => 'dashboard', 'isAgency' => true])
@push('style')
  <link rel="stylesheet" href="{{ URL::asset('/plugins/daterangepicker/daterangepicker.css') }}">
  <link rel="stylesheet" href="{{ URL::asset('/css/select2.min.css') }}">
  <link rel="stylesheet" href="{{ URL::asset('/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
  @push('style')
    @vite(['resources/css/students/student.css', 'resources/css/agency_dashboard.css'])
  @endpush
@endpush

@push('script')
  <script src="{{ asset('/plugins/fullcalendar/dist/index.global.min.js') }}"></script>
  @vite('resources/js/calendar.js')
  @vite(['resources/css/schedule.css'])
@endpush
@section('content')
  <div class="teacherWrap">
    <!-- Info boxes -->
    <div class="d-flex flex-column gap-3 p-4">
      @include('custom_errors.session-errors')
      <div class="row">
        <div class="col-4">
          <div class="content-box-top shadow-content-box w-100 justify-content-between">
            <div class="d-flex justify-content-between w-100">
              <div class="img-withdrawal-request"></div>
              @if (Auth::user()->role_id == \App\Enums\UserRole::AGENCY->value)
                <button type="button" class="fw-600 fs-12 text-capitalize btn-withdrawal-request-agency px-2"
                  data-bs-toggle="modal" data-bs-target="#withdrawalRequestModal">
                  Yêu cầu rút tiền
                </button>
              @endif
            </div>
            <div class="d-flex justify-content-between align-items-center w-100 flex-wrap">
              <p class="fs16 mb-0 me-3">Số tiền có thể rút</p>
              <p class="fs24 mb-0">{{ number_format($wallet->coin, 0, '.', ',') . ' VND' }}</p>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="content-box-top shadow-content-box w-100 justify-content-between">
            <div class="img-people"></div>
            <div class="d-flex justify-content-between align-items-center w-100 flex-wrap">
              <p class="fs16 text-people mb-0 me-3">Số lượt dùng mã</p>
              <p class="fs24Title mb-0">{{ is_null($countCodeUsage) ? 0 : $countCodeUsage }}</p>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="content-box-top shadow-content-box w-100 justify-content-between">
            <div class="d-flex justify-content-between align-items-center w-100">
              <div class="img-coupen"></div>
              <button class="btn-copy btn-invite-code" onclick="copyToClipboardInviteCode()">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path
                    d="M7.5 15.0013C7.04167 15.0013 6.64917 14.838 6.3225 14.5113C5.99583 14.1846 5.83278 13.7924 5.83333 13.3346V3.33464C5.83333 2.8763 5.99667 2.4838 6.32333 2.15714C6.65 1.83047 7.04222 1.66741 7.5 1.66797H15C15.4583 1.66797 15.8508 1.8313 16.1775 2.15797C16.5042 2.48464 16.6672 2.87686 16.6667 3.33464V13.3346C16.6667 13.793 16.5033 14.1855 16.1767 14.5121C15.85 14.8388 15.4578 15.0019 15 15.0013H7.5ZM7.5 13.3346H15V3.33464H7.5V13.3346ZM4.16667 18.3346C3.70833 18.3346 3.31583 18.1713 2.98917 17.8446C2.6625 17.518 2.49945 17.1257 2.5 16.668V5.83464C2.5 5.59853 2.58 5.40047 2.74 5.24047C2.9 5.08047 3.09778 5.00075 3.33333 5.0013C3.56945 5.0013 3.7675 5.0813 3.9275 5.2413C4.0875 5.4013 4.16722 5.59908 4.16667 5.83464V16.668H12.5C12.7361 16.668 12.9342 16.748 13.0942 16.908C13.2542 17.068 13.3339 17.2657 13.3333 17.5013C13.3333 17.7374 13.2533 17.9355 13.0933 18.0955C12.9333 18.2555 12.7356 18.3352 12.5 18.3346H4.16667Z"
                    fill="white" />
                </svg>
              </button>
            </div>
            <div class="d-flex justify-content-between align-items-center w-100 flex-wrap">
              <p class="fs16 text-people mb-0 me-3">Mã giới thiệu</p>
              <p class="fs24Title text-break mb-0" id="invite-code">{{ $agencyData->invite_code }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="card teachInfo teacherOnline px-2" style="height: 100%;">
          <div class="d-flex align-items-center justify-content-between">
            <div class="card-header border-bottom-0 my-4">
              <h3 class="card-title fs20">Giao dịch nhận được tiền bonus</h3>
            </div>
            <div class="student-action-header">
              <select class="student-action-title fw-bold text-uppercase fs-5 study-history-select-title bg-white"
                name="option-history-select" id="option-history-select" style="margin-bottom: 0px"
                user_id="{{ Request::query('id') ?? null }}">
                <option class="student-action-title fw-bold text-uppercase fs-5 border-0" value="">Tất cả</option>
                <option class="student-action-title fw-bold text-uppercase fs-5 border-0" value="week"
                  {{ Request::query('option') == 'week' ? 'selected' : '' }}>Tuần này
                </option>
                <option class="student-action-title fw-bold text-uppercase fs-5 border-0" value="month"
                  {{ Request::query('option') == 'month' ? 'selected' : '' }}>Tháng này
                </option>
                <option class="student-action-title fw-bold text-uppercase fs-5 border-0" value="year"
                  {{ Request::query('option') == 'year' ? 'selected' : '' }}>Năm này
                </option>
              </select>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">
            <table class="table">
              <thead class="text-center">
                <tr>
                  <th class="text-center" style="width: 5%; padding: 0.75rem;">ID</th>
                  <th class="text-center" style="width: 20%">Tên người nhập mã</th>
                  <th class="text-center" style="min-width: 200px;">Email</th>
                  <th class="text-center" style="min-width: 230px;">Nội dung khóa học</th>
                  <th class="text-center" style="">Số tiền bonus</th>
                  <th class="text-center" style="">Ngày giao dịch</th>
                </tr>
              </thead>
              <tbody>
                {{-- need to get data from backend --}}
                @if (!$agencyBonusData->isEmpty())
                  @foreach ($agencyBonusData as $data)
                    <tr>
                      <td class="text-center" style="padding: 0.75rem;">{{ $data->id_code }}</td>
                      <td class="text-start" style="">
                        <img class="student-avatar rounded-circle" style="width: 30px; height: 30px"
                          src="{{ $data->avatar ? Storage::url($data->avatar) : asset('img/avatardefault.jpg') }}"
                          alt="">
                        {{ $data->fullname }}
                      </td>
                      <td class="text-start" style="word-break: break-all;">
                        {{ $data->email }}
                      </td>
                      <td class="text-center">
                        {{-- {{ !is_null($data->course_name) ? $data->course_name . ' - ' . 'Khóa học ' . $data->time . ' tháng' : '' }} --}}
                        <span>{{ $data->course_name }}</span> -
                        <span>Khóa học {{ $data->time }} tháng</span>
                      </td>
                      <td class="text-primary fw-600 text-center">
                        {{ number_format($data->bonus, 0, ',', '.') }} đ
                      </td>
                      <td class="text-center">
                        <div class="d-flex justify-content-start flex-column">
                          <span class="fw-500">
                            {{ Carbon\Carbon::parse($data->used_at)->format('d/m/Y') }}
                          </span>
                          <span class="fs-14">
                            <i>{{ Carbon\Carbon::parse($data->created_at)->format('h:i a') }}</i>
                          </span>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                @else
                  <tr>
                    <td colspan="6" class="border-0 text-center">Không có dữ liệu giao dịch</td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
        @if (!$agencyBonusData->isEmpty())
          <div class="d-flex justify-content-end">
            {{ $agencyBonusData->links('tutors.pagination') }}
          </div>
        @endif
      </div>
    </div>
  </div>
  @include('modals.with_drawal_request')
@endsection

@push('script')
  @vite('resources/js/teacher_dashboard.js')
  @vite('resources/js/student_history.js')
  <script>
    function copyToClipboard() {
      const inviteCode = document.querySelector("#invite-url").textContent;
      const tempInput = document.createElement("input");
      document.body.appendChild(tempInput);
      tempInput.value = inviteCode;
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);

      const copyButton = document.querySelector(".btn-copy");
      copyButton.classList.add("active");

      setTimeout(() => {
        copyButton.classList.remove("active");
      }, 2500);
    }

    function copyToClipboardInviteCode() {
      const inviteCode = document.querySelector("#invite-code").textContent;
      const tempInput = document.createElement("input");
      document.body.appendChild(tempInput);
      tempInput.value = inviteCode;
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);

      const copyButton = document.querySelector(".btn-invite-code");
      copyButton.classList.add("active");

      setTimeout(() => {
        copyButton.classList.remove("active");
      }, 2500);
    }
  </script>
@endpush