{{ 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={{.C.CSVFileID}};
const ORG_ID={{.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.classList.contains("header"))) {
				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', {
			'type': 'vector',
			'tiles': [
				`{{.URL.Tegola}}maps/nidus/{z}/{x}/{y}?csv_file=${CSV_FILE_ID}&id=${ORG_ID}`
			]
		});
		map.addLayer({
			'id': 'pool',
			'source': 'tegola-nidus',
			'source-layer': 'fileupload-pool',
			'type': 'circle',
			'paint': {
				'circle-color': "#91b979",
				'circle-radius': 7,
				'circle-stroke-width': 2,
				'circle-stroke-color': "#7aab5f"
			}
		});
		map.addLayer({
			"id": "service-area",
			"source": "tegola-nidus",
			"source-layer": "service-area-bounds",
			"type": "line",
			"paint": {
				"line-color": "#f00"
			}
		});
	});

	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: {{ .C.Upload.Name }}</h2>
			<span class="badge rounded-pill {{ .C.Upload.Status }}">
				<i class="bi {{ .C.Upload.Status|iconUploadStatus }} me-1"></i
				>{{ .C.Upload.Status|displayUploadStatus }}
			</span>
		</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">
							{{ .C.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">{{ .C.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">{{ .C.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
				centroid="{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
					{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}
				{{ end }}"
				organization-id="{{ .Organization.ID }}"
				xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
				ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
				xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
				ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
			></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 .C.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 .C.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 .C.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 class="header">
										<th></th>
										<th>Street</th>
										<th>City</th>
										<th>Post</th>
										<th>Status</th>
										<th>Condition</th>
										<th>Tags</th>
									</tr>
								</thead>
								<tbody>
									{{ range .C.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>
												<span class="badge bg-{{ .Condition }} status-badge"
													>{{ .Condition }}</span
												>
											</td>
											<td>{{ len .Tags }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					{{ end }}
				{{ end }}
			</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 }}