	<!-- 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 "} 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"> Presentacion: </div>
													<div class="col-md-8 value"> <%= @product.display_attributes %> </div>
												</div>
												<% end %>
												<div class="row static-info">
													<div class="col-md-4 name"> Descripcion: </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ías: </div>
													<div class="col-md-8 value">
														<%  @product.categories.each_with_index do | cat, index | %>
															<% if index > 0 %>  <br> <% end %>
															<span class="badge badge-default badge-roundless" > <%= cat.category %> </span>
														<% end %>
													</div>
												</div>
												<% if current_user.usertype == "A" %>
												<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>
