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

{{ define "title" }}Submit Response{{ end }}
{{ define "extraheader" }}
	<style>
		body {
			background-color: #f8f9fa;
		}

		.progress-bar {
			background-color: #0d6efd;
			transition: width 0.3s ease;
		}

		.summary-section {
			background-color: #fff;
			border-radius: 8px;
			padding: 16px;
			margin-bottom: 16px;
			border: 1px solid #dee2e6;
		}

		.summary-section h3 {
			font-size: 1rem;
			font-weight: 600;
			margin-bottom: 12px;
			color: #495057;
		}

		.summary-item {
			padding: 8px 0;
			border-bottom: 1px solid #f8f9fa;
		}

		.summary-item:last-child {
			border-bottom: none;
		}

		.summary-label {
			font-weight: 500;
			color: #6c757d;
			font-size: 0.875rem;
		}

		.summary-value {
			color: #212529;
			margin-top: 4px;
		}

		.photo-count {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background-color: #e7f1ff;
			padding: 4px 12px;
			border-radius: 16px;
			font-size: 0.875rem;
		}

		.status-badge {
			display: inline-block;
			padding: 4px 12px;
			border-radius: 16px;
			font-size: 0.875rem;
			font-weight: 500;
		}

		.status-provided {
			background-color: #d1e7dd;
			color: #0f5132;
		}

		.status-not-provided {
			background-color: #f8d7da;
			color: #842029;
		}

		.encouragement-box {
			background-color: #d1ecf1;
			border-left: 4px solid #0dcaf0;
			padding: 16px;
			border-radius: 4px;
		}

		.validation-alert {
			background-color: #fff3cd;
			border-left: 4px solid #ffc107;
			padding: 16px;
			border-radius: 4px;
		}

		.submit-btn {
			font-size: 1.125rem;
			padding: 14px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid px-3 py-3">
		<!-- Header -->
		<header class="text-center mb-4 pb-3 border-bottom">
			<div class="d-flex align-items-center justify-content-center mb-2">
				<img
					src="{{ .District.URLLogo }}"
					alt="{{ .District.Name }} logo"
					class="me-2"
					style="height: 40px; width: auto;"
				/>
				<h1 class="h5 mb-0">{{ .District.Name }}</h1>
			</div>
			<div class="text-muted small">
				<i class="bi bi-telephone"></i> {{ .District.OfficePhone }}
			</div>
		</header>

		<!-- Progress Bar -->
		<div class="mb-4">
			<div class="d-flex justify-content-between align-items-center mb-2">
				<span class="small text-muted">Step 8 of 8</span>
			</div>
			<div class="progress" style="height: 8px;">
				<div
					class="progress-bar"
					role="progressbar"
					style="width: 100%;"
					aria-valuenow="100"
					aria-valuemin="0"
					aria-valuemax="100"
				></div>
			</div>
		</div>

		<!-- Main Content -->
		<main>
			<h2 class="h4 mb-3">Review and submit your response</h2>

			<div class="encouragement-box mb-4">
				<p class="mb-2">
					<strong><i class="bi bi-lightbulb"></i> Before you submit</strong>
				</p>
				<p class="mb-0 small">
					Providing photos, access permissions, and contact information gives
					the District the best opportunity to review your response and
					potentially close this matter without further action. The more detail
					you provide, the better we can assess the situation.
				</p>
			</div>

			<form id="submit-form" method="POST" action="/compliance/submit">
				<!-- Response Summary -->
				<div class="mb-4">
					<h3 class="h6 mb-3 text-muted">Your Response Summary</h3>

					<!-- Address -->
					<div class="summary-section">
						<h3><i class="bi bi-geo-alt"></i> Property Address</h3>
						<div class="summary-item">
							<div class="summary-value">
								123 Main St
								<span class="status-badge status-provided ms-2">
									<i class="bi bi-check-circle"></i> Provided
								</span>
							</div>
						</div>
					</div>

					<!-- Photos -->
					<div class="summary-section">
						<h3><i class="bi bi-camera"></i> Photos</h3>
						<div class="summary-item">
							<div class="summary-value">
								<span class="photo-count">
									<i class="bi bi-images"></i>
									3 photos uploaded
								</span>
							</div>
							<div class="summary-value mt-2">
								<div class="summary-label">Comments:</div>
								<small class="text-muted">These are my comments</small>
							</div>
						</div>
					</div>

					<!-- Access Permission -->
					<div class="summary-section">
						<h3><i class="bi bi-door-open"></i> Property Access</h3>
						<div class="summary-item">
							<div class="summary-value">
								<span class="status-badge status-provided">
									<i class="bi bi-check-circle"></i> Entry permitted without
									owner present
								</span>
							</div>
						</div>
					</div>

					<!-- Contact Information -->
					<div class="summary-section">
						<h3><i class="bi bi-person"></i> Contact Information</h3>
						<div class="summary-item">
							<div class="summary-label">Name</div>
							<div class="summary-value">Kai Fu Lee</div>
						</div>
						<div class="summary-item">
							<div class="summary-label">Phone</div>
							<div class="summary-value">
								123-555-6789
								<small class="text-muted">(texting OK)</small>
							</div>
						</div>
						<div class="summary-item">
							<div class="summary-label">Email</div>
							<div class="summary-value">me@aol.com</div>
						</div>
					</div>
				</div>

				<!-- Submit Button -->
				<div class="d-grid gap-2 mt-4">
					<a
						class="btn btn-primary btn-lg submit-btn"
						href="../compliance/complete"
					>
						<i class="bi bi-check-circle"></i>
						Submit Response
					</a>
					<a class="btn btn-outline-secondary" href="process"> Back </a>
				</div>

				<div class="text-center mt-3">
					<small class="text-muted">
						By submitting, you confirm the information provided is accurate to
						the best of your knowledge.
					</small>
				</div>
			</form>
		</main>
	</div>
{{ end }}