{{ template "base.html" . }}

{{ define "title" }}Quick Report Complete{{ end }}
{{ define "extraheader" }}
	<style></style>
	<script></script>
{{ end }}
{{ define "content" }}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<!-- Success Card -->
				<div class="card shadow-sm border-success mb-4">
					<div class="card-header bg-success text-white">
						<h3 class="my-2">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="24"
								height="24"
								fill="currentColor"
								class="bi bi-check-circle-fill me-2"
								viewBox="0 0 16 16"
							>
								<path
									d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
								/>
							</svg>
							Report Successfully Submitted
						</h3>
					</div>
					<div class="card-body p-4">
						<div class="text-center mb-4">
							<p class="lead">
								Thank you for helping us control mosquito populations in your
								area!
							</p>
							<div class="alert alert-info py-3">
								<strong>Your Report ID:</strong>
								<span class="fs-4 fw-bold">{{ .ReportID|publicReportID }}</span>
							</div>
							<p class="text-muted">Please save this ID for your reference.</p>
							{{ if not (eq .District nil) }}
								<p>Your report has been assigned to</p>
								<p><b>{{ .District.Name }}</b></p>
								<img src="{{ .District.LogoURL }}" width="256" />
							{{ end }}
						</div>

						<hr class="my-4" />

						<!-- Status Check Section -->
						<div class="mb-4">
							<h4 class="mb-3">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-search me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
									/>
								</svg>
								Check Your Report Status
							</h4>
							<p>
								You can check the status of your report at any time using your
								Report ID.
							</p>
							<a href="/status/{{ .ReportID }}" class="btn btn-outline-primary">
								Check Status
							</a>
						</div>

						<hr class="my-4" />

						<!-- Notifications Section -->
						<div>
							<h4 class="mb-3">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-bell me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"
									/>
								</svg>
								Get Updates
							</h4>
							<p>
								Provide your contact information to receive updates about your
								report.
							</p>

							<form
								id="notificationForm"
								action="/register-notifications"
								method="post"
								class="needs-validation"
							>
								<input type="hidden" name="report_id" value="{{ .ReportID }}" />

								<div class="mb-3">
									<label for="email" class="form-label">Email Address</label>
									<div class="input-group">
										<span class="input-group-text">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="16"
												height="16"
												fill="currentColor"
												class="bi bi-envelope"
												viewBox="0 0 16 16"
											>
												<path
													d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"
												/>
											</svg>
										</span>
										<input
											type="email"
											class="form-control"
											id="email"
											name="email"
											placeholder="your@email.com"
										/>
									</div>
								</div>

								<div class="mb-3">
									<label for="phone" class="form-label"
										>Phone Number (for SMS updates)</label
									>
									<div class="input-group">
										<span class="input-group-text">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												width="16"
												height="16"
												fill="currentColor"
												class="bi bi-phone"
												viewBox="0 0 16 16"
											>
												<path
													d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"
												/>
												<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
											</svg>
										</span>
										<input
											type="tel"
											class="form-control"
											id="phone"
											name="phone"
											placeholder="(123) 456-7890"
										/>
									</div>
								</div>

								<div class="form-check mb-3 form-check">
									<input
										class="form-check-input"
										type="checkbox"
										name="consent"
										required
									/>
									<label class="form-check-label" for="consent">
										I consent to receiving updates about this report
									</label>
									<div class="invalid-feedback">
										You must consent to receive notifications.
									</div>
								</div>

								<button type="submit" class="btn btn-primary">
									Register for Updates
								</button>
							</form>
						</div>
					</div>
				</div>

				<!-- Navigation Links -->
				<div class="text-center">
					<a href="/" class="btn btn-outline-secondary me-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							fill="currentColor"
							class="bi bi-house me-1"
							viewBox="0 0 16 16"
						>
							<path
								d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"
							/>
						</svg>
						Return to Home
					</a>
					<a href="/report-mosquito" class="btn btn-outline-success">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							fill="currentColor"
							class="bi bi-plus-circle me-1"
							viewBox="0 0 16 16"
						>
							<path
								d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
							/>
							<path
								d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
							/>
						</svg>
						Submit Another Report
					</a>
				</div>
			</div>
		</div>
	</div>
{{ end }}