{% extends "YOUUserBundle::ui.html.twig" %}

{% block content_ui %}

    <div id="commandeAffichage">

        <div class="header clearfix">
            <h2>Commande N°{{ commande.id }}</h2>
            <p>du {{ commande.date|date('d/m/Y \à H:i') }}</p>
            <p>Total <sup>ttc</sup> : {{ commande.total|toeuro }}</p>
        </div>


        {% for flashMessage in app.session.flashbag.get('errorCode') %}
            <div class="flash-notice">
                <p class="flash-message alert alert-error">{{ flashMessage }}</p>
            </div>
        {% endfor %}

        {% for boutique in boutiques %}

            {% if boutique.commande.reduc or boutique.commande.freeShipping %} {# and (boutique.reduction.freeShipping or boutique.reduction.value > 0) #}
                <div class="header clearfix">
                    <p>
                        {% if boutique.commande.reduc and boutique.commande.reduc > 0 %}
                            Vous avez bénéficié de <strong>{{boutique.commande.reduc|toeuro}}</strong> de réduction sur la commande ci-dessous.
                        {% endif %}
                        {% if (boutique.commande.reduc and boutique.commande.reduc > 0) and (boutique.commande.freeShipping) %}
                            <br>
                        {% endif %}
                        {% if boutique.commande.freeShipping %}
                            Vous avez bénéficié des <strong>frais de port gratuit</strong> sur la commande ci dessous.
                        {% endif %}
                    </p>
                </div>
            {% endif %}

            {% for key, block in boutique.blocks %}

                <div class="block">
                    <div class="header clearfix">
                        <p class="boutique">{{ boutique.commande.boutique.nom }}</p>
                        <a class="mail" href="#" onclick="return openMessagerie({{ boutique.commande.boutique.enterprise.customer.user.id }});"><i class="icon icon-envelope"></i></a>
                        <p class="nbArticles">
                            {{ block.item|length }}
                            {% if block.type == 'livraison' %}
                                produit{% if block.item|length > 1 %}s{% endif %} livré{% if block.item|length > 1 %}s{% endif %} à votre domicile
                            {% endif %}
                            {% if block.type == 'retrait' %}
                                produit{% if block.item|length > 1 %}s{% endif %} à retirer en magasin
                            {% endif %}
                            {% if block.type == 'service' %}
                                service{% if block.item|length > 1 %}s{% endif %}  réservé{% if block.item|length > 1 %}s{% endif %}
                            {% endif %}

                        </p>
                    </div>


                    {% if block.item[0].statut == 0  %}
                        <div class="commande-header commande-sablier">
                            <h4>Veuillez patienter !</h4>
                            <p>Cette commande est en cours de validation par le vendeur.</p>
                        </div>
                    {% else %}

                        {% if block.type == 'livraison' %}
                            {% if block.item[0].statut == 1 %}
                                <div class="commande-header commande-sablier">
                                    <h4>Colis en préparation !</h4>
                                    <p>Votre commande a été prise en charge par le vendeur. Vous serez informé dès que votre colis sera expédié.</p>
                                </div>
                            {% endif %}
                            {% if block.item[0].statut == 9 %}
                                <div class="commande-header commande-ok">
                                    <h4>Colis expédié !</h4>
                                    <p>Vos achats ont été envoyés à votre adresse de livraison.</p>
                                </div>
                            {% endif %}

                        {% else %}

                            {% if block.item[0].statut == 9 %}
                                <div class="commande-header commande-ok">
                                    <h4>Vous avez retiré tous vos achats chez le vendeur.</h4>
                                    <p>Merci de votre confiance et à bientôt !</p>
                                </div>

                            {% else %}


                                {% if block.item[0].product.decline %}
                                    {% set produit = block.item[0].product.declinaison %}
                                {% else %}
                                    {% set produit = block.item[0].product %}
                                {% endif %}


                                {% if produit.type == 'material' %}

                                    {% if block.retraittype > 1 %}
                                        <div class="commande-header commande-panier">

                                            {% if block.retraittype == 2 %}
                                                <h4>Rendez-vous chez le vendeur, quand vous le souhaitez, à partir du {{ produit.material.commandetype.retraitDelais|addtodate(boutique.commande.commande.date|date('U')) }}.</h4>
                                            {% endif %}
                                            {% if block.retraittype == 3 %}
                                                {% set addTime = (produit.material.commandetype.retraitTypeOption*3600)+(produit.material.commandetype.retraitTypeOption2*60) %}
                                                <h4>Rendez-vous chez le vendeur, quand vous le souhaitez, a partir de {{ addTime|addtodate(commande.date|date('U'),'H:i') }}.</h4>
                                            {% endif %}
                                            {% if block.retraittype == 4 %}
                                                <h4>Rendez-vous chez le vendeur, dans une des tranches horaires défini ci dessous.</h4>
                                            {% endif %}
                                            {% if block.item[0].paymentMode == 0 %}
                                                <p>Code secret : {{ block.item[0].code }}</p>
                                            {% else %}
                                                <p>&nbsp;</p>
                                            {% endif %}
                                        </div>

                                    {% else %}


                                        {% if block.retraittypeo == 1 %}
                                            {% if block.item[0].statut == 1 %}

                                                <div class="commande-header commande-sablier">
                                                    <h4>Veuillez prendre RDV !</h4>
                                                    <p>Le vendeur va vous proposer une ou plusieurs dates au choix. Pour cela, merci de lui fournir quelques indications :</p>
                                                </div>
                                                <div class="middleZone">
                                                    <p>Quelles sont vos disponibilités pour ce RDV ? Si nécessaire, vous pouvez indiquer une date en particulier. Soyez précis(e) :</p>
                                                    <p>Ex : "tous les samedi après-midi" ou bien "chaque jour entre 12h et 14h" ou bien "Le samedi 14 août après 14h"...</p>
                                                    <form method="post" action="{{ path('you_commande_action',{action:'text',id:commande.id,indice:key}) }}">
                                                        <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">
                                                        <textarea name="text"></textarea>
                                                        <input type="submit" value="valider">
                                                    </form>
                                                </div>

                                            {% endif %}
                                            {% if block.item[0].statut == 2 %}
                                                <div class="commande-header commande-sablier">
                                                    <h4>Veuillez patienter.</h4>
                                                    <p>Le vendeur va vous proposer une ou plusieurs dates au choix. Vous serez informé(e) par e-mail.</p>
                                                </div>
                                                <div class="middleZone">
                                                    <p>Vos préférences :</p>
                                                    <p>{{ block.item[0].rdv.text }}</p>
                                                </div>
                                            {% endif %}

                                            {% if block.item[0].statut == 4 %}
                                                <div class="commande-header commande-calendrier">
                                                    <h4>Faites votre choix !</h4>
                                                    <p>Le vendeur vous propose les dates suivantes :</p>
                                                </div>
                                                <div class="middleZone">
                                                    <p>Choisissez une date :</p>
                                                    <input class="date-to-ul" type="hidden" value="{{ block.item[0].rdv.dates }}">
                                                    <form action="{{ path('you_commande_action',{action:'setdate',id:commande.id,indice:key}) }}" method="POST">
                                                        <ul>

                                                        </ul>
                                                        <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">

                                                        <input class="btn btn-default" type="submit" value="valider">
                                                    </form>
                                                </div>
                                            {% endif %}


                                        {% endif %}

                                        {% if block.retraittypeo == 2 %}
                                            {% if block.item[0].statut == 1 %}

                                                <div class="commande-header commande-sablier">
                                                    <h4>Le vendeur attend votre appel !</h4>
                                                    <p>Vous devez fixer une date de RDV par téléphone :</p>
                                                </div>
                                                <div class="middleZone clearfix">
                                                    <div>
                                                        <span class="numero">1</span>
                                                        <p>Appeller le :</p>
                                                        <p class="big-font"><b>{{ boutique.commande.boutique.tel }}</b></p>
                                                    </div>
                                                    <div>
                                                        <span class="numero">2</span>
                                                        <p>Utilisez le calendrier pour valider la date de RDV :</p>

                                                        <div class="calendrier" id="calendar-{{ key }}">

                                                        </div>

                                                        <form action="{{ path('you_commande_action',{action:'dateheure',id:commande.id,indice:key}) }}" method="POST">
                                                            <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">

                                                            <fieldset>
                                                                <label>date :</label>
                                                                <input type="text" value="" onchange="" class="zebraCalendar" calendar="calendar-{{ key }}" name="date">
                                                            </fieldset>
                                                            <fieldset>
                                                                <label>heure : </label>
                                                                <select name="heure">
                                                                    {% for i in 6..23 %}
                                                                        {% set y = i %}
                                                                    {% if y < 10 %}{% set y = '0' ~ y %}{% endif %}
                                                                    <option value="{{ y }}:00">{{ y }}h00</option>
                                                                    <option value="{{ y }}:15">{{ y }}h15</option>
                                                                    <option value="{{ y }}:30">{{ y }}h30</option>
                                                                    <option value="{{ y }}:45">{{ y }}h45</option>
                                                                {% endfor %}
                                                                {% for i in 0..5 %}
                                                                    {% set y = i %}
                                                                {% if y < 10 %}{% set y = '0' ~ y %}{% endif %}
                                                                <option value="{{ y }}:00">{{ y }}h00</option>
                                                                <option value="{{ y }}:15">{{ y }}h15</option>
                                                                <option value="{{ y }}:30">{{ y }}h30</option>
                                                                <option value="{{ y }}:45">{{ y }}h45</option>
                                                            {% endfor %}
                                                        </select>
                                                    </fieldset>
                                                    <fieldset>
                                                        <input type="submit" class="btn btn-green" value="Valider">
                                                    </fieldset>
                                                </form>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endif %}

                                {% if block.retraittypeo == 3 %}
                                    {% if block.item[0].statut == 1 %}

                                        <div class="commande-header commande-tel">
                                            <h4>Le vendeur va vous appeler !</h4>
                                            <p>Vous fixerez ensemble une date de RDV. La date s’inscrira ici automatiquement.</p>
                                        </div>
                                    {% endif %}

                                    {% if block.item[0].statut ==3 %}
                                        <div class="commande-header commande-panier">
                                            <h4>Rendez-vous chez le vendeur, le {{ block.item[0].rdv.date|date('d/m/Y \à H:i') }}</h4>
                                            {% if block.item[0].paymentMode == 0 %}
                                                <p>Code secret : {{ block.item[0].code }}</p>
                                            {% else %}
                                                <p>&nbsp;</p>
                                            {% endif %}
                                        </div>
                                        <div class="middleZone">
                                            <p>Vous pourrez retirer / consommer vos achats chez le vendeur, à la date indiquée ci-dessus.</p>
                                            {% if block.item[0].paymentMode == 0 %}
                                                <p class="red">ATTENTION : sans le code secret, vous ne pourrez pas retirer votre commande. Ne l’oubliez pas !</p>
                                            {% else %}
                                                <p>&nbsp;</p>
                                            {% endif %}
                                        </div>

                                    {% endif %}

                                {% endif %}


                                {% if block.item[0].statut == 3 %}
                                    <div class="commande-header commande-panier">
                                        <h4>Rendez-vous chez le vendeur, le {{ block.item[0].rdv.date|date('d/m/Y \à H:i') }}</h4>
                                        {% if block.item[0].paymentMode == 0 %}
                                            <p>Code secret : {{ block.item[0].code }}</p>
                                        {% else %}
                                            <p>&nbsp;</p>
                                        {% endif %}
                                    </div>
                                    <div class="middleZone">
                                        <p>Vous pourrez retirer / consommer vos achats chez le vendeur, à la date indiquée ci-dessus.</p>
                                        {% if block.item[0].paymentMode == 0 %}
                                            <p class="red">ATTENTION : sans le code secret, vous ne pourrez pas retirer votre commande. Ne l’oubliez pas !</p>
                                        {% else %}
                                            <p>&nbsp;</p>
                                        {% endif %}
                                    </div>

                                {% endif %}
                            {% endif %}

                        {% endif %}

                        {% if produit.type == 'service' %}
                            {% if block.item[0].statut == 1 %}

                                {% if block.item[0].rdv.type  == "proxishop" %}
                                    <div class="commande-header commande-sablier">
                                        <h4>Veuillez prendre RDV !</h4>
                                        <p>Le vendeur va vous proposer une ou plusieurs dates au choix. Pour cela, merci de lui fournir quelques indications :</p>
                                    </div>
                                    <div class="middleZone">
                                        <p>Quelles sont vos disponibilités pour ce RDV ? Si nécessaire, vous pouvez indiquer une date en particulier. Soyez précis(e) :</p>
                                        <p>Ex : "tous les samedi après-midi" ou bien "chaque jour entre 12h et 14h" ou bien "Le samedi 14 août après 14h"...</p>
                                        <form method="post" action="{{ path('you_commande_action',{action:'text',id:commande.id,indice:key}) }}">
                                            <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">
                                            <textarea name="text"></textarea>
                                            <input type="submit" value="valider">
                                        </form>
                                    </div>
                                {% endif %}

                                {% if (block.item[0].rdv.type  == "tel" and block.item[0].rdv.first  == "client") %}
                                    <div class="commande-header commande-sablier">
                                        <h4>Le vendeur attend votre appel !</h4>
                                        <p>Vous devez fixer une date de RDV par téléphone :</p>
                                    </div>
                                    <div class="middleZone clearfix">
                                        <div>
                                            <span class="numero">1</span>
                                            <p>Appeller le :</p>
                                            <p><b>{{ boutique.commande.boutique.tel }}</b></p>
                                        </div>
                                        <div>
                                            <span class="numero">2</span>
                                            <p>Utilisez le calendrier pour valider la date de RDV :</p>

                                            <div class="calendrier" id="calendar-{{ key }}">

                                            </div>

                                            <form action="{{ path('you_commande_action',{action:'dateheure',id:commande.id,indice:key}) }}" method="POST">
                                                <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">

                                                <fieldset>
                                                    <label>date :</label>
                                                    <input type="text" value="" onchange="" class="zebraCalendar" calendar="calendar-{{ key }}" name="date">
                                                </fieldset>
                                                <fieldset>
                                                    <label>heure : </label>
                                                    <select name="heure">
                                                        {% for i in 6..23 %}
                                                            {% set y = i %}
                                                        {% if y < 10 %}{% set y = '0' ~ y %}{% endif %}
                                                        <option value="{{ y }}:00">{{ y }}h00</option>
                                                        <option value="{{ y }}:15">{{ y }}h15</option>
                                                        <option value="{{ y }}:30">{{ y }}h30</option>
                                                        <option value="{{ y }}:45">{{ y }}h45</option>
                                                    {% endfor %}
                                                    {% for i in 0..5 %}
                                                        {% set y = i %}
                                                    {% if y < 10 %}{% set y = '0' ~ y %}{% endif %}
                                                    <option value="{{ y }}:00">{{ y }}h00</option>
                                                    <option value="{{ y }}:15">{{ y }}h15</option>
                                                    <option value="{{ y }}:30">{{ y }}h30</option>
                                                    <option value="{{ y }}:45">{{ y }}h45</option>
                                                {% endfor %}
                                            </select>
                                        </fieldset>
                                        <fieldset>
                                            <input type="submit" class="btn btn-green" value="Valider">
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        {% endif %}

                        {% if (block.item[0].rdv.type  == "tel" and block.item[0].rdv.first  == "commercant") %}
                            <div class="commande-header commande-tel">
                                <h4>Le vendeur va vous appeler !</h4>
                                <p>Vous fixerez ensemble une date de RDV. La date s’inscrira ici automatiquement.</p>
                            </div>
                        {% endif %}

                    {% endif %}
                    {% if block.item[0].statut == 2 %}
                        <div class="commande-header commande-sablier">
                            <h4>Veuillez patienter.</h4>
                            <p>Le vendeur va vous proposer une ou plusieurs dates au choix. Vous serez informé(e) par e-mail.</p>
                        </div>
                        <div class="middleZone">
                            <p>Vos préférences :</p>
                            <p>{{ block.item[0].rdv.text }}</p>
                        </div>
                    {% endif %}

                    {% if block.item[0].statut == 4 %}
                        <div class="commande-header commande-calendrier">
                            <h4>Faites votre choix !</h4>
                            <p>Le vendeur vous propose les dates suivantes :</p>
                        </div>
                        <div class="middleZone">
                            <p>Choisissez une date :</p>
                            <input class="date-to-ul" type="hidden" value="{{ block.item[0].rdv.dates }}">
                            <form action="{{ path('you_commande_action',{action:'setdate',id:commande.id,indice:key}) }}" method="POST">
                                <ul>

                                </ul>
                                <input type="hidden" name="contentPart" value="{{ block.item[0].commande.id }}">

                                <input class="btn btn-default" type="submit" value="valider">
                            </form>
                        </div>
                    {% endif %}
                    {% if block.item[0].statut == 3 %}
                        <div class="commande-header commande-panier">
                            <h4>Rendez-vous chez le vendeur, le {{ block.item[0].rdv.date|date('d/m/Y \à H:i') }}</h4>
                            {% if block.item[0].paymentMode == 0 %}
                                <p>Code secret : {{ block.item[0].code }}</p>
                            {% else %}
                                <p>&nbsp;</p>
                            {% endif %}
                        </div>
                        <div class="middleZone">
                            <p>Vous pourrez retirer / consommer vos achats chez le vendeur, à la date indiquée ci-dessus.</p>
                            {% if block.item[0].paymentMode == 0 %}
                                <p class="red">ATTENTION : sans le code secret, vous ne pourrez pas retirer votre commande. Ne l’oubliez pas !</p>
                            {% else %}
                                <p>&nbsp;</p>
                            {% endif %}
                        </div>

                    {% endif %}

                {% endif %}
            {% endif %}

        {% endif %}

    {% endif %}
    {#
    {% if block.type == 'livraison' %}
        {% include 'YOUCommercantBundle:Commande:livraison.html.twig' %}
    {% endif %}
    {% if block.type == 'retrait' %}
        {% include 'YOUCommercantBundle:Commande:retraits.html.twig' %}
    {% endif %}
    {% if block.type == 'service' %}
        {% include 'YOUCommercantBundle:Commande:service.html.twig' %}
    {% endif %}
    #}
    <table class="table dataTable">

        <thead>
            <tr>
                <th style="width:40%;">Article</th>
                <th>Quantité</th>
                <th>Prix unitaire</th>
                <th>Prix total</th>
                <th>statut</th>
            </tr>
        </thead>

        {% set livraisonPrice = 0 %}
        {% set totalBlockPrice = 0 %}
        {% for item in block.item %}
            {% if block.type == 'livraison' %}
                {% set livraisonPrice = livraisonPrice+item.livraisonPrice %}
                {% set totalBlockPrice = totalBlockPrice+item.livraisonPrice %}
            {% endif %}
            {% set totalBlockPrice = totalBlockPrice+item.count*item.prix %}

            <tr>

                <td class="article clearfix">
                    <div class="clearfix">
                        <img src="http://{{ picthost }}/{{ item.product.image.webSmallPath }}" width="40" height="40" alt=""/>
                    </div>
                    <p class="title">
                        {{ item.product.titre }}
                        {% if item.panierContent.panierComposition %}
                            - {{item.panierContent.panierComposition.title}}
                        {% endif %}
                        {# orientation #}
                        {% if item.panierContent.panierComposition and (item.panierContent.panierComposition.orientation1 > 0 or item.panierContent.panierComposition.orientation2 > 0 ) %}
                            <small>
                                <br>
                                Composition : 
                                {% if item.panierContent.panierComposition.orientation1 > 0 %}
                                    {% if item.panierContent.panierComposition.orientation1 == 2 %}
                                        Droite
                                    {% else %}
                                        Gauche
                                    {% endif %}
                                {% endif %}
                                {% if item.panierContent.panierComposition.orientation1 > 0 and item.panierContent.panierComposition.orientation2 > 0 %}
                                    | 
                                {% endif %}
                                {% if item.panierContent.panierComposition.orientation2 > 0 %}
                                    {% if item.panierContent.panierComposition.orientation2 == 2 %}
                                        Bas
                                    {% else %}
                                        Haut
                                    {% endif %}
                                {% endif %}
                            </small>
                        {% endif %}
                        {# options / options avancées #}
                        {% for panierContentOption in item.panierContent.panierContentOptions %}
                            <small><br>{{panierContentOption.optionTitle}} : "{{ panierContentOption.name }}" </small>
                            {% endfor %}
                            {% for panierContentOption in item.panierContent.panierContentAdvancedOptions %}
                            <small><br>{{panierContentOption.advancedSubtitle}} : "{{ panierContentOption.name }}" </small>
                            {% endfor %}
                    </p>
                    <p class="font-small ref">ref. {{ item.product.ref }} - {{ item.size }}</p>

                </td>
                <td>{{ item.count }}</td>
                <td>{{ item.prix|toeuro }}</td>
                {% set total = item.prix*item.count %}
                <td>{{ total|toeuro }}</td>
                <td>
                    {% if item.statut == 0 %}
                        <span class="red">En cours de validation</span>
                    {% endif %}
                    {% if item.statut > 0 and item.statut < 9 %}
                        {% if item.livreur %}
                            <span class="red">Colis en préparation</span>
                        {% elseif (item.rdv and item.statut < 3) %}
                            <span class="red">RDV à confirmer</span>
                        {% else %}
                            <span class="red">RDV confirmé</span>
                        {% endif %}
                    {% endif %}
                    {% if item.statut == 9 %}
                        {% if item.livreur %}
                            <span class="red">Colis expédié</span>
                        {% elseif item.rdv %}
                            <span class="red">Terminé</span>
                        {% else %}
                            <span class="red">Terminé</span>
                        {% endif %}
                    {% endif %}
                    {% if item.paymentMode == 1 %}
                        <div style="color:#d03428;">Paiement sur place</div>
                    {% endif %}
                    {% if item.paymentMode == 2 %}
                        <div style="color:#d03428;">Paiement à la livraison</div>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}

        {% if block.type == 'livraison' %}
            <tr>
                <td colspan="3">Frais de port</td>
                <td>{{ livraisonPrice|toeuro }}</td>
                <td></td>
            </tr>
        {% endif %}
        <tr>
            <td colspan="3">TOTAL TTC</td>
            <td>{{ totalBlockPrice|toeuro }}</td>
            <td></td>
        </tr>
    </table>
</div>
<br/><br/>

{% endfor %}
{% endfor %}
</div>
{% endblock %}

{% block append_javascript %}

    {{ parent() }}

    <script>
        $('input.zebraCalendar').each(function () {

            var container = $(this).attr('calendar');
            $(this).Zebra_DatePicker({
                always_visible: $('#' + container),
                format: 'd/m/Y'
            });

        });

        function loadListeDates() {
            $('.date-to-ul').each(function () {
                var dates = $.parseJSON($(this).val());
                if (!dates) {
                    dates = {};
                }
                if (!dates.dates) {
                    dates.dates = [];
                }
                var html = '';
                var cpt = 0;
                for (index in dates.dates) {
                    if (dates.dates[index]) {
                        html += '<li><input type="radio" name="setdate" value="' + dates.dates[index] + '" id="forlab' + cpt + '"><label for="forlab' + cpt + '">' + dates.dates[index] + '</label></li>';
                    }
                    cpt++;
                }
                $(this).parent().find('ul').html(html);


            });
        }
        loadListeDates();

    </script>

{% endblock %}