{{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>

	<!-- 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 "svg/mosquito" }}
				<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>
				
				<!-- 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}}