POS-Server/app/views/products/product_track.html.erb

	<!-- BEGIN CONTAINER -->
	<div class="page-container">
		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<!-- BEGIN CONTENT BODY -->
			<!-- BEGIN PAGE HEAD-->
			<div class="page-head">
				<div class="container-fluid">
					<!-- BEGIN PAGE TITLE -->
					<div class="page-title">
						<h1>Seguimiento de productos </h1>
					</div>
					<!-- END PAGE TITLE -->
				</div>
			</div>
			<!-- END PAGE HEAD-->
			<!-- BEGIN PAGE CONTENT BODY -->
			<div class="page-content">
				<div class="container-fluid">
					<!-- BEGIN PAGE BREADCRUMBS -->
					<ul class="page-breadcrumb breadcrumb">
						<%= render_breadcrumbs :tag => :li, :separator => ' <i class="fa fa-circle"></i> ' %>
					</ul>
					<!-- END PAGE BREADCRUMBS -->
					<div class="search-page search-content-3">
						<div class="row">
							<div class="col-md-12">
								<div class="search-filter bordered">
								<!-- <h4 class=" uppercase form-section"> Búsqueda de producto </h4> <hr> -->
									<div class="form-group">
										<div class="row">
											<div class="col-md-6">
												<div class="search-label uppercase"> Del </div>
												<div class="col-md-6">
													<!-- <div class='input-group date' id='begin_date'> -->
													<div class="input-group input-medium date date-picker" data-date-format="dd/mm/yyyy">
														<input id="start" type='text' class="form-control"/>
														<span class="input-group-addon">
															<span class="glyphicon glyphicon-calendar"></span>
														</span>
													</div>
												</div>
											</div>
											<div class="col-md-6">
												<div class="search-label uppercase"> Al </div>
												<div class="col-md-6">
													<!-- <div class='input-group date' id='end_date'> -->
													<div class="input-group input-medium date date-picker" data-date-format="dd/mm/yyyy">
														<input id="end" type='text' class="form-control"/>
														<span class="input-group-addon">
															<span class="glyphicon glyphicon-calendar"></span>
														</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class=" form-group">
										<div class="row">
											<div class="col-md-6">
												<div class="search-label uppercase">Producto <span class="required">*</span></div>
												<div class="col-md-12">
													<input class="form-control" type="text" id="typeahead">
													<%= hidden_field_tag :product_id %>
												</div>
											</div>
											<div class="col-md-6">
												<div class="search-label uppercase">Punto de venta</div>
												<div class="col-md-12">
													<%= select_tag "pointsale", options_from_collection_for_select(Pointsale.vigentes, :id, :name), :include_blank => "Todas",  class: "form-control  input-medium" %>
												</div>
											</div>
										</div>
									</div>
									<div class="search-filter-divider bg-grey-steel"></div>
									<button class="btn green bold uppercase btn-block" onclick="findSalesByPeriod()">Buscar <i class="m-icon-swapright m-icon-white"></i> </button>
								</div>
							</div>
						</div>
					</div>
					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="page-content-inner">
						<div class="row ">
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption">
										<i class="fa fa-location-arrow font-blue-dark"></i>
										<span class="caption-subject font-blue-dark bold uppercase">Seguimiento de productos</span>
									</div>
								</div>
								<div class="portlet-body form" id="tracking">

									<div class="product_track_search" id='track_detail'>
										<%= render "products_track_dtl" %>
									</div>

								</div>
							</div>
						</div>
					</div>
					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>
			<!-- END PAGE CONTENT BODY -->
			<!-- END CONTENT BODY -->
		</div>
		<!-- END CONTENT -->
	</div>
	<!-- END CONTAINER -->
	<script type="text/javascript">
		var rows_selected = [];
		var selectedProduct = null;
		var timeout = null;
		//para no avanzar cuando la cantidad a regresar sea mayor
		var shouldProcess = false;
		var sale_id = null;

		var bloodhound = new Bloodhound({
			datumTokenizer: function (d) {
				return Bloodhound.tokenizers.whitespace(d.value);
			},
			queryTokenizer: Bloodhound.tokenizers.whitespace,
			remote: {
				url: '/find_products?query=%QUERY',
				wildcard: '%QUERY'
			}
		});
		bloodhound.initialize();

		$('#typeahead').typeahead(
			{
				minLength: 3
			},
			{
				displayKey: 'name',
				source: bloodhound.ttAdapter(),
				limit: Infinity,
				templates: {
					empty: [
						'<div class="empty-message">',
							'No se encontró ningun producto. Favor de verificar',
						'</div>'
					].join('\n'),
					 suggestion: Handlebars.compile(
							'<div class="media">' +
								'<div class="pull-left">' +
									'<div class="media-object">' +
										'<img src="{{small_img}}" width="50" height="50"/>' +
									'</div>' +
								'</div>' +
								'<div class="media-body">' +
									'<h4 class="media-heading"><strong>{{sku}}</strong> | {{name}}</h4>' +
									'<p>{{barcode}}</p>' +
									'<p>{{description}}</p>' +
									'<p>{{display_attributes}}</p>' +
								'</div>' +
							'</div>')
				}
		});

		$('#typeahead').bind('typeahead:selected', function(event, datum, name) {
			selectedProduct = datum;
			$('#btn_search_by_period').attr('disabled', false);
		});
		//buscar ventas por periodo de tiempo
		function findSalesByPeriod() {
			var product = selectedProduct ? selectedProduct.id : '';
			var pointsale = $('#pointsale').val();
			// var start = $("#start").val();
   //  		var end = $("#end").val();

    		var start = moment($("#start").val(), "DD-MM-YYYY").format('YYYY-MM-DD');
    		var end = moment($("#end").val(), "DD-MM-YYYY").format('YYYY-MM-DD');
    		$('#product_id').val(product);

			if ($("#start").val() && $("#end").val()) {
				if (product) {
					App.blockUI({
						target: $("#track_detail"),
						animate: true
					});

					$.ajax({
						type: "get",
						url:  '/product_track/',
						data: {
							start_date: start,
	          				end_date: end,
							product_id: product,
							pointsale_id: pointsale
						},
						dataType: 'script',
						success: function(data) {
							App.unblockUI($("#track_detail"));
						}
					});
				} else {
					toastr["error"]("Es necesario indicar un producto.");
				}
			}else{
				toastr["error"]("Es necesario indicar fechas.");
			}
		}

	</script>