@extends('layout.index', [
	'title' => __('lots.title'),
	'subtitle' => __('lots.demande.title'),
	'breadcrumb' => [__('lots.demande.title')]
])

@section('content')
	
	{{ Form::open(['route' => 'Hestimmo.Lots.disponibles', 'id' => 'lot-form', 'autocomplete' => 'off']) }} 
	
		<div class="row">

			<div class="col-md-offset-2 col-md-8">

				<div class="box box-info">
					<div class="box-body">

						<div class="col-xs-12 col-md-4">

							<div class="form-group">
								<select name="type_produit_id" class="form-control">
									<option>Type de produits</option>
									@foreach($type_produits as $key => $type_produit)
									<option value="{{$key}}">{{$type_produit}}</option>
									@endforeach
								</select>
							</div>

							<div class="form-group">
								<select name="type_lot_id" class="form-control">
									<option>Type de lots</option>
									@foreach($type_lots as $key => $type_lot)
									<option value="{{$key}}">{{$type_lot}}</option>
									@endforeach
								</select>
							</div>


							<div class="form-group">
								<select name="ville" id="ville" class="form-control" placeholder="Ville"></select>
							</div>

							<div class="form-group">
								<input type="number" style="width: 100%;" id="distance" name="distance" data-provide="slider" data-slider-min="0" data-slider-max="40" data-slider-step="5" >
							</div>

							<div class="form-group">
								Distance : <span id="distanceSliderVal">5</span> km
							</div>
						</div>

						<div class="col-xs-12 col-md-8">
							<div class="form-group">
								<label class="col-sm-12">Budget</label>
								<div class="col-sm-12">
									<div class="form-group">
										<input type="number" style="width: 100%;" id="budget" name="budget" data-provide="slider" data-slider-min="10000" data-slider-max="1000000" data-slider-step="10000" >
									</div>
									<div class="small-box bg-aqua">
										<div class="inner">
										  <h3 id="budgetSliderVal">10 000</h3>
										  <p>Montant +/- 5000 €</p>
										</div>
										<div class="icon">
										  <i class="fa fa-eur"></i>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>

					<div class="row text-center">
						<button type="submit" class="btn btn-info">Rechercher</button>
						<p></p>
					</div>

				</div>
			</div>
		</div>
	</form>

	@include('Hestimmo.modules.Lot.partials.list-mini')

@endsection

@include('boilerplate::load.datatables')
@include('boilerplate::load.select2')

@push('js')
<script src="/js/bootstrap-slider.min.js"></script>
<script>
	$(function () {
		var mySlider = $("input.slider").slider();

		$("#budget").on("slide", function(slideEvt) {
			$("#budgetSliderVal").text(slideEvt.value);
		});

		$("#distance").on("slide", function(slideEvt) {
			$("#distanceSliderVal").text(slideEvt.value);
		});

		$('#ville').select2({
			ajax: {
				url: "{{ route('Villes.autocomplete') }}",
				data: function (params) {
					var query = {
						search: params.term
					}

					// Query parameters will be ?search=[term]&type=public
					return query;
				}
			}
		});

	});
</script>
@endpush

@push('css')
	<link rel="stylesheet" href="/css/bootstrap-slider.min.css">
@endpush