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

{% block titulo %}Nueva variante de la pieza "{{ 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 %}
        </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('nuevaVariante', {slug: pieza.slug}), 'method':'POST'}) }}
        <!-- 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">{{ 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 %}
                </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 %}
                </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 %}
                </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 %}
                </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 %}
                </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 %}
            </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 %}
            </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 %}
            </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 %}
            </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>
{% 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 %}