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

{% block titulo %}Editar variante "{{ variante.referencia }}" de la pieza "{{ variante.pieza.nombre }}"{% endblock %}
{% block contenido %}

<div class="container-fluid">
    <div class="row">
        <div class="col">
            {% if form_errors(form) %}
                <div class="alert alert-danger" role="alert">{{ form_errors(form) }}</div>
            {% endif %}
            {% 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="row">
        <div class="col">
            <div class="alert alert-info" role="alert">Al crear una nueva variante, el nombre de referencia será el nombre completo de la pieza. Por ejemplo, si tienes las piezas IMPULSO MATE e IMPULSO ROJO, tendrás que poner como nombre de referencia MATE, y  en la siguiente variante poner como nombre de referencia ROJO.</div>
        </div>
    </div>

    <!-- Inicio del formulario -->
    {{ form_start(form, {'action':path('editarVariante', {slug: app.request.get('slug')}), 'method':'POST'}) }}
        <div class="form-group row">
            <div class="form-group col-md-4">
                <h6>Código QR</h6>
                <a href="#" data-toggle="modal" data-target="#verQR"><img src="/uploads/piezas/{{ variante.pieza.id }}/{{ variante.id }}/qrcode_{{ variante.slug }}.png" width="150" class="float-left"></a>
            </div>
        </div>
        <!-- Campos principales -->
        <div class="form-group row">
            <div class="form-group col-md-6">
                {{ form_label(form.referencia) }}
                {{ form_widget(form.referencia) }}
            </div>
            <div class="form-group col-md-6">
                {{ form_label(form.nombre) }}
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">{{ variante.pieza.nombre }}</div>
                    </div>
                    {{ form_widget(form.nombre) }}
                </div>
            </div>
            <div class="form-group col-md-4">
                {{ form_label(form.color) }}
                {{ form_widget(form.color) }}
            </div>
            <div class="form-group col-md-4">
                <label for="material" class="required">Material</label>
                <select id="material" name="material" required="required" class="custom-select">
                    <option value="">Selecciona...</option>
                    {% for atributo in materiales %}
                        {{ include('partials/include-back-materiales.html.twig') }}
                    {% endfor %}
                    {% if variante.material.activo == 0 %}
                        {% set atributo = variante.material %}
                        {{ include('partials/include-back-materiales.html.twig') }}
                    {% endif %}
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="grupo_color" class="required">Grupo color</label>
                <select id="grupo_color" name="grupo_color" required="required" class="custom-select">
                    <option value="">Selecciona...</option>
                    {% for atributo in grupos_color %}
                        {{ include('partials/include-back-grupos-color.html.twig') }}
                    {% endfor %}
                    {% if variante.grupoColor.activo == 0 %}
                        {% set atributo = variante.grupoColor %}
                        {{ include('partials/include-back-grupos-color.html.twig') }}
                    {% endif %}
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="efecto" class="required">Efecto</label>
                <select id="efecto" name="efecto" required="required" class="custom-select">
                    <option value="">Selecciona...</option>
                    {% for atributo in efectos %}
                        {{ include('partials/include-back-efectos.html.twig') }}
                    {% endfor %}
                    {% if variante.efecto.activo == 0 %}
                        {% set atributo = variante.efecto %}
                        {{ include('partials/include-back-efectos.html.twig') }}
                    {% endif %}
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="acabado" class="required">Acabado</label>
                <select id="acabado" name="acabado" required="required" class="custom-select">
                    <option value="">Selecciona...</option>
                    {% for atributo in acabados %}
                        {{ include('partials/include-back-acabados.html.twig') }}
                    {% endfor %}
                    {% if variante.acabado.activo == 0 %}
                        {% set atributo = variante.acabado %}
                        {{ include('partials/include-back-acabados.html.twig') }}
                    {% endif %}
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="forma" class="required">Forma</label>
                <select id="forma" name="forma" required="required" class="custom-select">
                    <option value="">Selecciona...</option>
                    {% for atributo in formas %}
                        {{ include('partials/include-back-formas.html.twig') }}
                    {% endfor %}
                    {% if variante.forma.activo == 0 %}
                        {% set atributo = variante.forma %}
                        {{ include('partials/include-back-formas.html.twig') }}
                    {% endif %}
                </select>
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col-md-1">
                <h6>Usos</h6>
            </div>
            <div class="form-group col-md-11">
                {% for atributo in usos %}
                    {{ include('partials/include-back-usos.html.twig') }}
                {% endfor %}
                {% for atributo in variante.usos %}
                    {% if atributo.activo == 0 %}
                        {{ include('partials/include-back-usos.html.twig') }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col-md-1">
                <h6>Espacios</h6>
            </div>
            <div class="form-group col-md-11">
                {% for atributo in espacios %}
                    {{ include('partials/include-back-espacios.html.twig') }}
                {% endfor %}
                {% for atributo in variante.espacios %}
                    {% if atributo.activo == 0 %}
                        {{ include('partials/include-back-espacios.html.twig') }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col-md-1">
                <h6>Características técnicas</h6>
            </div>
            <div class="form-group col-md-11">
                {% for atributo in caracteristicas %}
                    {{ include('partials/include-back-caracteristicas-tecnicas.html.twig') }}
                {% endfor %}
                {% for atributo in variante.caracteristicas %}
                    {% if atributo.activo == 0 %}
                        {{ include('partials/include-back-caracteristicas-tecnicas.html.twig') }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col-md-6">
                {{ form_label(form.lado_a) }}
                {{ form_widget(form.lado_a) }}
            </div>
            <div class="form-group col-md-6">
                {{ form_label(form.lado_b) }}
                {{ form_widget(form.lado_b) }}
            </div>
            <div class="form-group col-md-6">
                {{ form_label(form.superficie) }} &nbsp; <button class="btn btn-secondary mt-n3" type="button" onclick="calcularSuperficie();"><i class="fad fa-calculator-alt"></i> Autocalcular (si es rectangular)</button>
                {{ form_widget(form.superficie) }}
            </div>
            <div class="form-group col-md-6">
                {{ form_label(form.grosor) }}
                {{ form_widget(form.grosor) }}
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col-md-1">
                <h6>Formas de montaje</h6>
            </div>
            <div class="form-group col-md-11">
                {% for atributo in formas_montaje %}
                    {{ include('partials/include-back-formas-montaje.html.twig') }}
                {% endfor %}
                {% for atributo in variante.formasMontaje %}
                    {% if atributo.activo == 0 %}
                        {{ include('partials/include-back-formas-montaje.html.twig') }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="form-group row">
            <div class="form-group col">
                <hr class="divisor-final-formularios">
                {{ form_widget(form.save) }}
                <a href="{{ path('volverListado', {seccion: 'gestionarPieza'}) }}" class="btn btn-secondary float-right mb-2"><i class="fal fa-chevron-left"></i> Volver al listado</a>
            </div>
        </div>
        
    {{ form_end(form) }}
    <!-- ./fin del formulario -->
</div>

<!-- Modal ver QR -->
<div class="modal fade" id="verQR" tabindex="-1" role="dialog" aria-labelledby="verQR" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="verQR">QR</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body text-center">
                <img id="qrcode" src="/uploads/piezas/{{ variante.pieza.id }}/{{ variante.id }}/qrcode_{{ variante.slug }}.png" class="img-fluid">
            </div>
            <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascript %}
{{ parent() }}
<script>
    function calcularSuperficie() {
        ladoA = $('#variante_lado_a').val();
        ladoB = $('#variante_lado_b').val();
        if(ladoA != '' && !isNaN(ladoA) && ladoB != '' && !isNaN(ladoB)) {
            superficie = (ladoA / 100) * (ladoB / 100);
            $('#variante_superficie').val(superficie);
        }
    }
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
{% endblock %}