var host = window.location.hostname;

if (host.includes("localhost"))
{
	localStorage.setItem("ext", (".php"));
	var baseURL = "./";
}
else
{
	localStorage.setItem("ext", (""));
	var baseURL = "/";
}

var serverExt = localStorage.getItem("ext"); // correct server extension now in localStorage
var expires = "Tue, 19 Jan 2038 04:14:07 GMT"; // global setting for cookie expiry date
// --------------------
// SHOP FUNCTIONS

function showShopAlert(action)
{
	//load wait screen and disable scrolling
	var alert = document.getElementById("shop-notify-" + action);
	alert.style.display = "block"; // shows the layer
	document.body.style.overflow = "hidden";

	//hide the alert after fixed time
	setTimeout(function() {hideShopAlert(action)}, 500);
}


function hideShopAlert(action)
{
	var alert = document.getElementById("shop-notify-" + action);
	alert.style.display = "none"; // hides the layer
	document.body.style.overflow = "auto"; //re-enable the scroll
}


function filterProducts(category,parent)
{
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function()
	{
		modifyCategory(category); // set the session variable for category
		document.getElementById("products").innerHTML = this.responseText;
		showShopAlert('filter');
	}

	xhttp.open("POST", (baseURL + "render/products" + serverExt));
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("f=" + category + "&p=" + parent);
}


function toggleShippingSelector(type)
{
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function()
	{
		document.getElementById("shiptoggle").innerHTML = this.responseText; // reload shipping toggle selector
		cartRender(); // refresh cart shipping info
	}

	xhttp.open("POST", (baseURL + "render/toggle_shipping" + serverExt));
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("type=" + type);
}


function filterShop(category)
{
	modifyCategory(category);
	window.location.href = (baseURL + "shop" + serverExt);
}


// Sets the PHP session variable for category
function modifyCategory(category)
{
	const data = new URLSearchParams();
	data.append('category', category);

	fetch((baseURL + 'inc/set_category' + serverExt), {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: data
	})

	.then(response => response.text())

	.then(data => {
		console.log(data); // Log the response from the PHP script
	 })

	.catch(error => {
		console.error('Error:', error);
	});
}


// --------------------
// PRODUCT FUNCTIONS


// Check if decimal number
function hasDecimal(num)
{
	return num % 1 !== 0;
}


// Change pricing depending on frequency
function togglePrice(frequency)
{
	var price = document.getElementById("price");
	var price_mobile = document.getElementById("price-mobile");

	var once = Number(document.getElementById("price_once").value);
	var repeat = Number(document.getElementById("price_repeat").value);

	if (hasDecimal(once))
	{
		once = once.toFixed(2);
	}
	
	if (hasDecimal(repeat))
	{
		repeat = repeat.toFixed(2);
	}

	if (frequency == "subscription")
	{
		price.innerHTML = "$" + repeat + "<br>/m";
		price_mobile.innerHTML = "$" + repeat + "<br>/m";
	}
	else
	{
		price.innerHTML = "$" + once;
		price_mobile.innerHTML = "$" + once;
	}
}


// Change hero image on product page
function changeHero(filename,pos)
{
	var hero = document.getElementById("hero");
	var active_thumb = document.getElementById("tn" + pos);

	hero.src = baseURL + "img/shop/" + filename; // change hero image

	// dim opacity of all clickable thumbs
	var all_thumbs = document.querySelectorAll(".click_thumb");
	for (let i = 0; i < all_thumbs.length; i++)
	{
		all_thumbs[i].style.opacity = 0.64;
	};

	active_thumb.style.opacity = 1; // increase opacity of selected thumb
	localStorage.setItem("active_thumb_name", ("tn" + pos)); // store name of active thumb in localstorage
}


function checkThumbOpacity(t)
{
	var thumb = document.getElementById(t);

	// check for name of active thumb in localstorage
	if (localStorage.getItem("active_thumb_name"))
	{
		var active_thumb_name = localStorage.getItem("active_thumb_name")
	}
	else
	{
		var active_thumb_name = "tn1";
	}

	if (t != active_thumb_name)
	{
		thumb.style.opacity = 0.64;
	}
}


// Clear active thumb name on load/reload
window.addEventListener("load", () => localStorage.removeItem("active_thumb_name"));



// --------------------
// CART FUNCTIONS


function hideCart()
{
	var cart = document.getElementById("cart");

	if (cart.classList.contains("opened"))
	{
		cart.classList.add('closed');
		cart.classList.remove('opened');
	}
}


function showCart()
{
	var cart = document.getElementById("cart");

	cart.classList.remove('closed');
	cart.classList.add('opened');
}


function toggleCart()
{
	var cart = document.getElementById("cart");

	if (!(cart.classList.contains("opened")))
	{
		cart.classList.add('opened');
		cart.classList.remove('closed');
	}
	else
	{
		cart.classList.add('closed');
		cart.classList.remove('opened');
	}
}


function showCartAlert(action)
{
	//load wait screen and disable scrolling
	var alert = document.getElementById("cart-notify-" + action);
	alert.style.display = "block"; // shows the layer
	document.body.style.overflow = "hidden";
	
	//hide the alert after fixed time
	setTimeout(function() {hideCartAlert(action)}, 500);
}


function hideCartAlert(action)
{
	var alert = document.getElementById("cart-notify-" + action);
	alert.style.display = "none"; // hides the layer
	document.body.style.overflow = "auto"; //re-enable the scroll
}


// cart item amount control
function cartStep(ID,direction)
{
	//get the correct qty field
	var form = document.getElementById("f" + ID);
	var quantity = Number(form.qty.value);

	if (direction == "up")
	{
		if (quantity < 99)
		{
			form.qty.stepUp();
		}
	}
	else
	{
		if (quantity > 0)
		form.qty.stepDown();
	}

	cartModify("f" + ID);
}


function cartAdd()
{
	var valid = false;

	// grab the form values
	var form = document.getElementById("addtocart");

	var pid = form.pid.value;
	var frequency = form.frequency.value;
	var variant = form.variant.value;
	var qty = Number(form.qty.value);
	var cart_items_qty = Number(form.cart_items_qty.value);

	var cart_items_qty_updated = qty + cart_items_qty; // used to update hidden field on product page
	var action = "add";

	showCartAlert(action);
	cartEdit(action,pid,frequency,variant,qty);
	cartUpdateTotal(cart_items_qty + qty); // do the magic to update various UI elements

	return valid;
}


function cartModify(formID)
{
	// grab the form values
	var form = document.getElementById(formID);

	var pid = form.pid.value;
	var frequency = form.frequency.value;
	var variant = form.variant.value;
	var qty = Number(form.qty.value);
	var action = "modify";

	showCartAlert(action);
	cartEdit(action,pid,frequency,variant,qty);
}


function cartEdit(action,pid,frequency,variant,qty)
{
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function()
	{
		document.getElementById("cart").innerHTML = this.responseText; // reload cart overlay
		showCart();
	}

	xhttp.open("POST", (baseURL + "render/cart" + serverExt));
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("action=" + action + "&pid=" + pid + "&frequency=" + frequency + "&variant=" + variant + "&qty=" + qty);
}


function cartRender()
{
	const cart = document.getElementById("cart");

	if (cart) // check if present
	{
		const xhttp = new XMLHttpRequest();
		xhttp.onload = function()
		{
			cart.innerHTML = this.responseText;
		}
		xhttp.open("GET", (baseURL + "render/cart" + serverExt));
		xhttp.send();
	}
}


function cartUpdateTotal(newtotal)
{
	// update header bag total
	if (newtotal > 0)
	{
		document.getElementById("ctotal").innerHTML = newtotal;
	}
	else
	{
		document.getElementById("ctotal").innerHTML = ""; // hide number if it's 0
	}

	// update hidden field on product page
	if (document.getElementById("cart_items_qty"))
	{
		document.getElementById("cart_items_qty").value = newtotal;
	}
}


// render the shopping cart on page load
window.addEventListener("load", () => cartRender());

// close cart if 'esc' clicked
window.addEventListener("keydown", function (event)
{
	if (event.key === "Escape")
	{
		hideCart();
	}
})