{% 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> Avenida.com
                <img class='' width="20" src="{{ asset('uploads/images/market/avenida.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') }}">

    <style>
        .tr-data {
            vertical-align: middle !important;
            height: 90px !important;
        }

        .tr-data td {
            vertical-align: middle !important;
        }

        .edit-icon {
            position: relative;
            margin-top: 5px;
            font-size: 20px
        }

        img {
        }

        .marg-sup {
            margin-top: 25px;
        }

        .cfj-absol {
            position: absolute;

            right: 20%;
            top: 55px;
            z-index: 9999;
        }

        #archivo {
            color: white;
            margin-bottom: 4px;
            width: 136px
        }
    </style>


{% endblock %}

{% block content %}

<div class='box views'>
    <div class="row">
        <div class='col-xs-12 col-lg-12 col-md-12 box-tools marg-sup' style=''>
            <div class='box-tools-inner'>

                <div class='form-group 	col-lg-4 col-md-4 col-xs-12	cfj-absol ' style="top:73px;" align="center">


                    <form id="importar" enctype="multipart/form-data" action="{{ path('app_importar_avenida') }}"
                          method="post">
                        <Label class="input-custom-file mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent cfj-deg cfj-input-file">
                            <i class="fa fa-file"></i>
                            <input type="file" required name="archivo" classs="cfj-deg" id="archivo">
                        </label>
                        <button type="submit"
                                style="border-radius: 0 !important; margin: 0 -3px 0 -2px; cursor: pointer;"
                                class="btn btn-xs cfj-deg cfj-actions-btn cfj-color-three">Importar Productos
                        </button>
                        <a class="cfj-a-rounded" href="{{ asset('bundles/app/excel/modelo-avenida.xlsx') }}"
                           target="_blank">
                            <i class="fa fa-download"></i>
                        </a>
                    </form>
                </div>
                <form id="principal" action="{{ path('app_search_api_producto_avenida') }}" method="get">
                    <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>
                            {#</form>#}
                        </div><!--End Filtro de columnas-->
                    </div>
                    <!-- Acciones-->
                    <input type="hidden" id="listProduct" name="listProduct" value="{{ listProduct }}">
                    <input type="hidden" id="todos" name="todos" value="{{ todos }}">
                    <input type="hidden" id="alicuota" name="alicuota" value="">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-xs-12 cfj-actions cfj-bgcolor-three">
                            <!-- Acciones-->

                            <div class='hidden-xs hidden-sm form-group col-lg-1 col-md-1 col-xs-12 marg-sup cfj-color-three '>
                                <span class="pull-right">Acciones</span>

                            </div>
                            <div class='form-group col-lg-8 col-md-8 col-xs-12 marg-sup'>
                                <div class='form-group col-lg-3 col-md-3 col-xs-12'>
                                    <div class="input-group">
								<span class="input-group-btn pull-left">
									<button id="btnexpavenida"
                                            class="btn cfj-deg cfj-actions-btn cfj-color-three btn-default btn-flat"
                                            type="">
										<i class="fa fa-share-square-o"></i>{% trans %}Exportar Catálogo{% endtrans %}
									</button>
								</span>
                                    </div>
                                </div>
                                <div class='form-group col-lg-3 col-md-3 col-xs-12'>
                                    <div class="input-group">
								<span class="input-group-btn pull-left">
									<button id="btnexpavenidapreciostock"
                                            class="btn cfj-deg cfj-actions-btn cfj-color-three btn-default btn-flat"
                                            type="">
										<i class="fa fa-share-square-o"></i>{% trans %}Exportar Precio/Stock{% endtrans %}
									</button>
								</span>
                                    </div>
                                </div>

                            </div>
                            <!-- Filtro contenido-->
                            <div class='form-group col-lg-3	 col-md-3 col-xs-12'>

                                <div class='form-group col-lg-8 col-md-8 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>
                        </div>

                        <!-- End Acciones-->
                        <!-- d. de columnas-->

                        <!-- Acciones-->


                    </div>
            </div>

        </div>
        <br/>
        <div id="tabla-ajax">
            <div class="row">
                <div class="col-xs-12 col-lg-12 col-md-12">
                    <div class="table-responsive showview">
                        <div id="tabla-datos">
                        </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>
                            {#</form>#}
                        </div><!-- End Productos por página-->
                    </div>
                </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>
            </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 defer src="{{ asset('bundles/app/getmdl/getmdl-select.min.js') }}"></script>
        <script>

            // 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');

                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(), '')
                        );
                    }
                });

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

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

                $("#btnexpavenida").click(function (e) {
                    e.preventDefault();
                    location.href = "{{ path('app_exportar_avenida') }}";

                })
                /*		$("#form_submit").click(function(e){
                            e.preventDefault();
                            location.href = "{{ path('app_importar_avenida') }}";

		})*/
                $("#btnexpavenidapreciostock").click(function (e) {
                    e.preventDefault();
                    location.href = "{{ path('app_exportar_stockprecio') }}";

                })
                $("#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);
                });

                $("#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");
                };

                function aplicarAlicuotaTodos(xporcalicuota) {
                    var xurl;
                    if (xporcalicuota > 0) {

                        swal({
                                title: "¿Esta seguro que desea cambiar las alicuotas TODOS LOS PRODUCTOS DEL Catalogo ?",
                                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");
                                    document.location.href = url;
                                } else {
                                    swal("Importar", "Se cancelo el proceso", "error");
                                }
                            }
                        );
                        //window.location.href = xurl3;
                    } else
                        swal("Debe seleccionar una alicuota", "Para el proceso de actualizar Alicuota", "error");
                }


            });

        </script>

    {% endblock %}