{{ 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="text-left">{{ column_date }}</td>';
                          html += '<td class="text-left">{{ column_type }}</td>';
                          html += '<td class="text-left">{{ column_email }}</td>';
                          html += '<td class="text-left">{{ column_name }}</td>';
                          html += '<td class="text-left">{{ column_transid }}</td>';
                          html += '<td class="text-left">{{ column_status }}</td>';
                          html += '<td class="text-left">{{ column_currency }}</td>';
                          html += '<td class="text-right">{{ column_amount }}</td>';
                          html += '<td class="text-right">{{ column_fee }}</td>';
                          html += '<td class="text-right">{{ column_netamt }}</td>';
                          html += '<td class="text-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="text-left">' + v.L_TIMESTAMP + '</td>';
                                  html += '<td class="text-left">' + v.L_TYPE + '</td>';
                                  html += '<td class="text-left">' + v.L_EMAIL + '</td>';
                                  html += '<td class="text-left">' + v.L_NAME + '</td>';
                                  html += '<td class="text-left">' + v.L_TRANSACTIONID + '</td>';
                                  html += '<td class="text-left">' + v.L_STATUS + '</td>';
                                  html += '<td class="text-left">' + v.L_CURRENCYCODE + '</td>';
                                  html += '<td class="text-right">' + v.L_AMT + '</td>';
                                  html += '<td class="text-right">' + v.L_FEEAMT + '</td>';
                                  html += '<td class="text-right">' + v.L_NETAMT + '</td>';
                                  html += '<td class="text-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 }}