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

	#admin-part_b_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: 125px !important;
	}
</style>
<form id="admin-part_b_patients-filters" method="GET" action="{{ route('admin.part_b_patients') }}" 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="">
			<label>MCP:</label>
			<select name="mcp" class="form-control min-width-unset" v-model="filters.mcp">
				<option value="">--select--</option>
				<option value="NO_MCP">No MCP</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 class="sm-section">
		<div class="">
			<label>NA:</label>
			<select name="na" class="form-control min-width-unset" v-model="filters.na">
				<option value="">--select--</option>
				<option value="NO_NA">No NA</option>
				<?php $naPros = \App\Models\Pro::where('is_active', true)->where('is_considered_for_dna', true)->orWhere('pro_type', '=', 'ADMIN')->orderBy('name_display')->get(); ?>
				@foreach($naPros as $naPro)
					<option value="{{$naPro->uid}}">{{$naPro->name_display}}</option>
				@endforeach
			</select>
		</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="AWAITING_VISIT">Awaiting Visit</option>
				<option value="INACTIVE">Inactive</option>
			</select>
		</div>
	</div>

	@if($performer->pro->pro_type == 'ADMIN')
	<div class="sm-section">
		<div class="">
			<label>Initiative:</label>
			<input type="text" name="initiative" class="form-control input-sm" v-model="filters.initiative">
		</div>
	</div>
	@endif

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

	<!-- Number of measurements	 -->
	<div class="sm-section">
		<div class="">
			<label>Deductible:</label>
			<select name="deductible" class="form-control input-sm" v-model="filters.deductible">
				<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.deductible" class="mt-2">
				<div>
					<input  name="deductible_value_1" v-model="filters.deductible_value_1" type="number" class="form-control input-sm" :placeholder="(filters.deductible === 'BETWEEN' || filters.deductible === 'NOT_BETWEEN') ? 'From' : 'Deductible'" />
				</div>
				<div v-show="filters.deductible === 'BETWEEN' || filters.deductible === 'NOT_BETWEEN'" class="mt-2">
					<input name="deductible_value_2" v-model="filters.deductible_value_2" type="number" class="form-control input-sm" placeholder="To" />
				</div>
			</div>
		</div>
	</div>
	
	<div class="sm-section">
		<div class="">
			<label>Home Address State:</label>
			<select name="home_address_state" class="form-control input-sm" v-model="filters.home_address_state">
				<option value="">All</option>
				<option value="NONE">Not Available</option>
				<option value="NOT_MD">Not MD</option>
				<option value="AL">Alabama</option>	
				<option value="AK">Alaska</option>	
				<option value="AZ">Arizona</option>	
				<option value="AR">Arkansas</option>	
				<option value="CA">California</option>	
				<option value="CO">Colorado</option>	
				<option value="CT">Connecticut</option>	
				<option value="DE">Delaware</option>	
				<option value="FL">Florida</option>	
				<option value="GA">Georgia</option>	
				<option value="HI">Hawaii</option>	
				<option value="ID">Idaho</option>	
				<option value="IL">Illinois</option>	
				<option value="IN">Indiana</option>	
				<option value="IA">Iowa</option>	
				<option value="KS">Kansas</option>	
				<option value="KY">Kentucky</option>	
				<option value="LA">Louisiana</option>	
				<option value="ME">Maine</option>	
				<option value="MD">Maryland</option>	
				<option value="MA">Massachusetts</option>	
				<option value="MI">Michigan</option>	
				<option value="MN">Minnesota</option>	
				<option value="MS">Mississippi</option>	
				<option value="MO">Missouri</option>	
				<option value="MT">Montana</option>	
				<option value="NE">Nebraska</option>	
				<option value="NV">Nevada</option>	
				<option value="NH">New Hampshire</option>	
				<option value="NJ">New Jersey</option>	
				<option value="NM">NewMexico</option>	
				<option value="NY">New York</option>	
				<option value="NC">North Carolina</option>	
				<option value="ND">North Dakota</option>	
				<option value="OH">Ohio</option>	
				<option value="OK">Oklahoma</option>	
				<option value="OR">Oregon</option>	
				<option value="PA">Pennsylvania</option>	
				<option value="RI">RhodeIsland</option>	
				<option value="SC">South Carolina</option>	
				<option value="SD">South Dakota</option>	
				<option value="TN">Tennessee</option>	
				<option value="TX">Texas</option>	
				<option value="UT">Utah</option>	
				<option value="VT">Vermont</option>	
				<option value="VA">Virginia</option>	
				<option value="WA">Washington</option>	
				<option value="WV">West Virginia</option>	
				<option value="WI">Wisconsin</option>	
				<option value="WY">Wyoming</option>	
			</select>
		</div>
	</div>

	<div class="sm-section">
		<div class="">
			<div class="checkbox mt-4 pt-2">
				<label class="text-nowrap font-weight-normal mr-2">
					<input type="checkbox" name="with_claim_not_closed"  v-model="filters.with_claim_not_closed">
					With claim not closed
				</label>
			</div>
		</div>
	</div>

	@if($performer->pro->pro_type == 'ADMIN')
	<div class="sm-section">
		<div class="">
			<div class="checkbox mt-4 pt-2">
				<label class="text-nowrap font-weight-normal mr-2">
					<input type="checkbox" name="include_test_records"  v-model="filters.include_test_records">
					Incl. Test Records
				</label>
			</div>
		</div>
	</div>
	@endif


	
	<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.part_b_patients')}}')" class="btn btn-link btn-sm text-danger">Clear</a>
			</div>
		</div>
	</div>
</form>

<?php
$loadedFilters = @$filters;
$allFilterKeys = [
	'name',
	
	'status',
	'initiative',
	'insurance',
	'include_test_records',
	'with_claim_not_closed',
	'deductible',
	'deductible_value_1',
	'deductible_value_2',
	'home_address_state',
	'chart_number'
];
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-part_b_patients-filters',
				delimiters: ['@{{', '}}'],
				data: {
					filters: <?= json_encode($loadedFilters) ?>
				},
				methods: {
					init: function() {

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


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