{% extends "layout.html.twig" %}

{% block content %}
	{% embed "embed/grid_page.html.twig" %}

		{% block page_title %}
			<a href="{{ path("filter_appointments" ) }}">
				<i class="fa fa-chevron-left" aria-hidden="true"></i>
			</a>
			<div class="d-flex flex-grow-1 align-items-center justify-content-md-between flex-wrap flex-md-nowrap">
				<h3>Időpont foglalás {{ ("project." ~ projectName)|trans }} programra</h3>
				<div class="grid simple mb-0">
					<div class="grid-body">
						{% if projectName in openings|keys %}
							<b>
								Nyitvatartás:
								{% for opening in openings[projectName] %}
									<span class="text-nowrap">{{ opening.from }} - {{ opening.to }} {{ opening.info is defined ? "(%s)"|format(opening.info) : "" }}</span>{% if loop.last == false %} | {% endif %}
								{% endfor %}
							</b>
						{% endif %}
					</div>
				</div>
			</div>
		{% endblock %}

		{% block grid_body %}
			<div>
				<div class="row">
					<div class="col-sm-6">
						{% if canChangeBookedDate %}
							<a href="{{ path('subscribe_dates',{id: app.request.attributes.get('id')}) }}"
							   class="btn btn-sm btn-danger text-nowrap"
							   title="Várólistás jelentkezés">
								<i class="fa fa-fw fa-calendar" aria-hidden="true"></i>
								Várólistás jelentkezés
							</a>
						{% else %}
							<button type="button" class="btn btn-sm btn-danger disabled" title="Várólistás jelentkezés">
								<i class="fa fa-fw fa-calendar" aria-hidden="true"></i>
								Várólistás jelentkezés
							</button>
						{% endif %}
					</div>
					<div class="col-sm-6 text-right">
						{% if bookedDate is defined and bookedDate %}
							{% if canChangeBookedDate %}
								<button type="button" class="btn btn-sm btn-danger" data-toggle="modal"
										data-target="#removeConfirm">Foglalás törlése</button>
							{% else %}
								<button type="button" class="btn btn-sm btn-danger disabled">Foglalás törlése</button>
							{% endif %}
						{% endif %}
					</div>
				</div>
			</div>
			<div class="reserveBooking reserve-booking"
				 data-calendar="{{ path('show_booking_calendar',{id: app.request.attributes.get('id')}) }}">
				{{ form_errors(form) }}

				{% if canChangeBookedDate == false %}
					<span class="alert alert-info d-block mt-2">
						<span class="d-block">
							<span class="form-error-icon badge badge-info text-uppercase">Figyelem</span>
							<span class="form-error-message">
								A foglalt időpont az érkezéstől számított {{ freezingHours }} napon belül már nem módosítható!
							</span>
						</span>
					</span>
				{% endif %}

				{% if cannotResolveBooking is defined %}
					<span class="alert alert-danger d-block mt-2">
						<span class="d-block">
							<span class="form-error-icon badge badge-danger text-uppercase">Hiba</span>
							<span class="form-error-message">
								A kiválasztott időpont időközben elérhetetlenné vált. Válasszon másik időpontott.
							</span>
						</span>
					</span>
				{% endif %}

				{% if missingBookingDateId is defined %}
					<span class="alert alert-danger d-block mt-2">
						<span class="d-block">
							<span class="form-error-icon badge badge-danger text-uppercase">Hiba</span>
							<span class="form-error-message">
								Nincs kiválasztva időpont, a foglalás nem menthető!
							</span>
						</span>
					</span>
				{% endif %}

				<div class="calendar">
					<i class="fa fa-spinner fa-pulse fa-4x fa-fw loader"></i>
				</div>
				{{ form_start(form,{attr: {class: "reserveForm"}}) }}
				{{ form_widget(form.bookingDateId, {type: "hidden", attr: {class: "bookingTimeIdSelect"}}) }}
				{% if canChangeBookedDate %}
					<button type="submit"
							class="btn btn-danger btn-block btn-lg reserve-button reserveButton">Foglalás mentése</button>
				{% else %}
					<button type="button"
							class="btn btn-danger btn-block btn-lg reserve-button disabled">Foglalás mentése</button>
				{% endif %}
				{% embed "embed/modal.html.twig" with {
					id: "reserveConfirm"
				} %}
					{% block modal_title %}
						Foglalás rögzítés
					{% endblock %}

					{% block modal_body %}
						<p class="text-center">Tisztelt Szervező!</p>
						<p class="text-center">A programjainkon csak azok a gyerekek vehetnek részt, akik rendelkeznek szülői hozzájárulással!</p>
						<p class="text-center">Kérjük, hogy amennyiben a program időpontjától számított 5 napon belül foglalsz, a szülői felelősségvállalási nyilatkozatokat a foglalt időpont előtt legkésőbb két nappal töltsd fel a regisztrációs rendszerünkbe!</p>
						<p class="text-center">Ha erre az idő rövidsége miatt nincs mód, kérjük, hogy a dokumentumokat mindenképp hozzátok magatokkal kinyomtatva!</p>
					{% endblock %}

					{% block modal_footer %}
						<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Mégsem foglalok</button>
						<button type="submit" class="btn btn-danger">Elfogadom és rögzítem a foglalást</button>
					{% endblock %}

				{% endembed %}
				{{ form_end(form) }}
			</div>
			{% embed "embed/modal.html.twig" with {
				id: "removeConfirm"
			} %}
				{% block modal_title %}
					Foglalás törlés
				{% endblock %}

				{% block modal_body %}
					<p>Felhívjuk figyelmed, hogy a foglalás törlésével az időpont felszabadul, az bárki által
						foglalhatóvá válik!</p>
					<p>Tájékoztatunk továbbá, hogy amennyiben a kérdéses időpontra van érvényes várólistás
						időpontfoglalás, abban az esetben az időpont automatikusan lefoglalásra kerül, a továbbiakban
						nem foglalható!</p>
					<br>
					<p>A foglalás törlésével a csoport nem kerül törlése, a regisztrált adatokat továbbra is
						megőrizzük.</p>
				{% endblock %}

				{% block modal_footer %}
					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Mégsem</button>
					<a href="{{ path('reserve_booking_remove',{id: app.request.attributes.get('id')}) }}"
					   class="btn btn-danger btn-sm removeBooking">Elfogadom és törlöm a foglalást</a>
				{% endblock %}

			{% endembed %}
		{% endblock %}

	{% endembed %}

{% endblock %}