{#% extends "AppBundle::layout_backend.html.twig" %#}

{% block title 'Configurador Meli '|trans %}

	{% block stylesheets %}
        <link href="{{ asset('bundles/app/dist/easyautocomplete/easy-autocomplete.min.css') }}" rel="stylesheet"/>
        <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/demo/prism.css') }}"/>
        <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/dist/sweetalert.css') }}"/>
        <link rel="Stylesheet" type="text/css" href="{{ asset('bundles/app/dist/croppie/croppie.css') }}"/>
    {% endblock %}

	{% block content %}

        <div class="box">
            <div class="box-header">
                <div class="box-tools" style="top: -15px;">
                    <a class="btn cfj-deg" href="{{ path('app_homepage') }}"><i
                                class="fa fa-arrow-left text-white"></i> {% trans %}Regresar{% endtrans %} </a>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body">


                <form name="appbundle_configuradormeli{{ configurador.id }}" method="post"
                      action="/fjausv7/fjaus/web/app/meli/configurador/guardar/market/meli"
                      enctype="multipart/form-data"><input type="hidden" name="_method" value="PUT"/>


                    {#{ form_start(form, {'id': 'forma'~configurador.id })}#}

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group cfj-image-drag-drop">

                                {% if (configurador.imagenurl) %}
                                    <img class="ui-state-default" id="img_foto1" height="150" width="150"
                                         src="{{ asset(configurador.imagenurl,'directoriofotosbanco') }}"/>
                                {% else %}
                                    <img class="ui-state-default" id="img_foto1" height="150" width="150"
                                         src="{{ asset('plantilla_foto_noborrar.jpeg','directoriofotos') }}"/>
                                {% endif %}
                            </div>
                        </div>


                        {% set xfoto= 'txtfoto'~configurador.id %}
                        <div class="col-md-6">
                            <div class="form-group">
                                {{ form_label(form.foto,'Editar Imagen Publicaciones:'|trans) }}
                                {{ form_widget(form.foto, {'attr':{'id':xfoto,'name':xfoto,'class':'form-control','placeholder':'foto'} }) }}
                                {{ form_errors(form.foto, {'attr':{'class':'form-control'} }) }}
                            </div>
                        </div>
                    </div>

                    {% set xactivarimagen= 'txtactivarimagen'~configurador.id %}

                    <div class="row">
                        <div class="col-md-12">


                            <div class="form-group">
                                {{ form_label(form.activar_imagen_publicacion,'Activar imagen para todas las publicaciones') }}
                                <div class="form-group onoffswitch activarimagen">
                                    {{ form_widget(form.activar_imagen_publicacion, {'attr':{'id':xactivarimagen,'name':xactivarimagen,'class':'onoffswitch-checkbox '} }) }}
                                    <label class="onoffswitch-label" for="myonoffswitch">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>


                        </div>
                    </div>


                    {% set xdesini= 'txtdesini'~configurador.id %}


                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {{ form_label(form.descripcioninicial,'Descripción Inicial Anterior a la descripción el producto:'|trans) }}
                                {{ form_widget(form.descripcioninicial, {'attr':{'id':xdesini,'name':xdesini,'class':'form-control','placeholder':'descripción inicial'} }) }}
                                {{ form_errors(form.descripcioninicial, {'attr':{'class':'form-control'} }) }}
                            </div>
                        </div>
                    </div>

                    {% set xdesfin= 'txtdesfin'~configurador.id %}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {{ form_label(form.descripcionfinal,'Descripción Final posterior a la descripción el producto:'|trans) }}
                                {{ form_widget(form.descripcionfinal, {'attr':{'id':xdesfin,'name':xdesfin,'class':'form-control','placeholder':'descripción final'} }) }}
                                {{ form_errors(form.descripcionfinal, {'attr':{'class':'form-control'} }) }}
                            </div>
                        </div>
                    </div>


                    {% set xtipopub= 'txttipopub'~configurador.id %}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {{ form_label(form.tipopublicacion,'Tipo de Publicación:'|trans) }}
                                {{ form_widget(form.tipopublicacion, {'attr':{'id':xtipopub,'name':xtipopub,'class':'form-control','placeholder':'Tipo Publicación'} }) }}
                                {{ form_errors(form.tipopublicacion, {'attr':{'class':'form-control'} }) }}
                            </div>
                        </div>
                    </div>


                    {% set xordenfoto= 'txtordenfoto'~configurador.id %}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {{ form_label(form.ordenfoto,'Orden de la Foto en las Publicaciones:'|trans) }}
                                {{ form_widget(form.ordenfoto, {'attr':{'id':xordenfoto,'name':xordenfoto,'class':'form-control','placeholder':'Orden de la foto'} }) }}
                                {{ form_errors(form.ordenfoto, {'attr':{'class':'form-control'} }) }}
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-12">

                            {{ form_errors(form) }}
                            {{ form_rest(form) }}
                            {{ form_end(form) }}

                        </div>
                    </div>


            </div>

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



    {% endblock %}

	{% block javascripts %}
        <script src="{{ asset('bundles/app/dist/easyautocomplete/jquery.easy-autocomplete.min.js') }}"
                type="text/javascript"></script>
        <script src="{{ asset('bundles/app/plugins/datepicker/locales/bootstrap-datepicker.es.js') }}"
                type="text/javascript"></script>
        <script src="{{ asset('bundles/app/dist/croppie/demo/prism.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/app/dist/croppie/dist/sweetalert.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('bundles/app/dist/croppie/croppie.js') }}" type="text/javascript"></script>


        <script>


            function mostrarFoto(input, selector) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $(selector).attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }


            $(document).ready(function () {


                $('input[id*="foto"]').change(function (e) {

                    mostrarFoto(this, '#img_foto1');

                });


                $('.activarimagen').on('click', function () {
                    var input = $('input[id*="activar_imagen_publicacion"]');
                    var check = input.prop('checked');
                    if (!check) {
                        input.prop('checked', true);
                        //check = $('#appbundle_children_activo').prop('checked');
                    } else {
                        input.prop('checked', false);
                        //check = $('#appbundle_children_activo').prop('checked');
                    }
                    //});
                });


            });

        </script>

    {% endblock %}