@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
  use App\Enums\PromotionStatus;
@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('payment_course_aboard_studies.redirectEWalletPayment') }}" method="post"
          enctype="multipart/form-data">
          @csrf
          <input value="{{ $courseAboardStudy->id }}" name="course_id" type="hidden">
          <input value="{{ $course_price->id }}" name="course_price_id" type="hidden">
          <input value="{{ $course_price_final }}" name="price" type="hidden">
          @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') }}" 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') }}" alt="Momo">
                      <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">{{ $courseAboardStudy->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">Lớp {{ $courseAboardStudy->grade->name }}</span>
                  </div>
                  <div class="course-product-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span class="ms-3">Khóa học: {{ $course_price->package_time->time }} tháng
                      {{ $course_price->month_gift_status == PromotionStatus::ACTIVE->value ? ' + ' . $course_price->month_gift . ' tháng khuyến mãi' : '' }}</span>
                  </div>
                  <div class="course-product-item mt-5">
                    <label for="invite_code">Mã giới thiệu</label>
                    <input type="text" name="invite_code" id="invite_code" class="w-100"
                      placeholder="Nhập mã giới thiệu" value="">
                  </div>
                </div>
                <p class="invoice-price text-red-main text-capitalize mb-2 text-center">
                  {{ $course_price_final != 0 ? number_format($course_price_final, 0, '.', ',') : '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/payment.js'])
@endpush