{{ template "base.html" . }}

{{ define "title" }}Nuisance{{ end }}
{{ define "extraheader" }}
	<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
	<script src="/static/js/address-display.js"></script>
	<script src="/static/js/address-suggestion.js"></script>
	<script src="/static/js/geocode.js"></script>
	<script src="/static/js/location.js"></script>
	<script src="/static/js/map-locator.js"></script>
	{{ template "photo-upload-header" }}
<script>
const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
// Handle inspection type selection
function selectInspectionType(type) {
	// Remove selected class from both cards
	document.getElementById('propertyInspection').classList.remove('selected');
	document.getElementById('neighborhoodInspection').classList.remove('selected');

	// Add selected class to chosen card
	if (type === 'property') {
		document.getElementById('propertyInspection').classList.add('selected');
		document.getElementById('inspectionTypeProperty').checked = true;
		document.getElementById('schedulingSection').style.display = 'block';
	} else {
		document.getElementById('neighborhoodInspection').classList.add('selected');
		document.getElementById('inspectionTypeNeighborhood').checked = true;
		document.getElementById('schedulingSection').style.display = 'none';
	}
}
function toggleCollapse(something) {
	el = document.getElementById(something)
	if (el.classList.contains('collapse')) {
		el.classList.remove('collapse');
	} else {
		el.classList.add('collapse');
	}
	document.getElementById("toggle-additional").classList.add("visually-hidden");
}
// Check for source identification
document.addEventListener('DOMContentLoaded', function() {
	const sourceCheckboxes = [
		document.getElementById('sourceStagnantWater'),
		document.getElementById('sourceContainers'),
		document.getElementById('sourceGutters')
	];

	const sourceAlert = document.getElementById('sourceFoundAlert');

	sourceCheckboxes.forEach(checkbox => {
		checkbox.addEventListener('change', function() {
			// If any source is checked, show the alert
			if (sourceCheckboxes.some(cb => cb.checked)) {
				sourceAlert.style.display = 'block';
			} else {
				sourceAlert.style.display = 'none';
			}
		});
	});
	// Elements
	const photoInput = document.getElementById('photos');

	// Handle photo selection
	photoInput.addEventListener('change', handlePhotoSelection);

	// Handle drag and drop
	const photoDropArea = document.getElementById('photoDropArea');

	photoDropArea.addEventListener('dragover', function(e) {
		e.preventDefault();
		photoDropArea.style.backgroundColor = '#e9ecef';
	});

	photoDropArea.addEventListener('dragleave', function() {
		photoDropArea.style.backgroundColor = '#f8f9fa';
	});

	photoDropArea.addEventListener('drop', function(e) {
		e.preventDefault();
		photoDropArea.style.backgroundColor = '#f8f9fa';

		if (e.dataTransfer.files.length) {
			handleFiles(e.dataTransfer.files);
		}
	});
	const mapLocator = document.querySelector("map-locator");
	mapLocator.addEventListener("load", (event) => {
		getGeolocation({
			enableHighAccuracy: true,
			timeout: 10000,
			maximumAge: 0
		}).then(position => {
			mapLocator.jumpTo({
				center: {
					lng: position.coords.longitude,
					lat: position.coords.latitude,
				},
				zoom: 14,
			});
			mapLocator.setMarker([
				position.coords.longitude,
				position.coords.latitude,
			]);
			geocodeReverse(MAPBOX_ACCESS_TOKEN, {
				lat: position.coords.latitude,
				lng: position.coords.longitude,
			});
		}).catch(error => {
			console.log("location error", error);
		})
	})
	//mapLocator.addEventListener("markerdragend",
	let mapZoom = document.getElementById('map-zoom');
	mapLocator.addEventListener("zoomend", function(e) {
		mapZoom.value = e.target.getZoom();
	});
	mapLocator.addEventListener("markerdragend", (e) => {
		const lngLat = marker.getLngLat();
		//displaySelectedCoordinates(lngLat);
		geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
	});

	const addressDisplay = document.querySelector("address-display");
	const addressInput = document.querySelector("address-input");
	addressInput.addEventListener("address-selected", (event) => {
		const l = event.detail.location;
		console.log("Address selected", l);
		// Center map on selected address
		mapSetMarker(l.geometry.coordinates);
		mapJumpTo({
			center: l.geometry.coordinates,
			zoom: 14,
		});

		addressDisplay.show(l);
		setLocationInputs(l);
	});
});
</script>
	<style></style>
{{ end }}
{{ define "content" }}
	{{ if .District }}
		{{ template "header" . }}
	{{ end }}
	<div class="container">
		<div class="row mb-4">
			<div class="col-12">
				<h2>Report Mosquito Nuisance</h2>
				<p class="lead">Help us identify mosquito activity in your area</p>
			</div>
		</div>

		<!-- Report Form -->
		<form id="mosquitoNuisanceForm" action="/nuisance-submit" method="POST">
			<!-- Location & Contact Section -->
			<div class="form-section">
				<div class="section-heading">
					<i class="bi bi-geo-alt"></i>
					<h3>Nuisance Location Information</h3>
				</div>
				<div class="col-md-12">
					<div class="alert alert-info" role="info">
						<p class="mb-0">
							You can select the location by address or by moving the marker on
							the map.
						</p>
					</div>
				</div>

				<div class="col-md-6">
					<div class="mb-3 position-relative">
						<address-input
							placeholder="Start typing an address (min 3 characters)"
							api-key="{{ .MapboxToken }}"
						>
						</address-input>
					</div>
				</div>
			</div>
			<p class="small text-muted mb-2">
				You can also click on the map to mark the location precisely
			</p>
			<map-locator api-key="{{ .MapboxToken }}"></map-locator>
			<input type="hidden" id="map-zoom" name="map-zoom" />

			<!-- Mosquito Activity Section -->
			<div class="form-section">
				<div class="section-heading">
					{{ template "mosquito-color.svg" }}
					<h3>Mosquito Activity Information</h3>
				</div>
				<p class="mb-4">
					The time when mosquitoes are active can help us identify the species
					and likely breeding sources.
				</p>

				<!-- Time of Day -->
				<div class="row mb-4">
					<div class="col-12">
						<label class="form-label"
							>When do you typically notice mosquitoes? (Select all that
							apply)</label
						>
						<div class="row">
							<div class="col-6 col-md-3">
								<input
									type="checkbox"
									class="btn-check"
									id="earlyMorning"
									name="tod-early"
									autocomplete="off"
								/>
								<label
									class="btn btn-outline-primary time-of-day-btn"
									for="earlyMorning"
								>
									<span class="time-of-day-icon"
										><i class="bi bi-sunrise"></i
									></span>
									<span class="time-label">Early Morning</span>
									<small class="text-muted">5am-8am</small>
								</label>
							</div>
							<div class="col-6 col-md-3">
								<input
									type="checkbox"
									class="btn-check"
									id="daytime"
									name="tod-day"
									autocomplete="off"
								/>
								<label
									class="btn btn-outline-primary time-of-day-btn"
									for="daytime"
								>
									<span class="time-of-day-icon"
										><i class="bi bi-sun"></i
									></span>
									<span class="time-label">Daytime</span>
									<small class="text-muted">8am-5pm</small>
								</label>
							</div>
							<div class="col-6 col-md-3">
								<input
									type="checkbox"
									class="btn-check"
									id="evening"
									name="tod-evening"
									autocomplete="off"
								/>
								<label
									class="btn btn-outline-primary time-of-day-btn"
									for="evening"
								>
									<span class="time-of-day-icon"
										><i class="bi bi-sunset"></i
									></span>
									<span class="time-label">Evening</span>
									<small class="text-muted">5pm-9pm</small>
								</label>
							</div>
							<div class="col-6 col-md-3">
								<input
									type="checkbox"
									class="btn-check"
									id="night"
									name="tod-night"
									autocomplete="off"
								/>
								<label
									class="btn btn-outline-primary time-of-day-btn"
									for="night"
								>
									<span class="time-of-day-icon"
										><i class="bi bi-moon-stars"></i
									></span>
									<span class="time-label">Night</span>
									<small class="text-muted">9pm-5am</small>
								</label>
							</div>
						</div>
					</div>
				</div>

				<!-- Duration -->
				<div class="row mb-4">
					<div class="col-md-6">
						<label for="duration" class="form-label"
							>How long have you been experiencing this mosquito problem?</label
						>
						<select class="form-select" name="duration">
							<option value="just-noticed">Just noticed recently</option>
							<option value="few-days">A few days</option>
							<option value="1-2-weeks">1-2 weeks</option>
							<option value="2-4-weeks">2-4 weeks</option>
							<option value="1-3-months">1-3 months</option>
							<option value="seasonal">All season (recurring issue)</option>
						</select>
					</div>
				</div>

				<!-- Location -->
				<div class="row">
					<div class="col-md-12">
						<label for="source-location" class="form-label"
							>Where on your property do you notice the most mosquito
							activity?</label
						>
						<select
							class="form-select tall"
							multiple="true"
							name="source-location"
						>
							<option value="">Please select</option>
							<option value="front-yard">Front yard</option>
							<option value="backyard">Back yard</option>
							<option value="garden">Garden</option>
							<option value="pool-area">Pool area</option>
							<option value="other">Other area</option>
						</select>
					</div>
				</div>
			</div>

			<button
				id="toggle-additional"
				class="btn btn-warning"
				type="button"
				onClick="toggleCollapse('collapse-additional-fields')"
			>
				Click here to answer a few more questions to better help us solve your
				mosquito problem
			</button>
			<div class="collapse" id="collapse-additional-fields">
				<!-- Potential Sources Section -->
				<div class="form-section">
					<div class="section-heading">
						<i class="bi bi-search"></i>
						<h3>Potential Mosquito Sources</h3>
					</div>
					<p class="mb-3">
						Have you noticed any of these common mosquito breeding sources in
						your area?
					</p>

					<div class="card card-highlight mb-4">
						<div class="card-body">
							<h5 class="card-title">Did you know?</h5>
							<p class="card-text">
								Mosquitoes can breed in as little as a bottle cap of water!
								Eliminating standing water is the most effective way to reduce
								mosquito populations.
							</p>
						</div>
					</div>

					<div class="row g-4 mb-4">
						<!-- Source 1 -->
						<div class="col-md-4">
							<div class="card source-card">
								<div class="card-body text-center">
									<div class="source-icon">
										<i class="bi bi-water"></i>
									</div>
									<h5 class="card-title">Stagnant Water</h5>
									<p class="card-text">
										Green pools, ponds, fountains, or birdbaths that aren't
										maintained
									</p>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											name="source-stagnant"
											id="sourceStagnantWater"
										/>
										<label class="form-check-label" for="sourceStagnantWater">
											I've noticed this
										</label>
									</div>
								</div>
							</div>
						</div>

						<!-- Source 2 -->
						<div class="col-md-4">
							<div class="card source-card">
								<div class="card-body text-center">
									<div class="source-icon">
										<i class="bi bi-droplet"></i>
									</div>
									<h5 class="card-title">Containers</h5>
									<p class="card-text">
										Buckets, planters, toys, tires, or any items that collect
										rainwater
									</p>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											name="source-container"
											id="sourceContainers"
										/>
										<label class="form-check-label" for="sourceContainers">
											I've noticed this
										</label>
									</div>
								</div>
							</div>
						</div>

						<!-- Source 3 -->
						<div class="col-md-4">
							<div class="card source-card">
								<div class="card-body text-center">
									<div class="source-icon">
										<i class="bi bi-house"></i>
									</div>
									<h5 class="card-title">Sprinklers & Gutters</h5>
									<p class="card-text">
										Clogged street gutters, yard drains, or AC units that
										collect water
									</p>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											name="source-gutters"
											id="sourceGutters"
										/>
										<label class="form-check-label" for="sourceGutters">
											I've noticed this
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div
						class="alert alert-warning mb-4"
						id="sourceFoundAlert"
						style="display: none;"
					>
						<h5 class="alert-heading">
							<i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding
							Source Found!
						</h5>
						<p>
							It looks like you may have identified a mosquito breeding source.
							If you'd like to report a specific source (like a green pool),
							please use our
							<a href="/report-green-pool" class="alert-link"
								>Report a Green Pool</a
							>
							form for faster service.
						</p>
					</div>

					<div class="row">
						<div class="col-md-12">
							<label for="otherSources" class="form-label"
								>Have you noticed any other potential mosquito breeding
								sources?</label
							>
							<textarea
								class="form-control"
								id="otherSources"
								name="source-description"
								rows="2"
								placeholder="Describe any other potential breeding sites you've noticed..."
							></textarea>
							{{ template "photo-upload" }}
						</div>
					</div>
				</div>

				<div class="form-section">
					<div class="section-heading">
						<i class="bi bi-card-text"></i>
						<h3>Additional Information</h3>
					</div>

					<div class="row">
						<div class="col-md-12">
							<label for="additionalInfo" class="form-label"
								>Is there anything else you'd like us to know?</label
							>
							<textarea
								class="form-control"
								id="additionalInfo"
								name="additional-info"
								rows="4"
								placeholder="Additional details about the mosquito issue..."
							></textarea>
						</div>
					</div>
				</div>
			</div>
			<!-- Submit Section -->
			<div class="submit-container">
				<div class="row align-items-center">
					<div class="col-md-8">
						<p class="mb-0">
							<strong>Thank you for reporting this mosquito issue.</strong>
						</p>
						<p class="mb-0 small text-muted">
							After submission, you'll receive a confirmation with a report ID
							and further information.
						</p>
					</div>
					<div class="col-md-4 text-md-end mt-3 mt-md-0">
						<a
							class="btn btn-primary btn-lg"
							href="{{ .URL.NuisanceSubmitComplete }}"
						>
							Submit Report
						</a>
					</div>
				</div>
			</div>
		</form>
	</div>
{{ end }}