{% extends "blk-pro-mvc/base.html" %}
{% load static %}
{% block content %}
    {% get_media_prefix as MEDIA_PREFIX %}
    <body class="product-page">

    <div class="wrapper"
         style="background-image: url('{% static 'blk-pro/assets/img/dots.png' %}');   background-size: contain;">
        <img src="{% static 'blk-pro/assets/img/shape-s.png' %}" class="path shape">

        <div class="cd-section" id="blogs">
            <div class="blogs-6">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-10 ml-auto mr-auto">
                            <div class="card card-blog card-background card-grande" data-animation="zooming">
                                <div class="full-background"
                                     style="background-image: url('{{ MEDIA_PREFIX }}{{ event.img.fhd }}')"></div>
                                <div class="card-body">
                                    <div class="author">
                                        <img src="{{ MEDIA_PREFIX }}{{ configuration.img.thumbnail }}" alt="..."
                                             class="avatar img-raised">
                                        <span class="text-white">{{ configuration.organisation }}</span>
                                    </div>
                                    <h2 class="card-title">{{ event.name }}</h2>
                                    <h2 class="card-title">{{ event.short_description }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12 mx-auto">
                        <h2 class="title">{{ event.datetime | date:"D d F Y" }} {{ event.datetime | time }}</h2>
                        <p class="description">{{ event.long_description }}</p>
                        <div class="space-70"></div>
                        <h3>Entrez et vérifiez votre email pour reserver</h3>
                        <div class="row">
                            <div class="col-sm-12 col-lg-6">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                                            <span class="input-group-text"><i
                                                                    class="tim-icons icon-email-85"></i></span>
                                    </div>
                                    <input type="email" class="form-control"
                                           placeholder="Votre email">
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-6">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                                            <span class="input-group-text"><i
                                                                    class="tim-icons icon-email-85"></i></span>
                                    </div>
                                    <input type="email" class="form-control"
                                           placeholder="Vérifiez votre email">
                                </div>
                            </div>
                        </div>
                        <div class="space-50"></div>

                        <div class="row pick-size">

                            {% for product in event.products.all %}
                                {% if product.categorie_article == categorie_billet %}
                                    {% for price in product.prices.all %}

                                        <div class="col-lg-4 col-md-6">
                                            <h6>{{ price.name }} - {{ price.prix }}€</h6>
                                            <div class="input-group">

                                                <div class="input-group-btn">
                                                    <button id="down_{{ price.pk }}"
                                                            class="btn btn-warning btn-round btn-simple"
                                                            onclick="down.call(this, '0')">
                                                        <i class="tim-icons icon-simple-delete"></i>
                                                    </button>
                                                </div>

                                                <input type="text" id="inputqty_{{ price.pk }}"
                                                       class="form-control input-number"
                                                       value="0" readonly
                                                       />

                                                <div class="input-group-btn">
                                                    <button id="up_{{ price.pk }}"
                                                            class="btn btn-warning btn-round btn-simple"
                                                            onclick="up.call(this, {{ price.max_per_user }})">
                                                        <i class="tim-icons icon-simple-add"></i>
                                                    </button>
                                                </div>

                                            </div>
                                        </div>
                                    <script>
                                        {#remise à zero en cas de rechargement de page #}
                                        document.getElementById('inputqty_{{ price.pk }}').value = 0
                                    </script>
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}

                        </div>
                        <div class="space-50"></div>
                        <div id="name_ticket"></div>
                        <div class="space-50"></div>

                        <div class="row justify-content-start">
                            <button class="btn btn-warning ml-3">Reserver <i class="tim-icons icon-cart"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--     *********    END WRAPPER *********      -->

    </body>
{% endblock content %}
