{{ header }}{{ column_left }}
<!-- Content Wrapper. Contains page content -->
<div id="content" class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div>
      <div class="pull-right">
        <button type="submit" form="form-payment" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> {{ button_save }}</button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
      </div>
      <h1>
        {{ heading_title }}
      </h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  <!-- Main content -->
  <section class="content">

    <!-- Default box -->
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">{{ heading_title }}</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="{{ text_collapse }}">
            <i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-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>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
  <script type="text/javascript"><!--
function refund() {
  var amount = $('input[name="amount"]').val();

  $.ajax({
    type: 'POST',
    dataType: 'json',
    data: {'transaction_reference': '{{ transaction_reference }}', 'amount': amount },
    url: 'index.php?route=extension/payment/pp_payflow_iframe/dorefund&user_token={{ user_token }}',

    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>
{{ footer }}