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

{% block titulo %}Editar atributo del filtro "{{ filtro }}"{% 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>
    
    <!-- Inicio del formulario -->
    <form name="atributo" action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" method="post"{% if filtro == 'Formas de montaje' %} enctype="multipart/form-data"{% endif %}>

        <!-- Campos principales -->
        <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-md-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="Nombre del atributo..." value="{{ app.request.get('nombre_'~idioma.codigo) }}">
                        </div>
                        {% if filtro == 'Espacios' %}
                        <div class="form-group col-md-12">
                            <label for="descripcionAtributo{{ idioma.codigo }}">Descripción del atributo</label>
                            <textarea class="form-control" id="descripcionAtributo{{ idioma.codigo }}" name="descripcion_{{ idioma.codigo }}" rows="3">{{ app.request.get('descripcion_'~idioma.codigo) }}</textarea>
                        </div>
                        {% endif %}
                    </div>
                    <!-- /.{{ idioma.nombre }} -->
                    {% endfor %}
                </div>
            </div>
        </div>
             
        {% if filtro == 'Formas' %}
        <div class="form-check form-check-inline ml-3">
            <input class="form-check-input" type="checkbox" name="montaje" id="montaje" value="1"{% if app.request.get('montaje') == 1 %} checked{% endif %}>
            <label class="form-check-label" for="montaje">Requiere seleccionar forma de montaje</label>
        </div>
        {% endif %}
        
        {% if filtro == 'Formas de montaje' %}
        <div class="form-group row">
            <div class="form-group col">
                <h6 class="mb-3">Imagen</h6>

                {% if atributo.imagen %}
                <img id="miniatura" src="{{ atributo.ruta~'thumb-'~atributo.imagen }}" alt="Imagen de la forma de montaje" class="logo-perfil">
                {% else %}
                <img id="miniatura" src="{{ asset('assets/back/images/imagen-no-disponible.png') }}" alt="Imagen de la forma de montaje" class="logo-perfil">
                {% endif %}

                <div class="clearfix"></div>
                <a href="#" data-toggle="modal" data-target="#modalImagen" class="btn btn-secondary btn-xs mt-3">Subir imagen</a>

                <!-- Modal imagen -->
                <div class="modal fade" id="modalImagen" tabindex="-1" role="dialog" aria-labelledby="modalImagen" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="modalImagen">Sube la imagen de la forma de montaje</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="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Subir</span>
                                    </div>
                                    <div class="custom-file">
                                        <label class="custom-file-label" for="imagen">Elegir archivo...</label>
                                        <input type="file" id="imagen" name="imagen">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                            <a class="btn btn-primary" href="#">Cargar imagen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="form-group row">
            <div class="form-group col">
                <hr class="divisor-final-formularios">
                <button type="submit" id="guardarAtributo" name="save" class="btn btn-primary float-right ml-2">Guardar atributo</button>
                <a href="{{ path('volverListado', {seccion: 'listadoAtributos'}) }}" class="btn btn-secondary float-right mb-2"><i class="fal fa-chevron-left"></i> Volver al listado</a>
            </div>
        </div>
        
    </form>
    <!-- ./fin del formulario -->
</div>

{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    if(window.FileReader) {
        function seleccionArchivo(evt) {
            var files = evt.target.files;
            var f = files[0];
            var leerArchivo = new FileReader();
            leerArchivo.onload = (function(elArchivo) {
                return function(e) {
                    $('#miniatura').attr('src', e.target.result);
                    $('#modalImagen').modal('hide');
                };
            })(f);
            leerArchivo.readAsDataURL(f);
        }
    }
    else {
        document.getElementById('miniatura').innerHTML = "El navegador no soporta vista previa";
    }
    document.getElementById('imagen').addEventListener('change', seleccionArchivo, false);
</script>
{% endblock %}