{% extends "base/base-front-pieza.html.twig" %}
{% block title %}{{ variante.prefijo~" "~variante.nombre }} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content mb-10 pb-6">
    <!-- Migas de pan -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="{{ path('home.'~locale) }}"><i class="d-icon-home"></i></a></li>
                <li><a href="{{ path('categorias.'~locale) }}">Categoría</a></li>
                <li class="active">{{ variante.prefijo~" "~variante.nombre }}</li>
            </ul>
        </div>
    </nav>
    <!-- ./migas de pan -->
    <div class="container-fluid">
        <div class="product product-single row">

            <!-- Galería -->
            <div class="col-md-6 sticky-sidebar-wrapper">
                <div class="product-gallery pg-vertical sticky-sidebar" data-sticky-options="{'minWidth': 767}">
                    <div class="product-single-carousel owl-carousel owl-theme owl-nav-inner row cols-1 gutter-no">
                        {% for imagen in variante.imagenesPieza %}
                        <div class="contenedor-multimedia listado-producto">
                            <div class="miniatura-multimedia">
                                <div class="thumbnail-multimedia">
                                    <div class="centrar-multimedia">
                                        <img src="{{ imagen.ruta~imagen.imagen }}" data-zoom-image="{{ imagen.ruta~imagen.imagen }}" alt="{{ variante.prefijo~" "~variante.nombre }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {% for imagen in variante.imagenesAmbiente %}
                        <div class="contenedor-multimedia listado-producto">
                            <div class="miniatura-multimedia">
                                <div class="thumbnail-multimedia">
                                    <div class="centrar-multimedia">
                                        <img src="{{ imagen.ruta~imagen.imagen }}" data-zoom-image="{{ imagen.ruta~imagen.imagen }}" alt="{{ variante.prefijo~" "~variante.nombre }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="product-thumbs-wrap">
                        <div class="product-thumbs">
                            {% for imagen in variante.imagenesPieza %}                            
                            <div class="contenedor-multimedia listado-producto thumb-producto active">
                                <div class="miniatura-multimedia">
                                    <div class="thumbnail-multimedia">
                                        <div class="centrar-multimedia">
                                            <img src="{{ imagen.ruta~'thumb-'~imagen.imagen }}" alt="{{ variante.prefijo~" "~variante.nombre }}" width="150" height="169">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            {% for imagen in variante.imagenesAmbiente %}                            
                            <div class="contenedor-multimedia listado-producto thumb-producto">
                                <div class="miniatura-multimedia">
                                    <div class="thumbnail-multimedia">
                                        <div class="centrar-multimedia">
                                            <img src="{{ imagen.ruta~'thumb-'~imagen.imagen }}" alt="{{ variante.prefijo~" "~variante.nombre }}" width="150" height="169">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <button class="thumb-up disabled"><i class="fas fa-chevron-left"></i></button>
                        <button class="thumb-down disabled"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>
            <!-- /galería -->

            <!-- Detalles de la pieza -->
            <div class="col-md-6">
                <div class="product-details">
                    <h1 class="mb-0">{{ variante.prefijo~" "~variante.nombre }}</h1>
                    <div class="product-meta">
                        <span class="mr-6">{% trans into locale %}REFERENCE ID{% endtrans %}: {{ variante.referencia }}</span>
                    </div>
                    <div class="product-action pb-3">
                        {% if app.user and app.user.rol.nombre == 'ROLE_USER' %}
                        <a href="#" id="boton-agregar-favorito" class="btn-product btn-wishlist mr-6 login-toggle link-to-tab d-md-show" onclick="javascript: abrirModalTablero('{{ variante.id }}', '{{ variante.slug }}');"><i class="d-icon-heart"></i> {% trans into locale %}Add to favourites{% endtrans %}</a>
                        {% else %}
                        <a href="#" id="boton-agregar-favorito" class="btn-product btn-wishlist mr-6 login-toggle link-to-tab d-md-show" onclick="javascript: $('#variante-favorito').val('{{ variante.id }}');$('#slug-variante-favorito').val('{{ variante.slug }}');agregarProductoFavorito();"><i class="d-icon-heart"></i> {% trans into locale %}Add to favourites{% endtrans %}</a>
                        {% endif %}
                        <a href="{{ path('distribuidorCercano')~'?slug='~app.request.get('slug') }}" class="btn-sin-fondo btn-product mr-6"><i class="d-icon-map"></i> {% trans into locale %}Consult your distributors{% endtrans %}</a>
                    </div>
                    <hr class="product-divider">
                    <div class="product-meta">
                        <p class="mb-0 text-dark">{% trans into locale %}MANUFACTURER{% endtrans %}: {{ variante.pieza.fabricante.nombre }}<br>{% trans into locale %}COLLECTION{% endtrans %}: {{ variante.pieza.coleccion.nombre }}</p>
                    </div>
                    <hr class="product-divider">
                    <div id="product-tab-description">
                        <h5 class="mb-5 ls-m">{% trans into locale %}Characteristics{% endtrans %}</h5>
                        <table class="table text-left">
                            <tbody>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Material{% endtrans %}</th>
                                    {% set break = false %}
                                    {% set valor_textos = [] %}
                                    {% for traduccion in variante.material.traducciones %}
                                        {% if (traduccion.idioma.codigo == locale or loop.index == variante.material.traducciones|length) and not break %}
                                            {% set valor_textos = traduccion %}
                                            {% set break = true %}
                                        {% endif %}
                                    {% endfor %}
                                    <td class="pl-4">{{ valor_textos }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Effect{% endtrans %}</th>
                                    {% set break = false %}
                                    {% set valor_textos = [] %}
                                    {% for traduccion in variante.efecto.traducciones %}
                                        {% if (traduccion.idioma.codigo == locale or loop.index == variante.efecto.traducciones|length) and not break %}
                                            {% set valor_textos = traduccion %}
                                            {% set break = true %}
                                        {% endif %}
                                    {% endfor %}
                                    <td class="pl-4">{{ valor_textos }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Form{% endtrans %}</th>
                                    {% set break = false %}
                                    {% set valor_textos = [] %}
                                    {% for traduccion in variante.forma.traducciones %}
                                        {% if (traduccion.idioma.codigo == locale or loop.index == variante.forma.traducciones|length) and not break %}
                                            {% set valor_textos = traduccion %}
                                            {% set break = true %}
                                        {% endif %}
                                    {% endfor %}
                                    <td class="pl-4">{{ valor_textos }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Colour{% endtrans %}</th>
                                    <td class="pl-4">{{ variante.color }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Colour group{% endtrans %}</th>
                                    {% set break = false %}
                                    {% set valor_textos = [] %}
                                    {% for traduccion in variante.grupoColor.traducciones %}
                                        {% if (traduccion.idioma.codigo == locale or loop.index == variante.grupoColor.traducciones|length) and not break %}
                                            {% set valor_textos = traduccion %}
                                            {% set break = true %}
                                        {% endif %}
                                    {% endfor %}
                                    <td class="pl-4">{{ valor_textos }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Finish{% endtrans %}</th>
                                    {% set break = false %}
                                    {% set valor_textos = [] %}
                                    {% for traduccion in variante.acabado.traducciones %}
                                        {% if (traduccion.idioma.codigo == locale or loop.index == variante.acabado.traducciones|length) and not break %}
                                            {% set valor_textos = traduccion %}
                                            {% set break = true %}
                                        {% endif %}
                                    {% endfor %}
                                    <td class="pl-4">{{ valor_textos }}</td>
                                </tr>
                                <tr>
                                    <th class="font-weight-semi-bold text-dark pl-0">{% trans into locale %}Measures{% endtrans %}</th>
                                    {% if locale == 'en' %}
                                    <td class="pl-4">{{ (variante.ladoA*0.393701)|round(2)~" x "~(variante.ladoB*0.393701)|round(2) }}{% if variante.grosor %} x {{ (variante.grosor/100*0.393701)|round(2) }}{% endif %} inches</td>
                                    {% else %}
                                    <td class="pl-4">{{ variante.ladoA~" x "~variante.ladoB }}{% if variante.grosor %} x {{ variante.grosor/100 }}{% endif %} cm</td>
                                    {% endif %}
                                </tr>
                            </tbody>
                        </table>

                        <h5 class="mt-6 mb-5 ls-m">{% trans into locale %}Uses{% endtrans %}</h5>
                        <ul class="mb-6 lista-detalle">
                            {% for valor in variante.usos %}
                            {% set break = false %}
                            {% set valor_textos = [] %}
                            {% for traduccion in valor.traducciones %}
                                {% if (traduccion.idioma.codigo == locale or loop.index == valor.traducciones|length) and not break %}
                                    {% set valor_textos = traduccion %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                            <li>{{ valor_textos.nombre }}</li>
                            {% endfor %}
                        </ul>

                        <h5 class="mt-3 mb-5 ls-m">{% trans into locale %}Spaces{% endtrans %}</h5>
                        <ul class="mb-6 lista-detalle">
                            {% for valor in variante.espacios %}
                            {% set break = false %}
                            {% set valor_textos = [] %}
                            {% for traduccion in valor.traducciones %}
                                {% if (traduccion.idioma.codigo == locale or loop.index == valor.traducciones|length) and not break %}
                                    {% set valor_textos = traduccion %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                            <li>{{ valor_textos.nombre }}</li>
                            {% endfor %}
                        </ul>

                        <h5 class="mt-3 mb-5 ls-m">{% trans into locale %}Technical characteristics{% endtrans %}</h5>
                        <ul class="mb-6 lista-detalle">
                            {% for valor in variante.caracteristicas %}
                            {% set break = false %}
                            {% set valor_textos = [] %}
                            {% for traduccion in valor.traducciones %}
                                {% if (traduccion.idioma.codigo == locale or loop.index == valor.traducciones|length) and not break %}
                                    {% set valor_textos = traduccion %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                            <li>{{ valor_textos.nombre }}</li>
                            {% endfor %}
                        </ul>

                        <h5 class="mt-3 mb-5 ls-m">{% trans into locale %}Assembly suggestions{% endtrans %}</h5>
                        <ul class="mb-6 lista-detalle">
                            {% for valor in variante.formasMontaje %}
                            {% set break = false %}
                            {% set valor_textos = [] %}
                            {% for traduccion in valor.traducciones %}
                                {% if (traduccion.idioma.codigo == locale or loop.index == valor.traducciones|length) and not break %}
                                    {% set valor_textos = traduccion %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                            <li>{{ valor_textos.nombre }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    
{#                    <hr class="product-divider">

                    <div class="product-form product-color">
                        <label class="mr-4">{% trans into locale %}Colour group{% endtrans %}:</label>
                        <div class="product-variations">
                            {% for valor in grupos_color %}
                            <a class="color{% if valor.id == variante.grupoColor.id %} active{% endif %}" data-src="images/demos/demo7/products/big1.jpg" href="#" style="background-color: #c8c7ce"></a>
                            {% endfor %}
                        </div>
                    </div>

                    <hr class="product-divider">

                    <div class="product-form product-size">
                        <label class="mr-4">{% trans into locale %}Measures{% endtrans %}:</label>
                        <select>
                            {% if locale == 'en' %}
                            <option>{{ (variante.ladoA*0.393701)|round(1)~" x "~(variante.ladoB*0.393701)|round(1) }}{% if variante.grosor %} x {{ (variante.grosor/100*0.393701)|round(1) }}{% endif %} "</option>
                            {% else %}
                            <option>{{ variante.ladoA~" x "~variante.ladoB }}{% if variante.grosor %} x {{ variante.grosor/100 }}{% endif %} cm</option>
                            {% endif %}
                        </select>
                    </div>
#}                </div>
            </div>
            <!-- /detalles de la pieza -->
        </div>
    </div>	

    <!-- Productos relacionados -->
    <section class="product-wrapper container-fluid appear-animate mt-6 mt-md-10 pt-4 pb-8" data-animation-options="{
        'delay': '.3s'
    }">
        <h2 class="title title-center mb-5">{% trans into locale %}Related products{% endtrans %}</h2>
        <div class="owl-carousel owl-theme row owl-nav-full cols-2 cols-md-3 cols-lg-4" data-owl-options="{
            'items': 5,
            'nav': false,
            'loop': false,
            'dots': true,
            'margin': 20,
            'responsive': {
                '0': {
                    'items': 2
                },
                '768': {
                    'items': 3
                },
                '992': {
                    'items': 5,
                    'dots': false,
                    'nav': true
                }
            }
        }">

        {% for relacionada in variante.pieza.variantes %}
        {% if relacionada.id != variante.id %}
        <!-- Producto -->
        <div class="product text-center">
            <figure class="product-media">
                <div class="contenedor-multimedia">
                    <div class="miniatura-multimedia">
                        <div class="thumbnail-multimedia">
                            <div class="centrar-multimedia">
                                {% for imagen in relacionada.imagenesPieza %}
                                {% if imagen.principal == 1 %}
                                <img src="{{ imagen.ruta~'thumb-'~imagen.imagen }}" alt="{{ relacionada.prefijo~" "~relacionada.nombre }}" width="280" height="315" style="background-color: #f2f3f5;" />
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-action-vertical">
                    {% if app.user and app.user.rol.nombre == 'ROLE_USER' %}
                    <a href="#" class="btn-product-icon btn-wishlist login-toggle link-to-tab d-md-show" onclick="javascript: abrirModalTablero('{{ relacionada.id }}', '{{ relacionada.slug }}');"><i class="d-icon-heart"></i></a>
                    {% else %}
                    <a href="#" class="btn-product-icon btn-wishlist login-toggle link-to-tab d-md-show" onclick="javascript: $('#variante-favorito').val('{{ relacionada.id }}');$('#slug-variante-favorito').val('{{ relacionada.slug }}');agregarProductoFavorito();"><i class="d-icon-heart"></i></a>
                    {% endif %}
                </div>
                <div class="product-action">
                    <a href="{{ path('detallePieza.'~locale, {slug: relacionada.slug}) }}" class="btn-product" title="{% trans into locale %}View more{% endtrans %}">{% trans into locale %}View more{% endtrans %}</a>
                </div>
            </figure>
            <div class="product-details">
                <h3 class="product-name">
                    <a href="{{ path('detallePieza.'~locale, {slug: relacionada.slug}) }}">{{ relacionada.prefijo~" "~relacionada.nombre }}</a>
                </h3>
            </div>
        </div>
        <!-- ./producto -->
        {% endif %}
        {% endfor %}

    </section>
    <!-- /productos relacionados -->		
</div>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides.
        PhotoSwipe keeps only 3 of them in the DOM to save memory.
        Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" aria-label="Close (Esc)">X</button>

                <div class="pswp__preloader">
                    <div class="loading-spin"></div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button--arrow--left" aria-label="Previous (arrow left)"></button>
            <button class="pswp__button--arrow--right" aria-label="Next (arrow right)"></button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

{% include '/partials/front-modal-favoritos.html.twig' %}
{% endblock %}

{% block javascript %}
{{ parent() }}
{% include '/js/modal-producto-favoritos.js.twig' %}
{% endblock %}