<style>
	#client-ccm-rm-status-filters label {
		font-weight: bold;
	}

	#client-ccm-rm-status-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: 15px;
	}
	.sm-section {
		width: 125px !important;
	}
</style>
<form id="client-ccm-rm-status-filters" method="GET" action="{{ route('mcp.patients') }}" class="filter-container" v-cloak>
	<div class="sm-section">
		<div class="form-group">
			<label>Name:</label>
			<input name="name" class="form-control input-sm" v-model="filters.name">
		</div>
	</div>
	@if($pro->pro_type == 'ADMIN')
	<!-- AGE	 -->
	<div class="sm-section">
		<div class="form-group">
			<label>Age:</label>
			<select name="age_category" class="form-control input-sm" v-model="filters.age_category">
				<option value="">All</option>
				<option value="EXACTLY">Exactly</option>
				<option value="LESS_THAN">Less Than</option>
				<option value="GREATER_THAN">Greater Than</option>
				<option value="BETWEEN">Between</option>
				<option value="NOT_BETWEEN">Not Between</option>
			</select>
			<div v-show="filters.age_category" class="mt-2">
				<div>
					<input  name="age_value_1" v-model="filters.age_value_1" type="number" class="form-control input-sm" :placeholder="(filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN') ? 'From' : 'Age'" />
				</div>
				<div v-show="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="age_value_2" v-model="filters.age_value_2" type="number" class="form-control input-sm" placeholder="To" />
				</div>
			</div>
		</div>
	</div>
	<!-- SEX -->
	<div class="sm-section">
		<div class="form-group">
			<label>Sex:</label>
			<select name="sex" class="form-control input-sm" v-model="filters.sex">
				<option value="">All</option>
				<option value="M">Male</option>
				<option value="F">Female</option>
			</select>
		</div>
	</div>
	<!-- BMI -->
	<div class="sm-section">
		<div class="form-group">
			<label>BMI:</label>
			<select name="bmi_category" class="form-control input-sm" v-model="filters.bmi_category">
				<option value="">All</option>
				<option value="EXACTLY">Exactly</option>
				<option value="LESS_THAN">Less Than</option>
				<option value="GREATER_THAN">Greater Than</option>
				<option value="BETWEEN">Between</option>
				<option value="NOT_BETWEEN">Not Between</option>
			</select>
			<div v-show="filters.bmi_category" class="mt-2">
				<div>
					<input  name="bmi_value_1" v-model="filters.bmi_value_1" type="number" class="form-control input-sm" :placeholder="(filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
				</div>
				<div v-show="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="bmi_value_2" v-model="filters.bmi_value_2" type="number" class="form-control input-sm" placeholder="To" />
				</div>
			</div>
		</div>
	</div>
	@endif

	<!-- LAST VISIT -->
	<div class="sm-section">
		<div class="form-group">
			<label>Last Visit:</label>
			<select name="last_visit_category" class="form-control input-sm" v-model="filters.last_visit_category">
				<option value="">All</option>
				<option value="EXACTLY">Exactly</option>
				<option value="LESS_THAN">Less Than</option>
				<option value="GREATER_THAN">Greater Than</option>
				<option value="BETWEEN">Between</option>
				<option value="NOT_BETWEEN">Not Between</option>
			</select>
			<div v-show="filters.last_visit_category" class="mt-2">
				<div>
					<input  name="last_visit_value_1" v-model="filters.last_visit_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN') ? 'From' : 'Last Visit'" />
				</div>
				<div v-show="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="last_visit_value_2" v-model="filters.last_visit_value_2" type="number" class="form-control input-sm" placeholder="To" />
				</div>
			</div>
		</div>
	</div>

	<!-- NEXT APPOINTMENT -->
	<div>
		<div class="form-group">
			<label>Next Appointment:</label>
			<select name="next_appointment_category" class="form-control input-sm" v-model="filters.next_appointment_category">
				<option value="">All</option>
				<option value="EXACTLY">Exactly</option>
				<option value="LESS_THAN">Less Than</option>
				<option value="GREATER_THAN">Greater Than</option>
				<option value="BETWEEN">Between</option>
				<option value="NOT_BETWEEN">Not Between</option>
			</select>
			<div v-show="filters.next_appointment_category" class="mt-2">
				<div>
					<input  name="next_appointment_value_1" v-model="filters.next_appointment_value_1" type="number" class="form-control input-sm" :placeholder="(filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN') ? 'From' : 'Next Appt.'" />
				</div>
				<div v-show="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="next_appointment_value_2" v-model="filters.next_appointment_value_2" type="number" class="form-control input-sm" placeholder="To" />
				</div>
			</div>
		</div>
	</div>

	<!-- STATUS -->
	<div class="sm-section">
		<div class="form-group">
			<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="AWAITING_VISIT">Awaiting Visit</option>
				<option value="INACTIVE">Inactive</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="form-group">
			<label>Eligible For RM:</label>
			<select name="is_eligible_for_rm" class="form-control input-sm" v-model="filters.is_eligible_for_rm">
				<option value="">All</option>
				<option value="YES">Yes</option>
				<option value="NO">No</option>
				<option value="UNKNOWN">Uknown</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="form-group">
			<label>Enrolled In RM:</label>
			<select name="is_enrolled_in_rm" class="form-control input-sm" v-model="filters.is_enrolled_in_rm"> {{-- correct --}}
				<option value="">All</option>
				<option value="YES">Yes</option>
				<option value="NO">No</option>
				<option value="UNKNOWN">Uknown</option>
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="form-group">
			<label>RM Setup:</label>
			<select name="has_rm_setup_been_performed" class="form-control input-sm" v-model="filters.has_rm_setup_been_performed">
				<option value="">All</option>
				<option value="YES">Yes</option>
				<option value="NO">No</option>
			</select>
		</div>
	</div>

	<div>
		<div class="form-group">
			<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('mcp.patients')}}')" class="btn btn-link btn-sm text-secondary">Clear Filters</a>
			</div>
		</div>
	</div>
</form>

<?php
$loadedFilters = @$filters;
$allFilterKeys = [
	'name',
	'age_category',
	'age_value_1',
	'age_value_2',
	'bmi_category',
	'bmi_value_1',
	'bmi_value_2',
	'last_bp_category',
	'last_bp_value_1',
	'last_bp_value_2',
	'last_visit_category',
	'last_visit_value_1',
	'last_visit_value_2',
	'last_weighed_in_category',
	'last_weighed_in_value_1',
	'next_appointment_category',
	'next_appointment_value_1',
	'sex',
	'status',
	'is_eligible_for_rm',
	'is_enrolled_in_rm', // -- correct --
	'has_rm_setup_been_performed',
];
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: '#client-ccm-rm-status-filters',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					init: function() {

					},
					doSubmit: function() {
						fastLoad('{{  route('practice-management.client-ccm-rm-status') }}?' + $('#client-ccm-rm-status-filters').serialize());
						return false;
					}
				},
				mounted: function() {
					console.log(this.filters);
					this.init();
				},
			});


		}
		addMCInitializer('client-ccm-rm-status-filters', init, '#client-ccm-rm-status-filters');
	})();
</script>
