<style>
	#bdt-devices-filters label {
		font-weight: bold;
	}

	#bdt-devices-filters .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: 10px;
	}
	.sm-section {
		width: 125px !important;
	}
</style>

<form id="bdt-devices-filters" method="GET" action="{{ route('admin.bdt_devices') }}" class="filter-container" v-cloak>
	
	<div class="sm-section">
		<div class="">
			<label>IMEI:</label>
			<input name="imei" class="form-control input-sm" v-model="filters.imei">
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<label>Client:</label>
			<input name="client" class="form-control input-sm" v-model="filters.client">
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<label>Issued?</label>
			<select name="is_issued" class="form-control input-sm" v-model="filters.is_issued">
				<option value="">All</option>
				<option value="YES">Yes</option>
				<option value="NO">No</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<label>MCP:</label>
			<select name="mcp" class="form-control min-width-unset" v-model="filters.mcp">
				<option value="">--select--</option>
				<?php $mcpPros = \App\Models\Pro::where('is_active', true)->where('is_enrolled_as_mcp', true)->orderBy('name_display')->get(); ?>
				@foreach($mcpPros as $mcpPro)
					<option value="{{$mcpPro->uid}}">{{$mcpPro->name_display}}</option>
				@endforeach
			</select>
		</div>
	</div>

	<div>
		<div class="">
			<label>&nbsp;</label>
			<div class=" d-flex">
				<button type="button" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i> Filter</button>
				<a href="#" v-on:click.prevent="fastLoad('{{route('admin.bdt_devices')}}')" class="btn btn-link btn-sm text-danger">Clear</a>
			</div>
		</div>
	</div>
</form>

<?php
$loadedFilters = @$filters;
$allFilterKeys = [
	'imei',
	'mcp',
	'client',
	'is_issued'
];
for ($i=0; $i < count($allFilterKeys); $i++) {
	if (!isset($loadedFilters[$allFilterKeys[$i]]) || !$loadedFilters[$allFilterKeys[$i]]) {
		$loadedFilters[$allFilterKeys[$i]] = '';
	}
}
?>
<script>
	(function() {
		function init() {
			new Vue({
				el: '#bdt-devices-filters',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					init: function() {

					},
					doSubmit: function() {
						fastLoad('{{ route('admin.bdt_devices') }}?' + $('#bdt-devices-filters').serialize());
						return false;
					}
				},
				mounted: function() {
					console.log(this.filters);
					this.init();
				},
			});


		}
		addMCInitializer('bdt-devices-filters', init, '#bdt-devices-filters');
	})();
</script>
