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

@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('teacher_online_payments.redirectEWalletPayment', ['teacher_online_course_id' => $online_learning->id]) }}"
          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
          <input value="{{ $online_learning->price }}" name="price" type="hidden">
          <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') }}" alt="Momo">
                      <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">{{ $online_learning->name }}</h4>
                <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">Giáo viên: {{ $online_learning->user->fullname }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="text-capitalize ms-3">Môn:
                      {{ isset($online_learning->subject_id) ? $online_learning->subject->name : $online_learning->subject_name }},
                      Lớp:
                      {{ $online_learning->grade->code_name }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="text-capitalize ms-3">Thời gian học:
                      {{ getFormatDateRange($online_learning->start_day, $online_learning->end_day) }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="text-capitalize ms-3">Lịch học:
                      {{ getLabelByTeacherSchedules($online_learning->teaching_day) }}
                      ({{ getLabelTimeRange($online_learning->start_time, $online_learning->end_time) }})</span>
                  </div>
                </div>
                {{-- @if ($online_learning->price == 0)
                  <p class="invoice-price text-red-main text-capitalize mb-2 text-center">Miễn phí</p>
                @else
                  <p class="invoice-price text-red-main text-capitalize mb-2 text-center">
                    {{ number_format($online_learning->price, 0, '.', ',') }} vnd</p>
                @endif --}}
                <p class="invoice-price text-red-main text-capitalize mb-2 text-center">
                  {{ number_format($online_learning->price, 0, '.', ',') }} vnd</p>
                <p class="invoice-note text-neutral-04 text-center">Số tiền cần thanh toán
                </p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>
  </section>
@endsection

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