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

{% block titulo %}Aprobar atributos{% endblock %}
{% block contenido %}

<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>
    
    <!-- Listado -->
    <div class="form-group row">
        <div class="col-xl-12">
            <div class="table-responsive tabla-listados">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" width="20%">Atributo sugerido</th>
                            <th scope="col" width="64%">Filtro</th>
                            <th scope="col" width="8%" class="text-center">Aprobar</th>
                            <th scope="col" width="8%" class="text-center">Eliminar</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for atributo in acabados %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Acabados</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoAcabado{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'acabados', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoAcabado{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('acabados');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in caracteristicas %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Características técnicas</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoCaracteristica{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'caracteristicas', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoCaracteristica{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('caracteristicas');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in efectos %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Efectos</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoEfecto{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'efectos', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoEfecto{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('efectos');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in espacios %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Espacios</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoEspacio{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'espacios', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoEspacio{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('espacios');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in formas %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Formas</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoForma{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'formas', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoForma{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('formas');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in formas_montaje %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Formas de montaje</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoFormaMontaje{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'formas-montaje', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoFormaMontaje{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('formas-montaje');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in grupos_color %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Grupos color</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoGrupoColor{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'grupos-color', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoGrupoColor{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('grupos-color');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in materiales %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Materiales</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoMaterial{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'materiales', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoMaterial{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('materiales');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                        {% for atributo in usos %}
                        {% set break = false %}
                        {% set atributo_textos = [] %}
                        {% for traduccion in atributo.traducciones %}
                            {% if (traduccion.idioma.codigo == locale or loop.index == atributo.traducciones|length) and not break %}
                                {% set atributo_textos = traduccion %}
                                {% set break = true %}
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td>{{ atributo_textos.nombre }}</td>
                            <td>Usos</td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#aprobarAtributo" onclick="javascript: aprobarAtributoUso{{ atributo.id }}();"><i class="fad fa-check-circle"></i></a></td>
                            <td class="text-center"><a href="#" data-toggle="modal" data-target="#eliminarModal" onclick="javascript: eliminarAtributo('{{ path('eliminarAtributo', {slug_filtro: 'usos', id: atributo.id}) }}');"><i class="fad fa-trash-alt"></i></a></td>
                        </tr>
                        <script>
                            function aprobarAtributoUso{{ atributo.id }}() {
                                $('#filtroDelAtributo').val('usos');
                                {% for traduccion in atributo.traducciones %}
                                $('#nombreAtributo{{ traduccion.idioma.codigo }}').val('{{ traduccion.nombre }}');
                                {% endfor %}
                                $('#idAtributo').val({{ atributo.id }});
                            }
                        </script>
                        {% endfor %}
                    </tbody>
                </table>
            </div> 
        </div>               
    </div>
</div>

<!-- Modal aprobar atributo -->
<div class="modal fade" id="aprobarAtributo" tabindex="-1" role="dialog" aria-labelledby="aprobarAtributoLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form name="atributo" action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="aprobarAtributoLabel">Confirma la información del nuevo atributo</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col">
                            <ul class="nav nav-tabs mb-4" id="tabIdiomas" role="tablist">
                                {% for idioma in idiomas %}
                                <li class="nav-item">
                                    <a class="nav-link{% if loop.first %} active{% endif %}" id="{{ idioma.codigo }}-tab" data-toggle="tab" href="#{{ idioma.codigo }}" role="tab" aria-controls="{{ idioma.codigo }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">{{ idioma.nombre }}</a>
                                </li>
                                {% endfor %}
                            </ul>

                            <div class="tab-content" id="tabIdiomasContenido">
                                {% for idioma in idiomas %}
                                <!-- {{ idioma.nombre }} -->
                                <div class="tab-pane fade{% if loop.first %} show active{% endif %}" id="{{ idioma.codigo }}" role="tabpanel" aria-labelledby="{{ idioma.codigo }}-tab">
                                    <div class="form-group col">
                                        <!-- Campos principales -->
                                        <div class="form-group row">
                                            <div class="form-group col-xl-12">
                                                <label for="nombreAtributo{{ idioma.codigo }}"{% if idioma.defecto == 1 %} class="required"{% endif %}>Nombre del atributo</label>
                                                <input type="text" id="nombreAtributo{{ idioma.codigo }}" name="nombre_{{ idioma.codigo }}" class="form-control" placeholder="Indica el nombre del atributo..." value="{{ app.request.get('nombre_'~idioma.codigo) }}">
                                            </div>
                                            {% if idioma.codigo == 'es' %}
                                            <div class="form-group col-xl-12">
                                                <label for="filtroDelAtributo" class="required">Filtro del atributo</label>
                                                <select class="form-control" required="required" id="filtroDelAtributo" name="filtro">
                                                    <option value="">Selecciona...</option>
                                                    <option value="acabados"{% if app.request.get('filtro') == 'acabados' %} selected="selected"{% endif %}>Acabados</option>
                                                    <option value="caracteristicas"{% if app.request.get('filtro') == 'caracteristicas' %} selected="selected"{% endif %}>Características técnicas</option>
                                                    <option value="efectos"{% if app.request.get('filtro') == 'efectos' %} selected="selected"{% endif %}>Efectos</option>
                                                    <option value="espacios"{% if app.request.get('filtro') == 'espacios' %} selected="selected"{% endif %}>Espacios</option>
                                                    <option value="grupos-color"{% if app.request.get('filtro') == 'grupos-color' %} selected="selected"{% endif %}>Grupos de color</option>
                                                    <option value="materiales"{% if app.request.get('filtro') == 'materiales' %} selected="selected"{% endif %}>Materiales</option>
                                                    <option value="usos"{% if app.request.get('filtro') == 'usos' %} selected="selected"{% endif %}>Usos</option>
                                                </select>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <!-- /.{{ idioma.nombre }} -->
                                {% endfor %}
                            </div>
                            <input type="hidden" id="idAtributo" name="id_atributo" value="" />
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                    <button type="submit" id="aprobarAtributo" name="save" class="btn btn-primary">Aprobar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal eliminar atributo -->
<div class="modal fade" id="eliminarModal" tabindex="-1" role="dialog" aria-labelledby="eliminarAtributo" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="eliminarAtributo">¿Seguro que quieres eliminar este atributo?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">Pulsa en "Eliminar" para eliminar el atributo.</div>
            <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
            <a id="boton-eliminar-atributo" class="btn btn-primary" href="#">Eliminar</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    function eliminarAtributo(ruta) {
        $('#boton-eliminar-atributo').attr('onclick', 'document.location.href = "'+ruta+'";');
    }
    function aprobarAtributo() {
        $('#boton-eliminar-atributo').attr('onclick', 'document.location.href = "'+ruta+'";');
    }
</script>
{% endblock %}