{% extends "base/base-back-totem.html.twig" %}
{% block title %}Producto | Cershop{% endblock %}
{% block metadescription %}Producto{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block titulo %}Producto{% endblock %}
{% block contenido %}

<!-- Barra acciones -->
{% include '/partials/totem-barra-acciones.html.twig' %}
{% include '/partials/include-aviso-crear-cuenta.html.twig' %}

<form id="formulario" method="post" action="{{ url_pags }}">
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                {% for flash_message in app.session.flashbag.get('danger') %}
                    <div class="alert alert-danger" role="alert">{{ flash_message }}</div>
                {% endfor %}
                {% for flash_message in app.session.flashbag.get('success') %}
                    <div class="alert alert-success" role="alert">{{ flash_message }}</div>
                {% endfor %}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-xl-9 col-lg-6">
            </div>
            <div class="col-xl-3 col-lg-6">
                <!-- Buscador -->
                <div class="input-group mb-3">
                    <input type="text" class="form-control bg-light border-0 small" placeholder="Escribe una referencia..." aria-label="Buscar" aria-describedby="basic-addon2" name="buscar" value="{{ app.request.get('buscar') }}">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="$('#formulario').submit();">
                            <i class="fas fa-search fa-sm"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid pb-4">
        <div class="row">
            {% for variante in variantes %}
                {% set break = false %}
                {% set imagen = '' %}
                {% for imagenPieza in variante.imagenesPieza %}
                    {% if imagenPieza.principal == 1 and not break %}
                        {% set imagen = imagenPieza.ruta~imagenPieza.imagen %}
                        {% set break = true %}
                    {% endif %}
                {% endfor %}
            <!-- Producto -->
            <div class="col-xl-3 col-lg-4 col-md-6">
                <a href="#" data-toggle="modal" data-target="#informacionProducto{{ variante.id }}">
                    <div class="contenedor-multimedia">
                        <div class="miniatura-multimedia">
                            <div class="thumbnail-multimedia">
                                <div class="centrar-multimedia">
                                    <img src="{{ imagen }}">  
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                <h5 class="pb-2"><a href="#" data-toggle="modal" data-target="#informacionProducto{{ variante.id }}">{{ variante.prefijo~" "~variante.nombre }} &ensp;<i class="fal fa-arrow-from-left"></i></a></h5>
            </div>
            <!-- /.producto -->
            {% endfor %}
        </div>

        <div class="form-group row">
            <div class="col-xl-12">
                {{ include('partials/pagination.html.twig') }}
            </div>
        </div>
    </div>
</form>

{% for variante in variantes %}
    {{ include('partials/include-modal-totem-producto.html.twig') }}
{% endfor %}

{% if distribuidor.comercial and mostrar_comercial %}
<a id="modal-comerciales" href="#" class="btn btn-secondary" style="display:none;" data-toggle="modal" data-target="#seleccionarComercial">Modal seleccionar comercial</a>
<!-- Modal seleccionar comercial -->
<div class="modal fade" id="seleccionarComercial" tabindex="-1" role="dialog" aria-labelledby="seleccionarComercialLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="seleccionarComercialLabel">Seleccionar un comercial</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
                Selecciona un comercial:
                <select id="comercial" class="form-control">
                    <option value="0">Selecciona...</option>
                    {% for comercial in distribuidor.comerciales %}
                    <option value="{{ comercial.id }}">{{ comercial.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
            <a class="btn btn-primary" href="#" onclick="asociar_comercial();$('#seleccionarComercial').modal('hide');">Confirmar</a>
            </div>
        </div>
    </div>
</div>
{% endif %}

{{ include('partials/include-modal-actividad-comercial.html.twig') }}
{% include '/partials/back-modal-favoritos.html.twig' %}

{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    $('#btn_producto').addClass('active');
    
    {% if distribuidor.comercial and mostrar_comercial %}
    $('#modal-comerciales').click();
    function asociar_comercial() {
        id = $('#comercial').val();
        $.ajax({
            url: '{{ (path('asociarComercialInteraccion')) }}',
            type: 'post',
            dataType: 'json',
            data: {
                'id': id
            },
            async: true,
            success: function (data)
            {
            }
        });
        return false;
    }
    {% endif %}
</script>
{{ include('js/modal-inactividad.js.twig') }}
{% include '/js/modal-producto-favoritos.js.twig' %}
{% endblock %}