{{ header }}
<script type="application/javascript" crossorigin="anonymous" src="{{ srcUrl }}"  loaded=true;"></script>
<section class="about-bg">
<div id="account-edit" class="container personal-frm">
  <ul class="breadcrumb" style="height: 50px !important;">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if error_warning %}
  <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
  {% endif %}
	<div class="container mt-4">
        <div class="vertical-tabs row">
            <ul class="nav nav-tabs col-sm-3" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#account_tab" role="tab" aria-controls="home">My Account</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " data-toggle="tab" href="#member_tab" role="tab" aria-controls="home">Membership Details</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " href="password" >Change Password</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " href="javascript:void(0)">Archive/Issues</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " href="election">Election</a>
                </li>



                <!-- <li class="nav-item">
                  <a class="nav-link" href="" aria-controls="profile">Conference</a>
                </li>

                <li class="nav-item">
                  <a class="nav-link " data-toggle="tab" href="#journal_tab" role="tab" aria-controls="home">Online Journal Access</a>
                </li> -->
                <li class="nav-item">
                  <a class="nav-link " data-toggle="tab" href="#award_tab" role="tab" aria-controls="home">Award</a>
                </li>
				<li class="nav-item">
                  <a class="nav-link payment-fee" href="javascript:void(0)" onclick="openJsCheckout()" >Pay Membership Fee</a>
                </li>
				<li class="nav-item">
                  <a class="nav-link " href="{{ other_payment }}" >Other Payment</a>
                </li>
				<li class="nav-item">
                  <a class="nav-link " href="{{ invoice_list }}" >Invoice Download</a>
                </li>

            </ul>
            <div class="tab-content col-sm-8">
                <div class="tab-pane active" id="account_tab" role="tabpanel">
                  <div class="sv-tab-panel">
                      <h3>Other Payment</h3>
					    {% if success %}
            <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
            {% endif %}
            {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
            {% endif %}
                      <form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal">
                        <fieldset>
                          <div class="row">
                          <div class="form-group col-sm-12">
                            <p class="label-txt" for="input-ampunt">Amount</p>
                            <input type="text"  name="amount" value="{{ amount }}" id="input-amount" class="form-control input" />
				          {% if error_amount %}
                              <div class="text-danger">{{ error_amount }}</div>
                              {% endif %}
                                <div class="line-box">
                                    <div class="line"></div>
                                </div>
                            </div>
                            <div class="form-group col-sm-12">
                            <p class="label-txt" for="input-reason">Reason</p>
                            <input type="text" name="reason" value="{{ reason }}" id="input-reason" class="form-control input" />
                              {% if error_reason %}
                              <div class="text-danger">{{ error_reason }}</div>
                              {% endif %}
                                <div class="line-box">
                                    <div class="line"></div>
                                </div>
                            </div>

                          </div>
                        </fieldset>
                        <div class="buttons clearfix">
                          <div class="pull-right">
                            <input type="submit" value="Save" class="btn btn-success" />
                          </div>
                        </div>
					  </form>
                  </div>
                </div>
				
				{% if payments %}
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-right">Order ID</td>
              <td class="text-left">Transaction</td>
              <td class="text-right">Amount</td>
              <td class="text-left">Reason</td>
              <td class="text-left">Status</td>
              <td class="text-right">PDF</td>
              <td class="text-left">Date Added</td>
              <td></td>
            </tr>
          </thead>
          <tbody>
           {% for payment in payments %}
            <tr>
              <td class="text-right">#{{ payment.order_id }}</td>
              <td class="text-left">{{ payment.transaction_id }}</td>
              <td class="text-right">{{ payment.amount }}</td>
              <td class="text-left">{{ payment.reason }}</td>
              <td class="text-left">{{ payment.status }}</td>
              <td class="text-right">
			  {% if payment.pdf_invoice %}
			  <a href="{{ payment.pdf_invoice }}" download><i class="fa fa-file-pdf-o" aria-hidden="true"></i></a>
			 {% endif %}
			  </td>
              <td class="text-left">{{ payment.date_added }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="row">
        <div class="col-sm-6 text-left">{{ pagination }}</div>
        <div class="col-sm-6 text-right">{{ results }}</div>
      </div>
      {% else %}
      <p>{{ text_empty }}</p>
      {% endif %}
            </div></div>
    </div>
</div>
{% if opayment %}
<script type="text/javascript">
$(document).ready(function(){
	setTimeout(function(){
 
	$('.payment-fee').trigger('click');
}, 1000);
});

</script>
{% endif %}
</section>
<script type="text/javascript">
  function openJsCheckout(){

  if(document.getElementById("paytmError")!==null){ 
      document.getElementById("paytmError").remove(); 
  }

  var transactionToken = "{{ rdata.txnToken }}";
  if(transactionToken){
      invokeBlinkCheckoutPopup("{{ rdata.txnToken }}", "{{ rdata.orderId }}", "{{ rdata.amount }}");
    }else{
      document.getElementById("btn-confirm-paytm").innerHTML += '<div id="paytmError">{{ rdata.message }}</div>';
  }
  }

 
  function invokeBlinkCheckoutPopup(txnToken, orderId, amount){
        var config = {
         "root": "",
         "flow": "DEFAULT",
         "data": {
          "orderId": orderId,
          "token": txnToken,
          "tokenType": "TXN_TOKEN",
          "amount": amount
         },
         "integration": {
                          "platform": "Opencart",
                          "version": "{{ rdata.version }}"
                      },
         "handler": {
            "notifyMerchant": function(eventName,data){
        if(eventName == 'SESSION_EXPIRED'){
          location.reload(); 
        }
            } 
          }
        };
      console.log(config);
        if(window.Paytm && window.Paytm.CheckoutJS){
                // initialze configuration using init method 
                window.Paytm.CheckoutJS.init(config).then(function onSuccess() {
                   // after successfully update configuration invoke checkoutjs
                   window.Paytm.CheckoutJS.invoke();
                }).catch(function onError(error){
                   // console.log("error => ",error);
                });
        } 
    }
</script>
{{ footer }}