{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"><a id="button-edit" data-toggle="tooltip" style="display:none;" title="{{ button_edit }}" class="btn btn-primary"><i class="fa fa-pencil"></i></a> <a id="button-search" data-toggle="tooltip" title="{{ button_search }}" class="btn btn-info"><i class="fa fa-search"></i></a></div>
      <h1><i class="fa fa-search"></i> {{ heading_title }}</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">
        <div id="search-input">
          <form id="form" class="form-horizontal">
            <h3>{{ text_date_search }}</h3>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-date-start">{{ entry_date_start }}</label>
              <div class="col-sm-10">
                <div class="input-group date">
                  <input type="text" name="date_start" value="{{ date_start }}" placeholder="{{ text_format }}: yy-mm-dd" data-date-format="YYYY-MM-DD" id="input-date-start" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                  </span></div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="input-date-end">{{ entry_date_end }}</label>
              <div class="col-sm-10">
                <div class="input-group date">
                  <input type="text" name="date_end" value="{{ date_end }}" placeholder="{{ text_format }}: yy-mm-dd" data-date-format="YYYY-MM-DD" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                  </span></div>
              </div>
            </div>
            <h3>{{ entry_transaction }}</h3>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_transaction_type }}</label>
              <div class="col-sm-10">
                <select name="transaction_class" class="form-control">
                  <option value="All">{{ entry_trans_all }}</option>
                  <option value="Sent">{{ entry_trans_sent }}</option>
                  <option value="Received">{{ entry_trans_received }}</option>
                  <option value="MassPay">{{ entry_trans_masspay }}</option>
                  <option value="MoneyRequest">{{ entry_trans_money_req }}</option>
                  <option value="FundsAdded">{{ entry_trans_funds_add }}</option>
                  <option value="FundsWithdrawn">{{ entry_trans_funds_with }}</option>
                  <option value="Referral">{{ entry_trans_referral }}</option>
                  <option value="Fee">{{ entry_trans_fee }}</option>
                  <option value="Subscription">{{ entry_trans_subscription }}</option>
                  <option value="Dividend">{{ entry_trans_dividend }}</option>
                  <option value="Billpay">{{ entry_trans_billpay }}</option>
                  <option value="Refund">{{ entry_trans_refund }}</option>
                  <option value="CurrencyConversions">{{ entry_trans_conv }}</option>
                  <option value="BalanceTransfer">{{ entry_trans_bal_trans }}</option>
                  <option value="Reversal">{{ entry_trans_reversal }}</option>
                  <option value="Shipping">{{ entry_trans_shipping }}</option>
                  <option value="BalanceAffecting">{{ entry_trans_bal_affect }}</option>
                  <option value="ECheck">{{ entry_trans_echeque }}</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_email }} ({{ entry_email_buyer }})</label>
              <div class="col-sm-10">
                <input type="text" name="buyer_email" value="" placeholder="{{ entry_email_buyer }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_email }} ({{ entry_email_merchant }})</label>
              <div class="col-sm-10">
                <input type="text" name="merchant_email" value="" placeholder="{{ entry_email_merchant }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_receipt }}</label>
              <div class="col-sm-10">
                <input type="text" name="receipt_id" value="" placeholder="{{ entry_receipt }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_transaction_id }}</label>
              <div class="col-sm-10">
                <input type="text" name="transaction_id" value="" placeholder="{{ entry_transaction_id }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_invoice_no }}</label>
              <div class="col-sm-10">
                <input type="text" name="invoice_number" value="" placeholder="{{ entry_invoice_no }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_auction }}</label>
              <div class="col-sm-10">
                <input type="text" name="auction_item_number" value="" placeholder="{{ entry_auction }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_amount }}</label>
              <div class="col-sm-10">
                <input type="text" name="amount" value="" placeholder="{{ entry_amount }}" class="form-control" />
                <br />
                <select name="currency_code" class="form-control">
                  {% for code in currency_codes %}
                  <option {% if code == default_currency  %} 'selected' {% endif %}>{{ code }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_recurring_id }}</label>
              <div class="col-sm-10">
                <input type="text" name="recurring_id" value="" placeholder="{{ entry_recurring_id }}" class="form-control" />
              </div>
            </div>
            <h3>{{ text_buyer_info }}</h3>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_salutation }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_salutation" value="" placeholder="{{ entry_salutation }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_firstname }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_first" value="" placeholder="{{ entry_firstname }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_middlename }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_middle" value="" placeholder="{{ entry_middlename }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_lastname }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_last" value="" placeholder="{{ entry_lastname }}" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ entry_suffix }}</label>
              <div class="col-sm-10">
                <input type="text" name="name_suffix" value="" placeholder="{{ entry_suffix }}" class="form-control" />
              </div>
            </div>
          </form>
        </div>
        <div id="search-box" style="display:none;">
          <div id="searching"><i class="fa fa-circle-o-notch fa-spin fa-lg"></i> {{ text_searching }}</div>
          <div style="display:none;" id="error" class="alert alert-danger"></div>
          <table id="search_results" style="display:none;" class="table table-striped table-bordered" >
          </table>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
$('#button-search').on('click', function() {
  var html = '';

	$.ajax({
		url: 'index.php?route=extension/payment/pp_express/doSearch&user_token={{ user_token }}',
		type: 'POST',
		dataType: 'json',
		data: $('#form').serialize(),
		beforeSend: function () {
			$('#search-input').hide();
			$('#search-box').show();
			$('#button-search').hide();
			$('#button-edit').show();
		},
		success: function (data) {
			if (data.error == true) {
				$('#searching').hide();
				$('#error').html('<i class="fa fa-exclamation-circle"></i> ' + data.error_msg).fadeIn();
			} else {
				if (data.result != '') {
					html += '<thead><tr>';
					html += '<td class="left">{{ column_date }}</td>';
					html += '<td class="left">{{ column_type }}</td>';
					html += '<td class="left">{{ column_email }}</td>';
					html += '<td class="left">{{ column_name }}</td>';
					html += '<td class="left">{{ column_transid }}</td>';
					html += '<td class="left">{{ column_status }}</td>';
					html += '<td class="left">{{ column_currency }}</td>';
					html += '<td class="right">{{ column_amount }}</td>';
					html += '<td class="right">{{ column_fee }}</td>';
					html += '<td class="right">{{ column_netamt }}</td>';
					html += '<td class="center">{{ column_action }}</td>';
					html += '</tr></thead>';
				
          $.each(data.result, function (k, v) {
            if ("L_LONGMESSAGE" in v) {
              $('#error').text(v.L_LONGMESSAGE).fadeIn();
            } else {
              if (!("L_EMAIL" in v)) {
                v.L_EMAIL = '';
              }

              html += '<tr>';
              html += '<td class="left">' + v.L_TIMESTAMP + '</td>';
              html += '<td class="left">' + v.L_TYPE + '</td>';
              html += '<td class="left">' + v.L_EMAIL + '</td>';
              html += '<td class="left">' + v.L_NAME + '</td>';
              html += '<td class="left">' + v.L_TRANSACTIONID + '</td>';
              html += '<td class="left">' + v.L_STATUS + '</td>';
              html += '<td class="left">' + v.L_CURRENCYCODE + '</td>';
              html += '<td class="right">' + v.L_AMT + '</td>';
              html += '<td class="right">' + v.L_FEEAMT + '</td>';
              html += '<td class="right">' + v.L_NETAMT + '</td>';
              html += '<td class="center">';
              html += '<a href="{{ view_link }}&transaction_id=' + v.L_TRANSACTIONID + '">{{ text_view }}</a>';
              html += '</td>';
              html += '</tr>';
            }
          });
	
          $('#searching').hide();
          $('#search_results').append(html).fadeIn();
	      } else {
	        $('#searching').hide();
	        $('#error').html('<i class="fa fa-exclamation-circle"></i> {{ text_no_results }}').fadeIn();
	      }
	    }
	  }
	});
});

$('#button-edit').on('click', function() {
  $('#search-box').hide();
  $('#search-input').show();
  $('#button-edit').hide();
  $('#button-search').show();
  $('#searching').show();
  $('#search_results').empty().hide();
  $('#error').empty().hide();
});

$('.date').datetimepicker({
	language: '{{ datepicker }}',
	pickTime: false
});

$('.time').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: false
});

$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: true,
	pickTime: true
});
//--></script></div>
{{ footer }}