$(document).foundation().ready(function(){
	
	/*
	$("div.lazy").Lazy({
		effect: "fadeIn",
		effectTime : 500,
		enableThrottle: true,
        throttle: 250,
		afterLoad: function(){
		}
	});
	*/
	
	// search and filter
	$("[data-filter]").searchProducts();
	
	// order products
	$("[article-row]").orderProduct();
	
	// shooping cart
	$(".shopping-cart").shoppingCart();
	
	// address book
	$("[data-addressbook]").addressBook();
	
	// toggle fields
	$(".data-form-toggle [data-toggle-fields]").toggleFields();
	
	
	
	// admin
	$("[admin-setting]").adminSetting();
	
	// resize layer
	$( ".layer-align-right" ).resizable({handles: 'w',minWidth: 300, maxWidth: 1000});
	
});


$.fn.adminSetting = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		
		plugin.settings = {
			url: plugin.data("url"),
			url: plugin.data("id")
		}
		
		var $trash 		= plugin.find("[data-delete]");
		var $rows 		= plugin.find(".table__row");
		var $articles	= plugin.find(".figure-article");
		var $layer		= $("#page-layer");
		
		plugin.init = function()
		{	
			// edit
			$rows.adminEdit();
			
			// delete
			$trash.adminDelete();
			
			// figures
			$articles.adminFigures();
			
			// close modals
			$(document).keyup(function(e) {
			     if (e.key === "Escape") {
					 $layer.addClass("collapsed_hor");
			    }
			});
			
		}		
				
	    plugin.init();	
		
	});
	
}


$.fn.adminFigures = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		
		var $icon 		= plugin.find(".fal");
		var $art_add	= plugin.find(".button");
		var $art_inp	= plugin.find("input[type=text]");
		var $container	= plugin.find(".figure-labels");
		
		plugin.init = function()
		{
			$art_inp.val("");
			
			// add articles
			$art_add.click(plugin.addActicle);
			
		}	
		
		plugin.addActicle = function()
		{	
			var articles =  $art_inp.val().split(/[\s,]+/);
			
			$.each(articles,function(key, value) 
			{	
				var $label = $('<div class="label">').text( value ).append('<i class="fal fa-times"></i>').append('<input type="hidden" name="article-id[]" value="'+ value +'">');						    
				$container.append($label);		
				
				$label.articleDelete();	
	
			});
			
			// clear input			
			$art_inp.val("");
			
		}
				
	    plugin.init();	
		
	});
}


$.fn.adminEdit = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		
		var $element 	= plugin.find("[data-edit]");
		var $layer		= $("#page-layer");
		var $form 		= $layer.find("form"); 
		var $input 		= $form.find("input[type=text],input[type=number], input[type=radio], textarea, select");
		var $batch_ids	= $form.find("input[name=batch_articles_ids]");
		var $articles	= $form.find(".figure-article");
		var hide_fields	= $element.data("hide");
		

		plugin.settings = {
			url: plugin.data("url"),
			id: plugin.data("id"),
			action: $form.attr("action")
		}
		
		plugin.init = function()
		{	
			$element.click(plugin.data);
		}	
		
		
		plugin.data = function(){
			
			plugin.setAction();
			plugin.hideFields();
		
			
			$.ajax({
				url: plugin.settings.url,
				type: "GET",
				success: function(data){
					
					$input.each(function(){
												
						if( $(this).attr("type") == "radio" )
						{	
							if($(this).val() == data[ $(this).attr("data-id") ]) $(this).prop('checked', true);
						}
						else{
							$(this).val(  data[ $(this).attr("id") ] );
						}
						
					});
					
					$articles.children(".figure-labels").html("");
					
					if(data.batch){
						
						var ids = [];
						$.each(data.batch,function(key, value) 
						{	
							var $label = $('<div class="label">').text(value).append('<i class="fal fa-times"></i>').append('<input type="hidden" name="article[]" value="'+ key +'">');
							$articles.children(".figure-labels").append($label);	
							
							$label.articleDelete();		
							
							ids.push(key);
							
						});		
						
						$batch_ids.val(ids.join(","));
						$articles.find("input[type=text]").val("");
						

					}
					
				}
			});
			
		}
		
		plugin.setArticleId = function(id)
		{
			var ids = $batch_ids.val();
			var arr = ids === "" ? [] : ids.split(',');
			arr.push(id);
			
			console.log( $batch_ids );
			$batch_ids.val( "Test"+arr.join(',') );
			
		}
		
		plugin.hideFields = function()
		{	
			
			var fields = hide_fields.split(",");
			for (var i = 0; i < fields.length; i++) { 
				$layer.find( fields[i] ).closest("[data-form-field]").hide();
				$layer.find( fields[i] ).attr("type","hidden");
			}			
			
		}
		
		
		plugin.setAction = function()
		{	
			$form.attr("action", plugin.settings.action + "/" + plugin.settings.id);
		}	
		
				
	    plugin.init();	
		
	});
	
}

$.fn.articleDelete = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		var $icon 	= plugin.find(".fal");
		
		plugin.init = function()
		{
			$icon.click(plugin.delete);
		}	
		
		plugin.delete = function()
		{
			$icon.parent().remove();
		}
				
	    plugin.init();	
		
	});
}

$.fn.adminDelete = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		var $row 	= plugin.closest(".table__row");
		//console.log($row);
		
		plugin.settings = {
			id : plugin.data("id"),
			url: $row.data("url")
		}
		
		plugin.init = function()
		{	
			plugin.click(plugin.delete);
		}	
		
		plugin.delete = function()
		{
			$.ajax({
				url: plugin.settings.url,
				type: "DELETE",
				success: function(data){
					$row.slideUp("fast");
				}
			});
		}
				
	    plugin.init();	
		
	});
	
}


$.fn.toggleFields = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		var $parent = plugin.closest("[data-form-field]");
		var $fields = plugin.closest(".form").find("[data-form-field]");
		
		var toggle = plugin.data("toggle-fields").split(",");
			
		plugin.init = function()
		{	
			// init items selected
			if( $(this).is(':checked') )
			{
				plugin.toggle();
			}
			
			// checked changed
			plugin.change(plugin.toggle);
			
		}	
		
		
		plugin.toggle = function()
		{
			//console.log(toggle);
			
			$fields.each(function(){
				
				if( !$(this).is($parent) ){
					$(this).hide();
					$(this).find("input,textarea,select").prop("disabled", true);
				}
			});
			
			for (var i = 0; i < toggle.length; i++) { 
				$( toggle[i] ).closest("[data-form-field]").show();
				$( toggle[i] ).prop("disabled", false);
				//console.log( toggle[i] );
			}
				 
			
		}
		
		
	    plugin.init();	
		
	});
	
}

$.fn.addressBook = function(){
	
	return this.each(function(){

		var plugin 			= $(this);
		var $reveal_element = $("#reveal-addressbook");
		var $adresses 		= $reveal_element.find("[data-select-address]");
		var $add_new		= $reveal_element.find("[data-new-address]");
		var $form			= $add_new.closest(".form");
		var $addressbook	= $reveal_element.find(".address-book");
		var $reveal;
			
		plugin.init = function()
		{	
			$reveal	 = new Foundation.Reveal($reveal_element); 
								
			plugin.click(plugin.openReveal);
		}	
		
		plugin.openReveal = function()
		{	
			// open reveal
			$reveal.open();
			
			// select addresses
			$adresses.selectAddress();
											
			// order product
			$add_new.click(plugin.post);
			
		}	
		
		plugin.post = function()
		{
			$.ajax({
				url: $form.data("action"),
				method: "POST",
				data: $form.serialize(),
				success: function(data)
				{
					$addressbook.removeClass("toggle-form-book");
					$("#address-company-"+data.letter).append(data.html).clostest(".address-group").removeClass("hide");
				}
			});
				
		}	
	
	    plugin.init();	
		
	});
	
}





$.fn.selectAddress = function(){
	
	return this.each(function(){

		var plugin 	= $(this);
		var id 		= plugin.data("id");
		var address = plugin.next().html();
		
		var $target = $(plugin.data("target"));
		
		plugin.init = function()
		{	
			plugin.click(plugin.select);
		}	
		
		plugin.select = function()
		{	
			$target.val(id);
			$(".current-address").html(address);
		}		
	
	    plugin.init();	
		
	});
	
}


$.fn.searchProducts = function(){
	
	return this.each(function(){

		var plugin = $(this);
		var baselink = plugin.data("link");
		var category = plugin.data("category");
		var $pagination = $(".pagination");
		
		plugin.settings = {
			delay : 250,
			search : null,
			timer: null,
			update: true
		}
		
		plugin.parameters = {
			category : category
		}
	
		// init
		plugin.init = function()
		{	
			// keyup input
			plugin.keyup(plugin.timer);
			
		}
		
		
		// data product data in reveal
		plugin.search = function()
		{	
			
			$.ajax({
				url: "/articles/search/" + plugin.postUrl(),
				method: "POST",
				data: plugin.parameters,
				success: function(data){

					// clear table
					$(".table__body").html("");	
					
					// update articles
					$.each( data.articles, function( i, item ) {
						$(".table__body").append( plugin.getTableRow(item) );
					});
					
									
					// update pagination
					if(plugin.settings.update == true) plugin.setPagination( data.pages );					
									
				}
				
			});
			
		}	
		
		
		plugin.postUrl = function()
		{
			return  (plugin.parameters.category ? plugin.parameters.category +'/'+plugin.settings.search : plugin.settings.search);
		}
		
		
		plugin.setPagination = function(page_count)
		{
			
			var links = $pagination.find("li:not(.pagination__default)");
			var $last;

			// remove old links
			links.remove();
			
			// set position to insert links
			var $current = $pagination.find("li").first();
			for (i = 1; i <= page_count; i++) { 
			
				$last = $('<li class="'+ (i == 1 ? "current" : "") +'"><a href="'+ plugin.paginationLink(i) +'" data-page="'+ i +'" aria-label="Page '+ i +'">'+ i +'</a></li>');
				$current.after($last);
				$current = $last;
			}
			
			// pagination clicks
			plugin.paginationClick();
			
		}
		
		
		plugin.paginationClick = function()
		{
			// pagina clicks
			$pagination.find("li").click(function(event)
			{
				event.preventDefault();
				
				// update clicked
				$pagination.find("li").removeClass("current");
				$(this).addClass("current");
				
				// set page to view			
				plugin.parameters.page = $(this).find("a").data("page");
				
				// disable pagination update
				plugin.settings.update = false;
							
				// do search			
				plugin.search();
				
			});
			
		}

		
		plugin.getTableRow = function(row)
		{
			var $row = $('<div class="table__row" article-row></div>');
			var $grid = $('<div class="grid-x"></div>');
			$grid.append('<div class="cell medium-2 cell__row-number">'+ row.geomil_article_id +'</div>');
			$grid.append('<div class="cell auto">'+ row.description +'</div>');			
			$grid.append('<div class="cell medium-2 cell__row-price">'+ row.sales_price +'</div>');
			$grid.append('<div class="cell shrink cell__row-price"><button order-product data-attributes=\''+ JSON.stringify(row) +'\'><i class="fal fa-cart-plus" aria-hidden="true"></i></button></div>');											
			
			// insert
			$row.append($grid);
			
			// click
			$row.orderProduct();
			
			return $row;			
			
		}
		
		
		plugin.paginationLink = function(i)
		{
			return baselink +'/'+ i;
		}
		
		
		plugin.setSearchString = function(string)
		{
			plugin.settings.search = string;	
		}
		
		
		plugin.timer = function()
		{	
			plugin.setSearchString( $(this).val() );
			
			clearInterval(plugin.settings.timer);
			plugin.settings.timer = setTimeout(plugin.search,plugin.settings.delay);		
		}
		
		
		// init the plugin
	    plugin.init();
		
		
	});
	
}


$.fn.orderProduct = function(){
	
	return this.each(function(){

		var plugin	 = $(this);
		
		var $button = plugin.find("[order-product]");
		var $reveal_element = $("#reveal-article").clone();
		var $cart = $(".shopping-cart");
		var $reveal;
		var $order_button;
		
		plugin.init = function()
		{	
			$reveal	 = new Foundation.Reveal($reveal_element); 
			
			// set data in reveal
			$button.click(plugin.setData);
					
		}
		
		// data product data in reveal
		plugin.setData = function()
		{	

			var data = $(this).data("attributes");
						
			$reveal_element.find("[product-id]").text( data.id );
			$reveal_element.find("[product-description]").text( data.description );
			$reveal_element.find("[product-price]").text( data.price );		
			
			// order product
			$order_button = $reveal_element.find("[product-to-cart]").click(function(){
				
				data.quantity = $reveal_element.find("#product-quantity").val();
				
				plugin.orderProduct(data);
				
			});	
			
			$reveal.open();	
		}	
		
		plugin.orderProduct = function(parameters){
			
			$.ajax({
				url: "/cart/" + parameters.id +"/"+ parameters.quantity,
				method: "POST",
				data: parameters,
				success: function(data){
					
					plugin.postInCart( data.count );
					plugin.insertRow( data.optional );
					
					$cart.find("[cart-total]").updateCartTotal(data.total);
					
				}
			});
			
			
			
		}
		
		plugin.insertRow = function(html)
		{	
			var $html = $(html);
			$(".shopping-cart").find(".table__body").append( $html );

			// cart row functions
			$html.cartProduct();
		}
		
		plugin.postInCart = function(count){
			
			var $clone = $("<div class=\"to-cart\">");
						
			$clone.offset({
				top: $order_button.offset().top,
				left: $order_button.offset().left
			});
			
			$clone.css({
                'height': '48px',
                'width': '48px',
			});
			
           	$clone.animate({
				'top': $(".top-bar-right  .section__cart").offset().top + 10,
				'left': $(".top-bar-right .section__cart").offset().left + 30,
				'width': 0,
				'height': 0
        	}, 500, 'swing');
		
           	$clone.appendTo( $('body') )
			
			// update basket total
			var $counter 	= $(".section__cart .counter");
			
			$counter.addClass("added-to-cart");
			$counter.text(count);
			
			// close reveal
			$reveal.close();
		}
		
		
		// init the plugin
	    plugin.init();
		
		
	});
	
}

$.fn.shoppingCart = function(){
	
	return this.each(function(){

		var plugin = $(this);
		var $rows = plugin.find("[article-row]");
		var $mask = $('<div class="reveal-overlay" style="display: none;"></div>');
		
		plugin.init = function()
		{	
			
			$rows.cartProduct();		
		}		
	
	    plugin.init();	
		
	});
	
}

$.fn.updateCartTotal = function(cart_total){
	
	return this.each(function(){

		var plugin = $(this);
		
		plugin.init = function()
		{	
			plugin.text(cart_total);
		}
			
	    plugin.init();	
		
	});
}

$.fn.cartProduct = function(){
	
	return this.each(function(){

		var row 		= $(this);
		
		var $delete 	= row.find("button[delete-product]");
		var $quantity 	= row.find("[quantity-product]");
		var $amount		= row.find("[amount-product]");
		var $cart 		= row.closest(".shopping-cart");
		var $total		= $cart.find("[cart-total]") 
		var id 			= row.attr("data-id");
		
		row.init = function()
		{	
			
			// set data in reveal
			$delete.click(row.delete);
			$quantity.change(row.update);
			
		}
		
		// data product data in reveal
		row.delete = function()
		{	
			
			$.ajax({
				url: "/cart/" + id,
				method: "DELETE",
				success: function(data)
				{
					row.remove();
					
					$total.updateCartTotal(data.total);// text(data.total);
					//cart-total
					//plugin.postInCart(data.count);
					
				}
			});
		
		}	
		
		// data product data in reveal
		row.update = function()
		{	
			$.ajax({
				url: "/cart/"+ id +"/"+ $(this).val(),
				method: "PATCH",
				success: function(data)
				{

					// update row amount
					$amount.text(data.optional);

					// update cart total
					$total.text(data.total);					
					
				}
			});
		
		}	
		
		row.remove = function()
		{
			row.slideUp("fast");
		}
	
	    row.init();	
		
	});
}