<style>
	#admin-patients-filters label {
		font-weight: bold;
	}

	#admin-patients-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: 150px !important;
	}
</style>
<form id="admin-patients-filters" method="GET" action="{{ route('admin.patientsMissingDefasultSettings') }}" class="filter-container" v-cloak>
	<div class="sm-section">
		<div class="">
			<label>Name:</label>
			<input name="name" class="form-control input-sm" v-model="filters.name">
		</div>
	</div>

	<div class="sm-section">
		<div class="mcp-filter-container">
			<label>MCP:</label>
		</div>
	</div>

	<!-- STATUS -->
	<div class="sm-section">
		<div class="">
			<label>Status:</label>
			<select name="status" class="form-control input-sm" v-model="filters.status">
				<option value="">All</option>
				<option value="ACTIVE">Active</option>
				<option value="DUMMY">Test Record</option>
				<option value="NO_LONGER_INTERESTED">No Longer Interested</option>
				<option value="INACTIVE">Inactive</option>
				<option value="ENTRY_ERROR">Entry Error</option>
				<option value="DUPLICATE">Duplicate</option>
				<option value="DECEASED">Deceased</option>
				<option value="BAD_RECORD">Bad Record</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<label>Insurance:</label>
			<select class="form-control" name="insurance" v-model="filters.insurance">
				<option value=""></option>
				<option value="MEDICARE_PENDING">Medicare Pending</option>
				<option value="MEDICARE">Medicare (Part B)</option>
				<option value="OTHER">Other</option>
				<option value="PENDING">Pending</option>
				<option value="NOT_COVERED">Not Covered</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<label>Chart #</label>
			<input class="form-control" name="chart_number" v-model="filters.chart_number">
		</div>
	</div>

	<div class="sm-section" style="width: 185px !important;">
		<div class="">
			<label>Missing Default Setting(s):</label>
			<select class="form-control" name="missing_default_settings" v-model="filters.missing_default_settings">
				<option value="">Any</option>
				<option value="NO_MCP">No MCP</option>
				<option value="NO_MCP_COMPANY_PRO">No MCP Company Pro</option>
				<option value="NO_MCP_COMPANY_PRO_PAYER">No MCP Company Pro Payer</option>
				<option value="NO_MCP_COMPANY_LOCATION">No MCP Company Location</option>
			</select>
		</div>
	</div>

	<div class="sm-section" style="width: 185px !important;">
		<div class="">
			<label>Care Plan:</label>
			<select class="form-control" name="care_plan" v-model="filters.care_plan">
				<option value="">Any</option>
				<option value="UNSIGNED_CARE_PLANS">Unsigned Care Plans</option>
				<option value="UNCLEARED_CARE_PLANS">Uncleared Care Plans</option>
			</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.patientsMissingDefasultSettings')}}')" class="btn btn-link btn-sm text-danger">Clear</a>
			</div>
		</div>
	</div>
</form>

<?php
$loadedFilters = @$filters;
$allFilterKeys = [
	'name',
	'status',
	'insurance',
	'chart_number',
	'missing_default_settings',
	'care_plan'
];
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: '#admin-patients-filters',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					init: function() {

					},
					doSubmit: function() {
						fastLoad("{{ route('admin.patientsMissingDefasultSettings') }}?" + $('#admin-patients-filters').serialize());
						return false;
					}
				},
				mounted: function() {
					this.init();

					let mcpSelect = $('<select name="mcp" class="form-control min-width-unset input-sm" provider-search data-pro-uid="{{request()->input("mcp")}}" provider-type="hcp"><option value="">--select--</option></select>').appendTo('.mcp-filter-container');
					let naSelect = $('<select name="na" class="form-control min-width-unset input-sm" provider-search data-pro-uid="{{request()->input("na")}}" provider-type="non-hcp"><option value="">--select--</option></select>').appendTo('.na-filter-container');
					initProSuggest();
				},
			});


		}
		addMCInitializer('admin-patients-filters', init, '#admin-patients-filters');
	})();
</script>