{% block content %}

    <div class="box">
        <div class="box-header">
            <h3 class="box-title">{% trans %}Nueva Variación {% endtrans %}</h3>
            <div class="box-tools">
                <a class="btn btn-info" href="{{ path('ProductViewsController_indexView') }}"><i
                            class="fa fa-arrow-left text-white"></i> {% trans %}Regresar{% endtrans %} </a>
            </div>
        </div><!-- /.box-header -->
        <div class="box-body">
            {{ form_start(form, { 'enctype':"multipart/form-data"}) }}

            <div class="row">
                <div class="panel cfj-panel">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="tabbable" id="tabs-463728">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item active">
                                            <a class="nav-link active show" href="#tabDetalles" data-toggle="tab">Detalles
                                                Producto</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#tabAtributos" data-toggle="tab">Atributos</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#tabFoto" data-toggle="tab">Foto</a>
                                        </li>
                                        <li class="nav-item fatherProduct">
                                            <a class="nav-link" href="#tabPricing" data-toggle="tab">Pricing</a>
                                        </li>
                                        <li class="nav-item fatherProduct">
                                            <a class="nav-link" href="#tabStock" data-toggle="tab">Stock Inicial</a>
                                        </li>
                                        <li class="nav-item fatherProduct">
                                            <a class="nav-link" href="#tabVariation" data-toggle="tab">Variacion</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#tabSincronizacion" data-toggle="tab">Sincronización</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tabDetalles">

                                            <div class="hidden" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.is_parent,'¿Es un producto padre?'|trans) }}
                                                    {{ form_widget(form.is_parent, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Título'} }) }}
                                                </div>
                                            </div>

                                            <div class="col-xs-12 col-sm-12 col-md-6" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.titulo,'Título:'|trans) }}
                                                    {{ form_widget(form.titulo, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Título'} }) }}
                                                    {{ form_errors(form.titulo, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-6 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.sku,'Sku:'|trans) }}
                                                    {{ form_widget(form.sku, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Sku'} }) }}
                                                    {{ form_errors(form.sku, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-6 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.codprodproveedor,'Codigo Referencia:'|trans) }}
                                                    {{ form_widget(form.codprodproveedor, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Codigo Referencia'} }) }}
                                                    {{ form_errors(form.codprodproveedor, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                <span id="caracteresCorta"
                                                      style="position: absolute; bottom: 70px; z-index: 1; right: 20px;">144</span>
                                                <div class="form-group">
                                                    {{ form_label(form.descripcioncorta,'Descripción Corta:'|trans) }}
                                                    {{ form_widget(form.descripcioncorta, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow descorta','placeholder':'Maximo 144 caracteres', 'maxlength':143}}) }}
                                                    {{ form_errors(form.descripcioncorta, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-12">
                                                <span id="caracteresLarga"
                                                      style="position: absolute; bottom: 110px; z-index: 1; right: 20px;">800</span>
                                                <div class="form-group">
                                                    {{ form_label(form.descripcion,'Descripción Larga:'|trans) }}
                                                    {{ form_widget(form.descripcion, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow cfj-textarea-height deslarga','placeholder':'Maximo 800 caracteres', 'maxlength':799} }) }}
                                                    {{ form_errors(form.descripcion, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-6 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.categoriaproveedor,'Categoria Proveedor:'|trans) }}
                                                    {{ form_widget(form.categoriaproveedor, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Categoria Id'} }) }}
                                                    {{ form_errors(form.categoriaproveedor, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-4 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.marca,'Marca:'|trans) }}
                                                    {{ form_widget(form.marca, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Categoria Id'} }) }}
                                                    {{ form_errors(form.marca, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-2 col-md-2" style="margin-top: 5px;">
                                                <br/>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabAtributos" style="margin-top:10px;">
                                            <div class="col-xs-12 col-sm-3 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.peso,'Peso (kg)'|trans) }}
                                                    {{ form_widget(form.peso, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Peso'} }) }}
                                                    {{ form_errors(form.peso, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-3 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.alto,'Alto (cm)'|trans) }}
                                                    {{ form_widget(form.alto, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Alto'} }) }}
                                                    {{ form_errors(form.alto, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-3 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.profundidad,'Profundidad (cm)'|trans) }}
                                                    {{ form_widget(form.profundidad, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Profundidad'} }) }}
                                                    {{ form_errors(form.profundidad, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-3 col-md-3">
                                                <div class="form-group">
                                                    {{ form_label(form.ancho,'Ancho (cm)'|trans) }}
                                                    {{ form_widget(form.ancho, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Ancho'} }) }}
                                                    {{ form_errors(form.ancho, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabSincronizacion" style="margin-top:10px;">
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
                                                 style="margin-bottom: 10px;">
                                                <div class="form-group">
                                                    <div class="col-lg-4 col-md-4 col-xs-12">
                                                        {{ form_label(form.activaractualizarstock,'Actualizar Stock y Precios') }}
                                                    </div>
                                                    <div class="col-lg-4 col-md-4 col-xs-12" align="">
                                                        <div class="form-group onoffswitch onoffswitch-activaractualizarstock">
                                                            {{ form_widget(form.activaractualizarstock, {'attr':{'class':'onoffswitch-checkbox'} }) }}
                                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                                <span class="onoffswitch-inner"></span>
                                                                <span class="onoffswitch-switch"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
                                                 style="margin-bottom: 10px;">
                                                <div class="form-group">
                                                    <div class="col-lg-4 col-md-4 col-xs-12">
                                                        {{ form_label(form.activarobtenerproducto,'Actualizar Productos') }}
                                                    </div>
                                                    <div class="col-lg-4 col-md-4 col-xs-12" align="">
                                                        <div class="form-group onoffswitch onoffswitch-activarobtenerproducto">
                                                            {{ form_widget(form.activarobtenerproducto, {'attr':{'class':'onoffswitch-checkbox'} }) }}
                                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                                <span class="onoffswitch-inner"></span>
                                                                <span class="onoffswitch-switch"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                <div class="form-group">
                                                    <div class="col-lg-4 col-md-4 col-xs-12">
                                                        {{ form_label(form.publicado,'Estado') }}
                                                    </div>
                                                    <div class="col-lg-4 col-md-4 col-xs-12" align="">
                                                        <div class="form-group onoffswitch onoffswitch-publicado">
                                                            {{ form_widget(form.publicado, {'attr':{'class':'onoffswitch-checkbox'} }) }}
                                                            <label class="onoffswitch-label" for="myonoffswitch">
                                                                <span class="onoffswitch-inner"></span>
                                                                <span class="onoffswitch-switch"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabFoto" style="margin-top:10px;">
                                            <div class="form-group">
                                                <a href="#" class="btn btn-primary btn-sm collection-add"
                                                   data-collection="image-container">
                                                    <i class="fa fa-plus-square"></i>&nbsp;&nbsp;<span>Agregar Imagen</span>
                                                </a>
                                                <div id="image-container" class="collection-container"
                                                     data-prototype="{{ form_widget(form.imagenproducto.vars.prototype, {'attr':{'class':'col-xs-3 col-sm-3 col-md-3 col-lg-3'} }) | e }}">

                                                    {# {% for imageField in form.imagenproducto %}
                                                    <li>
                                                        {{ form_widget(imageField) }}
                                                    </li>
                                                    {% endfor %} #}

                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabPricing">
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.moneda,'Moneda Id:'|trans) }}
                                                    {{ form_widget(form.moneda, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Moneda Id'} }) }}
                                                    {{ form_errors(form.moneda, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>

                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.alicuota,'Alicuota:'|trans) }}
                                                    {{ form_widget(form.alicuota, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Alicuota'} }) }}
                                                    {{ form_errors(form.alicuota, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.precioneto,'Precio Neto:'|trans) }}
                                                    {{ form_widget(form.precioneto, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Precio Neto'} }) }}
                                                    {{ form_errors(form.precioneto, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.precio,'Precio:'|trans) }}
                                                    {{ form_widget(form.precio, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Precio'} }) }}
                                                    {{ form_errors(form.precio, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabStock">
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.stockinicial,'Cantidad Inicial:'|trans) }}
                                                    {{ form_widget(form.stockinicial, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Cantidad Inicial'} }) }}
                                                    {{ form_errors(form.stockinicial, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.stock,'Cantidad Disponible:'|trans) }}
                                                    {{ form_widget(form.stock, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Cantidad Disponible'} }) }}
                                                    {{ form_errors(form.stock, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-sm-4 col-md-3" style="margin-top:10px;">
                                                <div class="form-group">
                                                    {{ form_label(form.reserva,'Reserva:'|trans) }}
                                                    {{ form_widget(form.reserva, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow','placeholder':'Reserva stock Ventas'} }) }}
                                                    {{ form_errors(form.reserva, {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow'} }) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="tabVariation">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6" style="margin-top:10px;">
                                                    <div class="form-group">
                                                        <label for="appbundle_productoglobal_alicuota" class="required">Tipo
                                                            de Variacion:</label>
                                                        <select id="select-variation-form"
                                                                class="form-control cfj-inputs-shadow cfj-inputs-shadow">
                                                            <option></option>
                                                            {% for choice in form.variations.vars.choices %}
                                                                <option value="{{ choice.value }}">{{ choice.label }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                {% for choice in form.variations.vars.choices %}
                                                    {% set method = 'variation_' ~ choice.value %}
                                                    <div class="col-xs-12 col-sm-6 col-md-6" style="margin-top:10px;">
                                                        <div class="form-group">
                                                            {{ form_label(attribute(form, method), label|default(null), {'label_attr':{'style':'text-transform: capitalize;'}}) }}
                                                            {{ form_widget(attribute(form, method), {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow col-md-12','placeholder':'Nombre de presentación','multiple':'multiple'} }) }}
                                                            {{ form_errors(attribute(form, method), {'attr':{'class':'form-control cfj-inputs-shadow cfj-inputs-shadow col-md-12'} }) }}
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{ form_errors(form) }}
                                {{ form_rest(form) }}
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.box-body -->
        {# <div class="box-footer">            
        </div><!-- box-footer --> #}
    </div><!-- /.box -->

    <!-- Modal -->
    <div class="modal fade" id="modal-marca" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Listado marcas parecidas</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover" id="tabla-marcas">
                        <thead>
                        <tr>Marca</tr>
                        <tr></tr>
                        </thead>
                        <tbody id="body">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button id="btn-denegar" type="button" class="btn btn-danger" data-dismiss="modal">Denegar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <link href="{{ asset('bundles/app/plugins/select2/select2.min.css') }}" rel="stylesheet"/>
    <script src="{{ asset('bundles/app/plugins/select2/select2.full.min.js') }}" type="text/javascript"></script>

    <script>


        function variations() {
            // hidden inputs variations
            $('#appbundle_productoglobal_variations').parent().hide();
            $("select[id^='appbundle_productoglobal_variation_']").parent().parent().hide();

            // show inputs variation by change select
            $("#select-variation-form").change(function () {
                var variationID = $(this).find(":selected").val();
                $('#appbundle_productoglobal_variation_' + variationID).parent().parent().show();
                $(this).find(":selected").remove();

                if ($("#select-variation-form option").length <= 1) {
                    $(this).parent().parent().hide();
                }
            });

            $("select[id^='appbundle_productoglobal_variation_']").select2({
                tags: true,
                width: '100%',
                containerCssClass: 'col-md-12 cfj-inputs-shadow'
            });
        }

        variations();

        $('.onoffswitch-publicado').on('click', function () {
            var input = $('input[id*="publicado"]');
            var check = input.prop('checked');
            if (!check) {
                input.val('1');
                input.prop('checked', true);
            } else {
                input.val('0');
                input.prop('checked', false);
            }
        });


        $('.onoffswitch-activaractualizarstock').on('click', function () {
            var input1 = $('input[id*="activaractualizarstock"]');
            var check1 = input1.prop('checked');
            if (!check1) {
                input1.val('1');
                input1.prop('checked', true);
            } else {
                input1.val('0');
                input1.prop('checked', false);
            }
        });

        $('.onoffswitch-activarobtenerproducto').on('click', function () {
            var input2 = $('input[id*="activarobtenerproducto"]');
            var check2 = input2.prop('checked');
            if (!check2) {
                input2.val('1');
                input2.prop('checked', true);
                cambioactivarproducto = true;
            } else {
                input2.val('0');
                input2.prop('checked', false);
                cambioactivarproducto = false;
            }
        });

        $('.markupdesactivar').on('click', function () {
            var input = $('input[id*="markupdesactivar"]');
            var check = input.prop('checked');
            if (!check) {
                input.val('1');
                input.prop('checked', true);
                var smarkup = $('select[id*="markup"]');
                smarkup.prop('disabled', false);
            } else {
                input.val('0');
                input.prop('checked', false);
                var smarkup = $('select[id*="markup"]');
                smarkup.prop('disabled', true);
            }
        });

    </script>
{% endblock %}