{% extends "pretixpresale/event/checkout_base.html" %}
{% load i18n %}
{% load icon %}
{% load bootstrap3 %}
{% load rich_text %}
{% load lists %}
{% load escapejson %}
{% block inner %}
    <p>{% trans "Before we continue, we need you to answer some questions." %}</p>
    {% if profiles_data %}
        {{ profiles_data|json_script:"profiles_json" }}
    {% endif %}
    <form class="form-horizontal" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="panel-group" id="questions_group">
            <details class="panel panel-default" open>
                <summary class="panel-heading">
                    <h3 class="panel-title">
                        <strong>{% trans "Contact information" %}</strong>
                    </h3>
                </summary>
                <div id="contact">
                    <div class="panel-body">
                        {% bootstrap_form contact_form layout="checkout" %}
                        {% if not invoice_address_asked and event.settings.invoice_name_required %}
                            {% bootstrap_form invoice_form layout="checkout" %}
                        {% endif %}
                    </div>
                </div>
            </details>
            {% if invoice_address_asked %}
                <details class="panel panel-default" {% if invoice_address_open %}open{% endif %} id="invoice-details">
                    <summary class="panel-heading">
                        <h3 class="panel-title">
                            <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
                                {% trans "(optional)" %}
                            {% endif %}</strong>
                        </h3>
                    </summary>
                    {% if addresses_data %}
                        {{ addresses_data|json_script:"addresses_json" }}
                    {% endif %}
                    <div id="invoice" class="profile-scope"
                         data-profiles-id="addresses_json"
                         data-address-information-url="{% url "js_helpers.address_form" %}?invoice=true&amp;organizer={{ event.organizer.slug|urlencode }}&amp;event={{ event.slug|urlencode }}&amp;locale={{ request.LANGUAGE_CODE }}">
                        <div class="panel-body">
                            {% if addresses_data %}
                                <div class="form-group profile-select-container js-do-not-copy-answers">
                                    <label class="col-md-3 control-label" for="address-list-select">{% trans "Auto-fill with address" %}</label>
                                    <div class="col-md-9">
                                        <p class="profile-select-control">
                                            <select class="profile-select form-control" id="address-list-select"></select>
                                        </p>
                                        <p class="help-block profile-desc" id="selected-address-desc"></p>
                                        <p><button type="button" class="profile-apply btn btn-default" aria-describedby="selected-address-desc"
                                            ><i class="fa fa-address-card-o fa-lg" aria-hidden="true"></i>&nbsp; {% trans "Fill form" %}</button>
                                        </p>
                                    </div>
                                </div>
                            {% endif %}
                            {% if event.settings.invoice_address_explanation_text %}
                                <div>
                                    {{ event.settings.invoice_address_explanation_text|rich_text }}
                                </div>
                            {% endif %}
                            {% bootstrap_form invoice_form layout="checkout" %}
                        </div>
                    </div>
                </details>
            {% endif %}

            {% for pos, forms in formgroups %}
                <details class="panel panel-default" open>
                    <summary class="panel-heading">
                        <h3 class="panel-title">
                            <strong>{{ pos.item.name }}
                            {% if pos.variation %}
                                – {{ pos.variation }}
                            {% endif %}</strong>
                        </h3>
                    </summary>
                    <div>
                        <div class="panel-body questions-form" data-address-information-url="{% url "js_helpers.address_form" %}">
                            {% if event.settings.attendee_data_explanation_text and pos.item.ask_attendee_data %}
                                {{ event.settings.attendee_data_explanation_text|rich_text }}
                            {% endif %}
                            {% if forloop.counter > 1 and event.settings.checkout_show_copy_answers_button %}
                                <div class="form-group">
                                    <div class="col-md-9 col-md-offset-3">
                                        <button type="button" data-id="{{ forloop.counter0 }}" name="copy"
                                            class="js-copy-answers btn btn-default btn-sm">
                                                {% icon "files-o" %}
                                                {% trans "Copy answers from above" %}
                                            </button>
                                    </div>
                                </div>
                            {% endif %}
                            {% if pos.seat %}
                                <div class="form-group">
                                    <div class="col-md-3 control-label">
                                        <strong role="heading" aria-level="4">{% trans "Seat" %}</strong>
                                    </div>
                                    <div class="col-md-9 form-control-text">
                                        {% include "icons/seat.svg" with cls="svg-icon" %}
                                        {{ pos.seat }}
                                    </div>
                                </div>
                            {% endif %}
                            {% if pos.addons_without_bundled %}
                                <div class="form-group">
                                    <div class="col-md-3 control-label">
                                        <strong role="heading" aria-level="4">{% trans "Selected add-ons" %}</strong>
                                    </div>
                                    <div class="col-md-9 form-control-text">
                                        <ul class="addon-list">
                                            {% regroup pos.addons_without_bundled by item_and_variation as addons_by_itemvar %}
                                            {% for group in addons_by_itemvar %}
                                                <li>{% if group.list|length > 1 %}{{ group.list|length }}&times; {% endif %}{{ group.grouper.0.name }}{% if group.grouper.1 %} – {{ group.grouper.1.value }}{% endif %}</li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                            {% if pos.subevent %}
                                <div class="form-group">
                                    <div class="col-md-3 control-label">
                                        <strong role="heading" aria-level="4">{% trans "Date" context "subevent" %}</strong>
                                    </div>
                                    <div class="col-md-9 form-control-text">
                                        <p class="addon-list">
                                            {{ pos.subevent.name }} &middot; {{ pos.subevent.get_date_range_display_with_times_as_html }}
                                        </p>
                                    </div>
                                </div>
                            {% endif %}
                            <fieldset>
                                <legend class="sr-only">{{ pos.item.name }}{% if pos.variation %} – {{ pos.variation }}{% endif %}</legend>
                            {% for form in forms %}
                                {% if form.pos.item != pos.item %}
                                </fieldset>
                                <fieldset>
                                    {# Add-Ons #}
                                    <legend{% if profiles_data %} class="profile-add-on-legend"{% endif %}>
                                        + {{ form.pos.item.name }}{% if form.pos.variation %} – {{ form.pos.variation.value }}{% endif %}
                                    </legend>
                                {% endif %}
                                <div data-idx="{{ forloop.parentloop.counter0 }}" data-addonidx="{{ forloop.counter0 }}" class="profile-scope{% if form.pos.item != pos.item %}{% if profiles_data %} profile-add-on{% endif %}{% endif %}">
                                    {% if profiles_data %}
                                    <div class="form-group profile-select-container js-do-not-copy-answers">
                                        <label class="col-md-3 control-label" for="profile-select-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}">{% trans "Auto-fill with profile" %}</label>
                                        <div class="col-md-9">
                                            <p class="profile-select-control">
                                                <select class="profile-select form-control" id="profile-select-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"></select>
                                            </p>
                                            <p class="help-block profile-desc" id="selected-profile-desc-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"></p>
                                            <p>
                                                <button type="button" class="profile-apply btn btn-default"
                                                    aria-describedby="selected-profile-desc-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"
                                                ><i class="fa fa-address-card-o fa-lg" aria-hidden="true"></i>&nbsp; {% trans "Fill form" %}</button>
                                            </p>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if form.show_copy_answers_to_addon_button and event.settings.checkout_show_copy_answers_button %}
                                    <div class="form-group">
                                        <div class="col-md-9 col-md-offset-3">
                                            <button type="button" data-id="{{ forloop.parentloop.counter0 }}" data-addonid="{{ forloop.counter0 }}" name="copy" class="js-copy-answers-addon btn btn-default btn-sm">
                                                {% icon "files-o" %}
                                                {% trans "Copy answers from above" %}
                                            </button>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% bootstrap_form form layout="checkout" %}
                                </div>
                            </fieldset>
                            {% endfor %}
                        </div>
                    </div>
                </details>
            {% endfor %}
        </div>
        <div class="row checkout-button-row">
            <div class="col-md-4 col-sm-6">
                <a class="btn btn-block btn-default btn-lg"
                        href="{{ prev_url }}">
                    {% trans "Go back" %}
                </a>
            </div>
            <div class="col-md-4 col-md-offset-4 col-sm-6">
                <button class="btn btn-block btn-primary btn-lg" type="submit">
                    {% trans "Continue" %}
                </button>
            </div>
            <div class="clearfix"></div>
        </div>
    </form>
{% endblock %}
