window.onload = ()=>{
localStorage.clear();
const data = {
    "menu": {
        "slice of pizza": "2.00", //holds input 0
        "toppings": {
            "pepperoni": ".25", //1
            "meatballs": ".35", //2
            "mushrooms": ".40", //3
            "olives": ".20"  //4
        },
        "sides": {
            "potato salad": "1.25", //5
            "hummus": "2.50",  //6
            "caesar salad": "3.50",  //7
            "garden salad": "2.25" //8
        },
        "drinks": {
            "soda": {
                "small": "1.95", //9
                "medium": "2.20", //10
                "large": "2.50" //11
            },
            "juice": "2.00", //12
            "water": "1.25"  //13
        }
    }
};

//setting variables to work with json
let pizzaMenu = data.menu;
    
let toppings = pizzaMenu.toppings;
    
let sides = pizzaMenu.sides;
   
let drinks = pizzaMenu.drinks;
  
let sodaSize = drinks.soda;
  

//setting variables to string information based on json data -- to use in radio input creations  
let text = "";
let stext = "";
let dtext = "";
let sStext = "";
let gtext = "";



//setting data for main item of pizza from data
let mainI = (function() {
    for (let prop in data.menu) {
       for (x in data.menu){
       let mainItem = x;
       return mainItem.toUpperCase() + " - " + "$" + data.menu["slice of pizza"];
       } 
      
    }

})();
document.getElementById("slice").innerHTML = mainI;


// printing radio inputs with toppings data
let first = (function() {
    for (let prop in data.menu) {
        
        if (data.menu.hasOwnProperty(prop)) {
            for (x in data.menu){
                if (x === "toppings"){
                return x;
            }
            }

        }
    }
})();
document.getElementById("toppings").innerHTML = first.toUpperCase();
for (let t in toppings){
    text += t.toUpperCase() + " - " + "$" + toppings[t] +  "<input id='option_a' type='radio' name='menutoppings'>" + "<br />";
}
document.getElementById("topp").innerHTML = text;




// printing radio inputs with toppings data
let second = (function() {
    for (let prop in data.menu) {
        
        if (data.menu.hasOwnProperty(prop)) {
            for (x in data.menu){
                if (x === "sides"){
                return x;
            }
            }

        }
    }
})();
document.getElementById("sides").innerHTML = second.toUpperCase();
for (let s in sides){
     stext += s.toUpperCase() + " - " + "$" + sides[s] +  "<input id='option' type='radio' name='menusides'>" + "<br>";
}
document.getElementById("sid").innerHTML = stext;




// printing radio input titles with drink [soda and water and juice] data
let third = (function() {
    for (let prop in data.menu) {
        
        if (data.menu.hasOwnProperty(prop)) {
            for (x in data.menu){
                if (x === "drinks"){
                return x;
            }
            }

        }
    }
})();
document.getElementById("drinks").innerHTML = third.toUpperCase();
document.getElementById("waters").innerHTML = third;
for (let d in drinks){
     dtext = d.toUpperCase();
     break;
 }
document.getElementById("drink").innerHTML = dtext;        

// printing radio inputs with soda drink data
for (let sS in sodaSize){
            sStext += sS + " - " + "$" + sodaSize[sS] + "<input id='option' type='radio' name='soda'>" + "<br />";
            document.getElementById("sodasizes").innerHTML = sStext;
        }   
document.getElementById("sodasizes").innerHTML = sStext;

// printing radio inputs with juice data
let thirdjuice = (function() {
    for (let prp in data.menu.drinks) {
        if (data.menu.drinks.hasOwnProperty(prp)) {
            for (x in data.menu.drinks){
                if (x === "juice"){
                    return x + " - " + "$" + data.menu.drinks[x] + "<input id='option' type='radio' name='drinkchoice' value='juice'>" + "<br />";
                }
            } 
        }
    }
})();
document.getElementById("drinkoption1").innerHTML = thirdjuice.toUpperCase();

// printing radio inputs with water data
let thirdwater = (function() {
    for (let property in drinks) {
        if (drinks.hasOwnProperty(property)) {
            for (z in drinks) {
                if (z === "water"){
                return z.toUpperCase() + " - " + "$" + drinks[z] + "<input id='option' type='radio' name='drinkchoice' value='water'>" + "<br />";
                }
            }
        }
    }
})();
document.getElementById("waters").innerHTML = thirdwater;
}


//itsSaved is used within the showOrder() function to detect what conditoins should be used
let itsSaved = false;
//when called it saves the selected inputs into local storage when the "save and submit" button is clicked
function saveIt(){
    var theSliceOfPizza = document.getElementById("option1");
    if(theSliceOfPizza.checked){
        localStorage.setItem("menu item", theSliceOfPizza.value);
    }
    var toSave = document.querySelectorAll("input");
    if (toSave[1].checked){
        toSave[1].value = "pepperoni";
        localStorage.setItem("topping", toSave[1].value);
    }
    if (toSave[2].checked){
        toSave[2].value = "meatballs";
        localStorage.setItem("topping", toSave[2].value);
    }
    if (toSave[3].checked){
        toSave[3].value = "mushrooms";
        localStorage.setItem("topping", toSave[3].value);
    }
    if (toSave[4].checked){
        toSave[4].value = "olives";
        localStorage.setItem("topping", toSave[4].value);
    }
    if(toSave[5].checked){
        toSave[5].value = "potato salad";
        localStorage.setItem("side", toSave[5].value);
    } 
    if(toSave[6].checked){
        toSave[6].value = "hummus";
        localStorage.setItem("side", toSave[6].value);
    }
    if(toSave[7].checked){
        toSave[7].value = "ceasar salad";
        localStorage.setItem("side", toSave[7].value);
    }
    if(toSave[8].checked){
        toSave[8].value = "garden salad";
        localStorage.setItem("side", toSave[8].value);
    } 
    if(toSave[9].checked){
        toSave[9].value = "small soda";
        localStorage.setItem("drink", toSave[9].value);
    }  
    if(toSave[10].checked){
        toSave[10].value = "medium soda";
        localStorage.setItem("drink", toSave[10].value);
    }
    
    if(toSave[11].checked){
        toSave[11].value = "large soda";
        localStorage.setItem("drink", toSave[11].value);
    }
    if(toSave[12].checked){
        toSave[12].value = "juice";
        localStorage.setItem("plusdrink1", toSave[12].value);
    } 
    if(!toSave[12].checked){
        toSave[12].value = "none";
        localStorage.setItem("plusdrink1", toSave[12].value);
    } 
    if(toSave[13].checked){
        toSave[13].value = "water";
        localStorage.setItem("plusdrink2", toSave[13].value);
    } 
    if(!toSave[13].checked){
        toSave[13].value = "none";
        localStorage.setItem("plusdrink2", toSave[13].value);
    } 
    

    const retrievedObject1 = localStorage.getItem('menu item');
    const retrievedObject2 = localStorage.getItem('topping');
    const retrievedObject3 = localStorage.getItem('side');
    const retrievedObject4 = localStorage.getItem('drink');
    const retrievedObject5 = localStorage.getItem('plusdrink1');
    const retrievedObject6 = localStorage.getItem('plusdrink2');

    const formOrder = {order:[retrievedObject1, retrievedObject2, retrievedObject3, retrievedObject4, retrievedObject5, retrievedObject6]};
    localStorage.setItem('USER ORDER', JSON.stringify(formOrder));
    alert('Order Is Saved\nClick the "Your Order" button to view your order.');
    itsSaved = true;
}

//when the order button is clicked this funcion is called and performs conditionals to interact with the user
function showOrder(){
	let radios = document.querySelectorAll('input[type="radio"]');
    //if the "save and submit" button is clicked check conditionals 
	if(itsSaved === true){
	    var retrieveOrder = localStorage.getItem('USER ORDER');
        let eagleEye = JSON.parse(retrieveOrder);
        let checker = 0;
        for(let i=0;i <eagleEye.order.length;i++){
    	    if(eagleEye.order[i] === null || eagleEye.order[i] === "none"){
    		    checker += 1;
    	    }
        }

    //if the save and submit button is clicked with no selections
    if(checker === 6){
    	localStorage.clear();
    	alert("Your order is empty, please select an item, then save and submit your selection.");
    	console.log(checker + ": saved without selecting items");
    	itsSaved = false;
    	return false;
    }
    
    //if checker condition is met print users selection as order
    let statement = "YOUR ORDER IS:" + "\n";
    for(let i=0;i<eagleEye.order.length;i++){
        if(eagleEye.order[i] === "none"){
            eagleEye.order.splice(i, 1);
        }
    }
    let outputArr = [];
    for(let el of eagleEye.order){
        if(el !== null){
           outputArr.push(el);
        }
    }
    let jjj= outputArr.filter(el => el!=="none").forEach((el)=>{
        statement += el + "\n";
    });

    confirm(statement);

    //resetting values to perform function again
    localStorage.clear();     	
    radios.forEach((el)=>{
        el.checked = false;
    });
    itsSaved = false;
	}else{
		//if the save and submit button not clicked but inputs are selected
		for(let i=0;i<radios.length;i++){
	    	if(radios[i].checked){
		    	alert("Please save and submit your selection.");
		    	return false;
	    	}
    	}
    	//else alert for user to make a selection 
    	alert("Please select an item and click the save and submit button before viewiung your order.");
    }	 
}

//for "saveandsubmit" button and "order" button events
const savesubbuttons = document.querySelectorAll(".buttons");
const btnElems = [...savesubbuttons];
btnElems.forEach((btn)=>{
    btn.addEventListener("click",(e)=>{     
        if(btn.type === "button"){
            saveIt();
            e.preventDefault();          
        }
        if(btn.type === "submit"){
        	e.preventDefault();
        	showOrder();     
        }
    });
});