{{ template "rmo/base.html" . }}

{{ define "title" }}Quick Report{{ end }}
{{ define "extraheader" }}
	{{ template "photo-upload-header" }}
	<style>
		.district-logo {
			max-height: 60px;
			width: auto;
		}

		.submit-btn {
			padding: 15px 0;
			font-size: 1.25rem;
			border-radius: 8px;
		}

		.location-info {
			background-color: #e9f5ff;
			border-radius: 8px;
			padding: 12px;
			margin-bottom: 20px;
			font-size: 0.9rem;
		}

		@media (max-width: 767px) {
			.header-title {
				font-size: 1.5rem;
			}
		}
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function () {
			// Elements
			const form = document.getElementById("mosquitoReportForm");
			const locationStatus = document.getElementById("locationStatus");
			const latitudeInput = document.getElementById("latitude");
			const longitudeInput = document.getElementById("longitude");
			const submitButton = document.getElementById("submitButton");
			const loadingOverlay = document.getElementById("loadingOverlay");

			// Get current location
			requestLocation();

			// Handle form submission
			form.addEventListener("submit", handleFormSubmission);

			/**
			 * Request user's geolocation
			 */
			function requestLocation() {
				if (navigator.geolocation) {
					locationStatus.textContent = "Requesting your location...";

					navigator.geolocation.getCurrentPosition(
						// Success callback
						function (position) {
							locationStatus.textContent = "Location successfully added";
							locationStatus.classList.add("text-success");

							// Store location in hidden fields
							latitudeInput.value = position.coords.latitude;
							longitudeInput.value = position.coords.longitude;
						},
						// Error callback
						function (error) {
							let errorMessage = "Unable to get your location";
							switch (error.code) {
								case error.PERMISSION_DENIED:
									errorMessage =
										"Location access denied. Please enable location services.";
									break;
								case error.POSITION_UNAVAILABLE:
									errorMessage = "Location information unavailable.";
									break;
								case error.TIMEOUT:
									errorMessage = "Location request timed out.";
									break;
							}
							locationStatus.textContent = errorMessage;
							locationStatus.classList.add("text-danger");
						},
						// Options
						{
							enableHighAccuracy: true,
							timeout: 10000,
							maximumAge: 0,
						},
					);
				} else {
					locationStatus.textContent =
						"Geolocation is not supported by your browser";
					locationStatus.classList.add("text-danger");
				}
			}

			/**
			 * Handle form submission
			 */
			function handleFormSubmission(event) {
				event.preventDefault();

				// Show loading overlay
				loadingOverlay.classList.remove("d-none");

				// Disable submit button to prevent double submission
				submitButton.disabled = true;

				// Create FormData object
				const formData = new FormData(form);

				// Send AJAX request
				fetch(form.action, {
					method: "POST",
					body: formData,
				})
					.then((response) => {
						if (response.ok) {
							// Navigate to the URL the server specified
							window.location.href = response.url;
							return;
						}
						console.error("not ok server response", response);
						throw new Error("Server error " + response.status);
					})
					.catch((error) => {
						console.error("Error:", error);
						alert(
							"There was a problem submitting your report. Please try again. If this happens a few times, please let us know.",
						);

						// Re-enable submit button
						submitButton.disabled = false;

						// Hide loading overlay
						loadingOverlay.classList.add("d-none");
					});
			}
		});
	</script>
{{ end }}
{{ define "content" }}
	<!-- Main Content -->
	<main class="container mb-5">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<div class="card shadow-sm">
					<div class="card-body p-4">
						<h2 class="card-title text-center mb-4">Quick Mosquito Report</h2>

						<!-- Form -->
						<form
							id="mosquitoReportForm"
							action="/quick-submit"
							method="POST"
							enctype="multipart/form-data"
						>
							<!-- Location Automatic Collection Note -->
							<div class="location-info d-flex align-items-center mb-4">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-geo-alt me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"
									/>
									<path
										d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
									/>
								</svg>
								<span id="locationStatus">Requesting your location...</span>
								<!-- Hidden fields for location data -->
								<input type="hidden" id="latitude" name="latitude" />
								<input type="hidden" id="longitude" name="longitude" />
							</div>

							<!-- Photo Upload -->
							<div class="mb-4">
								{{ template "photo-upload" }}
							</div>

							<!-- Comments -->
							<div class="mb-4">
								<label for="comments" class="form-label fw-bold"
									>Comments</label
								>
								<textarea
									class="form-control"
									id="comments"
									name="comments"
									rows="4"
									placeholder="Describe the mosquito issue (e.g., standing water, high mosquito activity, time of day they're most active)"
								></textarea>
							</div>

							<!-- Submit Button -->
							<button
								type="submit"
								class="btn btn-success w-100 submit-btn mt-4"
								id="submitButton"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-send-fill me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"
									/>
								</svg>
								Submit Report
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</main>

	<!-- Loading Indicator Overlay (Initially hidden) -->
	<div
		id="loadingOverlay"
		class="position-fixed top-0 start-0 w-100 h-100 d-none"
		style="background-color: rgba(0,0,0,0.5); z-index: 1050;"
	>
		<div
			class="position-absolute top-50 start-50 translate-middle text-white text-center"
		>
			<div class="spinner-border" role="status"></div>
			<p class="mt-2">Submitting your report...</p>
		</div>
	</div>
{{ end }}