{{ template "sync/layout/authenticated.html" . }}
{{ define "title" }}Pool Upload{{ end }}

{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/map-libre-test.js"></script>
	<script>
const CSV_FILE_ID={{ .CSVFileID }};
const ORG_ID={{ .User.Organization.ID }}
function handleShowIssuesOnly() {
	const checkboxShowIssuesOnly = document.getElementById("showIssuesOnly");
	const allRows = document.querySelectorAll('tr');
	if (checkboxShowIssuesOnly.checked) {
		allRows.forEach(row => {
			if (!row.classList.contains("has-error")) {
				row.style.display = "none";
			}
		});
	} else {
		allRows.forEach(row => {
			row.style.display = "table-row";
		});
	}
}
function onLoad() {
	const map = document.querySelector("map-libre-test");
	map.addEventListener("load", (event) => {
		map.addSource('tegola-nidus-fileupload', {
			'type': 'vector',
			'tiles': [
				`{{.URL.Tegola}}maps/fileupload/{z}/{x}/{y}?csv_file=${CSV_FILE_ID}&organization_id=${ORG_ID}`
			]
		});
		map.addLayer({
			'id': 'pool',
			'source': 'tegola-nidus-fileupload',
			'source-layer': 'pool',
			'type': 'circle',
			'paint': {
				'circle-color': "#91b979",
				'circle-radius': 7,
				'circle-stroke-width': 2,
				'circle-stroke-color': "#7aab5f"
			}
		});
	});

	const checkboxShowIssuesOnly = document.getElementById("showIssuesOnly");
	checkboxShowIssuesOnly.onclick = handleShowIssuesOnly;
	// Set the correct state if the browser remembers the state of the checkbox
	handleShowIssuesOnly();
}
document.addEventListener('DOMContentLoaded', onLoad);
	</script>
{{ end }}
{{ define "content" }}
	<div class="container mt-4 results-container">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<h2>Upload Results: {{ .Upload.Name }}</h2>
			{{ if eq .Upload.Status "parsed" }}
				<span class="badge bg-success rounded-pill">
					<i class="bi bi-check-circle me-1"></i> File Parsed Successfully
				</span>
			{{ else if eq .Upload.Status "error" }}
				<span class="badge bg-danger rounded-pill">
					<i class="bi bi-exclamation me-1"></i> File Has Problems
				</span>
			{{ else if eq .Upload.Status "uploaded" }}
				<span class="badge bg-info rounded-pill">
					<i class="bi bi-arrow-clockwise me-1"></i> File Is Processing
				</span>
			{{ else }}
				<span class="badge bg-warning rounded-pill">
					<i class="bi bi-question me-1"></i> Unknown status
				</span>
			{{ end }}
		</div>

		<div class="row mb-4">
			<div class="col-md-4">
				<div class="card summary-card h-100 border-primary">
					<div class="card-body text-center">
						<h1 class="display-4 text-primary">{{ .Upload.CountExisting }}</h1>
						<h5>Existing Pools</h5>
						<p class="text-muted">Matches found in previous records</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card summary-card h-100 border-success">
					<div class="card-body text-center">
						<h1 class="display-4 text-success">{{ .Upload.CountNew }}</h1>
						<h5>New Pools</h5>
						<p class="text-muted">Not found in existing records</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card summary-card h-100 border-warning">
					<div class="card-body text-center">
						<h1 class="display-4 text-warning">{{ .Upload.CountOutside }}</h1>
						<h5>Outside District</h5>
						<p class="text-muted">Potential geocoding errors</p>
					</div>
				</div>
			</div>
		</div>

		<div class="card mb-4">
			<map-libre-test></map-libre-test>
		</div>
		<div class="card mb-4">
			<div
				class="card-header bg-light d-flex justify-content-between align-items-center"
			>
				<h5 class="mb-0">Data Preview</h5>
				<div class="form-check form-switch">
					<input class="form-check-input" type="checkbox" id="showIssuesOnly" />
					<label class="form-check-label" for="showIssuesOnly"
						>Show issues only</label
					>
				</div>
			</div>
			<div class="card-body">
				{{ range .Upload.Errors }}
					<div class="alert alert-danger" role="alert">
						<i class="bi bi-exclamation-triangle me-2"></i>
						<strong>Error:</strong>{{ .Message }}
					</div>
				{{ end }}
				{{ if eq .Upload.Status "uploaded" }}
					<div class="alert alert-info" role="alert">
						<i class="bi bi-exclamation-triangle me-2"></i>
						<strong>Working:</strong> File is still processing... refresh this
						page in a bit to see updates.
					</div>
				{{ else }}
					{{ if eq (len .Upload.Pools) 0 }}
						<div class="alert alert-warning" role="alert">
							<i class="bi bi-exclamation-triangle me-2"></i>
							<strong>Warning:</strong> No pools could be understood from your
							file.
						</div>
					{{ else }}
						<div class="table-responsive">
							<table class="table table-hover table-striped">
								<thead class="table-light">
									<tr>
										<th></th>
										<th>Street</th>
										<th>City</th>
										<th>Post</th>
										<th>Status</th>
										<th>Condition</th>
										<th>Tags</th>
									</tr>
								</thead>
								<tbody>
									{{ range .Upload.Pools }}
										<tr {{ if gt (len .Errors) 0 }}class="has-error"{{ end }}>
											<td>
												{{ if gt (len .Errors) 0 }}
													<i
														class="bi bi-info-circle-fill text-primary ms-1"
														data-bs-toggle="tooltip"
														data-bs-placement="top"
														title="{{ range .Errors }}{{ .Message }}{{ end }}"
													></i>
												{{ end }}
											</td>

											<td>{{ .Street }}</td>
											<td>{{ .City }}</td>
											<td>{{ .PostalCode }}</td>
											{{ if eq .Status "new" }}
												<td>
													<span class="badge bg-success status-badge">New</span>
												</td>
											{{ else if eq .Status "existing" }}
												<td>
													<span class="badge bg-primary status-badge"
														>Existing</span
													>
												</td>
											{{ else if eq .Status "outside" }}
												<td>
													<span class="badge bg-warning status-badge"
														>Outside</span
													>
												</td>
											{{ else }}
												<td>
													<span class="badge bg-warning status-badge"
														>{{ .Status }}</span
													>
												</td>
											{{ end }}
											<td>{{ .Condition }}</td>
											<td>{{ len .Tags }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					{{ end }}
				{{ end }}
			</div>
		</div>

		<div class="card mb-4">
			<div class="card-header bg-light">
				<h5 class="mb-0">Notes & Recommendations</h5>
			</div>
			<div class="card-body">
				<div class="mb-3">
					<p><strong>Issues detected:</strong></p>
					<ul>
						<li>
							4 pools appear to be outside district boundaries (possible
							geocoding errors)
						</li>
						<li>All required fields are present and properly formatted</li>
					</ul>
				</div>

				<div class="alert alert-info" role="alert">
					<i class="bi bi-info-circle me-2"></i>
					<strong>Note:</strong> You may proceed with this upload or edit your
					CSV file to fix the issues identified.
				</div>
			</div>
		</div>

		<div class="d-flex justify-content-between mt-4 mb-5">
			<a href="{{ .URL.PoolCSVUpload }}" class="btn btn-outline-secondary">
				<i class="bi bi-arrow-left me-1"></i> Upload Edited File
			</a>
			<button class="btn btn-primary" id="confirmUploadBtn">
				<i class="bi bi-check2 me-1"></i> Confirm and Submit Data
			</button>
		</div>
	</div>
{{ end }}