{% extends "base/base-front-general.html.twig" %}
{% block title %}{% trans into locale %}Favorites{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block robots %}noindex,follow{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content mt-10 mb-10 pb-6">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-4 col-lg-3 col-xl-2">
                {% include '/partials/front-menu-cuenta.html.twig' %}
            </div>
            <div class="col-xs-12 col-md-8 col-lg-9 col-xl-10">
                <div id="favoritos-piezas">
                    <div class="row mb-3">
                        <div class="col">
                            <h3>{{ tablero.nombre }}</h3>
                        </div>
                    </div>
                    <div class="row cols-xs-1 cols-sm-2 cols-lg-3 cols-xl-4">
                        {% for variante in tablero.variantes %}
                        {% if variante.activa == 1 %}
                        <div id="favorito-{{ variante.id }}">
                            <figure class="image-box appear-animate" data-animation-options="{'name': 'fadeInLeftShorter', 'delay': '.4s'}">
                                <div class="contenedor-multimedia">
                                    <div class="miniatura-multimedia">
                                        <div class="thumbnail-multimedia">
                                            <div class="centrar-multimedia">
                                                {% set break = false %}
                                                {% set imagen = '' %}
                                                {% for imagenPieza in variante.imagenesPieza %}
                                                    {% if imagenPieza.principal == 1 and not break %}
                                                        {% set imagen = imagenPieza.ruta~'thumb-'~imagenPieza.imagen %}
                                                        {% set break = true %}
                                                    {% endif %}
                                                {% endfor %}
                                                <img src="{{ imagen }}" alt="{{ variante.prefijo~' '~variante.nombre }}"> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="overlay social-links">
                                    <a href="{{ path('detallePieza', {slug: variante.slug}) }}" class="social-link fas fa-external-link-alt"></a>
                                    <a href="{{ path('distribuidorCercano')~'?slug='~variante.slug }}" class="social-link fas fa-map-marker-alt"></a>
                                    <a href="#" class="social-link fas fa-trash eliminar_favorito" onclick="eliminarFavorito({{ variante.id }});"></a>
                                </div>
                            </figure>
                            <h5>{{ variante.prefijo~' '~variante.nombre }}</h5>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <div class="row">
                        <div class="col text-right">
                            <a href="{{ path('cuentaPaneles') }}" class="btn btn-xs btn-secondary"><i class="fas fa-angle-left pr-1"></i> {% trans into locale %}Back{% endtrans %}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pop up confirmar eliminar de favoritos -->
<div id="popup_favorito" class="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close_eliminar_favorito"><i class="fas fa-window-close"></i></a></div>
        <div>
            <h2>{% trans into locale %}Delete favorite{% endtrans %}</h2>
            <p>{% trans into locale %}Do you want to remove this favourite from panel?{% endtrans %}</p>
            <div class="text-right">
                <a class="btn btn-xs btn-primary" onclick="$('#close_eliminar_favorito').click();">{% trans into locale %}Cancel{% endtrans %}</a>
                <a id="boton-eliminar-favorito" class="btn btn-xs btn-secondary">{% trans into locale %}Delete{% endtrans %}</a>
            </div>
        </div>
    </div>
</div>
<div class="popup-overlay"></div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script>
    $('#menu-paneles').addClass('active');
    function eliminarFavorito(id) {
        $('#boton-eliminar-favorito').attr('onclick', 'confirmarEliminarFavorito('+id+');');
    }
    function confirmarEliminarFavorito(id) {
        $.ajax({
            url: '{{ path('confirmarEliminarFavorito') }}',
            type: 'post',
            dataType: 'json',
            data: {tablero_id: {{ tablero.id }}, variante_id: id},
            async: true,
            success: function(data) {
                if(data.output == 'ok') {
                    $('#close_eliminar_favorito').click();
                    $('#favorito-'+id).fadeOut('slow');
                }
            }
        });
    }
    $(document).ready(function(){
        $('.eliminar_favorito').on('click', function(){
            $('#popup_favorito').fadeIn('slow');
            $('.popup-overlay').fadeIn('slow');
            $('.popup-overlay').height($(window).height());
            return false;
        });    
        $('#close_eliminar_favorito').on('click', function(){
            $('#popup_favorito').fadeOut('slow');
            $('.popup-overlay').fadeOut('slow');
            return false;
        });
    });
    </script>
{% endblock %}