@extends('layouts.app')

@section('content')
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="panel panel-default">
					<div class="panel-heading">Proposer un trajet</div>
					<div class="panel-body" id="driveCreation">
						@include('tooltips.error', ['errors' => $errors])
						{!! Form::open(['route' => 'drive.store']) !!}
						{{ csrf_field() }}
						<div class="form-group">
							{!! Form::label('create_drive_select_event', 'Activité', ['class' => 'control-label']) !!}
							{!! Form::select('create_drive_select_event', $events, ['class' => 'form-control']) !!}
						</div>
						<div class="form-group">
							{!! Form::label('create_drive_recurrence', 'Récurrence', ['class' => 'control-label']) !!}
							{!! Form::select('create_drive_recurrence', $driveRecurrences, 1, ['id' => 'create_drive_recurrence']) !!}
							<span data-toggle="tooltip" data-placement="right" data-html="true"
								  title="<span style='font-weight:bold'>Toute l'année</span> : Un trajet sera créé pour chaque date de l'événement. Les utilisateurs pourront choisir de participer à un des trajets, ou s'engager avec vous pour l'année entière.<br /><span style='font-weight:bold'>Occasionnel</span> : Vous choisissez pour quelle date de l'événement vous souhaitez proposer un trajet."
								  style="cursor:help;color:#1966b9;" class="glyphicon glyphicon-question-sign tooltip-group">
							</span>
						</div>
						<div class="form-group" id="group-date" style="display:none;">
							{!! Form::label('create_drive_select_event_occurrence_select', 'Date', ['class' => 'control-label']) !!}
							{!! Form::select('create_drive_select_event_occurrence_select', $eventOccurrences) !!}
							{!! Form::hidden('create_drive_select_event_occurrence', '', ['id' => 'create_drive_select_event_occurrence']) !!}
						</div>
						<div class="form-group">
							{!! Form::label('create_drive_type', 'Type de trajet', ['class' => 'control-label']) !!}
							{!! Form::select('create_drive_type', $driveTypes) !!}
						</div>
						<div class="form-group">
							{!! Form::label('create_drive_seats', 'Places disponibles', ['class' => 'control-label']) !!}
							{!! Form::select('create_drive_seats', [1=>1,2=>2,3=>3,4=>4,5=>5,6=>6,7=>7,8=>8], $seats, ['class' => 'form-control']) !!}
						</div>
						<div class="form-group">
							{!! Form::label('create_drive_address_home', 'Adresse du domicile', ['class' => 'control-label']) !!}
							{!! Form::text('create_drive_address_home', $addressHome, ['class' => 'form-control', 'disabled']) !!}
							{{--{!! Form::hidden('create_drive_address_home_id', $addressHomeId, ['id' => 'create_drive_address_home_id']) !!}--}}
						</div>
						<div class="form-group">
							{!! Form::label('create_drive_address_event', 'Adresse de l\'activité', ['class' => 'control-label']) !!}
							{!! Form::text('create_drive_address_event', $addressEvent, ['class' => 'form-control', 'disabled']) !!}
							{{--{!! Form::hidden('create_drive_address_event_id', null, ['id' => 'create_drive_address_event_id']) !!}--}}
						</div>
						<div class="text-center">
							{!! Form::submit('Créer trajet', array('class' => 'btn btn-primary', 'name' => 'create_drive')) !!}
						</div>
						{!! Form::close() !!}
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-script')
	<script type="text/javascript">

		$(document).ready(function () {
			var driveSelectEvent = $('#create_drive_select_event');
			var driveRecurrence = $('#create_drive_recurrence');
			var driveSelectEventOccurrence = $('#create_drive_select_event_occurrence_select');
			var driveSelectEventOccurrenceInput = $('#create_drive_select_event_occurrence');
			var driveType = $('#create_drive_type');
			var driveSeats = $('#create_drive_seats');

			driveSelectEvent.selectpicker({width:'auto'});
			driveRecurrence.selectpicker({width:'auto'});
			driveSelectEventOccurrence.selectpicker({width:'auto'});
			driveType.selectpicker({width:'auto'});
			driveSeats.selectpicker({width:'auto'});

			function getEventOccurrences(eventId) {
				if(eventId == null) {
					return;
				}
				var ajaxurl = '{{route("event.occurrences", ":eventId")}}';
				ajaxurl = ajaxurl.replace(':eventId', eventId);
				$.ajax({
					url: ajaxurl,
					type: 'GET',
					dataType: 'JSON',
					success: function (data) {
						driveSelectEventOccurrence.empty();
						$.each(data, function (index, occurrence) {
							driveSelectEventOccurrence.append($('<option>', {
								value: occurrence.id,
								text: occurrence.name
							}));
						});
						getEventOccurrenceAddress(driveSelectEventOccurrence.val());
						driveSelectEventOccurrence.selectpicker('refresh');
						driveSelectEventOccurrenceInput.val(driveSelectEventOccurrence.val());
					}
				});
			}

			function getEventOccurrenceAddress(eventOccurrenceId) {
				if(eventOccurrenceId == null) {
					return;
				}
				var ajaxurl = '{{route("eventOccurrence.address", ":eventOccurrenceId")}}';
				ajaxurl = ajaxurl.replace(':eventOccurrenceId', eventOccurrenceId);
				$.ajax({
					url: ajaxurl,
					type: 'GET',
					dataType: 'JSON',
					success: function (data) {
						$('#create_drive_address_event').val(data.address);
						$('#create_drive_address_event_id').val(data.id);
					}
				});
			}

			function toggleEventOccurrence(value) {
				if (value == '1') {
					$('#group-date').hide();
				} else {
					$('#group-date').show();
				}
				driveSelectEventOccurrence.selectpicker('refresh');
			}

			driveSelectEvent.on('change', function (e) {getEventOccurrences(e.target.value);});
			driveSelectEventOccurrence.on('change', function (e) {
				getEventOccurrenceAddress(e.target.value);
				driveSelectEventOccurrenceInput.val(e.target.value);
			});
			driveRecurrence.on('change', function (e) {toggleEventOccurrence(e.target.value);});

			getEventOccurrences(driveSelectEvent.val());
			toggleEventOccurrence(driveRecurrence.val());
			$('#driveCreation').show();
		});
	</script>
@endsection