POS-Server/app/views/products/edit_variants.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> Producto </h1>
				</div>
					<!-- END PAGE TITLE -->
			</div>
		</div>
			<!-- END PAGE HEAD-->
			<!-- BEGIN PAGE CONTENT BODY -->
		<div class="page-content">
			<div class="container-fluid">
				<%= link_to products_path(:filter => @filter, :current_page => @current_page), { class: "fr-space btn blue-hoki pull-right margin-bottom-10" } do %>
					<i class="fa fa-angle-left "></i>
					Regresar
				<% end %>
				<!-- BEGIN PAGE BREADCRUMBS -->
				<ul class="page-breadcrumb breadcrumb">
					<%= render_breadcrumbs :tag => :li, :separator => ' <i class="fa fa-circle"></i> ' %>
				</ul>
				<!-- END PAGE BREADCRUMBS -->
				<!-- BEGIN PAGE CONTENT INNER -->
				<div class="page-content-inner">
					<div id="notice"><%= notice %></div>
					<div class="row">
						<div class="col-md-12">
							<%= form_tag(product_update_variants_path(@product.id), :multipart => true, :class => "form-horizontal", :id => "form") do |f| %>
							<div class="portlet light">
								<div class="portlet-title">
									<div class="caption">
										<i class="fa fa-edit font-blue-sharp"></i>
										<span class="caption-subject font-blue-sharp bold uppercase">Modificar variantes del producto</span>
										<span class="caption-helper"></span>
									</div>
								</div>
								<div class="portlet-body">
									<div class="row">
										<div class="col-md-6">
											<div class="row static-info">
												<div class="col-md-4 name"> SKU: </div>
												<div class="col-md-8 value"> <%= @product.sku %></div>
											</div>
											<div class="row static-info">
												<div class="col-md-4 name"> Producto: </div>
												<div class="col-md-8 value"> <%= @product.name %> </div>
											</div>
											<% unless @product.parent_id.nil? %>
												<div class="row static-info">
													<div class="col-md-4 name"> Presentación: </div>
													<div class="col-md-8 value"> <%= @product.display_attributes %> </div>
												</div>
											<% end %>
											<div class="row static-info">
												<div class="col-md-4 name"> Descripción: </div>
												<div class="col-md-8 value"> <%= @product.description %> </div>
											</div>
											<div class="row static-info">
												<div class="col-md-4 name"> Unidad de medida: </div>
												<div class="col-md-8 value"> <%= @product.unit.unit %> </div>
											</div>
											<div class="row static-info">
												<div class="col-md-4 name"> Status: </div>
												<div class="col-md-8 value"> <% if @product.status == "active" %> <span class="badge badge-success"> Activo</span>  <% else %> <span class="badge badge-danger"> Inactivo</span> <% end %></div>
											</div>
										</div>
										<div class="col-md-6">
											<div class="row static-info">
												<div class="col-md-4 name"> Inventariado: </div>
												<div class="col-md-8 value"> <% if @product.inventory %> <span class="label label-success"> Si</span>  <% else %> <span class="label label-danger"> No</span> <% end %> </div>
											</div>
											<div class="row static-info">
												<div class="col-md-4 name"> Categoría: </div>
												<div class="col-md-8 value">
													<span class="badge badge-default badge-roundless"> <%= @product.category.category %> </span>
												</div>
											</div>
											<% if current_user.usertype == "A" || current_user.usertype == "SS" %>
												<div class="row static-info">
													<div class="col-md-4 name"> Precio compra: </div>
													<div class="col-md-8 value"><%= (@product.is_in_dollars? ? "#{number_to_currency(@product.price_base_dollars, precision: 2)} USD" : "#{number_to_currency(@product.price_base, precision: 2)} MXN") %> </div>
												</div>
											<% end %>
											<div class="row static-info">
												<div class="col-md-4 name"> Precio venta base: </div>
												<div class="col-md-8 value"> $ <%= @product.price_sale %> </div>
											</div>
										</div>
									</div><br>
									<h4 class="form-section presentaciones">Variantes</h4><hr>
									<div class="col-md-9 col-md-offset-3">
										<div class="alert alert-warning hidden">
											Son <strong id="variantes"></strong> variantes del producto.
										</div>
									</div>

									<div class="form-group ">
										<%= label_tag :size_list, "Tallas", {:class=>"col-md-3 control-label"} %>
										<div class="col-md-9 div_sizes">
											<button class="btn btn-primary btn-sm margin-bottom-10 add_size">Agregar talla</button>
											<% @product.sizes.each_with_index do |s, i| %>
												<%= text_field_tag "#{s.id}", s.name, :class => "form-control input-medium margin-bottom-10 sizes"  %>
												<!-- < %= hidden_field_tag "size_#{s.id}", s.name %> -->
											<% end %>
											<%= hidden_field_tag "new_size_list", @product.sizes.to_json.to_s %>
										</div>
									</div>

									<div class="form-group ">
										<%= label_tag :color_list, "Colores", {:class=>"col-md-3 control-label"} %>
										<div class="col-md-9 div_colors">
											<button class="btn btn-primary btn-sm margin-bottom-10 add_color">Agregar color</button>
											<% @product.colors.each_with_index do |s, i| %>
												<%= text_field_tag "#{s.id}", s.name, :class => "form-control input-medium margin-bottom-10 colors"  %>
												<!-- < %= hidden_field_tag "color_#{s.id}", s.name %> -->
											<% end %>
											<%= hidden_field_tag "new_color_list", @product.colors.to_json %>
										</div>
									</div>

									<div class="form-group ">
										<%= label_tag :style_list, "Estilos", {:class=>"col-md-3 control-label"} %>
										<div class="col-md-9 div_styles">
											<button class="btn btn-primary btn-sm margin-bottom-10 add_style">Agregar estilo</button>
											<% @product.styles.each_with_index do |s, i| %>
												<%= text_field_tag "#{s.id}", s.name, :class => "form-control input-medium margin-bottom-10 styles"  %>
												<!-- < %= hidden_field_tag "style_#{s.id}", s.name %> -->
											<% end %>
											<%= hidden_field_tag "new_style_list", @product.styles.to_json %>
										</div>
									</div>
									<hr>
									<div class="form-actions">
										<div class="row">
											<div class="col-md-9">
												<%= submit_tag 'Guardar', {:class=>"btn green"} %>
												<%= link_to 'Cancelar', products_path(:filter => @filter, :current_page => @current_page), {:class=>"btn default"} %>
											</div>
										</div>
									</div>
									<%= hidden_field_tag :variants %>
								</div>
							</div>
							<% end %>
						</div>
					</div>
				</div>
				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
			<!-- END PAGE CONTENT BODY -->
			<!-- END CONTENT BODY -->
	</div>
		<!-- END CONTENT -->
</div>
	<!-- END CONTAINER -->
<script>
	$("#form").submit(function(e) {
		var self = this;
		e.preventDefault();

		<% if @product.sizes.count > 0 %>
			var sizes = JSON.parse($('#new_size_list').val());
			$('.sizes').each(function () {
				// console.log(this);
				for (var i = 0; i < sizes.length ; i++) {
					if(sizes[i].id == this.name){
						sizes[i].name = this.value;
					}
				};
			});
			$('#new_size_list').val(JSON.stringify(sizes));
		<% end %>

		<% if @product.colors.count > 0 %>
			var colors = JSON.parse($('#new_color_list').val());
			$('.colors').each(function () {
				// console.log(this);
				for (var i = 0; i < colors.length ; i++) {
					if(colors[i].id == this.name){
						colors[i].name = this.value;
					}
				};
			});
			$('#new_color_list').val(JSON.stringify(colors));
		<% end %>

		<% if @product.styles.count > 0 %>
			var styles = JSON.parse($('#new_style_list').val());
			$('.styles').each(function () {
				// console.log(this);
				for (var i = 0; i < styles.length ; i++) {
					if(styles[i].id == this.name){
						styles[i].name = this.value;
					}
				};
			});
			$('#new_style_list').val(JSON.stringify(styles));
		<% end %>

		self.submit();
		return false; //is superfluous, but I put it here as a fallback
	});

	$(document).ready(function() {
    var x = 1; //initlal text box count
    $('.add_size').click(function(e){ //on add input button click
      e.preventDefault();
      x++; //text box increment
      $('.div_sizes').append('<div class="margin-bottom-10"><div class="input-group"><input type="text" name="mynewsizes[]" class="form-control input-medium "/><a href="#" class="remove_field btn btn-icon-only red"><i class="fa fa-times"></i></a></div></div>'); //add input box
    });

    $('.div_sizes').on("click",".remove_field", function(e){ //user click on remove text
      e.preventDefault(); $(this).parent('div').remove(); x--;
    });

    var y = 1;
    $('.add_color').click(function(e){ //on add input button click
      e.preventDefault();
      y++; //text box increment
      $('.div_colors').append('<div class="margin-bottom-10"><div class="input-group"><input type="text" name="mynewcolors[]" class="form-control input-medium "/><a href="#" class="remove_field btn btn-icon-only red"><i class="fa fa-times"></i></a></div></div>'); //add input box
    });

    $('.div_colors').on("click",".remove_field", function(e){ //user click on remove text
	    e.preventDefault(); $(this).parent('div').remove(); y--;
    });

    var z = 1;
    $('.add_style').click(function(e){ //on add input button click
      e.preventDefault();
      z++; //text box increment
      $('.div_styles').append('<div class="margin-bottom-10"><div class="input-group"><input type="text" name="mynewstyles[]" class="form-control input-medium "/><a href="#" class="remove_field btn btn-icon-only red"><i class="fa fa-times"></i></a></div></div>'); //add input box
    });

    $('.div_styles').on("click",".remove_field", function(e){ //user click on remove text
      e.preventDefault(); $(this).parent('div').remove(); z--;
	  });
	});
</script>