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

{% block title 'Insertar Categoria Mercado Libre'|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') }}"/>

    <link href="{{ asset('bundles/app/plugins/sweetalert/css/sweetalert.css') }}" rel="stylesheet" type="text/css"/>


{% endblock %}


{% block headercontent %}
    {% trans %}Categoria Mercado Libre{% endtrans %}
{% endblock %}

{% block content %}


    <div class="box">
        <div class="box-header">
            <h3 class="box-title">{% trans %}Agregar categorias que aceptan mercado pago{% endtrans %}</h3>
            <div class="box-tools">
                <a class="btn btn-danger" href="{{ path('app_configuradormeli_tabs') }}"><i
                            class="fa fa-remove text-white">{% trans %}Regresar{% endtrans %}</i> </a>
            </div>


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


            {{ form_start(form) }}


            <div class="panel cfj-panel panel-success">
                <div class="panel-heading" style="text-align:center;">
                    Regla para Envios
                </div>
                <div class="panel-body">
                    <div class="row" id="div_categorias">
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <label class="label cfj-deg">Departamentos</label>
                            <div class="form-group">
                                <select id="categoria_1" name="categoria_1" size="5"></select>
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="div_categoria_2">
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <label class="label cfj-deg">Categoria</label>
                                <div class="form-group">
                                    <select id="categoria_2" name="categoria_2" size="5"></select>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="div_categoria_3">
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <label class="label cfj-deg">SubCategoria</label>
                                <div class="form-group">
                                    <select id="categoria_3" name="categoria_3" size="5"></select>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="div_tipoenvio">

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.tipoenvio,'Tipo Envio') }}
                                    {{ form_widget(form.tipoenvio, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.tipoenvio, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="div_condicionenvio">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.condicionenvio,'Condición Envio') }}
                                    {{ form_widget(form.condicionenvio, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.condicionenvio, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="div_preciocondicionenvio">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.preciocondicionenvio,'Precio Condición Envio') }}
                                    {{ form_widget(form.preciocondicionenvio, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.preciocondicionenvio, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="div_tipocalculo">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.tipocalculo,'Tipo Cálculo') }}
                                    {{ form_widget(form.tipocalculo, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.tipocalculo, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>
                    </div>


                    <div id="div_tipoenviovariable">

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.tipoenviovariable,'Tipo Envio Variable') }}
                                    {{ form_widget(form.tipoenviovariable, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.tipoenviovariable, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>

                    </div>


                    <div id="div_tipomarkup">

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.tipomarkup,'Tipo Markup') }}
                                    {{ form_widget(form.tipomarkup, {'attr':{'class':'form-control'} }) }}
                                    {{ form_errors(form.tipomarkup, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="porcentajemarkup">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.porcentajemarkup,'Porcentaje Aplicar para Envio:') }}
                                    {{ form_widget(form.porcentajemarkup, {'attr':{'class':'form-control','placeholder':'porcentaje markup'} }) }}
                                    {{ form_errors(form.porcentajemarkup, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>
                    </div>


                    <div id="montomarkup">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.montomarkup,'Monto Aplicar para Envio:') }}
                                    {{ form_widget(form.montomarkup, {'attr':{'class':'form-control','placeholder':'monto markup'} }) }}
                                    {{ form_errors(form.montomarkup, {'attr':{'class':'form-control'} }) }}
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>


            <div id="div_parte3">

                <div class="row">
                    <div class="col-lg-6 col-md-6 col-xs-12">
                        <div class="form-group">
                            {{ form_label(form.aceptamercadopago,'Acepta Mercado Pago') }}
                            <div class="form-group onoffswitch aceptamercadopago">
                                {{ form_widget(form.aceptamercadopago, {'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 id="botones">
                {{ form_errors(form) }}
                {{ form_rest(form) }}
                {{ form_end(form) }}
            </div>


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

        </div><!-- box-footer -->
    </div><!-- /.box -->
{% 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 src="{{ asset('bundles/app/dist/easyautocomplete/jquery.easy-autocomplete.min.js') }}"
            type="text/javascript"></script>
    <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 src="{{ asset('bundles/app/plugins/sweetalert/js/sweetalert.min.js') }}" type="text/javascript"></script>


    <script>

        $(document).ready(function () {

            var $tipomarkup_selector = $('select[id*="tipomarkup"]');
            var xaceptamercadoenvios = 0;


            $('form').on('submit', function (e) {

                $(this).submit();
            });


            var input = $('input[id*="aceptamercadopago"]');
            input.prop('checked', true);


            function ocultar1() {
                $("[id='div_tipoenvio']").hide();
                $("[id^='div_condicionenvio']").hide();
                $("[id^='div_tipocalculo']").hide();
                $("[id='div_tipoenviovariable']").hide();
                $("[id^='div_tipomarkup']").hide();

                $("[id='div_preciocondicionenvio']").hide();


                $("[id='porcentajemarkup']").hide();
                $("[id='montomarkup']").hide();


                $("[id^='configuradormelicategoria_submit']").hide();
                $("[id^='div_parte3']").hide();
                $("[id^='botones']").hide();
            }


            ocultar1();


            function mostrar1() {

                $("[id^='div_parte2']").show();
                $("[id^='configuradormelicategoria_submit']").show();
                $("[id^='div_parte3']").show();
                $("[id^='botones']").show();
            }


            /* $('.onoffswitch').on('click', function(){       */

            $('.aceptamercadopago').on('click', function () {
                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');
                }
            });


            $('.aceptamercadoenvios').on('click', function () {

                var check1 = input1.prop('checked');
                if (!check1) {
                    input1.prop('checked', true);
                    //check = $('#appbundle_children_activo').prop('checked');
                } else {
                    input1.prop('checked', false);
                    //check = $('#appbundle_children_activo').prop('checked');
                }

            });


// carga de los select para todos los casos
//---------------------------------------------------------------------
            var data = {
                parentid: 0
            };
            var sel_categoria;
            var $categoria_selector2 = $('select[id*="categoria_1"]');
            $categoria_selector2.children().remove();
            $.ajax({
                type: 'post',
                url: '{{ path('opt_all_categorias_marketplace') }}',
                data: data,
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (i, e) {
                        if (e.codigo != "0") {
                            $categoria_selector2.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                        }
                    });
                    // $categoria_selector2.prepend('<option value="0">Todas</option>');
                }
            });


            $("[id^='div_categoria_2']").hide();
            $("[id^='div_categoria_1']").hide();
            $("[id^='div_categoria_3']").hide();


            $("[id='porcentajemarkup']").hide();
            $("[id='montomarkup']").hide();


            $('select[id*="categoria_1"]').change(function () {


                ocultar1();

                var data2 = {
                    parentid: $(this).val(),
                };
                sel_categoria = $(this).val();
                //console.log($(this).val());
                $('#div_categoria_3').hide();
                if ($(this).val() != "0") {
                    $('#div_categoria_2').show();


                    var $categoria_selector4 = $('select[id="categoria_2"]');

                    $categoria_selector4.children().remove();
                    $.ajax({
                        type: 'post',
                        url: "{{ path('CategoriaGlobal_searchGlobalSubCategories') }}",
                        data: data2,
                        dataType: 'json',
                        success: function (data) {
                            $.each(data, function (i, e) {
                                if (e.codigo != "0") {
                                    $categoria_selector4.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                                }
                            });
                            //$categoria_selector4.append('<option value="0">Todas</option>');
                        }
                    });
                } else {
                    $('#div_categoria_2').hide();
                }
            });


            $('select[id*="categoria_2"]').change(function () {
                //console.log($(this).val());
                ocultar1();

                var data3 = {
                    parentid: $(this).val(),
                };
                sel_categoria = $(this).val();
                if ($(this).val() != "0") {
                    //var $categoria_selector5 = $('select[id="categoria_3"]');

                    var $categoria_selector5 = $('select[id="categoria_3"]');

                    $('#div_categoria_3').show();
                    $categoria_selector5.children().remove();
                    $.ajax({
                        type: 'post',
                        url: "{{ path('CategoriaGlobal_searchGlobalSubCategories') }}",
                        data: data3,
                        dataType: 'json',
                        success: function (data) {
                            $.each(data, function (i, e) {
                                if (e.codigo != "0") {
                                    $categoria_selector5.append('<option value="' + e.codigo + '">' + e.nombre + '</option>');
                                }
                            });
                            $categoria_selector5.prepend('<option value="0">Todas</option>');
                        }
                    });
                } else {
                    $('#div_categoria_3').hide();
                }
            });


            $('select[id*="categoria_3"]').change(function () {
                sel_categoria = $(this).val();


                $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').children().remove();

// obtener si  la categoria acepta mercado envios
//---------------------------------------------------------------------
                ocultar1();

                console.log(sel_categoria);


                $(".sweet-overlay, .sweet-alert").remove();

                swal({
                    title: 'Procesando',
                    text: "Ubicando la categoria en mercado libre",
                    type: 'success',
                    timer: 4000,
                    showConfirmButton: false,
                    showCancelButton: false,
                })

                /*        swal("Procesando","Ubicando la categoria en mercado libre","success");        */


                var data = {
                    categoriameli: sel_categoria
                };
                var sel_categoria;
                var $categoria_selector2 = $('select[id*="categoria_1"]');

                $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').children().remove();


                $.ajax({
                    type: 'post',
                    url: '{{ path('app_configuradormeli_aceptamercadoenvios') }}',
                    data: data,
                    dataType: 'json',
                    success: function (data) {


                        swal({
                            title: 'Proceso finalizado',
                            text: "categoria ubicada en mercado libre",
                            type: 'success',
                            timer: 3000,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                        console.log(data);
                        xaceptamercadoenvios = data.aceptamercadoenvios;


                        if (xaceptamercadoenvios) {

                            $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').append("<option value=''>Seleccione</option>");

                            $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').append("<option value='mercadoenvio'>Mercado Envio</option>");
                        } else {

                            $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').append("<option value=''>Seleccione</option>");

                            $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').append("<option value='enviopropio'>Envio Propio</option>");
                        }


                        $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').show();

                        $("[id='div_tipoenvio']").show();

                        // $categoria_selector2.prepend('<option value="0">Todas</option>');
                    }
                });


            });

            $('select[id="appbundle_configuradormelicategoria_tipoenvio"]').change(function () {
                sel_tipoenvio = $(this).val();

                if (sel_tipoenvio == 'mercadoenvio') {
                    $("[id='div_condicionenvio']").show();
                    $("[id='div_tipocalculo']").show();
                    $("[id='div_preciocondicionenvio']").hide();
                    $("[id='div_tipomarkup']").hide();
                    $("[id='div_parte3']").hide();
                    $("[id='botones']").hide();
                    $("[id='porcentajemarkup']").hide();
                    $("[id='montomarkup']").hide();

                }


                if (sel_tipoenvio == 'enviopropio') {
                    $("[id='div_condicionenvio']").hide();
                    $("[id='div_tipocalculo']").hide();
                    $("[id='div_tipoenviovariable']").hide();
                    $("[id='div_preciocondicionenvio']").hide();
                    $("[id='div_tipomarkup']").show();
                    $("[id='div_parte3']").show();
                    $("[id='botones']").show();
                    $("[id='porcentajemarkup']").show();
                    $("[id='montomarkup']").show();


                    $tipomarkup_selector.children().remove();
                    $tipomarkup_selector.append("<option value='Monto'>Monto</option>");
                    $tipomarkup_selector.append("<option value='Porcentaje'>Porcentaje</option>");
                }


            });


            $('select[id*="condicionenvio"]').change(function () {
                valcondenvio = $(this).val();

                if (valcondenvio == 'personalizado') {
                    $("[id='div_preciocondicionenvio']").show();
                } else {

                    $("[id='div_preciocondicionenvio']").hide();
                }
            });


            $('select[id*="tipocalculo"]').change(function () {
                sel_tipocalculo = $(this).val();

                if (sel_tipocalculo == 'fijo') {

                    $("[id='div_tipoenviovariable']").hide();

                    $("[id='div_tipomarkup']").show();
                    $("[id='div_parte3']").show();
                    $("[id='botones']").show();

                    $("[id='porcentajemarkup']").hide();
                    $("[id='montomarkup']").show();


                    $tipomarkup_selector.children().remove();
                    $tipomarkup_selector.append("<option value='Monto'>Monto</option>");
                }


                if (sel_tipocalculo == 'variable') {

                    $("[id='div_tipoenviovariable']").show();
                    $("[id='div_tipomarkup']").show();
                    $("[id='div_parte3']").show();
                    $("[id='botones']").show();

                    $("[id='porcentajemarkup']").show();
                    $("[id='montomarkup']").hide();


                    $tipomarkup_selector.children().remove();
                    $tipomarkup_selector.append("<option value='Porcentaje'>Porcentaje</option>");
                }
            });


            $('select[id*="tipomarkup"]').change(function () {
                valtipomarkup = $(this).val();

                if (valtipomarkup == 'monto') {
                    $("[id='porcentajemarkup']").hide();
                    $("[id='montomarkup']").show();


                } else {

                    $("[id='porcentajemarkup']").show();
                    $("[id='montomarkup']").hide();

                }


            });


        });
    </script>


{% endblock %}