{% extends 'layout.html.twig' %}
{% block title %} {{ '支付中心'|trans }} - {{ parent() }}{% endblock %}
{% do script(['app/js/pay/select/index.js']) %}

{% block esBar %}
{% endblock %}

{% block content %}
  <div class="order-pay">

    <div class="es-section">
      <ul class="es-step es-step-3 clearfix">
        <li class="done"><span class="number"><i class="es-icon es-icon-done"></i></span>{{ '订单确认'|trans }}</li>
        <li class="doing"><span class="number">2</span>{{ '订单支付'|trans }}</li>
        <li><span class="number">3</span>{{ '订单完成'|trans }}</li>
      </ul>
      <div class="order-pay-body">
        <div class="alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          {{ '订单已提交，请在４８小时内完成支付！逾期订单将被取消。'|trans }}
        </div>

        {{ render(controller(template , {'sn':sn})) }}

        <div class="es-piece" style="margin-bottom:20px;">
          <div class="piece-header">{{ '支付方式'|trans }}</div>
        </div>
        {#      {% if is_micro_messenger() %}
               {% set form_action = path('pay_center_pay') %}
             {% else %}
               {% set form_action = path('pay_center_pay') %}
             {% endif %} #}
        <form class="form-paytype" method="post" action="{{ path('pay_center_pay') }}">
          <input type="hidden" name="targetType" value="{{ order.targetType }}">
          <input type="hidden" name="orderId" value="{{ order.id }}"/>
          {% set activePayment = order.payment|default(firstEnabledPayment.name|default('')) %}
          {% if order.payment == 'none' %}
            {% set activePayment = firstEnabledPayment.name|default('') %}
          {% endif %}

          <input type="hidden" name="payment" value="{{ activePayment }}">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
          {% set cbpay = false %}
          {% set alipay = false %}
          {% set wxpay = false %}

          <div class="form-group order-detail-bg">
            {% for payment in payments %}
              {% if payment.name in ['heepay', 'llcbpay'] and payment.enabled == 0 %}
                {% set cbpay = true %}
              {% elseif  payment.name == 'alipay' and payment.enabled == 0 %}
                {% set alipay = true %}
              {% elseif payment.name == 'wxpay' and payment.enabled == 0 %}
                {% set wxpay = true %}
              {% endif %}
              {% if activePayment in ['none', ''] and payment.enabled %}
                {% set activePayment = payment.name %}
              {% endif %}

              <div
                class="check {% if not payment.enabled %}disabled{% endif %} {% if activePayment == payment.name %}active{% endif %}"
                id="{{ payment.name }}">
                {% set picture = 'assets/img/order/'~payment.name~'.png' %}
                <img src="{{ asset(picture) }}"/>
                <span class="icon"></span>
              </div>
            {% else %}
              <div class="pay-type-label text-warning ">{{ '支付方式未开启，请联系管理员。'|trans }}</div>
            {% endfor %}
            {% if payAgreements is not empty %}
              <div class="js-pay-agreement" style="display:none">
                <ul class="pay-agreement-list row">
                  {% for payAgreement in payAgreements %}
                    <li id="unbind-bank-{{ payAgreement.id }}"
                      class="col-md-6 js-pay-bank {% if loop.index0 == 0 %}checked{% endif %}">
                      <div class="pay-bank clearfix">
                        <input class="hidden" type="radio" name='payAgreementId' value="{{ payAgreement.id }}"
                          {% if loop.index0 == 0 %}checked{% endif %} />
                        <span class="name">{{ payAgreement.bankName }}</span>
                        <span class="number">***{{ payAgreement.bankNumber }}</span>
                        <span
                          class="hidden-xs">{% if payAgreement.type == 0 %}{{ '储蓄卡'|trans }}{% else %}{{ '信用卡'|trans }}{% endif %}</span>
                        <a href="javascript:;" class="closed visible-lg"
                          data-url="{{ path('auth_unbind_mobile_show') }}"><i
                            class="es-icon es-icon-icon_close_circle"></i></a>
                      </div>
                    </li>
                  {% endfor %}
                  <li class="col-md-6 js-pay-bank">
                    <div class="pay-bank">
                      <input class="hidden" type="radio" name='payAgreementId' value=""/>
                      <span class="color-gray">{{ '使用新的银行卡'|trans }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            {% endif %}
            {% if alipay|default('') or cbpay|default('') %}
              {% if is_micro_messenger() %}
                <p class="color-danger">{{'您正在使用微信浏览，暂不支持其他支付方式'|trans}}</p>
              {% else %}
                <p class="color-danger">{{'若需使用网银支付，请使用IE浏览器'|trans}}</p>
              {% endif %}
            {% endif %}
            {% if wxpay | default('') %}
              <p class="color-danger">{{'您正在使用手机浏览，暂不支持微信支付方式'|trans}}</p>
            {% endif %}
          </div>
          <div class="form-group">
            <div class="total-price">
              {{ '应付金额：'|trans }}
              <span role="pay-rmb" class="pay-rmb">￥{{ order.amount }}</span>
            </div>
          </div>
          <div class="form-group text-right">
            {% if targetType in ['course', 'classroom', 'vip'] %}
              {% include 'pay-center/' ~ targetType ~ '-cancelled.html.twig' %}
            {% endif %}
            <button class="pay-button btn btn-primary" {% if  activePayment == '' %}disabled="disabled"
              {% else %}type="submit"{% endif %} >{{ '确认支付'|trans }}</button>
          </div>

        </form>
      </div>
    </div>
  </div>
{% endblock %}