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

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

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

		.access-option {
			background-color: #fff;
			border: 2px solid #dee2e6;
			border-radius: 8px;
			padding: 16px;
			margin-bottom: 12px;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.access-option:hover {
			border-color: #0d6efd;
			background-color: #f8f9fa;
		}

		.access-option.selected {
			border-color: #0d6efd;
			background-color: #e7f1ff;
		}

		.access-option input[type="radio"] {
			width: 20px;
			height: 20px;
			margin-right: 12px;
			cursor: pointer;
		}

		.access-option label {
			cursor: pointer;
			margin-bottom: 0;
			flex-grow: 1;
		}

		.conditional-section {
			display: none;
			margin-top: 16px;
			padding: 16px;
			background-color: #fff;
			border-radius: 8px;
			border-left: 4px solid #0d6efd;
		}

		.conditional-section.active {
			display: block;
		}

		.dog-warning {
			background-color: #fff3cd;
			border-left: 4px solid #ffc107;
			padding: 12px;
			border-radius: 4px;
			margin-top: 12px;
		}

		.encouragement-box {
			background-color: #d1ecf1;
			border-left: 4px solid #0dcaf0;
			padding: 16px;
			border-radius: 4px;
		}
	</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 5 of 10</span>
			</div>
			<div class="progress" style="height: 8px;">
				<div
					class="progress-bar"
					role="progressbar"
					style="width: 50%;"
					aria-valuenow="50"
					aria-valuemin="0"
					aria-valuemax="100"
				></div>
			</div>
		</div>

		<!-- Main Content -->
		<main>
			<h2 class="h4 mb-3">Property access permission</h2>

			<p class="text-muted mb-4">
				Granting access allows our technicians to inspect and potentially treat
				mosquito sources more quickly, helping protect you and your neighbors.
			</p>

			<form id="access-form" method="POST" action="/compliance/access">
				<!-- Access Options -->
				<div class="mb-4">
					<label class="form-label fw-semibold mb-3"
						>Please select an option:</label
					>

					<!-- Option 1: Enter without owner present -->
					<div class="access-option" id="option-1" onclick="selectOption(1)">
						<div class="d-flex align-items-start">
							<input
								type="radio"
								name="access_permission"
								id="access-allowed"
								value="allowed"
								class="mt-1"
							/>
							<label for="access-allowed">
								<div class="fw-semibold">
									A technician may enter even if I am not home
								</div>
								<small class="text-muted">Fastest resolution</small>
							</label>
						</div>
					</div>

					<!-- Conditional fields for Option 1 -->
					<div id="section-1" class="conditional-section">
						<div class="mb-3">
							<label for="access-instructions" class="form-label">
								Access Instructions
								<span class="text-muted">(Optional)</span>
							</label>
							<textarea
								class="form-control"
								id="access-instructions"
								name="access_instructions"
								rows="3"
								placeholder="Example: Side gate on left, backyard near shed..."
							></textarea>
						</div>

						<div class="mb-3">
							<label for="gate-code" class="form-label">
								Gate Code
								<span class="text-muted">(Optional)</span>
							</label>
							<input
								type="text"
								class="form-control"
								id="gate-code"
								name="gate_code"
								placeholder="Enter code if applicable"
							/>
						</div>

						<div class="mb-3">
							<label class="form-label">Dog on Property?</label>
							<div class="form-check">
								<input
									class="form-check-input"
									type="radio"
									name="has_dog"
									id="dog-no"
									value="no"
									checked
									onchange="toggleDogWarning()"
								/>
								<label class="form-check-label" for="dog-no"> No </label>
							</div>
							<div class="form-check">
								<input
									class="form-check-input"
									type="radio"
									name="has_dog"
									id="dog-yes"
									value="yes"
									onchange="toggleDogWarning()"
								/>
								<label class="form-check-label" for="dog-yes"> Yes </label>
							</div>
						</div>

						<div id="dog-warning" class="dog-warning" style="display: none;">
							<small>
								<i class="bi bi-exclamation-triangle"></i>
								<strong>Important:</strong> Our staff will only enter if the dog
								is secured indoors. Please ensure your pet is safely inside
								before a technician arrives.
							</small>
						</div>
					</div>

					<!-- Option 2: Enter with owner present -->
					<div class="access-option" id="option-2" onclick="selectOption(2)">
						<div class="d-flex align-items-start">
							<input
								type="radio"
								name="access_permission"
								id="access-with-owner"
								value="with_owner"
								class="mt-1"
							/>
							<label for="access-with-owner">
								<div class="fw-semibold">
									A technician may enter, but I want to be present
								</div>
								<small class="text-muted">Requires scheduling</small>
							</label>
						</div>
					</div>

					<!-- Conditional fields for Option 2 -->
					<div id="section-2" class="conditional-section">
						<div class="form-check mb-3">
							<input
								class="form-check-input"
								type="checkbox"
								id="request-scheduled"
								name="request_scheduled"
								value="yes"
							/>
							<label class="form-check-label" for="request-scheduled">
								I would like to request a scheduled visit
							</label>
						</div>

						<div class="mb-3">
							<label for="availability-notes" class="form-label">
								Availability / Access Notes
								<span class="text-muted">(Optional)</span>
							</label>
							<textarea
								class="form-control"
								id="availability-notes"
								name="availability_notes"
								rows="3"
								placeholder="Example: Available weekday mornings, please call before visiting..."
							></textarea>
						</div>
					</div>

					<!-- Option 3: Not granting entry -->
					<div class="access-option" id="option-3" onclick="selectOption(3)">
						<div class="d-flex align-items-start">
							<input
								type="radio"
								name="access_permission"
								id="access-denied"
								value="denied"
								class="mt-1"
							/>
							<label for="access-denied">
								<div class="fw-semibold">
									I am not granting entry at this time
								</div>
								<small class="text-muted">May require follow-up</small>
							</label>
						</div>
					</div>

					<!-- Conditional message for Option 3 -->
					<div id="section-3" class="conditional-section">
						<div class="encouragement-box">
							<p class="mb-2">
								<strong>We understand.</strong> Your cooperation is voluntary,
								but mosquito breeding sources can affect the health and comfort
								of the entire community.
							</p>
							<p class="mb-2">
								To help us review this situation and avoid unnecessary
								escalation, we strongly encourage you to:
							</p>
							<ul class="mb-2">
								<li>Provide detailed photos of the area</li>
								<li>Share your contact information</li>
								<li>Include any context that may be helpful</li>
							</ul>
							<p class="mb-0">
								<small class="text-muted">
									This allows our team to assess whether the concern has been
									addressed or if additional steps may be necessary.
								</small>
							</p>
						</div>
					</div>
				</div>

				<!-- Navigation Buttons -->
				<div class="d-flex gap-2 mt-4">
					<a href="/compliance/photos" class="btn btn-outline-secondary">
						Back
					</a>
					<button type="submit" class="btn btn-primary flex-grow-1">
						Continue
					</button>
				</div>
			</form>
		</main>
	</div>

	<script>
		function selectOption(optionNum) {
			// Update radio button
			const radios = document.querySelectorAll(
				'input[name="access_permission"]',
			);
			radios[optionNum - 1].checked = true;

			// Update visual state of options
			for (let i = 1; i <= 3; i++) {
				const option = document.getElementById(`option-${i}`);
				const section = document.getElementById(`section-${i}`);

				if (i === optionNum) {
					option.classList.add("selected");
					section.classList.add("active");
				} else {
					option.classList.remove("selected");
					section.classList.remove("active");
				}
			}
		}

		function toggleDogWarning() {
			const dogYes = document.getElementById("dog-yes");
			const dogWarning = document.getElementById("dog-warning");

			if (dogYes.checked) {
				dogWarning.style.display = "block";
			} else {
				dogWarning.style.display = "none";
			}
		}

		// Initialize - check if any option is pre-selected
		document.addEventListener("DOMContentLoaded", function () {
			const radios = document.querySelectorAll(
				'input[name="access_permission"]',
			);
			radios.forEach((radio, index) => {
				if (radio.checked) {
					selectOption(index + 1);
				}
			});
		});
	</script>
{{ end }}