{{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');
	}
}
// 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>
.district-logo {
	max-height: 80px;
	width: auto;
}
.form-section {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
	border-bottom: none;
	margin-bottom: 1rem;
	padding-bottom: 0;
}
.section-heading {
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
}
.section-heading i {
	margin-right: 10px;
	font-size: 1.5rem;
	color: #0d6efd;
}
.optional-label {
	font-size: 0.875rem;
	color: #6c757d;
	font-weight: normal;
	margin-left: 8px;
}
.submit-container {
	background-color: #f8f9fa;
	padding: 20px;
	border-radius: 5px;
	margin-top: 2rem;
}
.source-card {
	height: 100%;
	transition: transform 0.3s;
}
.source-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.source-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #0d6efd;
}
.time-of-day-btn {
	width: 100%;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 0;
}
.time-of-day-icon {
	font-size: 1.5rem;
	margin-bottom: 8px;
}
.time-label {
	font-size: 0.9rem;
}
.severity-item {
	text-align: center;
	padding: 10px;
}
.severity-scale {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}
.btn-check:checked + .btn.time-of-day-btn {
	background-color: #0d6efd;
	color: white;
}
.inspection-type-card {
	cursor: pointer;
	border: 1px solid #dee2e6;
	padding: 20px;
	border-radius: 5px;
	height: 100%;
	transition: all 0.3s;
}
.inspection-type-card.selected {
	border-color: #0d6efd;
	background-color: rgba(13, 110, 253, 0.05);
}
.inspection-type-card:hover {
	border-color: #0d6efd;
}
.card-highlight {
	border-left: 4px solid #0d6efd;
	background-color: #f8f9fa;
}
</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>

	<div class="row mb-4">
		<div class="col-12">
			<div class="alert alert-info" role="alert">
				<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>How Your Report Helps</h5>
				<p class="mb-0">When you submit this form, our team uses the information you provide along with mosquito surveillance data to identify likely mosquito production sites and plan effective control actions. This allows us to target the sources of mosquitoes and reduce mosquito populations in your neighborhood.</p>
			</div>
		</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-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 "svg/mosquito" }}
				<h3>Mosquito Activity Information</h3>
				<span class="optional-label">optional</span>
			</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>
				
				<!-- Severity -->
				<div class="col-md-6">
					<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
					<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
					<div class="severity-scale">
						<div class="severity-item">
							<div>Minor</div>
							<small>Occasional mosquito</small>
						</div>
						<div class="severity-item">
							<div>Moderate</div>
							<small>Regular presence</small>
						</div>
						<div class="severity-item">
							<div>Severe</div>
							<small>Many mosquitoes</small>
						</div>
					</div>
					<div class="text-center">
						Current selection: <span id="severityValue">3</span>/5
					</div>
				</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" name="source-location">
						<option value="">Please select</option>
						<option value="front-yard">Front yard</option>
						<option value="backyard">Back yard</option>
						<option value="patio">Patio/deck area</option>
						<option value="garden">Garden</option>
						<option value="pool-area">Pool area</option>
						<option value="throughout">Throughout the property</option>
						<option value="indoors">Indoors</option>
						<option value="other">Other area</option>
					</select>
				</div>
			</div>
		</div>

		<button class="btn btn-warning" type="button" onClick="toggleCollapse('collapse-additional-fields')">
			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>
					<span class="optional-label">optional</span>
				</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">Roof & 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>
					<span class="optional-label">optional</span>
				</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}}