{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Dash{{ 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-aggregate.js"></script>
	<script>
		function onLoad() {
			const map = document.querySelector("map-aggregate");
			map.addEventListener("cell-click", (event) => {
				window.location.href = "/cell/" + event.detail.cell;
			});
		}
		window.addEventListener("load", onLoad);
	</script>
{{ end }}
{{ define "content" }}
	<!-- Dashboard Header -->
	<div class="row mb-4">
		<div class="col-md-6">
			<h1>{{ .User.Organization.Name }} Dashboard</h1>
			<p class="text-muted">
				Overview of mosquito control activities in your district
			</p>
		</div>
		<div
			class="col-md-6 text-md-end d-flex align-items-center justify-content-md-end"
		>
			{{ if .C.IsSyncOngoing }}
				<p class="last-refreshed mb-0">
					<i class="fas fa-sync-alt me-2 syncing"></i>Syncing now...
				</p>
			{{ else }}
				<p class="last-refreshed mb-0">
					<i class="fas fa-sync-alt me-2"></i>Last updated:
					<span id="last-refreshed-time"
						>{{ .C.LastSync | timeRelativePtr }}</span
					>
					<button class="btn btn-sm btn-outline-primary ms-3">
						Refresh Data
					</button>
				</p>
			{{ end }}
		</div>
	</div>

	<!-- Key Metrics -->
	<div class="row g-4">
		<!-- Last Refreshed -->
		<div class="col-md-3">
			<div class="card stats-card h-100">
				<div class="card-body text-center">
					<div class="metric-icon bg-success text-white">
						<i class="fas fa-clock"></i>
					</div>
					<h5 class="card-title">Last Data Refresh</h5>
					<p class="metric-value">{{ .C.LastSync | timeRelativePtr }}</p>
					<!-- <p class="card-text text-muted">Last sync: 12:45 PM</p> -->
				</div>
			</div>
		</div>

		<!-- Service Requests -->
		<div class="col-md-3">
			<div class="card stats-card h-100">
				<div class="card-body text-center">
					<div class="metric-icon bg-warning text-white">
						<i class="fas fa-ticket-alt"></i>
					</div>
					<h5 class="card-title">Service Requests</h5>
					{{ if .C.IsSyncOngoing }}
						<p class="metric-value">
							{{ .C.CountServiceRequests | bigNumber }}...?
						</p>
					{{ else }}
						<p class="metric-value">
							{{ .C.CountServiceRequests | bigNumber }}
						</p>
					{{ end }}
					<!--<p class="card-text text-muted">
						<span class="text-success">
							<i class="fas fa-arrow-up"></i> 12%
						</span> since last week
					</p>-->
				</div>
			</div>
		</div>

		<!-- Mosquito Sources -->
		<div class="col-md-3">
			<div class="card stats-card h-100">
				<div class="card-body text-center">
					<div class="metric-icon bg-danger text-white">
						<i class="fas fa-bug"></i>
					</div>
					<h5 class="card-title">Mosquito Sources</h5>
					{{ if .C.IsSyncOngoing }}
						<p class="metric-value">
							{{ .C.CountMosquitoSources | bigNumber }}..?
						</p>
					{{ else }}
						<p class="metric-value">
							{{ .C.CountMosquitoSources | bigNumber }}
						</p>
					{{ end }}
					<!-- <p class="card-text text-muted">
						<span class="text-danger">
							<i class="fas fa-arrow-up"></i> 8%
						</span> since last month
					</p> -->
				</div>
			</div>
		</div>

		<!-- Inspections -->
		<div class="col-md-3">
			<div class="card stats-card h-100">
				<div class="card-body text-center">
					<div class="metric-icon bg-info text-white">
						<i class="fas fa-clipboard-check"></i>
					</div>
					<h5 class="card-title">Traps</h5>
					{{ if .C.IsSyncOngoing }}
						<p class="metric-value">{{ .C.CountTraps | bigNumber }}...?</p>
					{{ else }}
						<p class="metric-value">{{ .C.CountTraps | bigNumber }}</p>
					{{ end }}
					<!-- <p class="card-text text-muted">
						<span class="text-success">
							<i class="fas fa-arrow-up"></i> 15%
						</span> since last week
					</p> -->
				</div>
			</div>
		</div>
	</div>

	<!-- Map Section -->
	<h3 class="section-title">Mosquito Activity Heatmap</h3>
	<div class="row">
		<div class="col-12">
			{{ if not (eq .Organization nil) }}
				{{ if not (eq .Organization.ServiceAreaCentroidGeojson nil) }}
					<map-aggregate
						centroid="{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
							{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}
						{{ end }}"
						organization-id="{{ .Organization.ID }}"
						tegola="{{ .URL.Tegola }}"
						xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
						ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
						xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
						ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
					/>
				{{ end }}
			{{ end }}
		</div>
	</div>

	<!-- Recent Activity Section -->
	<h3 class="section-title">Recent Activity</h3>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<div class="table-responsive">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>Date</th>
									<th>Type</th>
									<th>Location</th>
									<th>Status</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								{{ range $i, $sr := .C.RecentRequests }}
									<tr>
										<td>{{ $sr.Date | timeRelativePtr }}</td>
										<td>Service Request</td>
										<td>{{ $sr.Location }}</td>
										<td><span class="badge bg-success">Completed</span></td>
										<td>
											<a href="#" class="btn btn-sm btn-outline-primary"
												>View</a
											>
										</td>
									</tr>
								{{ end }}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}