var script_tag = document.getElementById('prodGroups');
var query = script_tag.src.replace(/^[^\?]+\??/,''); 
// Parse the querystring into arguments and parameters
var vars = query.split("&");
var args = {};
for (var i=0; i<vars.length; i++) {
	var pair = vars[i].split("=");
	// decodeURI doesn't expand "+" to a space.
	args[pair[0]] = decodeURI(pair[1]).replace(/\+/g, ' ');   
}

var myLanguage = args['lang'];
var myApp = args['app'];
var products;
var displayedProducts = [];
var productsToShow = 1000;
var mapClick = 0;


function fetchData() {
	
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                products = JSON.parse(xhr.responseText);
                if (products.length === 0) {
                    displayNoRecordsMessage();
					} else {
                    displayProducts(products.slice(0, productsToShow));
					// toggleShowMoreButton(); // Check if there are more products to show
				}
				} else {
                console.error('Failed to fetch data. Status: ' + xhr.status);
			}
		}
	};
    xhr.open("GET", 'getProducts.php?lang=' + myLanguage + '&app=' + myApp, true);
	console.log(xhr.open);
    xhr.send();
}




document.addEventListener('DOMContentLoaded', function() {
	var areas = document.querySelectorAll('map[name="filterMap"] area');
	
	areas.forEach(function(area) {
        area.addEventListener('click', function(event) {
			event.preventDefault(); // Prevent default action
			event.stopPropagation(); // Stop event propagation
			
			var selectedArea = document.querySelector('.selected-area');
			mapClick = 1;
			console.log('EVL Selected Area:', selectedArea); // Debugging output
			console.log('EVL Map value:', area.getAttribute('value')); // Debugging output
			console.log('mapClick:', mapClick); // Debugging output
			if (selectedArea) {
				selectedArea.classList.remove('selected-area');
			}
			this.classList.add('selected-area');
			
			// Pass the value attribute to filterProducts
			filterProducts(this.getAttribute('value'));
		});
	});
	
	var areas = document.querySelectorAll('map[name="filterMap"] area');
	var filterDivs = document.querySelectorAll('.filter-div'); // Only target divs with this class
	
	areas.forEach(function(area) {
		area.addEventListener('click', function(event) {
			event.preventDefault(); // Prevent default action
			event.stopPropagation(); // Stop event propagation
			
			var value = this.getAttribute('value');
			
			
			
			if (value) { // Check if value is not empty
				// Hide all filter-related divs
				filterDivs.forEach(function(div) {
					div.classList.add('hidden');
				});
				
				var div = document.getElementById(value);
				if (div) {
					div.classList.remove('hidden'); // Show the selected div
					} else {
					console.error("No div found with ID:", value);
				}
			}
		});
	});
	
});

function displayNoRecordsMessage() {

	var productListDiv = document.getElementById('productList');
	productListDiv.innerHTML = '';
	var noRecordsMessage = document.createElement('p');
	noRecordsMessage.innerHTML = "<P><br><br>Sorry, nothing found.</p><p>If you're looking for something more specific, why not <a href='/en-us/contact/'>Contact Us</a>?</p>";
	productListDiv.appendChild(noRecordsMessage);
}


function filterProducts() {
	
	var selectedArea = document.querySelector('.selected-area');
	var searchTerm = document.getElementById('searchInput').value.toLowerCase();
	var subFilter = document.querySelector('input[name="subFilter"]:checked')?.value || '';
	
	if (mapClick == 1) {
		subFilter = selectedArea.getAttribute('value');
		console.log('SA pre-reset: ', selectedArea);
		console.log('SA post-reset: ', selectedArea);
		console.log('PmapClick:', mapClick); // Debugging output
		mapClick = 0;
		console.log('AmapClick:', mapClick); // Debugging output
	}
	console.log('FP subFilter:', subFilter); // Debugging output
	if (subFilter == "")
	{
		
		console.log ("myValue is:" . value);
	}
	
	console.log('FP Selected Area:', selectedArea); // Debugging output
	console.log('FP Map value:', selectedArea); // Debugging output
	console.log('mapClick:', mapClick); // Debugging output
	
	// Event listener for radio buttons
	$('input[type="radio"]').on('change', function() {
		mapClick = 0; 
		// Update filter value based on selected radio button
		var filterValue = $(this).val(); // Assuming radio button value corresponds to filter value
		//console.log('Radio value:', filterValue); // Debugging output
		
		// Call updateList function with the new filter value
		updateList(filterValue, itemsToShow);
	});
	
	var filteredProducts = products.filter(function(product) {
		return (
			(subFilter === '' || (subFilter !== '' && product.product_subcategory && product.product_subcategory.includes(subFilter))) &&
			
			(product.Strap.toLowerCase().includes(searchTerm) ||
				product.Description.toLowerCase().includes(searchTerm) || 
				product.SP1.toLowerCase().includes(searchTerm) || 
				product.SP2.toLowerCase().includes(searchTerm) || 
			product.SP3.toLowerCase().includes(searchTerm))
		);
	});
	
	
	if (filteredProducts.length === 0) {
	var myProducts = filteredProducts.length;
	document.getElementById("myProductFound").innerHTML = myProducts + " products ";
	console.log ('myproducts:', myProducts);// Debugging output
		displayNoRecordsMessage();
		
		} else {
		displayedProducts = filteredProducts.slice(0, productsToShow);
		displayProducts(displayedProducts);
		// toggleShowMoreButton(); // Check if there are more products to show
	}
}

function displayProducts(products) {
	var productListDiv = document.getElementById('productList');
	productListDiv.innerHTML = '';
	
	// Assuming productListDiv is your container for the cards
	var productListDiv = document.getElementById('productList');
	
	// Create a row element
	var rowDiv = document.createElement('div');
	rowDiv.classList.add('row');
	
	// Iterate over products
	for (var i = 0; i < products.length; i++) {
	
	var myProducts = products.length;
	document.getElementById("myProductFound").innerHTML = myProducts + " products ";
	console.log ('myproducts:', myProducts);// Debugging output
	
	var productDiv = document.createElement('div');
	productDiv.classList.add('col-lg-3', 'mb-4'); // Add Bootstrap grid classes
	
	productDiv.innerHTML = `
	<div class='card d-flex flex-column justify-content-between mt-2 h-100' style='margin-bottom: 2rem!important;'>
	<div class='prod-img-top'>
	<a href='/en-us/products/${products[i].link}.htm'>
	<img src='/prodimg/std/${products[i].ProdImg}' class='img-fluid' alt='${products[i].Title}'></a>
	<div><h5 class='card-title-prod'>${products[i].Strap}</h5></div>
	<div class='card-body' style='padding: 0.25rem'>
	<div class='sp'>${products[i].SP1}</div><hr>
	<div class='sp'>${products[i].SP2}</div><hr>
	<div class='sp'>${products[i].SP3}</div></div>
	</div>
	<div class='card-footer prod-footer mt-auto'>
	<a href='/en-us/products/${products[i].link}.htm'  class='prod-btn-card btn'>More Info</a></div></div>
	`;
	
	// Append each product div to the row
	rowDiv.appendChild(productDiv);
	}
	
	// Append the row to the product list container
	productListDiv.appendChild(rowDiv);
	}
	
	
	// Initial display of all products after DOM has loaded
	document.addEventListener('DOMContentLoaded', function() {
	fetchData();
	});