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

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

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

		.upload-area {
			border: 2px dashed #0d6efd;
			border-radius: 8px;
			padding: 32px 16px;
			text-align: center;
			background-color: #fff;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.upload-area:hover {
			background-color: #f8f9fa;
			border-color: #0a58ca;
		}

		.upload-area.dragover {
			background-color: #e7f1ff;
			border-color: #0a58ca;
		}

		#file-input {
			display: none;
		}

		.photo-preview {
			position: relative;
			width: 100%;
			height: 120px;
			border-radius: 8px;
			overflow: hidden;
			background-color: #e9ecef;
			border: 1px solid #dee2e6;
		}

		.photo-preview img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.photo-preview .remove-btn {
			position: absolute;
			top: 4px;
			right: 4px;
			background-color: rgba(220, 53, 69, 0.9);
			color: white;
			border: none;
			border-radius: 50%;
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.photo-preview .remove-btn:hover {
			background-color: rgba(220, 53, 69, 1);
			transform: scale(1.1);
		}

		.guidance-list {
			list-style: none;
			padding-left: 0;
		}

		.guidance-list li {
			padding: 8px 0;
			padding-left: 28px;
			position: relative;
		}

		.guidance-list li::before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #198754;
			font-weight: bold;
		}
	</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 4 of 10</span>
			</div>
			<div class="progress" style="height: 8px;">
				<div
					class="progress-bar"
					role="progressbar"
					style="width: 40%;"
					aria-valuenow="40"
					aria-valuemin="0"
					aria-valuemax="100"
				></div>
			</div>
		</div>

		<!-- Main Content -->
		<main>
			<h2 class="h4 mb-3">Upload photos of the area</h2>

			<p class="text-muted mb-3">
				Please provide current photos to help us assess the situation.
			</p>

			<!-- Photo Guidance -->
			<div class="card mb-4">
				<div class="card-body">
					<h6 class="card-subtitle mb-3 text-muted">
						<i class="bi bi-lightbulb"></i> Helpful photos are:
					</h6>
					<ul class="guidance-list mb-0">
						<li>Recent (taken within the last 24 hours)</li>
						<li>Showing the specific area of concern</li>
						<li>Making water conditions clearly visible</li>
					</ul>
				</div>
			</div>

			<form
				id="photo-form"
				method="POST"
				action="/compliance/photos"
				enctype="multipart/form-data"
			>
				<!-- Upload Area -->
				<div class="mb-4">
					<label class="form-label fw-semibold">Photos</label>
					<div
						class="upload-area"
						id="upload-area"
						onclick="document.getElementById('file-input').click()"
					>
						<i
							class="bi bi-camera-fill"
							style="font-size: 2.5rem; color: #0d6efd;"
						></i>
						<p class="mb-2 mt-2 fw-semibold">Tap to take photo or upload</p>
						<p class="text-muted small mb-0">You can add multiple photos</p>
					</div>
					<input
						type="file"
						id="file-input"
						name="photos"
						accept="image/*"
						capture="environment"
						multiple
					/>
				</div>

				<!-- Photo Previews -->
				<div id="photo-previews" class="mb-4">
					<!-- Thumbnails will be dynamically added here -->
					<div class="row g-2" id="preview-container" style="display: none;">
						<!-- Example preview structure (hidden by default, shown when photos added):
                                                <div class="col-4">
                                                        <div class="photo-preview">
                                                                <img src="..." alt="Preview">
                                                                <button type="button" class="remove-btn" data-index="0">
                                                                        <i class="bi bi-x-lg"></i>
                                                                </button>
                                                        </div>
                                                </div>
                                                -->
					</div>
				</div>

				<!-- Additional Comments -->
				<div class="mb-4">
					<label for="comments" class="form-label fw-semibold">
						Additional Comments
						<span class="text-muted fw-normal">(Optional)</span>
					</label>
					<textarea
						class="form-control"
						id="comments"
						name="comments"
						rows="4"
						placeholder="Provide any additional information that may be helpful..."
					></textarea>
					<div class="form-text">
						Example: "This standing water appeared after recent rain" or "I've
						already taken steps to address this issue"
					</div>
				</div>

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

	<script>
		// File input handling
		const fileInput = document.getElementById("file-input");
		const uploadArea = document.getElementById("upload-area");
		const previewContainer = document.getElementById("preview-container");
		let selectedFiles = [];

		fileInput.addEventListener("change", handleFiles);

		function handleFiles(e) {
			const files = Array.from(e.target.files);
			files.forEach((file) => {
				if (file.type.startsWith("image/")) {
					selectedFiles.push(file);
				}
			});
			updatePreviews();
		}

		function updatePreviews() {
			if (selectedFiles.length === 0) {
				previewContainer.style.display = "none";
				return;
			}

			previewContainer.style.display = "block";
			previewContainer.innerHTML = "";

			selectedFiles.forEach((file, index) => {
				const reader = new FileReader();
				reader.onload = function (e) {
					const col = document.createElement("div");
					col.className = "col-4";
					col.innerHTML = `
                                                <div class="photo-preview">
                                                        <img src="${e.target.result}" alt="Preview ${index + 1}">
                                                        <button type="button" class="remove-btn" onclick="removePhoto(${index})">
                                                                <i class="bi bi-x-lg"></i>
                                                        </button>
                                                </div>
                                        `;
					previewContainer.appendChild(col);
				};
				reader.readAsDataURL(file);
			});
		}

		function removePhoto(index) {
			selectedFiles.splice(index, 1);
			updatePreviews();

			// Reset file input
			const dt = new DataTransfer();
			selectedFiles.forEach((file) => dt.items.add(file));
			fileInput.files = dt.files;
		}

		// Drag and drop support
		uploadArea.addEventListener("dragover", (e) => {
			e.preventDefault();
			uploadArea.classList.add("dragover");
		});

		uploadArea.addEventListener("dragleave", () => {
			uploadArea.classList.remove("dragover");
		});

		uploadArea.addEventListener("drop", (e) => {
			e.preventDefault();
			uploadArea.classList.remove("dragover");

			const files = Array.from(e.dataTransfer.files);
			files.forEach((file) => {
				if (file.type.startsWith("image/")) {
					selectedFiles.push(file);
				}
			});
			updatePreviews();
		});
	</script>
{{ end }}