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

{% block title %}{{ event.title }}{% endblock %}

{% block header %}
    {% embed('shared/header.html.twig') %}

        {% block breadcrumbs %}
            <span>DEG Veranstaltungen</span><span>{{ event.title }}</span>
        {% endblock %}

    {% endembed %}
{% endblock %}


{% block javascripts %}
    <script type="text/javascript" src="{{ asset('assets/js/registration-form.js') }}"></script>
{% endblock %}

{% block body %}
    <main id="main" class="main-container">

        <div class="container">

            <div class="row">

                <article id="event-{{ event.id }}" class="event event-{{ event.id }} w-100">

                    <div class="event-header">

                        <h1 class="event-title">{{ event.title }}</h1>

                    </div>

                    <div class="event-content clearfix">

                        <img src="{{ asset( event_upload_url ~ '/' ~ event.image) }}" alt=""
                             class="event-image w-50 float-md-left"/>

                        <div class="event-meta w-50 float-md-right">
                            <div class="date">
                                <span>von {{ event.startDate|date('d.m.Y H:i') }} Uhr</span>
                                <span>bis {{ event.endDate|date('d.m.Y H:i') }} Uhr</span>
                            </div>
                            <div class="place my-2">
                                {% if event.venue != null %}
                                    <b>{{ event.venue.name }}</b> <br>
                                    {{ event.venue.streetName }} <br>
                                    {{ event.venue.zipCode }} {{ event.venue.city }}
                                {% endif %}
                            </div>
                        </div>

                        <div class="event-description w-50 float-md-right">
                            {{ event.description|raw }}
                        </div>

                    </div>

                    <hr/>

                    <div class="event-registration">


                        {% if message is defined %}
                            <div class="alert alert-{{ message.type }}">
                                {{ message.text }}
                            </div>
                        {% else %}

                            {% if date() < date(event.availableUntil) %}

                                <h2 class="registration-title">Melden Sie sich jetzt zu unserer
                                    Veranstaltung {{ event.title }} an.</h2>

                                <form action="" method="post" name="registrationForm">

                                    <div class="row">

                                        <div class="col-6">

                                            <div class="row">

                                                {% if event.id == 33 %}

                                                    {# hide for only this specific event #}
                                                    <input class="form-control" id="companyName" name="companyName" type="hidden" />

                                                {% else %}

                                                    <div class="col-6 form-group">
                                                        <label
                                                            for="companyName">{{ 'form.label.companyName'|trans }}*</label>
                                                        <input class="form-control" id="companyName" name="companyName"
                                                               type="text" required/>
                                                    </div>

                                                {% endif %}


                                                <div class="col-6 form-group">
                                                    <label for="email">{{ 'form.label.email'|trans }}{{ event.id == 33 ? '' : '*' }}</label>
                                                    <input class="form-control" id="email" name="email" type="email"
                                                        {{ event.id == 33 ? '' : 'required' }}>
                                                </div>

                                                <div class="col-6 form-group">
                                                    <label
                                                        for="zipCode">{{ 'form.label.zipCode'|trans }}*</label>
                                                    <input class="form-control" id="zipCode" name="zipCode" type="text"
                                                           required/>
                                                </div>

                                                <div class="col-6 form-group">
                                                    <label for="city">{{ 'form.label.city'|trans }}</label>
                                                    <input class="form-control" id="city" name="city" type="text" required>
                                                </div>

                                                <div class="col-6 form-group">
                                                    <label for="phone">{{ 'form.label.phone'|trans }}{{ event.id == 33 ? '' : '*' }}</label>
                                                    <input class="form-control" id="phone" name="phone" type="text"
                                                        {{ event.id == 33 ? '' : 'required' }}>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="col-6">

                                            <div class="row">


                                            </div>

                                        </div>

                                    </div>

                                    <div class="new-attendees" max="{{ event.maxAttendeesNumber }}">

                                        <div class="row">
                                            <div class="col">
                                                <h2>Teilnehmer</h2>
                                            </div>
                                            <div class="col">
                                                <button class="btn btn-primary" id="addAttendeeButton" type="button">
                                                    {{ 'form.label.add'|trans }}
                                                </button>
                                                <button class="btn btn-primary" id="removeAttendeeButton" type="button">
                                                    {{ 'form.label.remove'|trans }}
                                                </button>
                                            </div>
                                        </div>
                                        <div id="attendeeFormTemplate" class="d-none">
                                            <div class="col form-group">
                                                <label for="preName">{{ 'form.label.preName'|trans }}*</label>
                                                <input id="preName" type="text" class="form-control"/>
                                            </div>

                                            <div class="col form-group">
                                                <label for="lastName">{{ 'form.label.lastName'|trans }}*</label>
                                                <input id="lastName" type="text" class="form-control"/>
                                            </div>

                                            {% if event.category is same as('Dachforum') %}
                                                <div class="col-1 form-group">
                                                    <label class="form-check-label" for="buffet">{{ 'form.label.buffet'|trans }}</label>
                                                    <input class="custom-checkbox mb-2 mr-5" id="buffet" name="buffet" value="true"
                                                           type="checkbox"/>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div id="attendeeList"></div>
                                        <div class="row">
                                            <div class="col form-group">
                                                <button type="submit"
                                                        class="btn btn-primary">{{ 'form.label.submit'|trans }}</button>
                                            </div>
                                        </div>
                                    </div>

                                </form>

                            {% else %}

                                <p>
                                    Der Anmeldeschluss für diese Veranstaltung ist leider schon vorbei. Wenn Sie die Veranstaltung dennoch besuchen möchten, melden Sie sich gerne bei uns direkt.
                                </p>

                            {% endif %}

                        {% endif %}

                    </div>

                </article>

            </div>

        </div>

    </main>
{% endblock %}