{% extends "base/base-front-shop.html.twig" %}
{% block title %}{% trans into locale %}Categories{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}shop{% endblock %}
{% block contenido %}
    <main class="main">

        <div class="page-content mb-10 pb-3">
            <!-- Migas de pan -->
            <nav class="breadcrumb-nav">
                <div class="container pb-0">
                    <ul class="breadcrumb">
                        <li><a href="{{ path('home.'~locale) }}"><i class="d-icon-home"></i></a></li>
                        <li class="active">Categoría</li>
                    </ul>
                </div>
            </nav>
            <!-- ./migas de pan -->
            
            {% include '/partials/front-ubicacion.html.twig' %}

            <form id="categorias" method="post" action="{{ path('categorias.'~locale) }}">
                <div class="container-fluid">

                    <nav class="toolbox toolbox-horizontal sticky-toolbox sticky-content fix-top pt-4">
                        <aside class="sidebar sidebar-fixed shop-sidebar">
                            <div class="sidebar-overlay"></div>
                            <a class="sidebar-close" href="#"><i class="d-icon-times"></i></a>
                            <div class="sidebar-content toolbox-left">
                                <div class="toolbox-item select-menu" onclick="if(contador != 1){if($('#filtro-espacios').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-espacios');}}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Spaces{% endtrans %}</a>
                                    <ul id="filtro-espacios" class="filter-items">
                                        {% for valor in 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 id="espacio-{{ valor.id }}" onclick="if($('#filtro-espacios').css('visibility') == 'visible' && !$('#espacio-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-espacio-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-colores').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-colores');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Colours{% endtrans %}</a>
                                    <ul id="filtro-colores" class="filter-items">
                                        {% for valor in grupos_color %}
                                        {% 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 id="grupo-color-{{ valor.id }}" onclick="if($('#filtro-colores').css('visibility') == 'visible' && !$('#grupo-color-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-color-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-formatos').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-formatos');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Formats{% endtrans %}</a>
                                    <ul id="filtro-formatos" class="filter-items">
                                        <li id="formato-xxl" onclick="if($('#filtro-formatos').css('visibility') == 'visible' && !$('#formato-xxl').hasClass('active')){evento_click('{{ locale }}-filtro2-formato-{{ 'XXL'|trans|lower }}');}"><a href="#">{% trans into locale %}XXL{% endtrans %}</a></li>
                                        <li id="formato-mediano" onclick="if($('#filtro-formatos').css('visibility') == 'visible' && !$('#formato-mediano').hasClass('active')){evento_click('{{ locale }}-filtro2-formato-{{ 'Medium'|trans|lower }}');}"><a href="#">{% trans into locale %}Medium{% endtrans %}</a></li>
                                        <li id="formato-grande" onclick="if($('#filtro-formatos').css('visibility') == 'visible' && !$('#formato-grande').hasClass('active')){evento_click('{{ locale }}-filtro2-formato-{{ 'Big'|trans|lower }}');}"><a href="#">{% trans into locale %}Big{% endtrans %}</a></li>
                                        <li id="formato-laminas" onclick="if($('#filtro-formatos').css('visibility') == 'visible' && !$('#formato-laminas').hasClass('active')){evento_click('{{ locale }}-filtro2-formato-{{ 'Sheets'|trans|lower }}');}"><a href="#">{% trans into locale %}Sheets{% endtrans %}</a></li>
                                        <li id="formato-xxs" onclick="if($('#filtro-formatos').css('visibility') == 'visible' && !$('#formato-xxs').hasClass('active')){evento_click('{{ locale }}-filtro2-formato-{{ 'XXS'|trans|lower }}');}"><a href="#">{% trans into locale %}XXS{% endtrans %}</a></li>
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-usos').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-usos');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Uses{% endtrans %}</a>
                                    <ul id="filtro-usos" class="filter-items">
                                        {% for valor in 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 id="uso-{{ valor.id }}" onclick="if($('#filtro-usos').css('visibility') == 'visible' && !$('#uso-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-uso-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-efectos').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-efectos');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Effects{% endtrans %}</a>
                                    <ul id="filtro-efectos" class="filter-items">
                                        {% for valor in efectos %}
                                        {% 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 id="efecto-{{ valor.id }}" onclick="if($('#filtro-efectos').css('visibility') == 'visible' && !$('#efecto-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-efecto-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-materiales').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-materiales');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Materials{% endtrans %}</a>
                                    <ul id="filtro-materiales" class="filter-items">
                                        {% for valor in materiales %}
                                        {% 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 id="material-{{ valor.id }}" onclick="if($('#filtro-materiales').css('visibility') == 'visible' && !$('#material-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-material-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-acabados').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-acabados');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Finishes{% endtrans %}</a>
                                    <ul id="filtro-acabados" class="filter-items">
                                        {% for valor in acabados %}
                                        {% 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 id="acabado-{{ valor.id }}" onclick="if($('#filtro-acabados').css('visibility') == 'visible' && !$('#acabado-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-acabado-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-caracteristicas').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-caracteristicas');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Characteristics{% endtrans %}</a>
                                    <ul id="filtro-caracteristicas" class="filter-items">
                                        {% for valor in 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 id="caracteristica-{{ valor.id }}" onclick="if($('#filtro-caracteristicas').css('visibility') == 'visible' && !$('#caracteristica-{{ valor.id }}').hasClass('active')){evento_click('{{ locale }}-filtro2-caracteristica-{{ valor_textos.slug }}');}"><a href="#">{{ valor_textos.nombre }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="toolbox-item select-menu" onclick="if($('#filtro-grosor').css('visibility') != 'visible'){evento_click('{{ locale }}-filtro1-grosor');}">
                                    <a class="select-menu-toggle" href="#">{% trans into locale %}Thickness{% endtrans %}</a>
                                    <ul id="filtro-grosor" class="filter-items">
                                        <li id="grosor-slim" onclick="if($('#filtro-grosor').css('visibility') == 'visible' && !$('#grosor-slim').hasClass('active')){evento_click('{{ locale }}-filtro2-grosor-{{ 'Slim'|trans|lower }}');}"><a href="#">{% trans into locale %}Slim{% endtrans %}</a></li>
                                        <li id="grosor-estandar" onclick="if($('#filtro-grosor').css('visibility') == 'visible' && !$('#grosor-estandar').hasClass('active')){evento_click('{{ locale }}-filtro2-grosor-{{ 'Standard'|trans|lower }}');}"><a href="#">{% trans into locale %}Standard{% endtrans %}</a></li>
                                        <li id="grosor-espesorado" onclick="if($('#filtro-grosor').css('visibility') == 'visible' && !$('#grosor-espesorado').hasClass('active')){evento_click('{{ locale }}-filtro2-grosor-{{ 'Thickened'|trans|lower }}');}"><a href="#">{% trans into locale %}Thickened{% endtrans %}</a></li>
                                    </ul>
                                </div>
                            </div>
                        </aside>
                        <div class="toolbox-left">
                            <a href="#" class="toolbox-item left-sidebar-toggle btn btn-outline btn-primary btn-rounded btn-icon-right d-lg-none">{% trans into locale %}Filters{% endtrans %}<i class="d-icon-arrow-right"></i></a>
                        </div>
                    </nav>
                    <div class="select-items">
                        <a href="#" class="filter-clean text-primary">{% trans into locale %}Clean{% endtrans %}</a>
                    </div>

                    <div class="row main-content-wrap gutter-lg">

                        <div class="col main-content">
                            <div id="resultados">
                            </div>
                            <img id="gif-cargando-resultados" src="{{ asset('assets/back/images/loading.gif') }}" alt="{% trans into locale %}Loading{% endtrans %}..." class="mx-auto" style="display:none;">
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </main>
{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    function filtrar_variantes(pagina, change = false) {
        if(change == false) {
            pagina_piezas = 1;
            $('#resultados').html('');
        }
        else {
            $('#boton-ver-mas-'+pagina).hide();
        }
        $('#gif-cargando-resultados').addClass("d-block");
        $('#gif-cargando-resultados').show();
        formulario = new FormData(document.getElementById('categorias'));
        {% for valor in efectos %}
        if($('#efecto-{{ valor.id }}').hasClass('active')) {
            formulario.append('efecto-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in espacios %}
        if($('#espacio-{{ valor.id }}').hasClass('active')) {
            formulario.append('espacio-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in grupos_color %}
        if($('#grupo-color-{{ valor.id }}').hasClass('active')) {
            formulario.append('grupo-color-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in usos %}
        if($('#uso-{{ valor.id }}').hasClass('active')) {
            formulario.append('uso-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in caracteristicas %}
        if($('#caracteristica-{{ valor.id }}').hasClass('active')) {
            formulario.append('caracteristica-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in materiales %}
        if($('#material-{{ valor.id }}').hasClass('active')) {
            formulario.append('material-{{ valor.id }}', 1);
        }
        {% endfor %}
        {% for valor in acabados %}
        if($('#acabado-{{ valor.id }}').hasClass('active')) {
            formulario.append('acabado-{{ valor.id }}', 1);
        }
        {% endfor %}
        if($('#formato-xxl').hasClass('active')) {
            formulario.append('formato-xxl', 1);
        }
        if($('#formato-mediano').hasClass('active')) {
            formulario.append('formato-mediano', 1);
        }
        if($('#formato-grande').hasClass('active')) {
            formulario.append('formato-grande', 1);
        }
        if($('#formato-laminas').hasClass('active')) {
            formulario.append('formato-laminas', 1);
        }
        if($('#formato-xxs').hasClass('active')) {
            formulario.append('formato-xxs', 1);
        }
        if($('#grosor-slim').hasClass('active')) {
            formulario.append('grosor-slim', 1);
        }
        if($('#grosor-estandar').hasClass('active')) {
            formulario.append('grosor-estandar', 1);
        }
        if($('#grosor-espesorado').hasClass('active')) {
            formulario.append('grosor-espesorado', 1);
        }
        formulario.append('pagina', pagina);
        formulario.append('change', change);
        formulario.append('longitud', longitud);
        formulario.append('latitud', latitud);
        formulario.append('locale', '{{ locale }}');
        $.ajax({
            url: '{{ path('filtrarVariantes') }}',
            type: 'post',
            dataType: 'html',
            data: formulario,
            processData: false,
            contentType: false,
            async: true,
            success: function(data) {
                if(change == true) {
                    $('#resultados').append(data);
                }
                else {
                    $('#resultados').html(data);
                }
                $('#gif-cargando-resultados').removeClass("d-block");
                $('#gif-cargando-resultados').hide();
                {% if espacio %}
                if(contador == 1) {
                    $('#espacio-{{ espacio.id }} a:first-child').click();
                    contador++;
                }
                {% endif %}
            }
        });
    }
    function desbloquear() {
        $('#modal-zip').hide();
        $('html, body').css({
            overflow: 'auto',
            height: 'auto'
        });
    }
    function confirmarZip(event) {
        event.preventDefault();
        formulario = new FormData(document.getElementById('localizacion'));
        formulario.append('locale', '{{ locale }}');
        $.ajax({
            url: '{{ path('confirmarZip') }}',
            type: 'post',
            dataType: 'json',
            data: formulario,
            processData: false,
            contentType: false,
            async: true,
            success: function(data) {
                if(data.output == 'ok') {
                    longitud = data.longitud;
                    latitud = data.latitud;
                    desbloquear();
                    filtrar_variantes(1);
                }
                else {
                    $('#error-zip').html(data.error);
                    $('#error-zip').show();
                }
            }
        });
    }
    function setearPosicion(position) {
        longitud = position.coords.longitude;
        latitud = position.coords.latitude;
        desbloquear();
        filtrar_variantes(1);
    }
    $(document).ready(function() {
        pagina_piezas = 1;
        contador = 1;
        {% if longitud is null %}
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(setearPosicion);
            }
            longitud = null;
            latitud = null;
            filtrar_variantes(1);
            setTimeout(function(){
                $('#desplegar-modal').click();
                $('html, body').css({
                    overflow: 'hidden',
                    height: '100%'
                });
                $('.canvas-overlay').click(function(e) {
                    e.preventDefault();
                    return false;
                });
{#                $('.canvas-overlay').css('pointer-events', 'none');#}
            }, 100);
        {% else %}
            longitud = {{ longitud }};
            latitud = {{ latitud }};
            filtrar_variantes(1);
        {% endif %}
    });
</script>
{% endblock %}