{% extends 'base.html' %}

{% load bootstrap3 %}
{% load modal_tags %}

{% block eventtab %} class="active"{% endblock %}

{% block css %}
  {{ block.super }}
  {{ form.media.css }}
{% endblock %}

{% block content %}

  <div class="page-header">
    <h1>
      {{ event.name }} – {{ ticket.name }}
    </h1>
  </div>

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-primary">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                 aria-expanded="{% if user_have_registration %}true{% else %}false{% endif %}"
                 aria-controls="collapseOne">
                Acheter une place à titre personnel
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse {% if user_have_registration %}in{% endif %}"
               role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              {% if user_have_registration %}
                <div class="panel-body text-center">
                  <em>Vous possédez déjà une place pour cet évènement.<br></em>
                </div>
                <div class="panel-body text-center">
                  <a href={% url 'show-registration' user_registration_id %} class="btn btn-success">Ma place</a>
                </div>
              {% else %}
                <div class="panel-body">
                  {% if ticket.long_notes %}
                    <p><h4>Description du billet : </h4> {{ ticket.long_notes }}</p>
                  {% elif ticket.short_notes %}
                    <p><h4>Description du billet : </h4> {{ ticket.short_notes }}</p>
                  {% endif %}
                  <p><h4>Prix de base du billet : </h4>{{ ticket.price }}€</p>
                  <h4>Options :</h4>
                  <form action="{% url 'purchase-ticket' event.short_url ticket.id %}?payee=oneself" method="post"
                        role="form">
                    {% csrf_token %}
                    {% bootstrap_form options_form show_label=False %}
                    {% for f in options_exclusive_form %}
                      {% for field in f %}
                        <label class="control-label" for="{{ field.name }}" data-toggle="popover" data-trigger="hover"
                               data-content="{{ field.label.description }}">
                          {{ field.label.label }}{% if field.label.description %}
                            <span class="glyphicon glyphicon-question-sign"></span>{% endif %}</label>
                        {% bootstrap_field field show_label=False %}
                      {% endfor %}
                    {% endfor %}
                    {% if info_sup %}
                      <p><h4>Les informations suivantes devront être fournies :</h4>
                      <ul>
                        {% for info in info_sup %}
                          <li><span class="control-label" data-toggle="popover" data-trigger="hover"
                                    data-content="{{ info.description }}">{{ info.name }}{% if info.description %}
                            <span class="glyphicon glyphicon-question-sign"></span>{% endif %}</span></li>
                        {% endfor %}
                      </ul>
                      </p>
                    {% endif %}
                    {{ term_of_use_form.conditions_field }} Je certifie avoir lu et accepté <a
                          href="{% url 'show-event' event.short_url %}">les conditions de vente de cet évènement.</a>
                    et <a href="{% url 'charte' %}">la charte de la billetterie.</a>

                    {% buttons %}
                      <div class="text_center"><br \>
                        <button type="submit" class="btn btn-success btn-block">Continuer</button>
                      </div>
                    {% endbuttons %}
                  </form>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                 aria-expanded="false" aria-controls="collapseTwo">
                Acheter une place pour une connaissance
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

            {% if not ticket.allowed_external and not ticket.allowed_godson %}
              <div class="panel-body text-center">
                <em>Ce billet n’est pas ouvert aux parrainages.</em>
              </div>
            {% elif not ticket.allowed_external and godson_limit == 0 %}
              <div class="panel-body text-center">
                <em>Cet évènement ne permet pas les parrainages.</em>
              </div>
            {% elif not ticket.allowed_external and godson_remaining <= 0 %}
              <div class="panel-body text-center">
                <em>Vous avez atteint la limite du nombre de personnes que vous êtes autorisé à parrainer
                  ({{ godson_limit }}).</em>
              </div>
            {% else %}
              <div class="panel-body">
                {% if not ticket.allowed_external %}
                  <p>Vous pouvez parrainer jusqu’à {{ godson_limit }} personne{{ godson_limit|pluralize }}.</p>
                  {% if godson_count %}
                    <p>Vous parrainez déjà {{ godson_count }} personne{{ godson_count|pluralize }}.</p>
                  {% endif %}
                {% endif %}
                {% if ticket.long_notes or ticket.short_notes %}
                  <p><h4>Description du billet : </h4>
                  {% if ticket.long_notes %}{{ ticket.long_notes }}{% else %}{{ ticket.short_notes }}{% endif %}</p>
                {% endif %}
                <p><h4>Prix de base du billet : </h4>{{ ticket.price }}€</p>
                <h4>Options :</h4>
                <form action="{% url 'purchase-ticket' event.short_url ticket.id %}?payee=godson" method="post"
                      role="form">
                  {% bootstrap_form options_form show_label=False %}
                  {% for f in options_exclusive_form %}
                    {% for field in f %}
                      <label class="control-label" for="{{ field.name }}" data-toggle="popover" data-trigger="hover"
                             data-content="{{ field.label.description }}">
                        {{ field.label.label }}{% if field.label.description %}
                          <span class="glyphicon glyphicon-question-sign"></span>{% endif %}</label>
                      {% bootstrap_field field show_label=False %}
                    {% endfor %}
                  {% endfor %}
                  {% csrf_token %}
                  {% bootstrap_field form.payee %}
                  {% if info_sup %}
                    <p><h4>Les informations suivantes devront être fournies :</h4>
                    <ul>
                      {% for info in info_sup %}
                        <li><span class="control-label" data-toggle="popover" data-trigger="hover"
                                  data-content="{{ info.description }}">{{ info.name }}{% if info.description %}
                          <span class="glyphicon glyphicon-question-sign"></span>{% endif %}</span></li>
                      {% endfor %}
                    </ul>
                    </p>
                  {% endif %}
                  {{ form.conditions_field }} La personne bénéficiant de cette place a lu et accepté <a
                        href="{% url 'show-event' event.short_url %}">les conditions de vente de cet évènement</a>
                  et <a href="{% url 'charte' %}">la charte de la billetterie.</a>

                  {% buttons %}
                    <br/>
                    <div class="text-center">
                      <button type="submit" class="btn btn-success btn-block">Continuer</button>
                    </div>
                  {% endbuttons %}
                </form>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <a href="{% url 'show-event' event.short_url %}" class="btn btn-default btn-block">Annuler</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block js_foot %}
  <script>
      $(document).ready(function () {
          $('[data-toggle="popover"]').popover();
      });
  </script>
  {{ block.super }}
  {{ form.media.js }}
{% endblock %}