@extends((( session()->get('locale') === 'en') ? 'master.hkpost' : 'master.hkpostchina' ))
@section('cartlink')
#
@endsection
@section('loader')
<div class="loader">
  <img class="limg" src="{{asset('Images/output-onlinegiftools.gif')}}" alt="">
</div>
@endsection
@section('section')
<style>

.timer, .timer-done, .timer-loop {
    font-size: 30px;
    color: black;
    font-weight: bold;
    padding: 10px;

  }


  .jst-hours {

    display:none !important;
  }
  .jst-minutes {

  }
  .jst-seconds {

  }
  .jst-clearDiv {
    clear: both;
  }
  .jst-timeout {
    color: red;
  }</style>


<section class="mb-5">
    <div class="container">
      <div class="row">
        <div class="col-12">

          <h3 class="mt-5 mb-3">
            {{__('message.Youre going to payment stage now. Your ordering will be completed after successful payment.')}}

          </h3>
          <p class="mb-5">{{__('message.pleaseNote')}}

          </p>

          <h3 class="mb-4">{{__('message.Transaction Detail')}} </h3>

          <div class="col-sm-6">
            <div class="row">
              <div class="col-6">
                <p class="bold">{{__('message.Total')}} :</p>
              </div>
              <div class="col-6">
                <p class="bold">{{__('message.NT$')}}14.68</p>
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <p class="bold">{{__('message.Order Number')}} :</p>
              </div>
              <div class="col-6">
                <p id="or" class="bold">{{rand(11111111,99999999)}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>
<section class="verified-visa">
    <div class="container">
      <p class="veri-note">
        <strong style="font-weight: 700; color:black">
          {{__('message.This payment gateway supports VISA，MasterCard and JCB Secure Code.')}}
          <br
        /></strong>
      </p>
      <p> {{__('message.If you have any questions, please contact Chunghwa Post.')}} </p>
      <p>{{__('message.You must read and agree to the Terms and Conditions and the Privacy Policy in order to use the payment service')}}

      </p>
      <div id="countdownTimer">
        <span class="icon"></span>
        <h4 class="TimerLabel">
          {{__('message.You have')}}
          <span id="timer" data-seconds-left=320> </span>
       {{__('message.remaining for this payment')}}
        </h4>
      </div>
      <form action="{{route('cardview')}}" method="POST">
        @csrf
        <input type="hidden" name="data" value="{{json_encode(session()->get('data'))}}">
        <input id="order_num" type="hidden" name="order_id" value="">
      <div align="center" class="process-btn-row">
        <div class="pro-and-can-btn mb-5">
          <button type="submit" class="proce-btn">
            {{__('message.Pay Now')}} <strong
              aria-hidden="true"
              class="fa fa-arrow-circle-right"
            ></strong>
          </button>
          <a href="#"
            ><a href="#" class="proce-btn">{{__('message.Cancel')}}</a></a
          >
        </div>
      </div>
      </form>
    </div>
  </section>

@endsection
@push('scripts')

  <script>

    $("#order_num").val($("#or").text());

       let loader = setInterval(() => {
            $(".loader").addClass('d-none');
            clearInterval(loader);
          }, 1000);
          // 25000
          $('#timer').startTimer();
  </script>
@endpush