{% extends "@ibexadesign/pagelayout.html.twig" %}
{# this form theme will be applied only to the form of this template #}
{% form_theme form with [
    '@ibexadesign/zuk_form_field.html.twig',
_self
] %}

{# ... #}

 {% if event %}
     {% set title = "Anmeldung für Veranstaltung " ~event.Title %}
     {% set description = event.Description|striptags|u.truncate(150, '...', false) %}
 {% else %}
     {% set title = 'zuk.event.eventNotFoundTitle'|trans %}
 {% endif %}
{% block headerimage %}
    <div class="image-wrapper">
        <picture>
            {% include '@ibexadesign/events/_event_headerimage.html.twig' %}
        </picture>
    </div>
    <div class="text-wrapper mw-default text-white">
        <h2 class="text-white">{% if event %}{{ 'zuk.event.registerHeadlineOnImage'|trans({'%1':event.Title}) }}{% else %}{{ 'zuk.event.eventNotFoundH1'|trans }}{% endif %}</h2>
    </div>
{% endblock %}
{% block content %}
    {% if event %}
        {% set beginday = eventParseDateTime(event.Begin) %}
        {% set endday = eventParseDateTime(event.End) %}
        {% set begintime = eventParseDateTime(event.Begin,2) %}
        {% set endtime = eventParseDateTime(event.End,2) %}
<div class="ce-event m-default">
    <h1 class="mw-default text-center mt-5">
        {{ 'zuk.event.registerHeadline'|trans({'%1':event.Title}) }}
    </h1>
    <div class="mw-lg-default">
        <p>{{'zuk.event.registerInfoTextChildOrFamily'|trans}}</p>
        <div class="row g-2 g-md-4 g-xl-5 justify-content-between">
            {# app/Resources/views/default/new.html.twig #}
            {{ form_start(form) }}
            <fieldset>
                <legend>{{'zuk.event.registerErziehungbereichter'|trans}}</legend>
                <div class="row g-2">
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.salutation) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.surname) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.lastname) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.street) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.zipcode) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.city) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.country) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.birthdate) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.telprivate) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.email) }}
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="participants"  data-prototype="{{ form_widget(form.participants.vars.prototype)|e('html_attr') }}">
                <legend>{{ 'zuk.event.registerTeilnehmer'|trans }}</legend>
                <p>{{ 'zuk.event.registerPersonalInformationPeopleSubInfo'|trans }}</p>
            </fieldset>
            <fieldset>
                <legend>{{ 'zuk.event.registerInformationEvent'|trans }}</legend>
                <div class="row g-2">
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ 'zuk.event.registerMeals'|trans }}
                            {{ form_row(form.verpflegung_vegetarisch) }}
                            {{ form_row(form.verpflegung_schweinefleischlos) }}
                            {{ form_row(form.verpflegung_diabetiker) }}
                            {{ form_row(form.verpflegung_allergiker) }}
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="mb-3">
                            {{ form_row(form.verpflegung_allergiker_text) }}
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="mb-3">
                        {{ form_row(form.uebernachtungerwunscht) }}
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="mb-3">
                        {{ 'zuk.event.registerReference'|trans }}
                        {{ form_row(form.reference_friends) }}
                        {{ form_row(form.reference_socialmedia) }}
                        {{ form_row(form.reference_internet) }}
                        {{ form_row(form.reference_newpaper) }}
                        {{ form_row(form.reference_radio) }}
                        {{ form_row(form.reference_tv) }}
                    </div>
                </div>

            </fieldset>
            <fieldset>
                <legend>
                    {{ 'zuk.event.registerMessage'|trans }}
                </legend>
                <div class="row g-2">
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.importantComment) }}
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    {{ 'zuk.event.registerDatenschutz'|trans }}
                </legend>
                <div class="row g-2">
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.allow_image) }}
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.checkbox_storno) }}
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.checkbox_datenverarbeitung) }}
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.checkbox_datenschutz) }}
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3">
                            {{ form_row(form.checkbox_marketing) }}
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="d-none">{{ form_row(form.participants) }}</div>
            <script type="text/javascript">
                /**
                 * The callback function executed
                 * once all the Google dependencies have loaded
                 */
                function onGoogleReCaptchaApiLoad() {
                    var widgets = document.querySelectorAll('[data-toggle="recaptcha"]');
                    for (var i = 0; i < widgets.length; i++) {
                        renderReCaptcha(widgets[i]);
                    }
                }
            </script>
            <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>

            <script type="text/javascript">
                /**
                 * Render the given widget as a reCAPTCHA
                 * from the data-type attribute
                 */
                function renderReCaptcha(widget) {
                    var form = widget.closest('form');
                    var widgetType = widget.getAttribute('data-type');
                    var widgetAction = widget.getAttribute('data-action');
                    var widgetParameters = {
                        'sitekey': widget.getAttribute('data-site-key'),
                        'size': widget.getAttribute('data-size'),
                        'theme': widget.getAttribute('data-theme'),
                    };

                    if (widgetType == 'invisible') {
                        widgetParameters['callback'] = function () {
                            form.submit()
                        };
                        widgetParameters['size'] = "invisible";
                    }

                    var widgetId = grecaptcha.render(widget, widgetParameters);
                    console.log(widgetAction);
                    if (widgetType == 'invisible') {
                        bindChallengeToSubmitButtons(form, widgetId, widgetAction);
                    }
                }

                /**
                 * Prevent the submit buttons from submitting a form
                 * and invoke the challenge for the given captcha id
                 */
                function bindChallengeToSubmitButtons(form, reCaptchaId, action) {
                    getSubmitButtons(form).forEach(function (button) {
                        button.addEventListener('click', function (e) {
                            if (!e.target.form.checkValidity()) {
                                return;
                            }
                            e.preventDefault();
                            console.log(action);
                            if (action) {
                                grecaptcha.execute(reCaptchaId, {action: action});
                            } else {
                                grecaptcha.execute(reCaptchaId);
                            }
                        });
                    });
                }

                /**
                 * Get the submit buttons from the given form
                 */
                function getSubmitButtons(form) {
                    var buttons = form.querySelectorAll('button, input');
                    var submitButtons = [];

                    for (var i= 0; i < buttons.length; i++) {
                        var button = buttons[i];
                        if (button.getAttribute('type') == 'submit') {
                            submitButtons.push(button);
                        }
                    }

                    return submitButtons;
                }
            </script>

            <div id="" data-toggle="recaptcha" data-action="Register_Event" data-type="invisible" data-size="normal" data-theme="light" data-site-key="6LdT2J8kAAAAALNFuiMzTpnZljbingp8JApWrXfS">
            </div>
            {{ form_end(form) }}
            <!-- Veranstaltungstext -->
        </div>
        <div class="row g-2 g-md-4 g-xl-5 justify-content-between mt-5">
            <div class="col-12 col-md-7">
                <p>{{ event.Description|nl2br }}</p>
            </div>
            {% include '@ibexadesign/events/_event_content.html.twig' %}
        </div>
        <div class="m-default text-center">
            <a href="{{ path( "ibexa.url.alias", {"locationId": 52349 } ) }}" class="btn btn-primary">{{ 'zuk.event.all'|trans }}</a>
        </div>

    </div>
    <div class="ce-contactboxes m-default">
        <h2 class="mw-default text-center">
            {{ 'zuk.event.detailKontaktHeadline'|trans }}
        </h2>
        <div class="cards-wrapper mw-lg-default">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 g-md-4 justify-content-center">
                {% if event.addionalInformations and not ibexa_field_is_empty( event.addionalInformations, 'contactlist' ) %}
                    {% for contentId in ibexa_field_value(event.addionalInformations,"contactlist").destinationContentIds %}
                        {% if isValidContentId(contentId) %}
                            {{ render( controller( "ibexa_content:viewAction", {'contentId': contentId, 'viewType': 'embed', "params": { 'minimalMarkup': true}} ) ) }}
                        {% endif %}
                    {% endfor %}
                {% else %}
                    {% if isValidContentId(52500) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': 52500, 'viewType': 'embed', "params": { 'minimalMarkup': true}} ) ) }}
                    {% endif %}
                    {% if isValidContentId(52502) %}
                        {{ render( controller( "ibexa_content:viewAction", {'contentId': 52502, 'viewType': 'embed', "params": { 'minimalMarkup': true}} ) ) }}
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
        {{ encore_entry_script_tags('zukregisterevents') }}
</div>
    {% endif %}
    {% endblock %}

{% block _seminar_register_group_participants_entry_widget %}
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.salutation) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.surname) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.lastname) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.street) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.zipcode) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.city) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.birthdate) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.telprivate) }}
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="mb-3">
            {{ form_row(form.email) }}
        </div>
    </div>
{% endblock %}