{% extends "::layout.html.twig" %}

{% block title %} Codes promo - {{ parent() }} {% endblock %}

{% block container %}
    <div class="row subline">
        <div class="col-md-12">
            <img src="{{ asset('img/entete-code-promos.jpg') }}" alt="" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="subtitle">Actuellement <strong>{{list|length}} codes promos</strong> sont disponible sur le site !</div>
        </div>
    </div>

    {% for item in list %}

        <div class="row vignette_codepromo" >
            <div class="span8">
                <div class="row">
                    <div class="logo-part">
                        <div class="logo">
                            {% if item.boutique %}
                                {% if item.boutique.presentation.logo is not null and item.boutique.presentation.logo.getWebPath() %}
                                    <img src="http://{{ picthost }}/{{ item.boutique.presentation.logo.webMediumPath }}" alt="Logo"/>
                                {% else %}
                                    {# image defaut ? #}
                                {% endif %}
                            {% else %}
                                {# image boutique générale #}
                            {% endif %}
                        </div>
                        <div>Code Promo</div>
                    </div>
                    <div class="infos">
                        {% if item.boutique %}
                            <div class="title">Code promo <strong>{{item.boutique.nom}}</strong></div>
                        {% else %}
                            <div class="title">Code promo <strong>Global</strong></div>
                        {% endif %}
                        <div class="desc_type">
                            {% if item.type==0 %}
                                Frais de port offert
                            {% elseif item.type==1 %}
                                {{item.value}} % de réductions sur les produits
                            {% elseif item.type==2%}
                                {{item.value}} € de réductions sur votre commande
                            {% else %}
                                Erreur !!
                            {% endif %}
                        </div>
                        <div class="code_desc">
                            <div class="code" data-code="{{item.id}}">
                                <span id="see_code_{{item.id}}" style="text-transform:uppercase;color:#d11000;font-weight:bold;">Voir le code</span>
                                <span id="code_{{item.id}}" style="display:none;">{{item.code}}</span>
                            </div>
                            <div class="desc">
                                {{item.description}}
                                {% if item.minimumAmount > 0 %}
                                    <div class="conditions">
                                        Montant minimum : {{item.minimumAmount}}€
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="dates">
                            Validité : du {{item.begin|date('d/m/Y')}} au {{item.end|date('d/m/Y')}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}


    <style>
        .vignette_codepromo{margin-bottom:10px;border-bottom:5px solid #99cc33;padding:15px 15px;}
		.subline{border-bottom:2px solid #000;}
        .subtitle{margin-top:20px;margin-bottom:20px;}
        .vignette_codepromo .logo-part{display:inline-block;vertical-align:top;text-align:center;font-size:16px;}
        .vignette_codepromo .logo{margin-top:15px;margin-left:30px;width:150px;height:150px;background:#99cc33;margin-right:10px;}
        .vignette_codepromo .infos{display:inline-block;width:410px;}
        .vignette_codepromo .infos .title{font-size:18px;line-height:45px;text-decoration:underline;}
        .vignette_codepromo .infos .desc_type{color:#000;font-size:20px;line-height:38px;margin-bottom:10px;}
        .vignette_codepromo .infos .code_desc .code{display:inline-block;vertical-align:top;font-size:18px;line-height:31px;width:160px;margin-right:40px;cursor:pointer;}
        .vignette_codepromo .infos .code_desc .desc{display:inline-block;vertical-align:top;font-size:12px;height:70px;width:400px;overflow:hidden;margin-bottom:5px;}
    </style>

{% endblock %}

{% block append_javascript %}
    <script>
        $(document).ready(function () {
            $(document).on("click", ".vignette_codepromo .infos .code_desc .code", function () {
                var code = $(this).data("code");
                $("#see_code_" + code).css("display", "none");
                $("#code_" + code).css("display", "block");
            });
        });
    </script>
{% endblock %}