{{-- UI de filtros de métricas --}}
@section('styles')
	@parent
@endsection

@section('scripts')
	@parent
	@vite(['resources/js/common-filters.js'])
@endsection


<div class="card shadow mb-3 bg-light">
	<a href="#filterBox" class="d-block bg-info card-header pt-2 pb-3 " data-toggle="collapse" role="button" aria-expanded="true" aria-controls="filterBox">
		<h6 class="pt-1 m-0 font-weight-bold text-white">
			<i class="fas fa-filter"></i>&nbsp;Filtrar Casos
		</h6>
	</a>
	<div class="collapse show" id="filterBox">

		<div class="card-body pt-2 input-group input-group-sm">

			<div class="col-sm-6 col-md-4 col-xl-2 mt-1">
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm">Período</label>
				<div class="col-12 p-0 ">
					{!! Form::select('when', $when, $filters['when'] ?? 1, ['class' => 'form-control','id'=>'fieldWhen']) !!}
				</div>
			</div>

			<div id='divOtherPeriodStart' class="col-sm-6 col-md-4 col-xl-3 my-1" style="display: none;"> 
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm" >Data início</label>
				<div class="col-12 p-0">
					{!! Form::date("date_start", $filters['date_start'], 
							['class' => "form-control-sm bg-white", 'id'=> 'datePickerStart', 'max' => \Carbon\Carbon::now()->format('Y-m-d')]) !!}
				</div>
			</div>
			<div id='divOtherPeriodEnd' class="col-sm-6 col-md-4  col-xl-3 my-1" style="display: none;">
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm" >Data fim</label>
				<div class="col-12 p-0">
					{!! Form::date("date_end", $filters['date_end'], 
							['class' => "form-control-sm bg-white", 'id'=> 'datePickerEnd', 'max' => \Carbon\Carbon::now()->addDay()->format('Y-m-d')]) !!}
				</div>
			</div>

			<div class="col-sm-6 col-md-4 col-xl-2 mt-1" >
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm">Onde</label>
				<div class="col-12 p-0 ">
					{!! Form::select('where', $where, $filters['where'] ?? 'All', ['class' => 'form-control','id'=>'fieldWhere']) !!}
				</div>
			</div>

			<div id="regionSelect" class="col-sm-12 col-md-4 col-xl-2 mt-1" style="display: none;">
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm">Região</label>
				<div class="col-12 p-0 ">
					{!! Form::select('region', $regions, $filters['region'] ?? 0, ['class' => 'form-control']) !!}
				</div>
			</div>

			<div id="citySelect" class="col-sm-12 col-md-4 col-xl-2 mt-1" style="display: none;">
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm">Cidade</label>
				<div class="col-12 p-0 ">
					{!! Form::select('city', $cities, $filters['city'] ?? 0, ['class' => 'form-control']) !!}
				</div>
			</div>

			<div id="hospitalSelect" class="col-sm-12 col-md-4 col-xl-2 mt-1" style="display: none;">
				<label for="" class="col-12 p-0 mb-0 col-form-label-sm">Hospital</label>
				<div class="col-12 p-0 ">
					{!! Form::select('hospital', $hospitals, $filters['hospital'] ?? 0, ['class' => 'form-control']) !!}
				</div>
			</div>

			<div class="col-auto mt-3 pr-0 row justify-content-end">
				<label for="" class="col-12 p-0 mb-2 col-form-label-sm"> </label>
				<button type="submit" class="btn btn-sm btn-info btn-icon-split pr-1 mt-1 ml-2">
					<span class="icon text-white-50">
						<i class="fas fa-filter"></i>
					</span>
					<span class="text">Filtrar</span>
				</button>
			</div>
		</div>
	</div>
</div>