@model PokemonSleepDto
<div class="card shadow border-0 mt-4">
	<div class="card-header bg-secondary bg-gradient ml-0 py-3">
		<div class="row">
			<div class="col-12 text-center">
				<h1 class="text-white">Pokémon Calculator</h1>
			</div>
		</div>
	</div>
	<div class="card-body p-4">
		<div class="row pb-3">
			<div class="col-6">
				<label>Select Pokemon</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 class="col-6 text-end">
				<a class="btn btn-outline-primary"><i class="bi bi-plus-square"></i> Add Pokemon</a>

			</div>
	</div>



	<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" width="100" height="100" class="me-3">
			<div>
				<h3 id="pokemonName"></h3>
				<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="row">
				<div class="col-4">
					<label for="natureSelect">Select Nature</label>
					<select id="natureSelect" class="form-control form-control-lg">
						<option value="" disabled selected>Choose Nature...</option>
						@foreach (var nature in Model.natureList)
						{
							<option value="@nature.Id">@nature.Nature</option>
						}
					</select>
				</div>
				<div class="col-4">
					<label for="subskillSelect1">Select Sub Skill 1</label>
					<select id="subskillSelect1" class="form-control form-control-lg">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
				</div>
				<div class="col-4">
					<label for="subskillSelect2">Select Sub Skill 2</label>
					<select id="subskillSelect2" class="form-control form-control-lg">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
				</div>
				<div class="col-4">
					<label for="subskillSelect3">Select Sub Skill 3</label>
					<select id="subskillSelect3" class="form-control form-control-lg">
						<option value="" disabled selected>Choose Sub Skill...</option>
						@foreach (var subskill in Model.subskillList)
						{
							<option value="@subskill.Id">@subskill.SubSkill</option>
						}
					</select>
				</div>
			</div>

			<div class="row mt-3">
				<div class="col-12">
					<button id="calculateScore" class="btn btn-primary">Calculate Final Score</button>
				</div>
			</div>

			<div class="row mt-3">
				<div class="col-12">
					<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>