{{ header }}
<style>
#top, header, #menu, footer {
  display: none !important;
}
.form-group.owner {
  padding-top: 5px;
  margin-bottom: 0 !important;
}
#fpx-form {
  font-size: 14px;
}
.payment.fpx-payment p {
  font-size: 14px;
}
.form-group.owner > label {
  display: inline-block;
  vertical-align: top;
  width: 40%;
  padding-left: 6px;
  font-size: 14px;
}
.form-group.owner > span {
  display: inline-block;
  width: 56%;
}
.fpx-payment {
  max-width: 500px;
  margin: auto;
}
#fpx-form > div.owner:nth-child(odd) {
  background: #eee;
}
.last-form label {
  padding-left: 0 !important;
}
#pay-now {
  padding-top: 25px;
}
#confirm-purchase {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border:0;
  text-shadow: none;
  background: #9DB33E !important;
}
.form-horizontal .form-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

</style>
<div id="information-information" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>

      <form class="form-horizontal" method="post" action="{{ form_action }}" >

      <div class="creditCardForm">

        <div class="payment fpx-payment">

          <div class="heading">
            <strong class="vbottom" style="font-size: 24px;">
              Pay with <img src="image/fpx.png" alt="FPX Logo" width="120"> </strong>
            <br>
            <p></p>
            <hr>
            <h2>Payment Details</h2>
          </div>

          <!-- <form id="fpx-form" action="{{ form_action }}" method="post" autocomplete="off"> -->
          <div id="fpx-form">
              <div class="form-group owner">
                  <label for="owner">Merchant Name</label>
                  <span>{{ merchant_name }}</span>
              </div>
              <div class="form-group owner">
                  <label for="cardNumber">Payment Reference</label>
                  <span>{{ fpx_reference }}</span>
              </div>
              <div class="form-group owner">
                  <label for="cardNumber">Vivalife Order Number</label>
                  <span>#{{ order_number }}</span>
              </div>
              <div class="form-group owner">
                  <label for="cardNumber">Payment Description</label>
                  <span>{{ order_description }}</span>
              </div>
              <div class="form-group owner">
                  <label for="cardNumber">Amount (MYR)</label>
                  <span>{{ order_amount }}</span>
              </div>

              <div class="form-group owner last-form">
                <br>
                <p style="padding-bottom: 10px;">Selected bank:</p>
                <label>Individual Account (B2C)<i>*</i></label>
                {{ selected_bank }}
              </div>

              <div class="clearfix"></div>
              <input type="hidden" value="{{ fpx_reference }}" name="fpx_reference" />
              <div class="form-group no-high" id="pay-now">
                <p><small>By clicking on Proceed button, you agree to <a style="cursor: pointer;" onclick="javascript:window.open('https://www.mepsfpx.com.my/FPXMain/termsAndConditions.jsp', 'cont', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no,titlebar=no, width=550, height=500');"><u>FPX's Terms and Conditions</u></a></small><br><br></p>
                <button name="confirm" value="1" type="submit" class="btn btn-default" id="confirm-purchase">Proceed</button>
                <br><br>
                <strong class="vbottom2">Powered by <img src="image/fpx.gif" alt="FPX Logo" width="60"></strong>
              </div>
            </div>
            <!-- </form> -->
        </div>
      </div>


        <input type="hidden" value="{{ fpx_msgType }}" name="fpx_msgType">
        <input type="hidden" value="{{ fpx_msgToken }}" name="fpx_msgToken">
        <input type="hidden" value="{{ fpx_sellerExId }}" name="fpx_sellerExId">
        <input type="hidden" value="{{ fpx_sellerExOrderNo }}" name="fpx_sellerExOrderNo">
        <input type="hidden" value="{{ fpx_sellerTxnTime }}" name="fpx_sellerTxnTime">
        <input type="hidden" value="{{ fpx_sellerOrderNo }}" name="fpx_sellerOrderNo">
        <input type="hidden" value="{{ fpx_sellerId }}" name="fpx_sellerId">
        <input type="hidden" value="{{ fpx_sellerBankCode }}" name="fpx_sellerBankCode">
        <input type="hidden" value="{{ fpx_txnCurrency }}" name="fpx_txnCurrency">
        <input type="hidden" value="{{ fpx_txnAmount }}" name="fpx_txnAmount">
        <input type="hidden" value="{{ fpx_buyerEmail }}" name="fpx_buyerEmail">
        <input type="hidden" value="{{ fpx_checkSum }}" name="fpx_checkSum">


        <input type="hidden" name="fpx_buyerName" value="">
        <input type="hidden" name="fpx_buyerBankId" value="{{ fpx_buyerBankId }}">
        <input type="hidden" name="fpx_buyerBankBranch" value="">
        <input type="hidden" name="fpx_buyerAccNo" value="">
        <input type="hidden" name="fpx_buyerId" value="">
        <input type="hidden" name="fpx_makerName" value="">
        <input type="hidden" name="fpx_buyerIban" value="">
        <input type="hidden" name="fpx_version" value="{{ fpx_version }}">
        <input type="hidden" name="fpx_productDesc" value="{{ fpx_productDesc }}">

      </form>

      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>

<script type="text/javascript"><!--
//--></script>
{{ footer }}
