@extends('layout.app', ['title' => 'Thanh toán | Tutor'])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/payment.css', 'resources/css/landing.css', 'resources/css/students/student.css'])
@endpush
@php

@endphp
@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    @include('layout.landing_banner', [
        'title' => 'thanh toán',
        'description' => 'Chi tiết thông tin thanh toán của bạn!',
    ])
    <section class="payment container-fluid">
      <div class="payment-wrap">
        <form action="{{ route('payments.redirectEWalletPaymentForExtendHireTutor') }}" method="post"
          enctype="multipart/form-data">
          @csrf
          @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-ban"></i> {{ session('error') }}</h5>
            </div>
          @endif
          @if (session()->has('message'))
            <div class="alert alert-success alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-check"></i> {{ session('message') }}</h5>
            </div>
          @endif
          <div class="d-flex">
            <div class="col-7 payment-method">
              <div class="payment-slogan text-uppercase">
                <span>Hỗ trợ thanh toán nhanh</span>
              </div>
              <div class="payment-header text-uppercase pe-3">
                <span class="">Chọn phương thức thanh toán</span>
              </div>
              <div class="payment-method-button-wrap row">
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-momo overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::MOMO_PAYMENT->value }}">
                    <div class="d-flex">
                      <img src="{{ asset('img/payment/momo.png') }}">
                      <div class="d-flex align-items-center">
                        <span class="button-method-header text-start">MoMo</span>
                      </div>
                    </div>
                  </button>
                </div>
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-momo overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::QR_CODE->value }}">
                    <div class="d-flex">
                      <img src="{{ asset('img/payment/qr.png') }}">
                      <div class="d-flex flex-column">
                        <span class="button-method-header text-start">Chuyển khoản</span>
                        <span class="button-method-detail text-neutral-04 text-start">QR code</span>
                      </div>
                    </div>
                  </button>
                </div>
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-zalo overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::VNPAY_PAYMENT->value }}">
                    <div class="d-flex">
                      <img src="{{ asset('img/payment/vnpay.png') }}" alt="VnPay">
                      <div class="d-flex align-items-center">
                        <span class="button-method-header text-start">VNPAY</span>
                      </div>
                    </div>
                  </button>
                </div>
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-zalo overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::VISA_CARD->value }}">
                    <div class="d-flex">
                      <img src="{{ asset('img/payment/creditcard.png') }}">
                      <div class="d-flex flex-column">
                        <span class="button-method-header text-start">Credit/Debit Card</span>
                        <span class="button-method-detail text-neutral-04 text-start">Master Card/JCB/Visa</span>
                      </div>
                    </div>
                  </button>
                </div>
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-cc overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::ZALO_PAYMENT->value }}">
                    <div class="d-flex">
                      <img class="py-1" src="{{ asset('img/payment/zalopay.png') }}" alt="CC/DC">
                      <div class="d-flex align-items-center">
                        <span class="button-method-header text-start">Zalopay</span>
                      </div>
                    </div>
                  </button>
                </div>
                <div class="col-6">
                  <button type="submit" class="payment-method-button position-relative btn-cc overflow-hidden"
                    name="payment_method" value="{{ \App\Enums\PaymentMethod::ATM_CARD->value }}">
                    <div class="d-flex">
                      <img class="py-1" src="{{ asset('img/payment/ATM.png') }}">
                      <div class="d-flex flex-column">
                        <span class="button-method-header text-start">Thẻ ATM nội địa</span>
                        <span class="button-method-detail text-neutral-04 text-start">ATM card</span>
                      </div>
                    </div>
                  </button>
                </div>
              </div>
            </div>
            <div class="col-5 invoice-information">
              <div class="invoice-information-wrap">
                <h4 class="invoice-header text-uppercase mb-3 pb-1">Sản phẩm đã chọn</h4>
                @if ($extendHireTutorData['is_teach_online'] === '0')
                  <div class="d-flex flex-column payment-address mb-4">
                    <span class="text-blue fw-semibold">
                      Địa chỉ của bạn:
                    </span>
                    <span class="text-neutral-04">
                      {{ $extendHireTutorData['address'] }}
                    </span>
                  </div>
                @endif
                <div class="course-product d-flex flex-column mt-2">
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="ms-3">{{ $extendHireTutorData['tutor_name'] }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span
                      class="ms-3">{{ $extendHireTutorData['is_teach_online'] === '0' ? 'Gia sư tại nhà' : 'Gia sư Online' }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span
                      class="text-capitalize ms-3">{{ getTutorInfoSkill($extendHireTutorData['tutor_info']) }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="ms-3">Gia hạn khóa học thêm {{ $extendHireTutorData['extend_time'] }} tháng</span>
                  </div>
                  <div class="course-product-item d-flex">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <div class="ms-3">
                      <span>Thời gian kết thúc khóa học: </span> <br>
                      <span>{{ getFormatDate($extendHireTutorData['end_date']) }}</span><br>
                    </div>
                  </div>
                </div>
                <p class="invoice-price text-red-main text-capitalize mb-2 text-center">
                  {{ !is_null($extendHireTutorData['fee']) ? number_format($extendHireTutorData['fee'], 0, '.', ',') . ' Vnd' : '' }}
                </p>
                <p class="invoice-note text-neutral-04 text-center">Số tiền cần thanh toán
                </p>
              </div>
            </div>
          </div>
          {{-- <div class="d-flex justify-content-center">
            <button type="submit" class="btn-15 btn-15-fill btn-register-course text-uppercase mt-3 text-center">Thanh
              toán</button>
          </div> --}}
        </form>
      </div>
    </section>
  </section>
@endsection

@push('script')
  @vite(['resources/js/landing.js', 'resources/js/payment.js', 'resources/js/students.js'])
@endpush