{{ header }}
<div class="pts-container">
	<ul class="pts-breadcrumb">
		{% for breadcrumb in breadcrumbs %}
		<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
		{% endfor %}
	</ul>
	<div class="pts-row">{{ column_left }}
		{% if column_left and column_right %}
		{% set class = 'pts-col-sm-6' %}
		{% elseif column_left or column_right %}
		{% set class = 'pts-col-sm-9' %}
		{% else %}
		{% set class = 'pts-col-sm-12' %}
		{% endif %}
		<div id="pts-content" class="{{ class }}">{{ content_top }}
			<h1>{{ heading_title }}</h1>
				<div class="pts-row">
				<div class="pts-col-sm-4">
				  <div class="pts-form-group">
					<label class="pts-control-label" for="input-date-added">{{ entry_date_from }}</label>
					<div class="pts-input-group date">
					  <input type="text" name="filter_date_from" value="{{ filter_date_from }}" placeholder="{{ entry_date_from }}" data-date-format="YYYY-MM-DD" id="input-date-from" class="pts-form-control" />
					  <span class="pts-input-group-btn">
					  <button type="button" class="pts-btn pts-btn-default"><i class="fa fa-calendar"></i></button>
					  </span></div>
				  </div>
				</div>
				<div class="pts-col-sm-4">
				  <div class="pts-form-group">
					<label class="pts-control-label" for="input-date-modified">{{ entry_date_to }}</label>
					<div class="pts-input-group date">
					  <input type="text" name="filter_date_to" value="{{ filter_date_to }}" placeholder="{{ entry_date_to }}" data-date-format="YYYY-MM-DD" id="input-date-to" class="pts-form-control" />
					  <span class="pts-input-group-btn">
					  <button type="button" class="pts-btn pts-btn-default"><i class="fa fa-calendar"></i></button>
					  </span></div>
				  </div>        
				</div>
				<div class="pts-col-sm-2">
					<label class="pts-control-label"></label>
					<div class="pts-form-group">
						<button type="button" id="button-filter" class="pts-btn pts-btn-primary pts-pull-right"><i class="fa fa-filter"></i> {{ button_filter }}</button>
					</div>
				</div>
			  </div>	
				{% if seller_payments %}
				  <div class="pts-table-responsive">
					<table class="pts-table pts-table-bordered pts-table-hover">
					  <thead>
						<tr>
						  <td class="pts-text-left">{{ text_trnasaction }}</td>
						  <td class="pts-text-left">{{ text_amount }}</td>
						  <td class="pts-text-left">{{ text_payment_mode }}</td>
						  <td class="pts-text-left">{{ text_status }}</td>
						  <td class="pts-text-left">{{ text_created_at }}</td>
						</tr>
					  </thead>
					  <tbody>
						{% for seller_payment in seller_payments %}
						<tr>
						  <td class="pts-text-left">{{ seller_payment.transaction_id }}</td>
						  <td class="pts-text-left">{{ seller_payment.amount }}</td>
						  <td class="pts-text-left">{{ seller_payment.payment_mode }}</td>
						  <td class="pts-text-left">{{ seller_payment.status }}</td>
						  <td class="pts-text-left">{{ seller_payment.created_at }}</td>
						</tr>
						{% endfor %}
					  </tbody>
					</table>
				  </div>
				  <div class="pts-row">
					<div class="pts-col-sm-6 pts-text-left">{{ pagination }}</div>
					<div class="pts-col-sm-6 pts-text-right">{{ results }}</div>
				  </div>
				  {% else %}
				  <p>{{ text_empty }}</p>
					{% endif %}
			{{ content_bottom }}
		</div>
		{{ column_right }}
	</div>
</div>
<script type="text/javascript"><!--
$('#pts-button-filter').on('click', function() {
	url = 'index.php?route=extension/account/purpletree_multivendor/sellerpayment';
	
	var filter_order_status = $('select[name=\'filter_order_status\']').val();

	if (filter_order_status != '*') {
		url += '&filter_order_status=' + encodeURIComponent(filter_order_status);
	}

	var filter_date_from = $('input[name=\'filter_date_from\']').val();

	if (filter_date_from) {
		url += '&filter_date_from=' + encodeURIComponent(filter_date_from);
	}

	var filter_date_to = $('input[name=\'filter_date_to\']').val();

	if (filter_date_to) {
		url += '&filter_date_to=' + encodeURIComponent(filter_date_to);
	}

	location = url;
});
//--></script>
<script src="admin/view/javascript/jquery/datetimepicker/moment/moment.min.js" type="text/javascript"></script>
<script src="admin/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js" type="text/javascript"></script>
<script src="admin/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link href="admin/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen" />
  <script type="text/javascript"><!--
$('.date').datetimepicker({
	pickTime: false
});
//--></script>
{{ footer }}