{% extends 'base.html.twig' %}

{% block title %}Réservation
	{{ annonce.titre }}
{% endblock %}

{% block stylesheet %}

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css"/>
{% endblock %}

{% block body %}
	<div class="container">
		<h1 class="my-4">Réservez pour l'annonce :
			<em>{{ annonce.titre }}</em>
		</h1>

		<p class="my-4">Vous êtes sur le point de réserver chez de
			<strong>{{ annonce.host.user.nom }} {{ annonce.host.user.prenom }}</strong>
		</p>

		{{ form_start(form) }}
		<div class="alert alert-light">
			<h2 class="h4">Date du séjour :</h2>
			<div class="row">
				<div class="col my-4 ">
					{{form_row(form.startAt)}}
				</div>
				<div class="col my-4">
					{{form_row(form.endAt)}}
				</div>
			</div>
			<h4 class="my-4">Montant du séjour :
				<span id="amount">...</span>
				DA</h4>
			<span id="nights">0</span>
			nuit(s) à
			{{ annonce.price }} DA par nuit
			<div class="row">
				<div class="col-md-3">
					<div class="form-group">
						{{ form_label(form.adults, 'Adultes', {'label_attr': {'for': 'adults'}}) }}
						<div class="input-group">
							{{ form_widget(form.adults, { 'attr': {'min': 0, 'max': 9, 'class': 'form-control', 'type': 'number', 'id': 'adults'} }) }}
						</div>
						{{ form_errors(form.adults) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="form-group">
						{{ form_label(form.children, 'Enfants') }}
						<div class="input-group">
							{{ form_widget(form.children, { 'attr': {'min': 0, 'max': 9, 'class': 'form-control', 'type': 'number', 'id': 'form_children'} }) }}
						</div>
						{{ form_errors(form.children) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="form-group">
						{{ form_label(form.infants, 'Nourrissons') }}
						<div class="input-group">
							{{ form_widget(form.infants, { 'attr': {'min': 0, 'max': 9, 'class': 'form-control', 'type': 'number', 'id': 'form_infants'} }) }}
						</div>
						{{ form_errors(form.infants) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="form-group">
						{{ form_label(form.pets, 'Animaux domestiques') }}
						<div class="input-group">
							{{ form_widget(form.pets, { 'attr': {'min': 0, 'max': 9, 'class': 'form-control btn-outline-secondary', 'type': 'number', 'id': 'form_pets'} }) }}
						</div>
						{{ form_errors(form.pets) }}
					</div>
				</div>	
			</div>		
			<h4 class="my-4">Laisser un commentaire :</h4>
			{{ form_row(form.comment) }}
		</div>

		<button type="submit" class="btn btn-success my-4">Je réserve !</button>
		<br><br>
		{{form_end(form)}}

	</div>
{% endblock %}

{% block javascripts %}

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
	<script>
		$(document).ready(function () {
			$('#reservation_startAt, #reservation_endAt').datepicker({
				format: 'dd/mm/yyyy',
				datesDisabled: 
					[{% for day in annonce.notAvailableDays %}
					"{{ day.format('d/m/Y') }}",
					{% endfor %}
				],
				startDate: new Date()
			});

			$('#reservation_startAt, #reservation_endAt').on('change', calculateAmount);
			});

			function calculateAmount() { 
				const endAt = new Date($('#reservation_endAt').val().replace(/(\d+)\/(\d+)\/(\d{4})/, '$3-$2-$1'));

				const startAt = new Date($('#reservation_startAt').val().replace(/(\d+)\/(\d+)\/(\d{4})/, '$3-$2-$1'));

				if (startAt && endAt && startAt < endAt) {
					const DAY_TIME = 24 * 60 * 60 * 1000;

					const interval = endAt.getTime() - startAt.getTime();
					const days = interval / DAY_TIME;
					const amount = days * {{ annonce.price }};

					$('#nights').text(days);
					$('#amount').text(amount.toLocaleString('fr-FR'));
				}
			}
	</script>
	<script>
		function incrementValue(fieldId) {
			var field = document.getElementById('increment_adults').val();
			console.log(field)
			var value = parseInt(field.value, 10);
			value = isNaN(value) ? 0 : value;
			if (value < field.getAttribute('max')) {
				field.value = value + 1;
			}
		}

		function decrementValue(fieldId) {
			var field = document.getElementById('adults');
			var value = parseInt(field.value, 10);
			value = isNaN(value) ? 0 : value;
			if (value > field.getAttribute('min')) {
				field.value = value - 1;
			}
		}
	</script>
{% endblock %}