{% if region is defined %}
{% else %}
    {% set region = '' %}
{% endif %}
{% extends "::layout"~region~".html.twig" %}

{% block title %}
    Réserver {{ service.titre }} en ligne - {{ parent() }}
{% endblock %}

{% for img in service.images %}
    {% if loop.first %}
        {% set header_image = "http://" ~ picthost ~ "/" ~ img.webPath %}
    {% endif %}
{% endfor %}

{% set header_description= service.description %}
{% set header_pagename = service.titre %}


{% block container %}

    {# popup cart #}
    <div id="popup-cart" class="base-popup mfp-hide">
        <div class="pop-header">
            Vous venez d'ajouter dans votre panier le produit suivant : 
        </div>
        <div class="pop-content">
            <table>
                <tr>
                    {% for img in service.images %}
                        {% if loop.first %}
                            <td class="img">
                                <img src="http://{{ picthost }}/{{ img.webPath }}" />
                            </td>
                        {% endif %}
                    {% endfor %}
                    <td>
                        <div>
                            <strong>
                                {{ service.titre }}
                                <span class="price_live"></span>
                            </strong>
                        </div>
                        <div id="pop-details-options">
                        </div>
                        <div class="sup">
                            vendu & expédié par {{service.boutique.nom}}
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pop-buttons">
            <span class="pop-btn colored pop-close">CONTINUER MON SHOPPING</span>
            <a href="{{path('you_panier_list')}}" class="pop-btn bordered">VOIR MON PANIER</a>
        </div>
    </div>

    <div id="product-container" class="row-fluid">

        <div class="span4 pull-left product-images" id="imgList">

            {% for img in service.images %}

                {% if loop.first %}
                    <div>
                        <img id="imgtozoom" src="http://{{ picthost }}/{{ img.webPath }}" alt="" />
                    </div>
                    <ul>
                    {% endif %}


                    <li><img class="mini" realSize="http://{{ picthost }}/{{ img.webPath }}" src="http://{{ picthost }}/{{ img.webSmallPath }}" alt="" /></li>

                    {% if loop.last %}
                        <ul>
                        {% endif %}

                    {% endfor %}

                    </div>

                    <div class="span5 pull-left product-info service">
                        <input type="hidden" id="productId" value="{{ service.id }}">
                        <input type="hidden" id="productType" value="service">
                        <h1>{{ service.titre }}</h1>
                        <p class="soustitre">{{ service.soustitre }}</p>
                        <hr>
                        <p> Vendu par <strong>{{ service.boutique.nom}}</strong><br />
                            Poser une question : <b style="color:#d03428;">{{ service.boutique.tel|totel }}</b></p>
                        <div class="separator">
                            <p class="commandeTitle">Passer commande</p>

                            <fieldset class="options">
                                <ul>
                                    {% if service.service.multy %}

                                        {% for option in service.service.tariflist %}

                                            <li><input value="{{ option.id }}" {% if loop.first %}checked="checked" {% endif %}price="{{ option.currenttarif|toeuro }}" normalprice="{{ option.tarif|toeuro }}" type="radio" id="tarif_{{ loop.index }}" name="tariflist"><label for="tarif_{{ loop.index }}">{{ option.name }}<span>{{ option.currenttarif|toeuro }}</span></label></li>

                                        {% endfor %}

                                    {% else %}

                                        <li><input value="0" checked="checked" price="{{ service.service.currenttarif|toeuro }}" type="radio" id="tarif_0" name="tariflist"><label for="tarif_0">{{ service.titre }}<span>{{ service.service.currenttarif|toeuro }}</span></label></li>

                                    {% endif %}
                                </ul>
                            </fieldset>
                            <div class="procedure">
                                <p>Lieu de la prestation :
                                    {% if service.service.ou == 1 %}
                                        <span>à domicile</span>

                                    {% else %}
                                        <span>dans nos locaux</span>

                                    {% endif %}
                                </p>
                                <p>La prise de RDV se fera :
                                    {% if service.service.reservation.methode == 1 %}
                                        <span>sur le site</span>
                                    {% else %}
                                        <span>par téléphone</span>
                                    {% endif %}
                                </p>
                                <p>La réservation doit se faire minimum :
                                    <span>{{ service.service.reservation.heures }}h avant la prestation</span>
                                </p>

                                {% if service.service.paiement == 1 %}
                                    <p>Un acompte de 5 euros est à régler lors de la commande. Le reste sera payé sur place.</p>
                                {% endif %}
                            </div>


                        </div>

                        <div class="separator">
                            <div class="priceZone">
                                {% if (service.promos and service.promos.valeur > 0) %}
                                    <p id="normalPrice"><del>{{ service.service.tarif|toeuro }}</del></p>
                                    <p id="promoValue">
                                        {% if service.promos.type == 0 %}
                                            -{{ service.promos.valeur|toeuro }}
                                        {% else %}
                                            -{{ service.promos.valeur }}%
                                        {% endif %}
                                    </p>
                                {% endif %}
				{% if service.service.multy %}
	                                <p class="price_live">{{ service.service.tarifList[0].tarif|toeuro }}</p>
				{% endif %}
                            </div>


                            <div class="panierBtn">
                                <p>Service ajouté au panier</p>
                                <a href="" id="addServiceToPanier"><span><img src="/img/panier.png" /></span>Commander</a>
                            </div>
                            <div class="fanszone" {% if is_granted('ROLE_USER') == false %} onclick="alert('Pour mettre de côté ce service, connectez-vous');"{% endif %}>
                                {% if service.id|isFan(true) %}
                                    <a class="fan show" href="#" onclick="var self = this;
                                            $.ajax({url: '{{ path('you_boutique_product_add_fan',{product:service.id}) }}', success: function (data) {
                                                    if (data == 'add') {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.fan').addClass('show');
                                                    } else {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.notfan').addClass('show');
                                                    }
                                                }});
                                            return false;">Mis de côté</a>
                                    <a class="notfan" href="#" onclick="var self = this;
                                            $.ajax({url: '{{ path('you_boutique_product_add_fan',{product:service.id}) }}', success: function (data) {
                                                    if (data == 'add') {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.fan').addClass('show');
                                                    } else {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.notfan').addClass('show');
                                                    }
                                                }});
                                            return false;">Mettre de côté</a>
                                {% else %}
                                    <a class="notfan show" href="#" onclick="var self = this;
                                            $.ajax({url: '{{ path('you_boutique_product_add_fan',{product:service.id}) }}', success: function (data) {
                                                    if (data == 'add') {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.fan').addClass('show');
                                                    } else {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.notfan').addClass('show');
                                                    }
                                                }});
                                            return false;">Mettre de côté</a>
                                    <a class="fan" href="#" onclick="var self = this;
                                            $.ajax({url: '{{ path('you_boutique_product_add_fan',{product:service.id}) }}', success: function (data) {
                                                    if (data == 'add') {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.fan').addClass('show');
                                                    } else {
                                                        $(self).parent().find('a').removeClass('show');
                                                        $(self).parent().find('a.notfan').addClass('show');
                                                    }
                                                }});
                                            return false;">Mis de côté</a>
                                {% endif %}
                            </div>
                            <div class="subdata">
                                <ul class="nav nav-tabs" id="myTab">
                                    <li class="active"><a href="#description">Description</a></li>
                                    <li><a href="#horaires">Horaires</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div class="tab-pane active" id="description">
                                        <p>
                                            {% if service.cat3 %}
                                                <a href="{{ path('you_boutique_afficher_sous_category',{'categorie':service.domaine.slug,'sous_categorie':service.cat3.slug}) }}">{{ service.cat3.title }}</a> par <a href="{{ path('you_boutique_afficher',{slug:service.boutique.slug}) }}">{{ service.boutique.nom }}</a>
                                            {% elseif service.cat2 %}
                                                <a href="{{ path('you_boutique_afficher_sous_category',{'categorie':service.domaine.slug,'sous_categorie':service.cat2.slug}) }}">{{ service.cat2.title }}</a> par <a href="{{ path('you_boutique_afficher',{slug:service.boutique.slug}) }}">{{ service.boutique.nom }}</a>
                                            {% elseif service.cat1 %}
                                                <a href="{{ path('you_boutique_afficher_sous_category',{'categorie':service.domaine.slug,'sous_categorie':service.cat1.slug}) }}">{{ service.cat1.title }}</a> par <a href="{{ path('you_boutique_afficher',{slug:service.boutique.slug}) }}">{{ service.boutique.nom }}</a>
                                            {% else %}
                                                <a href="{{ path('you_boutique_afficher_sous_category',{'categorie':service.domaine.slug,'sous_categorie':service.activity.slug}) }}">{{ service.activity.title }}</a> par <a href="{{ path('you_boutique_afficher',{slug:service.boutique.slug}) }}">{{ service.boutique.nom }}</a>
                                            {% endif %}
                                        </p>
                                        <br/><p>{{ service.description|raw }}</p>
                                    </div>

                                    <div class="tab-pane" id="horaires">
                                        <div class="horaires">
                                            <p><span class="day">Lundi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 1 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Mardi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 2 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Mercredi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 3 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Jeudi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 4 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Vendredi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 5 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Samedi :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 6 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                            <p><span class="day">Dimanche :</span><span>
                                                    {% set number=0 %}
                                                    {% for tranche in horaire.tranches %}
                                                        {% if tranche.day == 7 %}
                                                            {% set number=number+1 %}
                                                            {{ tranche.startH|totime~":"~tranche.startM|totime }} à {{ tranche.endH|totime~":"~tranche.endM|totime }}<br/>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                        </div>
                                    </div>

                                </div>


                            </div>

                        </div>

                        <!-- AddThis Button BEGIN -->
                        <div class="addthis_toolbox addthis_default_style addthis_32x32_style" style="float:left;margin: -2px 0 0 20px;">
                            <p>Partager : </p>
                            <a class="addthis_button_facebook"></a>
                            <a class="addthis_button_twitter"></a>
                            <a class="addthis_button_google_plusone_share"></a>
                            <a class="addthis_button_pinterest_share"></a>
                        </div>
                        <script type="text/javascript">var addthis_config = {"data_track_addressbar": false, data_track_clickback: false};</script>
                        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4eeaac034a51afd1"></script>
                        <!-- AddThis Button END -->
                    </div>

                    <div class="span3 pull-right product-boutique">
                        <p class="legend">Infos Vendeur</p>
                        {% set item = service.boutique %}
                        {% include 'YOUBoutiqueBundle:Affichage:right.html.twig' %}
                    </div>

                    </div>
                    <div id="lightboxHidden">
                        <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
                            <div class='lightbox-content'>
                                <img src="">
                            </div>
                        </div>
                    </div>

                {% endblock %}

                {% block append_javascript %}

                    {{ parent() }}

                    {% javascripts '../../apps/main/Resources/public/js/magnific-popup.min.js' %}
                    <script type="text/javascript" src="{{ asset_url }}"></script>
                    {% endjavascripts %}

                    <script>

                        var currentProductSlug = "{{ service.slug }}";

                        $('#versionProduct').on('change', function () {
                            if (currentProductSlug != $(this).val()) {
                                var url = document.location.href;
                                url = url.split(currentProductSlug);
                                document.location.href = url[0] + $(this).val() + url[1];
                            }
                        });

                        $('#imgList img.mini').on('click', function () {
                            $('#imgList div img').attr('src', $(this).attr('realSize'));
                            $('img#imgtozoom').addpowerzoom({
                                defaultpower: 3,
                                powerrange: [3, 3],
                                largeimage: null,
                                magnifiersize: [150, 150] //<--no comma following last option!
                            })
                        });
                        $('#selectSize').on('change', function () {
                            var option = $('option[value="' + $(this).val() + '"]', this);
                            $('.price_live').html(option.attr('price'));
                            if (option.attr('number') < 5) {
                                $('#restant').html("Plus que " + option.attr('number') + " disponible");
                                if (option.attr('number') > 1) {
                                    $('#restant').append('s !');
                                } else {
                                    $('#restant').append(' !');
                                }
                            } else {
                                $('#restant').html('');
                            }
                            var countMax = 10;
                            if (option.attr('number') < 10) {
                                countMax = parseInt(option.attr('number'));
                            }
                            console.log(countMax);
                            console.log(option.attr('number'));
                            var html = "";
                            for (var i = 1; i != countMax + 1; i++) {
                                html += '<option value="' + i + '">' + i + '</option>';
                            }
                            $('#selectQuantity').html(html);
                        });

                        $('#myTab a').click(function (e) {
                            e.preventDefault();
                            $(this).tab('show');
                        });

                        $('.options li input[type="radio"]').on('change', function (e) {
                            $('#normalPrice del').html($(this).attr("normalprice"));
                            $('.price_live').html($(this).attr("price"));
                        });

                        $('img#imgtozoom').addpowerzoom({
                            defaultpower: 3,
                            powerrange: [3, 3],
                            largeimage: null,
                            magnifiersize: [150, 150] //<--no comma following last option!
                        });
                    </script>

                {% endblock %}


                {% block perform_stylesheets %}
                    {{parent()}}
                    {% stylesheets '../../apps/main/Resources/public/css/magnific-popup.css' %}
                    <link rel="stylesheet" href="{{ asset_url }}" />
                    {% endstylesheets %}
                {% endblock perform_stylesheets %}