{% extends "AppBundle::layout_backend.html.twig" %}
{% block headercontent %}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <h3 class="cfj-bgcolor-three pageTitle cfj-color-white">
                Marketplaces <i class="fa fa-angle-right"></i> MERCADO LIBRE
                <img class='' width="20" src="{{ asset('uploads/images/market/meli.png') }}"/>

            </h3>
        </div>
    </div>
{% endblock %}    
 {% block stylesheets %}
     <link href="{{ asset('bundles/app/plugins/sweetalert/css/sweetalert.css') }}" rel="stylesheet" type="text/css"/>

     <link href="{{ asset('bundles/app/plugins/datatables.1.10.16/css/dataTables.bootstrap.min.css') }}"
           rel="stylesheet" type="text/css"
     />
     <link rel="stylesheet" href="{{ asset('bundles/app/mdl/material.min.css') }}">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
     <link rel="stylesheet" href="{{ asset('bundles/app/getmdl/getmdl-select.min.css') }}">


 {% endblock %}

{% block content %}
<div class='box views'>
    <div class="row">
        <form id="principal" action="{{ path('app_search_api_producto_meli') }}" method="get">
            <div class='col-xs-12 col-lg-12 col-md-12 box-tools marg-sup' style=''>
                {#<h4 class="col-lg-12 col-md-12 col-xs-12">Acciones</h4>#}
                <div class='box-tools-inner'>

                    <div class="row">
                        <div class='form-group col-lg-12 col-md-12 col-xs-12'>
                            <div class="input-group cfj-search-container">
                                <span class="input-group-addon cfj-icon-search"><button id="btnfiltrar"
                                                                                        class="btn btn-default btn-flat"
                                                                                        type="submit"><span
                                                class="fa fa-search"></span></button></span>
                                <input class="form-control col-lg-12 col-md-12 col-xs-12"
                                       placeholder="Buscar por SKU, Producto, Marca o Categoría" name="search"
                                       type="text" value="{{ xsearch }}">
                            </div>
                        </div><!--End Filtro de columnas-->
                    </div>
                    <input type="hidden" id="listProduct" name="listProduct" value="{{ listProduct }}">
                    <input type="hidden" id="exportar" name="exportar" value="0">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-xs-12 cfj-actions cfj-bgcolor-three">
                            <div class='form-group col-lg-8 col-md-8 col-xs-12'>
                                <div class="cfj-group col-lg-1 col-md-1 col-xs-1">
                                </div>
                                <!-- Simple Select with arrow -->
                                {#<form  id="form-filtro" action="{{path('app_search_producto_global')}}" method="get">					#}
                                <div class='form-group col-lg-3 col-md-3 col-xs-12'>
                                    <div class="mdl-textfield mdl-js-textfield getmdl-select cfj-color-three">
                                        <input type="text" value="" class="mdl-textfield__input" id="filtro" readonly>
                                        <input type="hidden" name="filtro" value="">
                                        <label for="filtro" class="mdl-textfield__label cfj-color-three">Filtrar
                                            por</label>
                                        <i class="mdl-icon-toggle__label material-icons cfj-color-three">keyboard_arrow_down</i>
                                        <ul for="filtro" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
                                            {% for key, filtro in filtros %}
                                                <li class="mdl-menu__item"
                                                        {% if xfiltro == key %} selected {% endif %}
                                                    data-val="{{ key }}">
                                                    {{ filtro }}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>

                                <div class='form-group col-lg-5 col-md-5 col-xs-12'>
                                    <div class="mdl-textfield mdl-js-textfield getmdl-select cfj-color-three">
                                        <button id="btn-exportar" type="button"
                                                class="btn cfj-deg cfj-actions-btn cfj-color-three btn-default btn-flat">
                                            Exportar
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {#<div class='form-group col-lg-4 col-md-4 col-xs-12'>

                                <div class="mdl-textfield mdl-js-textfield getmdl-select cfj-color-three">
                                    <select id="marketplacef" name="marketplacef" class="form-control">
                                        {% for key, marketplace in marketplaces%}
                                            <option value="{{marketplace.id}}"
                                            >
                                                {{marketplace}}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>	#}


                        </div>
                    </div>
                </div>
                <br/>
                <div id="tabla-ajax">
                    <div class="">
                        <div class="table-responsive showview col-lg-12 col-md-12 col-xs-12 marg-sup">
                            <div id="tabla-datos" class="col-lg-12 col-md-12 col-xs-12">
                            </div>
                            <div class='form-group col-lg-offset-5 col-md-offset-5 col-lg-2 col-md-2 col-xs-12'>
                                {#<form action="{{path('ProductViewsController_indexView')}}" method="get">#}
                                <div class="input-group">
                                    <select id="xnroregistros" name="xnroregistros" class="form-control">
                                        {% for key, registro in registros %}
                                            <option
                                                    {% if xregistro == key %} selected {% endif %}
                                                    value="{{ key }}"
                                            >
                                                {{ registro }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <span class="input-group-btn">
									<button id="btn-nro-reg" class="btn btn-default btn-flat" type="submit">
										<i class="fa fa-sort-amount-asc"></i>{% trans %}Aplicar{% endtrans %}</button>
								</span>
                                </div>

                            </div><!-- End Productos por página-->
                        </div>
                    </div>
                </div>
            </div>


        </form>
        <!-- Modal alicuota-->
        <div class="modal fade" id="modal-alicuota" 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">Selecciona la alicuota al aplicar</h4>
                    </div>
                    <div class="modal-body">
                        <button data-iva="21" class="btn btn-block btn-alicuota-iva" data-dismiss="modal"><h3> 21%</h3>
                        </button>
                        <button data-iva="10.5" class="btn btn-block btn-alicuota-iva" data-dismiss="modal"><h3>
                                10.5% </h3></button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    </div>
                    {#	</form>#}
                </div>
            </div>
        </div><!-- End Modal alicuota-->


        {% endblock %} {% block javascripts %}
            <script src="{{ asset('bundles/app/plugins/sweetalert/js/sweetalert.min.js') }}"
                    type="text/javascript"></script>
            <script src="{{ asset('bundles/app/plugins/datatables.1.10.16/js/jquery.dataTables.min.js') }}"
                    type="text/javascript"></script>
            <script src="{{ asset('bundles/app/plugins/datatables.1.10.16/js/dataTables.bootstrap.min.js') }}"
                    type="text/javascript"></script>
            <script src="{{ asset('bundles/app/mdl//material.min.js') }}"></script>
            <script src="{{ asset('bundles/app/js/productosmeli.js') }}" type="text/javascript"></script>
            <script defer src="{{ asset('bundles/app/getmdl/getmdl-select.min.js') }}"></script>
            <script>

                function aplicarEstado(xid, xstatus) {
                    var data = {
                        id: xid,
                        status: xstatus
                    };
                    $.ajax({
                        type: "GET",
                        url: '{{ path('app_actualizar_estado_meli') }}',
                        data: data,
                        dataType: 'json'
                    }).always(function (data) {
                        console.log(data['status']);
                        if (data['status'] == 'success') {
                            swal('Success', data.message, 'success');
                        } else {
                            swal('Error', data.message, 'error');
                        }
                    });
                }

                // variable con controla el pagineo principal
                var pagep = 1;


                function ocultarMostrarExpresion() {
                    if ($("#columna").val() == 'stock' || $("#columna").val() == 'precio' ||
                        $("#columna").val() == 'lista') {

                        $("#expresion").show();
                    } else {
                        $("#expresion").hide();
                    }
                    ;
                }

                function mostrarCheckboxMarcados() {
                    if ($('#todos').val() == 'true') {
                        $("#checkTodos").prop('checked', true);
                        $("input:checkbox.calicuota").prop('checked', true);
                    }

                    if ($('#listProduct').val() != '') {
                        $(".calicuota:checkbox").each(function () {
                            //alert(this.value + ' ' + $('#listProduct').val().search( this.value ));
                            if ($('#listProduct').val().search(this.value) != -1) {
                                $(this).prop('checked', 'true')
                            }
                        });
                    }
                }

                function getProductos(page) {
                    var sort = $('#sort').val();
                    var direction = $('#direction').val();
                    $("#exportar").val(0);

                    $('#tabla-datos').html(cabecera());
                    sendData(page, sort, direction, function (response) {    //call our Function PostForm and pass as first variable the form attribute name
                        $("#tabla-datos").fadeIn(1000).html(response) //put the response in the div result
                    });
                }

                function sendData(page, sort, direction, callback) {
                    $form = $('#principal');
                    /*
                    * Get all form values
                    */
                    var values = {};
                    values['page'] = page;
                    values['sort'] = sort;
                    values['direction'] = direction;
                    $.each($form.serializeArray(), function (i, field) {
                        values[field.name] = field.value;
                    });
                    /*
                    * Throw the form values to the server!
                    */
                    //console.log(values);
                    $.ajax({
                        type: $form.attr('method'),
                        url: $form.attr('action'),
                        data: values,
                        dataType: 'json',
                        success: function (data) {
                            callback(data);
                            //console.log(values);
                            if (values.alicuota != '') {
                                values.alicuota = '';
                                $('#alicuota').val('');
                                $('#todos').val('');
                                $('#listProduct').val('');
                            }
                            mostrarCheckboxMarcados();
                            //return true;
                        },
                        error: function (xhr, status) {
                            console.log(xhr);
                            //console.log('Disculpe, existió un problema');
                        },
                    });
                }


                function pagina(pag) {
                    var pagina = pag;
                    if (pag == "« Anterior") {
                        pagina = parseInt($(".pagination .active").text()) - 1;
                    }
                    if (pag == "Siguiente »") {
                        pagina = parseInt($(".pagination .active").text()) + 1;
                    }
                    return pagina;
                }

                function cabecera() {
                    return `<table id='tablesorter1' class="table table-hover table-responsive">
			    <thead>
        <tr class='tr-top-table'>
            <th class="cfj-check">
                <label>
                    <input type='checkbox' id='checkTodos'>
                </label>
            </th>
            <th class='cfj-provider {% if pagination.isSorted('proveedor') %} sorted  {% endif %} '>{{ knp_pagination_sortable(pagination, 'Proveedor', 'proveedor') }}</th>
            <th class='cfj-image col-lg-1 col-md-1 col-xs-2'>Imagen</th>
            <th class='cfj-sku col-lg-1 col-md-1 col-xs-1  {% if pagination.isSorted('sku') %} sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'SKU', 'pg.sku') }}</th>
            <th class='cfj-title {% if pagination.isSorted('titulo') %} sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'Producto', 'pg.titulo') }}</th>
            <th class='cfj-brand {% if pagination.isSorted('marca') %}  sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'Marca', 'marca') }}</th>
            <th class='cfj-category {% if pagination.isSorted('categoriaproveedor') %}  sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'Categoría', 'categoriaproveedor') }}</th>
            <th style='text-align:center' class='center cfj-stock  {% if pagination.isSorted('stock') %} sorted {% endif %} '>{{ knp_pagination_sortable(pagination, 'Stock', 'pg.stock') }}</th>
            <th class='cfj-price 
                {% if pagination.isSorted('preciolista') %} sorted {% endif %}'>
                {{ knp_pagination_sortable(pagination, 'Precio Regular', 'pg.preciolista') }}
                <i data-toggle="tooltip" class="fa fa-question-circle cfj-info" data-placement="top" title="Precio Final: IVA INCLUIDO"></i>
            </th>
            <th class='cfj-price 
                {% if pagination.isSorted('precio') %}  sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'Precio Base', 'pg.precio') }}
                <i data-toggle='tooltip' class='fa fa-question-circle cfj-info' data-placement='top' title='Precio Final: IVA INCLUIDO'></i>
            </th>
            <th class='cfj-alicuota  {% if pagination.isSorted('alicuota') %}  sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'AlÍcuota', 'pg.alicuota') }}</th>

			<th class='cfj-cfj-active  {% if pagination.isSorted('activo') %}  sorted  {% endif %}'>{{ knp_pagination_sortable(pagination, 'Estado', 'pm.activo') }}</th>

            <th></th>       
        </tr>
    </thead>
	<tbody>
					<tr>
						<td colspan="10">
							Cargando productos ....
						</td>	
					</tr>
				</tbody>		
		</table>`
                }

                $(document).ready(function () {


                    $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
                    $("#exportar").val(0);

                    getProductos(1);

                    $("#tabla-ajax").on("click", ".pagination a", function (e) {
                        e.preventDefault();
                        pagep = pagina($(this).text());
                        getProductos(pagep);
                    });

                    $('#tabla-ajax').on('click', "th a", function (e) {
                        $.ajax({
                            type: "GET",
                            url: $(this).attr('href'),
                        })
                            .done(function (msg) {
                                $('#tabla-datos').html(msg);
                            });
                        e.preventDefault();
                    });

                    $("#tabla-ajax").on('click', '.calicuota:checkbox', function () {
                        if ($(this).prop('checked')) {
                            $('#listProduct').val($('#listProduct').val() + ',' + $(this).val());
                        } else {

                            $('#listProduct').val(
                                $('#listProduct').val().replace(',' + $(this).val(), '')
                            );
                        }
                    });


                    $("#btn-exportar").click(function (e) {
                        e.preventDefault();
                        $("#exportar").val(1);
                        $('#principal').submit();
                    });


                    $("#btnfiltrar").click(function (e) {
                        e.preventDefault();
                        getProductos(1);
                    });

                    $("#filtro").change(function () {
                        getProductos(1);
                    });

                    $("#estado").change(function () {//para el estado del marketplace
                        getProductos(1);
                    });

                    $("#btn-alicuota").click(function (e) {
                        e.preventDefault();
                        $('#modal-alicuota').modal({show: true});
                    });


                    $(".btn-alicuota-iva").click(function (e) {
                        aplicarAlicuota($(this).attr('data-iva'))
                    });

                    // agregado por boris
                    $("#btn-nro-reg").click(function (e) {
                        e.preventDefault();
                        //alert($("#xnroregistros").val());
                        getProductos(1);
                    });


                    $("#marketplacef").change(function () {//para el estado del marketplace
                        getProductos(1);
                    });


                    $("#tabla-ajax").on('change', '#checkTodos', function () {
                        $('#todos').val($("#checkTodos").prop("checked"));
                        $("input:checkbox.calicuota").prop('checked', $(this).prop("checked"));
                    });

                    function aplicarAlicuota(xporcalicuota) {
                        $('#alicuota').val(xporcalicuota);
                        if ($("#checkTodos").prop("checked") || $('#listProduct').val() != '') {
                            swal({
                                    title: "¿Esta seguro que desea cambiar las alicuotas de los Items Seleccionados ?",
                                    text: "El proceso actualizara los productos.",
                                    type: "info",
                                    showCancelButton: true,
                                    confirmButtonColor: "#00a65a",
                                    confirmButtonText: "Si",
                                    cancelButtonText: "No",
                                    closeOnConfirm: true,
                                    closeOnCancel: false
                                },
                                function (isConfirm) {
                                    if (isConfirm) {
                                        swal("Proceso", "Iniciado", "success");
                                        getProductos(pagep);
                                    } else {
                                        swal("Importar", "Se cancelo el proceso", "error");
                                    }
                                }
                            );
                        } else
                            swal("Debe seleccionar un item", "Para el proceso de actualizar Alicuota", "error");
                    };


                });

            </script>

        {% endblock %}