{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">

            <h1>{{ 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="row">
            <div id="filter-order" class="col-md-3 col-md-push-9 col-sm-12 hidden-sm hidden-xs">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-filter"></i> {{ text_filter }}</h3>
                    </div>
                    <div class="panel-body">

                        <div class="form-group">
                            <label class="control-label" for="input-order-id">{{ entry_order_id }}</label>
                            <input type="text" name="filter_order_id" value="{{ filter_order_id }}"
                                   placeholder="{{ entry_order_id }}" id="input-order-id" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="input-amount">{{ entry_amount }}</label>
                            <input type="text" name="filter_amount" value="{{ filter_amount }}"
                                   placeholder="{{ entry_amount }}" id="input-amount" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="input-reference">{{ entry_reference }}</label>
                            <input type="text" name="filter_reference" value="{{ filter_reference }}"
                                   placeholder="{{ entry_reference }}" id="input-reference" class="form-control"/>
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="input-action">{{ entry_action }}</label>
                            <select name="filter_action" id="input-action" class="form-control">
                                <option value=""></option>
                                {% for action in actions %}
                                    {% if action == filter_action %}
                                        <option value="{{ action }}" selected="selected">{{ action }}</option>
                                    {% else %}
                                        <option value="{{ action }}">{{ action }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>


                        <div class="form-group">
                            <label class="control-label" for="input-state">{{ entry_state }}</label>
                            <input type="text" name="filter_state" value="{{ filter_state }}"
                                   placeholder="{{ entry_state }}" id="input-state" class="form-control"/>
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="input-status">{{ entry_status }}</label>
                            <select name="filter_status" id="input-status" class="form-control">
                                <option value=""></option>
                                {% for order_status in order_statuses %}
                                    {% if order_status == filter_status %}
                                        <option value="{{ order_status }}"
                                                selected="selected">{{ order_status }}</option>
                                    {% else %}
                                        <option value="{{ order_status }}">{{ order_status }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="input-payment_id">{{ entry_payment_id }}</label>
                            <input type="text" name="filter_payment_id" value="{{ filter_payment_id }}"
                                   placeholder="{{ entry_payment_id }}" id="input-payment_id" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="input-capture_amount">{{ entry_capture_amount }}</label>
                            <input type="text" name="filter_captured_amt" value="{{ filter_captured_amt }}"
                                   placeholder="{{ entry_capture_amount }}" id="input-capture_amount"
                                   class="form-control"/>
                        </div>

                        <div class="form-group text-right">
                            <button type="button" id="button-filter" class="btn btn-default"><i
                                        class="fa fa-filter"></i> {{ button_filter }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-md-pull-3 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-list"></i> {{ text_list }}</h3>
                    </div>
                    <div class="panel-body">
                        <form method="post" action="" enctype="multipart/form-data" id="form-order">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="">Order Id</td>
                                        <td class="text-right">Order Amount</td>
                                        <td class="text-right">Reference</td>
                                        <td class="text-right">Action</td>
                                        <td class="text-right">State</td>
                                        <td class="text-right">Status</td>
                                        <td class="text-right">Payment Id</td>
                                        <td class="text-right">Capture Amount</td>
                                        <td class="text-right">Date</td>

                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% if orders %}
                                        {% for order in orders %}
                                            <tr>
                                                <td class="">{{ order.order_id }}</td>
                                                <td class="text-left">{{ order.amount }}</td>
                                                <td class="text-right">{{ order.reference }}</td>
                                                <td class="text-left">{{ order.action }}</td>
                                                <td class="text-right">{{ order.state }}</td>
                                                <td class="text-left">{{ order.status }}</td>
                                                <td class="text-left">{{ order.id_payment }}</td>
                                                <td class="text-left">{{ order.capture_amt }}</td>
                                                <td class="text-left">{{ order.created_at }}</td>
                                            </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr>
                                            <td class="text-center" colspan="10">{{ text_no_results }}</td>
                                        </tr>
                                    {% endif %}
                                    </tbody>

                                </table>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-sm-6 text-left">{{ pagination }}</div>
                            <div class="col-sm-6 text-right">{{ results }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
          $('#button-filter').on('click', function () {
            url = ''

            var filter_order_id = $('input[name=\'filter_order_id\']').val()
            if (filter_order_id) {
              url += '&filter_order_id=' + encodeURIComponent(filter_order_id)
            }

            var filter_reference = $('input[name=\'filter_reference\']').val()
            if (filter_reference) {
              url += '&filter_reference=' + encodeURIComponent(filter_reference)
            }

            var filter_amount = $('input[name=\'filter_amount\']').val()
            if (filter_amount) {
              url += '&filter_amount=' + encodeURIComponent(filter_amount)
            }

            var filter_action = $('select[name=\'filter_action\']').val()
            if (filter_action !== '') {
              url += '&filter_action=' + encodeURIComponent(filter_action)
            }

            var filter_state = $('input[name=\'filter_state\']').val()
            if (filter_state) {
              url += '&filter_state=' + encodeURIComponent(filter_state)
            }

            var filter_status = $('input[name=\'filter_status\']').val()
            if (filter_status) {
              url += '&filter_status=' + encodeURIComponent(filter_status)
            }

            var filter_status = $('select[name=\'filter_status\']').val()
            if (filter_status !== '') {
              url += '&filter_status=' + encodeURIComponent(filter_status)
            }

            var filter_payment_id = $('input[name=\'filter_payment_id\']').val()
            if (filter_payment_id) {
              url += '&filter_payment_id=' + encodeURIComponent(filter_payment_id)
            }

            var filter_captured_amt = $('input[name=\'filter_captured_amt\']').val()
            if (filter_captured_amt) {
              url += '&filter_captured_amt=' + encodeURIComponent(filter_captured_amt)
            }

            location = 'index.php?route=extension/report/ngenius&user_token={{ user_token }}' + url
          })
        </script>

    </div>
    {{ footer }}