<?php
	$url = route('admin.payment-methods');
?>
<style>
	#recordsFilter label {
		font-weight: bold;
	}

	#recordsFilter .mw-100px {
		min-width: 100px;
	}

	.filter-container {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.filter-container>div {
		width: 165px;
	}

	.filter-container>div:not(:last-child) {
		margin-right: 15px;
	}
</style>
<form id="recordsFilter" method="GET" action="{{ $url }}" class="filter-container align-items-end mb-3" v-cloak>
	<div class="sm-section">
		<div class="form-group mb-0">
			<label class="text-secondary text-sm mb-1">Expiring On or Before:</label>
			<div>
				<input name="expiration_date" v-model="filters.expiration_date" type="month" class="form-control form-control-sm min-width-unset" />
			</div>
		</div>
	</div>

	<div class="">
		<div class="form-group mb-0">
			<label class="text-secondary text-sm mb-1">&nbsp;</label>
			<div class="d-flex align-items-center">
				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2">Filter</button>
				<a href="#" v-on:click.prevent="fastLoad('{{ $url }}')" class="btn btn-link btn-sm text-danger">Clear Filters</a>
			</div>
		</div>
	</div>
</form>

<?php
$loadedFilters = $filters;
$allFilterKeys = [
	'expiration_date',
];
for ($i = 0; $i < count($allFilterKeys); $i++) {
	if (!isset($loadedFilters[$allFilterKeys[$i]]) || !$loadedFilters[$allFilterKeys[$i]]) {
		$loadedFilters[$allFilterKeys[$i]] = '';
	}
}
?>

<script>
	$(document).ready(function(){
		new Vue({
				el: '#recordsFilter',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					doSubmit: function() {
						fastLoad('{{ $url }}?' + $('#recordsFilter').serialize());
						return false;
					},
					initSelect2: function() {
						$('[select2]').select2();
					},
					init: function() {
						this.initSelect2();
					}
				},
				mounted: function() {
					this.init();
				},
			});
	});
</script>
