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

{% set pageMainTabs = "shopping" %}
{% set menuNoCurrent = true %}

{% if boutique.presentation.logo is not null %}
    {% set header_image = "http://" ~ picthost ~ "/" ~ boutique.presentation.logo.webPath %}
{% endif %}
	
{% set header_description= boutique.presentation.presentation %}
{% set header_pagename = boutique.nom %}

{% block title %}
    {{ boutique.nom }} - {{ boutique.motcles  }} - {{ boutique.address1 }} {{ boutique.cp }} {{ boutique.ville }}
{% endblock %}

{% block subHeader %}
    {% include 'YOUBoutiqueBundle:Default:header.html.twig' %}
{% endblock %}
{% block container %}
    <div class="row">

        {% if nav_minisite is defined and nav_minisite|length > 0 %}
            <nav id="nav_minisite" style="margin-bottom:20px;">
                <ul>
                    <li class="current"><a onclick="return false;" title="page de présentation {{ boutique.nom }}">Accueil</a></li>
                        {% for item in nav_minisite %}
                            {% if item.pages|length > 0 %}
                            <li><a href="{{ path('you_boutique_site_page',{slug:boutique.slug,page_slug:item.pages[0].slug}) }}" title="découvrir {{ item.name }} de {{ boutique.nom}}">{{ item.name }}</a></li>
                            {% endif %}
                        {% endfor %}
                </ul>
            </nav>
        {% endif %}

        {% block sidebar %}
            <sidebar class="col-md-3 sidebarboutique">

                <div class="infos" id="sidePresendation">
                    <h2 class="legend">Présentation</h2>
                    <p id="presentationBoutique">{{ boutique.presentation.presentation|replace({'<script>':'[script]', '</script>':'[/script]'})|raw }}</p>
                </div>
                <div class="infos">
                    <p class="legend">Infos utiles</p>
                    <p class="tel">{{ boutique.presentation.tel|totel }}</p>
                    {% if boutique.presentation.horaires %}
                        <div class="horairescontainer">
                            {% if boutique.presentation.imgHoraire %}
                                <img src="http://{{ picthost }}/{{ boutique.presentation.imgHoraire.getWebPath }}" alt="{{boutique.presentation.imgHoraire.name}}">
                            {% else %}
                                <h2>Horaires d'ouverture</h2>
                                {% set horaire = boutique.presentation.horaires|tohoraire %}
                                <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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~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~"h"~tranche.startM|totime }} - {{ tranche.endH|totime~"h"~tranche.endM|totime }}<br/>
                                                {% endif %}
                                            {% endfor %}
                                        </span>{% if number == 0 %}<span class="ferme">Fermé</span>{% endif %}</p>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                    {% if boutique.presentation.services|length > 0 %}
                        <div class="services">
                            <h2>Services proposés</h2>
                            <p class="listservice">
                                {% for item in boutique.presentation.services %}
                                    {{ item.name }}{% if loop.last != true %},
                                    {% endif %}
                                {% endfor %}
                            </p>
                        </div>
                    {% endif %}
                    <div class="map" onclick="document.location.href = '{{ path('you_boutique_afficher_map',{slug:boutique.slug}) }}';">
                        <p class="titre">Comment y aller ?</p>
                        <div id="mapsYAller">

                        </div>
                        <a class="listservice" style="cursor:pointer;" title="Voir le plan">Voir le plan</a>
                    </div>
                </div>
            </sidebar>

        {% endblock %}

        {% block content %}
            <div class="col-md-9" style="margin-top:20px;" class="clearfix">
                {% if boutique.presentation.image %}
                    <div class="row">
                        <div class="col-md-11">
                            <div id="carousel-boutique" class="carousel slide" data-ride="carousel">
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    {% for img in boutique.presentation.images %}
                                        <div class="item{% if loop.first %} active{% endif %}" data-slide-number="{{ loop.index0 }}">
                                            <img src="http://{{ picthost }}/{{ img.webPath }}" alt="image diaporama {{ boutique.nom }}" style="height:386px;margin-left:auto;margin-right:auto;">
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div id="slider-thumbs">
                                <!-- thumb navigation carousel items -->
                                <ul style="list-style:none;margin:0;">
                                    {% for img in boutique.presentation.images %}
                                        <li>
                                            <a id="carousel-selector-{{ loop.index0 }}"{% if loop.first %} class="selected"{% endif %}>
                                                <img src="http://{{ picthost }}/{{ img.webSmallPath }}" class="img-responsive"{% if not loop.last %} style="padding-bottom: 25px"{% endif %}>
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endif %}                
				<div class="row sep-top2">				
                    <div class="thumbnails fichesboutiques">
						<h3 style="text-transform:uppercase;padding-left:20px;">Actualités de {{ boutique.nom }}</h3>
                        {% for fiche in boutique.presentation.fiches.toArray|reverse %}
                            {% if fiche.etat %}
                                <a href="{{ path('you_boutique_boutique_afficher_fiche',{slug:boutique.slug,fiche:fiche.slug}) }}" title="En savoir plus sur {{ fiche.titre }}">
								<div class="thumbnail col-md-4 fiche" style="overflow:auto;border:0px">
                                    {% if fiche.image %}
                                        <img src="http://{{ picthost }}/{{ fiche.image.webPath }}" alt="image {{ fiche.titre }}" title="image {{ fiche.titre }}" style="width:252px;height:126px;">
                                    {% else %}
                                        <img src="http://{{ picthost }}/images/defaultFicheImage.png" alt="image présentation" title="image de présentation" style="width:252px;height:126px;">
                                    {% endif %}
                                    <div class="caption" style="height:280px;overflow:hidden;">
                                        <h3>{{ fiche.titre }}</h3>
                                        <p>{{ fiche.description[:550]|striptags|replace({'<script>':'[script]', '</script>':'[/script]'})|raw }}...</p>
                                    </div>
                                    <a href="{{ path('you_boutique_boutique_afficher_fiche',{slug:boutique.slug,fiche:fiche.slug}) }}" title="En savoir plus sur {{ fiche.titre }}">Lire plus</a>
                                </div></a>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>

        {% endblock %}

    </div>
{% endblock %}

{% block append_javascript %}

    <script>
        $("#carousel-boutique").carousel();
        // handles the carousel thumbnails
        $('[id^=carousel-selector-]').click(function(){
        var id_selector = $(this).attr("id");
        var id = id_selector.substr(id_selector.length - 1);
        id = parseInt(id);
        $("#carousel-boutique").carousel(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $(this).addClass('selected');
        });
        // when the carousel slides, auto update
        $("#carousel-boutique").on('slid.bs.carousel', function (e) {
        var id = $('.item.active').data('slide-number');
        id = parseInt(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id=carousel-selector-' + id + ']').addClass('selected');
        });
        mapsYAller = "";
        function initializeMapsYAller() {
        var mapOptions = {
        center: new google.maps.LatLng({{ boutique.latitude }}, {{ boutique.longitude }}),
                zoom: 12,
                disableDefaultUI: true
        };
        var mapsYAller = new google.maps.Map(document.getElementById("mapsYAller"),
                mapOptions);
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng({{ boutique.latitude }}, {{ boutique.longitude }}),
                map: mapsYAller,
                title: '{{ boutique.nom }}'
        });
        }
        google.maps.event.addDomListener(window, 'load', initializeMapsYAller);
        if (document.getElementById('mapCarteBoutique')){
        mapsBoutiqueCarte = "";
        function initializeMapsBoutiqueCarte() {
        var mapOptions = {
        center: new google.maps.LatLng({{ boutique.latitude }}, {{ boutique.longitude }}),
                zoom: 14,
        };
        var mapsBoutiqueCarte = new google.maps.Map(document.getElementById("mapCarteBoutique"),
                mapOptions);
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng({{ boutique.latitude }}, {{ boutique.longitude }}),
                map: mapsBoutiqueCarte,
                title: '{{ boutique.nom }}'
        });
        }
        google.maps.event.addDomListener(window, 'load', initializeMapsBoutiqueCarte);
        }

    </script>

{% endblock %}