{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"><a href="{{ cancel }}" class="btn btn-danger"><i class="fa fa-times"></i> {{ button_cancel }}</a></div>
      <h1>{{ heading_refund }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-list"></i> {{ heading_title }}</h3>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-bordered">
          <tr>
            <td>{{ entry_transaction_reference }}</td>
            <td>{{ transaction_reference }}</td>
          </tr>
          <tr>
            <td>{{ entry_transaction_amount }}</td>
            <td>{{ transaction_amount }}</td>
          </tr>
          <tr>
            <td>{{ entry_refund_amount }}</td>
            <td><input type="text" value="0.00" name="amount"/><a class="btn btn-primary" onclick="refund()" id="button-refund">{{ button_refund }}</a></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
      function refund() {
          var amount = $('input[name="amount"]').val();

          $.ajax({
              url: 'index.php?route=extension/payment/pp_payflow_iframe/doRefund&user_token={{ user_token }}',
              type: 'post',
              dataType: 'json',
              data: {'transaction_reference': '{{ transaction_reference }}', 'amount': amount},
              beforeSend: function () {
                  $('#button-refund').after('<span class="btn btn-primary loading"><i class="fa fa-circle-o-notch fa-spin fa-lg"></i></span>');
                  $('#button-refund').hide();
              },
              success: function (data) {
                  if (!data.error) {
                      alert(data.success);
                      $('input[name="amount"]').val('0.00');
                  }

                  if (data.error) {
                      alert(data.error);
                  }

                  $('#button-refund').show();
                  $('.loading').remove();
              }
          });
      }
  //--></script>
</div>
{{ footer }}