<link href="/select2/select2.min.css" rel="stylesheet" />
<script src="/select2/select2.min.js"></script>
<style>
	#notes-filters label {
		font-weight: bold;
	}

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

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

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

	.filter-container>div:not(:last-child) {
		margin-right: 15px;
	}

	.select2-container {
		width: 100% !important;
	}
</style>
<form id="notes-filters" method="GET" action="{{ route('practice-management.allNotes') }}" class="filter-container" v-cloak>
	<!-- DATE -->
	<div>
		<div class="form-group">
			<label>Created At:</label>
			<select name="created_at_category" class="form-control input-sm" v-model="filters.created_at_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.created_at_category" class="mt-2">
				<div>
					<input name="created_at_value_1" v-model="filters.created_at_value_1" type="date" class="form-control input-sm" />
				</div>
				<div v-show="filters.created_at_category === 'BETWEEN' || filters.created_at_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="created_at_value_2" v-model="filters.created_at_value_2" type="date" class="form-control input-sm" />
				</div>
			</div>
		</div>
	</div>
	<div>
		<div class="form-group">
			<label>Effective Date:</label>
			<select name="effective_date_category" class="form-control input-sm" v-model="filters.effective_date_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.effective_date_category" class="mt-2">
				<div>
					<input name="effective_date_value_1" v-model="filters.effective_date_value_1" type="date" class="form-control input-sm" />
				</div>
				<div v-show="filters.effective_date_category === 'BETWEEN' || filters.effective_date_category === 'NOT_BETWEEN'" class="mt-2">
					<input name="effective_date_value_2" v-model="filters.effective_date_value_2" type="date" class="form-control input-sm" />
				</div>
			</div>
		</div>
	</div>
	<div>
		<div class="form-group">
			<label>Pro(s):</label>
			<select multiple class="form-control form-control-sm mr-2" name="pros[]" v-model="filters.pros">
				@foreach($allProsWithNotes as $notePro)
				<option value="{{ $notePro->id }}">{{ $notePro->displayName() }}</option>
				@endforeach
			</select>
		</div>
	</div>
	<div>
		<div class="form-group">
			<label>Ally Pro(s):</label>
			<select multiple class="form-control form-control-sm mr-2" name="ally_pros[]" v-model="filters.ally_pros">
				@foreach($allAllyPros as $noteAllyPro)
				<option value="{{ $noteAllyPro->id }}">{{ $noteAllyPro->displayName() }}</option>
				@endforeach
			</select>
		</div>
	</div>
	<div>
		<div class="form-group">
			<label>Patients(s):</label>
			<select multiple class="form-control form-control-sm mr-2" name="patients[]" v-model="filters.patients">
				@foreach($allPatientsWithNotes as $notePatient)
				<option value="{{ $notePatient->id }}">{{ $notePatient->displayName() }}</option>
				@endforeach
			</select>
		</div>
	</div>

	<div>
		<div class="form-group">
			<label>Status:</label>
			<select class="form-control form-control-sm mr-2" name="status" v-model="filters.status">
				<option value="">All Notes</option>
				<option value="SIGNED">Notes signed</option>
				<option value="CANCELLED">Cancelled</option>
				<option value="NOT_YET_SIGNED">Notes not yet signed</option>
				<option value="NOT_YET_SIGNED_BUT_ALLY_SIGNED">Notes not yet signed (but ally signed)</option>
				<option value="WITH_BILLS">With Bills</option>
				<option value="WITHOUT_BILLS">Without Bills</option>
			</select>
		</div>
	</div>


	<div>
		<div class="form-group">
			<label>&nbsp;</label>
			<div class="d-flex">
				<button type="submit" 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('practice-management.allNotes')}}')" class="btn btn-link btn-sm text-danger">Clear Filters</a>
			</div>
		</div>
	</div>
</form>
<?php
$loadedFilters = @$filters;
$allFilterKeys = [
	'created_at_category',
	'created_at_value_1',
	'created_at_value_2',
	'effective_date_category',
	'effective_date_value_1',
	'effective_date_value_2',
	'pros',
	'all_pros',
	'patients',
	'status'
];
for ($i = 0; $i < count($allFilterKeys); $i++) {
	if (!isset($loadedFilters[$allFilterKeys[$i]]) || !$loadedFilters[$allFilterKeys[$i]]) {
		$loadedFilters[$allFilterKeys[$i]] = '';
	}
}
?>
<script>
	(function() {
		function init() {
			window.apapp = new Vue({
				el: '#notes-filters',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					doSubmit: function() {
						fastLoad('{{ route("practice-management.allNotes") }}?' + $('#notes-filters').serialize());
						return false;
					},
					init: function() {
						$('select[multiple]').select2();
					}
				},
				mounted: function() {
					this.init();
				},
			});
		}
		addMCInitializer('notes-filters', init, '#notes-filters');
	})();
</script>