PokemonSleepTools/PokemonSleep.Web/Views/Pokemon/PokemonIndex.cshtml

@model PokemonSleepDto
<div class="card shadow border-0 mt-4">
	<div class="card-header bg-secondary bg-gradient text-center py-3">
		<h1 class="text-white">Pokémon Calculator</h1>
	</div>
	<div class="card-body p-4">
		<!-- Pokémon Selection -->
		<div class="row pb-3">
			<div class="col-md-6">
				<label for="pokemonSelect">Select Pokémon</label>
				<select class="form-control form-control-lg" id="pokemonSelect">
					<option value="" disabled selected>Choose your Pokémon...</option>
					@foreach (var pokemon in Model.pokemonList)
					{
						<option value="@pokemon.Id">@pokemon.Id @pokemon.Name</option>
					}
				</select>
			</div>
		</div>

		<!-- Pokémon Details (Initially Hidden) -->
		<div id="pokemonDetails" class="mt-4 p-3 border rounded" style="display: none;">
			<div class="d-flex align-items-center">
				<img id="pokemonImage" src="" alt="Pokemon Image" class="me-3" style="width: 200px; height: 200px; object-fit: contain;">
				<div>
					<h2 id="pokemonName" class="mb-2"></h2>
					<p><strong>Pokédex #:</strong> <span id="pokemonId"></span></p>
					<p><strong>Sleep Type:</strong> <span id="pokemonSleepType"></span></p>
					<p><strong>Specialty:</strong> <span id="pokemonSpecialty"></span></p>
				</div>
			</div>

			<div class="d-flex mt-3">
				<!-- Nature & Subskills Selection -->
				<div class="me-4" style="flex: 1;">
					<h4 class="mb-3">Select Nature & Subskills</h4>
					<label for="natureSelect">Select Nature</label>
					<select id="natureSelect" class="form-control form-control-lg mb-2">
						<option value="" disabled selected>Choose Nature...</option>
						@foreach (var nature in Model.natureList)
						{
							<option value="@nature.Id">@nature.Nature</option>
						}
					</select>
					<label for="subskillSelect1">Select Sub Skill 1</label>
					<select id="subskillSelect1" class="form-control form-control-lg mb-2">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
					<label for="subskillSelect2">Select Sub Skill 2</label>
					<select id="subskillSelect2" class="form-control form-control-lg mb-2">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
					<label for="subskillSelect3">Select Sub Skill 3</label>
					<select id="subskillSelect3" class="form-control form-control-lg mb-2">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
				</div>
			</div>

			<!-- Score Calculation -->
			<div class="d-flex justify-content-between align-items-center mt-3">
				<button id="calculateScore" class="btn btn-primary">Calculate Final Score</button>
				<h4>Final Score: <span id="finalScore">0</span></h4>
			</div>
		</div>
	</div>
</div>



<script>
	console.log("Script Loaded Successfully!");
	var modelData = {
		pokemonList: @Html.Raw(Json.Serialize(Model.pokemonList)),
		natureList: @Html.Raw(Json.Serialize(Model.natureList)),
		subskillList: @Html.Raw(Json.Serialize(Model.subskillList))
	};
	var selectedPokemon;
	console.log(modelData);
	document.addEventListener("DOMContentLoaded", function () {
		const selectElement = document.getElementById("pokemonSelect");

		selectElement.addEventListener("change", function () {
			let pokemonId = this.value;

			if (pokemonId) {
				fetch(`https://localhost:7001/api/pokemon/${pokemonId}`)
					.then(response => response.json()) // Directly parse JSON response
					.then(data => {
						if (data.isSuccess && data.result) {
							let pokemon = data.result;
							// Update HTML with Pokémon details
							document.getElementById("pokemonImage").src = `https://www.serebii.net/pokemonsleep/pokemon/${pokemon.id}.png`;
							document.getElementById("pokemonName").textContent = pokemon.name;
							document.getElementById("pokemonId").textContent = pokemon.id;
							document.getElementById("pokemonSleepType").textContent = pokemon.sleepType;
							document.getElementById("pokemonSpecialty").textContent = pokemon.speciality;
							document.getElementById("pokemonDetails").style.display = "block"; // Show the details div
						} else {
							console.error("Error:", data.message);
						}
					})
					.catch(error => {
						console.error("Error fetching Pokémon data:", error);
					});
			}
		});
	});

		document.getElementById("calculateScore").addEventListener("click", function () {


			var pkmnId = document.getElementById("pokemonSelect").value;
			var natureId = document.getElementById("natureSelect").value;
			var subskill1Id = document.getElementById("subskillSelect1").value;
			var subskill2Id = document.getElementById("subskillSelect2").value;
			var subskill3Id = document.getElementById("subskillSelect3").value;
			console.log(pkmnId);
			if (natureId && subskill1Id && subskill2Id && subskill3Id) {
				// Fetch the selected nature and subskills from the API or preloaded data
				var pkmn = modelData.pokemonList.find(p => p.id == pkmnId);
				var nature = modelData.natureList.find(n => n.id == natureId);
				var subskill1 = modelData.subskillList.find(s => s.id == subskill1Id);
				var subskill2 = modelData.subskillList.find(s => s.id == subskill2Id);
				var subskill3 = modelData.subskillList.find(s => s.id == subskill3Id);

				console.log(pkmn)
				console.log(nature);
				console.log(subskill1);
				console.log(subskill2);
				console.log(subskill3);


				// Check if any object is undefined (just in case)
				if (!pkmn || !nature || !subskill1 || !subskill2 || !subskill3) {
					alert("Invalid selection. Please check your inputs.");
					return;
				}

				let finalScore = 0; // Initialize score

				// Sum the ranks based on the Pokémon's specialty
				if (pkmn.speciality === "Berries") {
					finalScore = nature.berryRating + subskill1.berryRank + subskill2.berryRank + subskill3.berryRank;
				}
				else if (pkmn.speciality === "Ingredients") {
					finalScore = nature.ingredientRating + subskill1.ingredientRank + subskill2.ingredientRank + subskill3.ingredientRank;
				}
				else if (pkmn.speciality === "Skills") {
					finalScore = nature.skillRating + subskill1.skillRank + subskill2.skillRank + subskill3.skillRank;
				}


				// Update the final score on the screen
				document.getElementById("finalScore").innerText = finalScore;
			} else {
				alert("Please select all options!");
			}
		});
</script>