<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Minutes Maker</title>
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
			crossorigin="anonymous"
		></script>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
			crossorigin="anonymous"
		/>
		<link rel="stylesheet" href="../css/styles.css" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Kanit&family=Roboto+Condensed:wght@500&display=swap"
			rel="stylesheet"
		/>
	</head>
	<body>
		<div class="container" bis_skin_checked="1">
			<header
				class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"
			>
				<div class="col-md-3 mb-2 mb-md-0" bis_skin_checked="1">
					<a
						href="https://www.arunnats.com/"
						class="d-inline-flex link-body-emphasis text-decoration-none"
					>
						<img src="../images/Logo(white).png" alt="" />
					</a>
				</div>
				<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
					<li>
						<a href="https://www.arunnats.com/" class="nav-link px-3 headertext"
							>Portfolio</a
						>
					</li>
					<li>
						<a
							href="https://github.com/ArunNats"
							class="nav-link px-3 headertext"
							>Github</a
						>
					</li>
					<li>
						<a
							href="https://www.linkedin.com/in/arun-natarajan-567539211/"
							class="nav-link px-3 headertext"
							>LinkedIn</a
						>
					</li>
				</ul>
			</header>
		</div>

		<div class="container-inputs">
			<h1>>Minutes Maker<</h1>
			<h4>Meeting audio to minutes, in minutes.</h4>
			<h5>Powered by AI</h5>

			<form id="audioForm" action="/getAnswer" method="post">
				<label id="filesInputLabel" for="filesInput">Choose a File:</label>
				<input
					type="file"
					id="filesInput"
					name="filesInput"
					accept=".mp3, .wav, .ogg, .aac"
					onchange="displayFileName(this)"
				/>
				<span id="filesSelected"></span>
				<button type="submit">Make Minutes!</button>
			</form>

			<div class="response" id="responseArea">
				<p id="generatedMinutes"></p>
			</div>
		</div>

		<div class="container">
			<footer
				class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"
			>
				<div class="col-md-4 d-flex align-items-center">
					<a
						href="/"
						class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1"
					>
						<svg class="bi" width="30" height="24">
							<use xlink:href="#bootstrap"></use>
						</svg>
					</a>
					<span class="nav-link px-3 headertext">Â© 2024 Arun Natarajan</span>
				</div>

				<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
					<li><a href="#" class="nav-link px-3 footertext">Portfolio</a></li>
					<li><a href="#" class="nav-link px-3 footertext">Github</a></li>
					<li><a href="#" class="nav-link px-3 footertext">LinkedIn</a></li>
				</ul>
			</footer>
		</div>
		<script>
			document
				.getElementById("audioForm")
				.addEventListener("submit", function (event) {
					event.preventDefault();

					const fileInput = document.getElementById("filesInput");
					const file = fileInput.files[0];

					const submitButton = document.querySelector("button[type='submit']");

					if (!submitButton.disabled) {
						// Disable the button to prevent multiple presses
						submitButton.disabled = true;

						if (file) {
							const formData = new FormData();
							formData.append("filesInput", file);

							const loadingMessage =
								document.getElementById("generatedMinutes");
							loadingMessage.innerHTML = "Loading...";

							fetch("/getAnswer", {
								method: "POST",
								body: formData,
							})
								.then((response) => {
									if (!response.ok) {
										throw new Error(`HTTP error! Status: ${response.status}`);
									}
									return response.json();
								})
								.then((data) => {
									console.log(data);

									const formattedText = data.replace(/\n/g, "<br>");

									loadingMessage.innerHTML = formattedText;
									document.getElementById("responseArea").style.opacity = 1;

									submitButton.disabled = false;
								})
								.catch((error) => {
									console.error(error);

									loadingMessage.innerHTML =
										"Error occurred. Please try again. Currently, the app supports audio files under 10 minutes comfortably. Support for longer files is coming soon!";
									document.getElementById("responseArea").style.opacity = 1;

									submitButton.disabled = false;
								});
						} else {
							console.log("Please choose a file.");
							submitButton.disabled = false;
						}
					} else {
						alert("Please wait for the current process to complete.");
					}
				});

			function displayFileName(input) {
				const filesSelected = document.getElementById("filesSelected");
				filesSelected.textContent = input.files[0] ? input.files[0].name : "";
			}

			const audioInput = document.getElementById("filesInput");
			audioInput.addEventListener("change", displayFileName);
		</script>
	</body>
</html>
