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

{% block title %}Réservation de salles -{% endblock %}

{% block body %}
	<div data-controller="room-reservation-calendar room-reservation-options" data-room-reservation-calendar-reservations-value="{{ reservations }}" data-room-reservation-calendar-reservation-date-id-value="{{ form.reservationDate.vars.id }}" class="w-full md:container mx-auto px-0 md:px-4 py-8">

		<h2 class="text-4xl font-bold text-[#bd801f] mb-6 text-center title-font">
			Nos salles
		</h2>

		<section class="h-96 w-3/4 bg-white mx-auto mb-8">TODO: Présenter les salles, carousel d'images des salles et options</section>

		<h2 class="text-4xl font-bold text-[#bd801f] mb-6 text-center title-font">
			Formulaire de réservation
		</h2>

		{{ include('partials/_flash_messages.html.twig') }}

		<div class="flex flex-col lg:flex-row gap-8">
			<div class="flex-1 bg-white p-4 rounded-lg shadow">
				<div id="calendar" class="sticky top-16"></div>
			</div>

			<div class="flex-1 bg-white p-6 rounded-lg shadow">
				{{ form_start(form, {'attr': {'id': 'reservationForm', 'class': 'space-y-6'}}) }}
				{{ form_errors(form) }}

				<div class="flex flex-col md:flex-row gap-4">
					<div class="flex-1">
						{{ form_label(form.firstname, 'Prénom', {'label_attr': {'class': 'form-input-label'}}) }}
						{{ form_widget(form.firstname, {'attr': {'class': 'form-input'}}) }}
						{{ form_errors(form.firstname, {'attr': {'class': 'form-input-error'}}) }}
					</div>

					<div class="flex-1">
						{{ form_label(form.lastname, 'Nom', {'label_attr': {'class': 'form-input-label'}}) }}
						{{ form_widget(form.lastname, {'attr': {'class': 'form-input'}}) }}
						{{ form_errors(form.lastname, {'attr': {'class': 'form-input-error'}}) }}
					</div>
				</div>

				<div class="flex flex-col md:flex-row gap-4">
					<div class="flex-1">
						{{ form_label(form.email, 'Email (nécessaire si paiement par virement)', {'label_attr': {'class': 'form-input-label'}}) }}
						{{ form_widget(form.email, {'attr': {'class': 'form-input'}}) }}
						{{ form_errors(form.email, {'attr': {'class': 'form-input-error'}}) }}
					</div>

					<div class="flex-1">
						{{ form_label(form.phoneNumber, 'Téléphone', {'label_attr': {'class': 'form-input-label'}}) }}
						{{ form_widget(form.phoneNumber, {'attr': {'class': 'form-input'}}) }}
						{{ form_errors(form.phoneNumber, {'attr': {'class': 'form-input-error'}}) }}
					</div>
				</div>

				<div class="flex flex-col md:flex-row gap-4">
					<div class="flex-1">
						{{ form_label(form.reservationDate, 'Date', {'label_attr': {'class': 'form-input-label'}}) }}
						<div class="relative">
							<p id="reservationDateDisplay" class="mt-1 block w-full focus:outline-none" placeholder="Sélectionnez une date">
								<b>Sélectionnez une date dans le calendrier</b>
							</p>
							{{ form_widget(form.reservationDate, {'attr': {
								'class': 'sr-only'
							}}) }}
						</div>
					</div>

					<div class="flex-1">
						{{ form_label(form.slot, 'Créneau', {'label_attr': {'class': 'form-input-label'}}) }}
						<div class="flex flex-col gap-1 mt-1">
							{% for child in form.slot %}
								<label for="{{ child.vars.id }}" class="cursor-pointer">
									<div class="flex items-center">
										{{ form_widget(child, {'attr': {'class': 'form-radio'}}) }}
										<div class="ml-2">
											<span class="font-medium">{{ child.vars.label }}</span>
											<span class="ml-1 text-gray-600">
												({{ child.vars.attr['data-description'] }})
											</span>
										</div>
									</div>
								</label>
							{% endfor %}
						</div>
						{{ form_errors(form.slot, {'attr': {'class': 'form-input-error'}}) }}
					</div>
				</div>

				<div>
					{{ form_label(form.rooms, 'Salles', {'label_attr': {'class': 'form-input-label mb-2'}}) }}
					<div class="flex flex-col gap-2">
						{% for child in form.rooms %}
							<div class="flex flex-col">
								<label for="{{ child.vars.id }}" class="cursor-pointer">
									<div class="flex items-center">
										{{ form_widget(child, {
											'attr': {
												'class': 'form-radio',
												'data-room-reservation-options-target': 'room',
												'data-options': child.vars.attr['data-options']|default('[]'),
												'data-price': child.vars.attr['data-price']
											}
										}) }}
										<div class="ml-2">
											<span class="font-medium">{{ child.vars.label }}</span>
											<span class="ml-1 text-gray-600">({{ child.vars.attr['data-price'] }}
												€)</span>
										</div>
									</div>
									<div class="ml-6 text-sm text-gray-500">
										{{ child.vars.attr['data-description'] }}
									</div>
								</label>
							</div>
						{% endfor %}
					</div>
					{{ form_errors(form.rooms, {'attr': {'class': 'form-input-error'}}) }}
					<p class="italic">-100 € si réservation des deux salles</p>
				</div>

				<div class="mt-6">
					{{ form_label(form.roomOptions, 'Options', {'label_attr': {'class': 'form-input-label mb-2'}}) }}
					<div class="flex flex-col gap-2">
						{% for child in form.roomOptions %}
							<div class="flex flex-col">
								<label for="{{ child.vars.id }}" class="">
									<div class="flex items-center">
										{{ form_widget(child, {
											'attr': {
												'class': 'form-radio',
												'data-room-reservation-options-target': 'option',
												'data-price': child.vars.attr['data-price']
											}
										}) }}
										<div class="ml-2">
											<span class="font-medium">{{ child.vars.label }}</span>
											<span class="ml-1 text-gray-600">({{ child.vars.attr['data-price'] }}
												€)</span>
										</div>
									</div>
									<div class="ml-6 text-sm text-gray-500">
										{{ child.vars.attr['data-description'] }}
									</div>
								</label>
							</div>
						{% endfor %}
					</div>
					{{ form_errors(form.roomOptions, {'attr': {'class': 'form-input-error'}}) }}
				</div>

				<div>
					<p class="form-input-label">Prix</p>
					<p class="font-bold" id="totalPrice"></p>
					<p class="italic">+100 € par heure supplémentaire</p>
				</div>

				<div>
					<p class="form-input-label">Informations</p>
					<p>- La demande de réservation doit être acceptée pour procéder au paiement</p>
					<p>- Le paiement se fait sur place ou par virement</p>
					<p>- La réservation n'est effective qu'après le paiement</p>
				</div>

				<button type="submit" class="form-send-btn">
					Envoyer la demande de réservation
				</button>
				{{ form_end(form) }}
			</div>
		</div>
	</div>
{% endblock %}