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

{% block content %}

	{% set columns = {
		name: "Név",
		age: "Életkor (év)",
		height: "Magasság (cm)",
		weight: "Testtömeg (kg)",
		feetSize: "Lábméret",
		headSize: "Fejméret",
		sport: "Sport",
		skiLevel: "Sítudás / Snowboard tudás",
		equipment: "Felszerelés",
		control: "Szülői nyilatkozat",

	} %}
	{% if canModify %}
		{% set columns = columns|merge({
			replace: "Résztvevő cseréje",
			update: "Szerkesztés",
			remove: "Törlés",
		}) %}
	{% endif %}
	{% set params = {
		columns: columns,
		rows: attendees,
		appointment: appointment,
		pagination: pagination,
	} %}

	<div class="attendeeList">
		{% embed "embed/table_page.html.twig" with params %}

			{% block header %}
				<th></th>
				{% for column in tableColumns %}
					<th>{{ column.title }}</th>
				{% endfor %}
				<th colspan="2" style="width: 100px" class="text-right text-nowrap">
					Szülői nyilatkozat<br>
					<small>Letöltés | Feltöltés</small>
				</th>
				{% if canModify %}
					<th style="width: 100px" class="text-right text-nowrap">Résztvevő cseréje</th>
					<th class="vertically-bottom">Szerkesztés</th>
					<th class="vertically-bottom">Törlés</th>
				{% endif %}
			{% endblock %}


			{% block empty %}
				<td colspan="{{ tableColumns|length + 6 }}">
					{% if form.vars['submitted'] %}
						<div class="text-center padding-20" style="font-size: 16px">
							<i class="fa fa-fw fa-frown-o"></i> Nincs találat
						</div>
					{% else %}
						<div class="d-flex flex-column justify-content-center" style="min-height: 50vh">
							<div class="text-center">
								<a href="{{ path("add_attendee", {id: appointment.id} ) }}" class="btn btn-primary">
									<i class="fa fa-fw fa-plus"></i> Új résztvevő hozzáadása
								</a>
							</div>
						</div>
					{% endif %}
				</td>
			{% endblock empty %}



			{% block row %}
				<td class="align-middle text-nowrap">
					{% if row.filled == false %}
						<i class="fa fa-exclamation-triangle text-danger fa-lg" aria-hidden="true"
						   data-toggle="tooltip" data-placement="bottom"
						   title="Töltse ki a résztvevő adatait az időpont foglaláshoz."></i>
					{% endif %}
				</td>
				{% for column in tableColumns %}
					<td class="align-middle">{{ column.getValue(row) }}</td>
				{% endfor %}
				<td class="text-right align-middle">
					<div class="btn-group">
						{% if row.parentsConsent is not null %}
							<a href="{{ path("show_parents_consent", {id: row.id}) }}"
							   class="btn btn-sm btn-danger"
							   title="Letöltés">
								<i class="fa fa-download" aria-hidden="true"></i>
							</a>
						{% endif %}
					</div>
				</td>
				<td class="text-left align-middle" style="width: 65px">
					{% if canModify or row.parentsConsent is null %}
						<button type="button"
								class="btn btn-sm btn-primary"
								data-toggle="modal"
								data-attendee-id="{{ row.id }}"
								data-target="#parentConsentModal"
								title="Feltöltés">
							<i class="fa fa-upload" aria-hidden="true"></i>
						</button>
					{% endif %}
				</td>

				{% if canModify %}
					<td class="text-center align-middle" style="width: 65px">
						<a href="{{ path('replace_attendee', {id: appointment.id, replaceAttendeeId: row.id}) }}"
						   class="btn btn-sm btn-secondary"
						   title="Résztvevő cseréje">
							<i class="fa fa-refresh" aria-hidden="true"></i>
						</a>
					</td>
					<td class="text-center align-middle" style="width: 50px">
						<a href="{{ path('update_attendee', {appointmentId: appointment.id, id: row.id}) }}"
						   class="btn btn-sm btn-outline-secondary"
						   title="Résztvevő szerkesztése">
							<i class="fa fa-edit" aria-hidden="true"></i>
						</a>
					</td>
					<td class="text-right align-middle" style="width: 65px">
						<a href="{{ path('remove_attendee', {appointmentId: appointment.id, attendeeId: row.id}) }}"
						   class="btn btn-sm btn-danger confirm-removal"
						   title="Résztvevő törlése">
							<i class="fa fa-trash-o" aria-hidden="true"></i>
						</a>
					</td>
				{% endif %}
			{% endblock %}

			{% block page_title %}
				<a href="{{ path("filter_appointments" ) }}">
					<i class="fa fa-chevron-left" aria-hidden="true"></i>
				</a>
				<h3>"{{ appointment.name }}" csoport résztvevői </h3>
				<div class="text-right">
					{% import "macro.html.twig" as macro %}
					<a href="{{ macro.teacherConsent(appointment.projectName) }}" target="_blank"
					   class="btn btn-primary mr-2">
                            <span class="title">
                                Tanári felelősségvállalási nyilatkozat
                            </span>
					</a>
					<a href="{{ macro.parentConsent(appointment.projectName) }}"
					   class="btn btn-primary"
					   target="_blank">
                            <span class="title">
                                Szülői nyilatkozat sablon
                            </span>
					</a>
				</div>
			{% endblock %}

			{% block grid_body %}
				<div class="btn-toolbar justify-content-between" style="font-size: large">
					<div class="btn-group" style="min-width: 90px">
						{% if canAdd %}
							<a href="{{ path("add_attendee", {id: appointment.id} ) }}"
							   class="btn btn-sm btn-primary">
								<i class="fa fa-fw fa-plus"></i> Új résztvevő hozzáadása
							</a>
						{% endif %}
					</div>

					<div class="font-weight-bold">
						Időpont:
						{% if appointment.bookableDate is not null %}
							{{ appointment.bookableDate }}
						{% else %}
							Kérem foglaljon
							{% if appointment.filledAttendees and appointment.valid %}
								<a href="{{ path('reserve_booking', {id: appointment.id}) }}"
								   class="btn btn-sm btn-danger text-nowrap"
								   title="Időpont foglalás">
									<i class="fa fa-fw fa-calendar" aria-hidden="true"></i>
								</a>
							{% else %}
								<button class="btn btn-sm btn-danger text-nowrap
								{{ appointment.filledAttendees == false ? "nonFilledAttendees" : "" }}
								{{ appointment.valid == false ? "invalidAppointment" : "" }}"
								        title="Időpont foglalás"
								        data-appointment-id="{{ appointment.id }}">
									<i class="fa fa-fw fa-calendar" aria-hidden="true"></i>
								</button>
							{% endif %}
						{% endif %}
					</div>
					<div class="font-weight-bold">
						{% if appointment.valid == false %}
							<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"
							   data-toggle="tooltip" data-placement="bottom"
							   title="Érvénytelen csoport létszám."></i>
						{% endif %}
						Létszám: {{ appointment.attendeePerHeadCount }}
					</div>
				</div>
				{% if appointment.isHeadCountFull and appointment.isParentConsentFull and appointment.bookableDate is not null %}
					<div class="d-flex justify-content-center">
						<div class="alert alert-success text-center">
							<div class="d-flex align-items-center justify-content-center">
								<i class="fa fa-check fa-fw fa-2x text-success" aria-hidden="true"
								   style="vertical-align: middle"></i>
								<div class="flex-grow-1 m-2">
									<p>Kedves Szervező!</p>
									A regisztráció sikeresen lezárult!<br/>
									A jelentkezéseteket elfogadtuk, várunk benneteket
									az általad foglalt időpontban!<br/>
									Köszönettel: 43ForFree csapata
								</div>
							</div>

						</div>
					</div>
				{% endif %}
				{{ parent() }}
			{% endblock %}

		{% endembed %}

		{% embed "embed/modal.html.twig" with {
			id: "parentConsentModal"
		} %}
			{% block modal_content %}
				{{ form_start(parentsConsentForm, {attr: {class: "parentsConsentForm"}}) }}
				{{ parent() }}
				{{ form_end(parentsConsentForm) }}
			{% endblock %}

			{% block modal_title %}
				Szülői nyilatkozat feltöltése
			{% endblock %}

			{% block modal_body %}

				{{ form_row(parentsConsentForm.parentsConsent, {label: "Szülői nyilatkozat", attr: {lang: "hu"}}) }}
				<div class="mt-2">Maximális fájl méret: 2Mb</div>
				<div class="mb-2">Elfogadott fájl formátum: png, pdf, jpeg</div>
				{{ form_row(parentsConsentForm.validParentsConsent, {label: "Szülői nyilatkozatot ellenőriztem", attr: {class: "validParentsConsents"}, label_attr: {class: 'checkbox-custom'}}) }}
				{{ form_row(parentsConsentForm.attendeeId, {attr: {class: "attendeeIdInput"}}) }}

			{% endblock %}

			{% block modal_footer %}
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Bezárás</button>
				<button type="submit" class="btn btn-danger">Feltöltés</button>
			{% endblock %}

		{% endembed %}
	</div>

	{% include "appointment/invalid_appointment_modal.html.twig" %}

{% endblock %}