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

{{ define "title" }}Report Standing Water{{ end }}
{{ define "extraheader" }}
	<style>
		body {
			background-color: #f8f9fa;
		}
		.page-container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.content-card {
			background-color: white;
			border-radius: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			padding: 25px;
			margin-bottom: 20px;
		}
		.logo-area {
			text-align: center;
			margin-bottom: 20px;
		}
		.logo-placeholder {
			height: 50px;
			max-width: 200px;
			margin: 0 auto;
		}
		.map-container {
			height: 350px;
			background-color: #e9ecef;
			border-radius: 10px;
			margin-bottom: 25px;
			position: relative;
			overflow: hidden;
			border: 1px solid #dee2e6;
		}
		.map-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url("https://placehold.co/800x350/e9ecef/adb5bd?text=Interactive+Map");
			background-size: cover;
			background-position: center;
		}
		.map-pin {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -100%);
			color: #dc3545;
			font-size: 30px;
			filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
		}
		.map-instructions {
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(255, 255, 255, 0.9);
			padding: 10px 15px;
			border-radius: 20px;
			font-size: 14px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			max-width: 90%;
			text-align: center;
		}
		.or-divider {
			display: flex;
			align-items: center;
			margin: 25px 0;
			color: #6c757d;
		}
		.or-divider::before,
		.or-divider::after {
			content: "";
			flex: 1;
			border-bottom: 1px solid #dee2e6;
		}
		.or-divider::before {
			margin-right: 15px;
		}
		.or-divider::after {
			margin-left: 15px;
		}
		.info-box {
			background-color: #e8f4f8;
			border-left: 4px solid #0d6efd;
			padding: 15px;
			border-radius: 5px;
			margin-bottom: 20px;
		}
		.info-box p:last-child {
			margin-bottom: 0;
		}
		.form-section {
			margin-bottom: 25px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="page-container">
		<!-- Logo -->
		<div class="logo-area">
			<img
				src="https://placehold.co/200x50/e9ecef/adb5bd?text=County+Vector+Control"
				alt="County Vector Control"
				class="logo-placeholder"
			/>
		</div>

		<!-- Main Content -->
		<div class="content-card">
			<h1 class="h4 mb-4">Update Property Location</h1>

			<!-- Information Box -->
			<div class="info-box mb-4">
				<h5>
					<i class="bi bi-info-circle me-2"></i>Two Ways to Update Location
				</h5>
				<p>
					You can update the property location by either clicking on the map or
					entering an address below. Both methods will automatically update each
					other.
				</p>
			</div>

			<!-- Map Section -->
			<div class="form-section">
				<h5 class="mb-3">Option 1: Select Location on Map</h5>
				<div class="map-container">
					<div class="map-placeholder"></div>
					<div class="map-pin">
						<i class="bi bi-geo-alt-fill"></i>
					</div>
					<div class="map-instructions">
						<i class="bi bi-hand-index me-2"></i> Click or tap anywhere on the
						map to set the location
					</div>
				</div>
			</div>

			<!-- Divider -->
			<div class="or-divider">OR</div>

			<!-- Address Form -->
			<div class="form-section">
				<h5 class="mb-3">Option 2: Enter Address</h5>
				<form>
					<div class="mb-3">
						<label for="streetAddress" class="form-label">Street Address</label>
						<input
							type="text"
							class="form-control"
							id="streetAddress"
							placeholder="123 Main Street"
						/>
					</div>

					<div class="row g-3">
						<div class="col-md-6">
							<label for="city" class="form-label">City</label>
							<input
								type="text"
								class="form-control"
								id="city"
								placeholder="Riverside"
							/>
						</div>

						<div class="col-md-3">
							<label for="state" class="form-label">State</label>
							<select class="form-select" id="state">
								<option selected>CA</option>
								<option>AZ</option>
								<option>NV</option>
								<option>OR</option>
								<!-- Add more states as needed -->
							</select>
						</div>

						<div class="col-md-3">
							<label for="zipCode" class="form-label">ZIP Code</label>
							<input
								type="text"
								class="form-control"
								id="zipCode"
								placeholder="92501"
							/>
						</div>
					</div>
				</form>
			</div>

			<!-- Current Coordinates Display -->
			<div class="mb-4 p-3 bg-light rounded small text-muted">
				<div class="d-flex justify-content-between">
					<span>Current Coordinates:</span>
					<span>33.9806° N, 117.3755° W</span>
				</div>
			</div>

			<!-- Action Buttons -->
			<div class="d-flex justify-content-between">
				<a
					class="btn btn-outline-secondary"
					href="{{ call .URL.RMO.Mailer.Root .C.PublicID }}"
				>
					Nevermind
				</a>
				<button type="button" class="btn btn-primary" id="saveBtn">
					<i class="bi bi-check-circle me-2"></i> Save Updates
				</button>
			</div>
		</div>

		<!-- Help Text -->
		<div class="text-center text-muted small">
			<p>
				If you need assistance, please contact Vector Control at (555) 123-4567
			</p>
		</div>
	</div>
{{ end }}