{% 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> ICBC Store
  		<img class='' width="20" src="{{asset('uploads/images/market/icbc.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">
		<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'>
				<form id="principal" action="{{path('app_search_api_producto_icbc')}}" 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>					
						</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'>
							<!-- 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" style="width:100%;">
        							<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>


			</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>
						{#</form>#}
					</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">
			{#<form action="{{path('app_actualizar_alicuota_icbc',  { 'xalicuota': 'valores','xporcalicuota':'valorporc' })}}" method="POST">#}

				<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 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 Venta', 'pg.precioredondeo')}}
                <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 );
		}); 

		$("#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) {
				//xurl = "{#{path('app_actualizar_alicuota_icbc_todos', { 'xporcalicuota':'valorporc' })}#}";
				//xurl3 = xurl.replace('valorporc', xporcalicuota);
				//var url = xurl3;
				//success,info,warning,error
				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");
		}		
	});

	// Comprobar cuando cambia el switch de estado
		$("#tabla-ajax").on('click', ".onoffswitch-estatus", function(e) {
			e.preventDefault();
			var input = $(this).children('input[id^="check_estatus_"]') //attr('data-id');
			var id = input.attr('data-id')
			validateGlobalStatus(id, function(validate){
				if(validate == true){
				if (input.is(':checked') ) {
					input.val('0');
					input.prop('checked', false);
					updateStatus(id,input.val());
				} else {
					input.val('1');
					input.prop('checked', true);
					updateStatus(id,input.val());
				}
			}else{
				swal('Error', 'El estado del producto en el marketplace no puede ser modificado debido a que está inactivo en el catálogo.', 'error');
			}
			});
		});

		function validateGlobalStatus(prodid, callback){
			var url = "{{path('app_validate_productomarketplace_status', { 'prodid': 'prodid' })}}";
			url2 = url.replace('prodid', prodid);

			data = {prodid:prodid}

			var response = false;

			$.ajax({
				type        : "POST",
				url         : url2,
				dataType: 'json',
				success: function(data) {
					var status = data.data
					if(status == false){
						response = false;
					}else{
						response = true;
					}
					callback(response);
				},
				error: function(xhr, status) {
					response = false;
					callback(response);
				},
			});
		}

		function updateStatus(id, status){
			var xurl;	
			xurl = "{{path('app_update_status_icbc', { 'id': 'id','status':'status' })}}";
			xurl2 = xurl.replace('id', id);
			xurl3 = xurl2.replace('status', status);
			data = {id:id, status:status};

			$.ajax({
				type        : "POST",
				url         : xurl3,
				dataType: 'json',
				success     : function(data) {
					swal('Cambio correcto.', 'El estado del producto ha sido cambiado correctamente en el marketplace.', 'success');
				},
				error 		: function(xhr, status) {
					swal('Error.', 'El estado del producto no ha podido ser actualizado en el marketplace.', 'error');
				},
			});
		}

</script>

{% endblock %}