const url = "https://csunix.mohawkcollege.ca/~adams/10259/a6_responder.

php";

let first = document.querySelector("#first");

const contentDiv = document.querySelector("#content");
const content2Div = document.querySelector("#content2");
const button1 = document.querySelector("#b1");
const button2 = document.querySelector("#b2");
const button3 = document.querySelector("#b3");

button1.addEventListener("click", function() {
Button1();
});

function Button1() {
fetch(url, { credentials: 'include' })
.then(response => response.text())
.then(Button1Success);
}
function Button1Success(text) {
first.innerHTML = "<h1>" + text + "000898120 </h1>";
}

button2.addEventListener("click", Button2);
function Button2() {
const choiceSelector =
document.querySelector("input[name='choice']:checked").value;
console.log("SelectedCoice is ",choiceSelector);
const fetchUrl = url + "?choice=" + choiceSelector;
fetch(fetchUrl)
.then(response => response.json())
.then(Button2Success);

}
function Button2Success(data) {
contentDiv.innerHTML = "";
for (let e = 0; e < data.length; e++) {
const info = data[e];
const div = document.createElement("div");

const title = document.createElement("h2");

title.innerHTML = info.name;
console.log(title);
div.appendChild(title);

const photo = document.createElement("photo");

photo.src = info.url;
photo.style.width = "300px";
div.appendChild(photo);

const description = document.createElement("p");

description.innerHTML = info.series;
div.appendChild(description);

contentDiv.appendChild(div);
}
}

function Button3() {
 const choiceInputs = document.getElementsByName("choice");
let selectedChoice;
for (let e = 0; e < choiceInputs.length; e++) {
if (choiceInputs[i].checked) {
selectedChoice = choiceInputs[i].value;
break;
}
}
if (selectedChoice === "mario" || selectedChoice === "starwars") {
const formData = new FormData();
formData.append("choice", selectedChoice);

fetch("https://csunix.mohawkcollege.ca/~adams/10259/a6_responder.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(Button3Success);
}
}

function Button3Success(data) {
content2Div.innerHTML = "";
const createTable = document.createElement("table");

const createTableCell = (content) => {

const createCell = document.createElement("td");
createCell.innerHTML = content;
return createCell;
};

const createTableRow = (rowData) => {

const createRow = document.createElement("tr");
rowData.forEach((content) => {
const createCell = createTableCell(content);
row.appendChild(createCell);
});
return createRow;
};

data.forEach((item) => {
const rowData = [item.series, item.url, item.name];
const createRow = createTableRow(rowData);
table.appendChild(createRow);
});

content2Div.appendChild(createTable);
}

button3.addEventListener("click", function() {
Button3();
});