{{template "authenticated.html" .}}

{{define "title"}}Dash{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script>
function onLoad() {
	console.log("Setting up the map...");
	mapboxgl.accessToken = {{ .MapboxToken }};
	const map = new mapboxgl.Map({
		container: 'map', // container ID
		style: 'mapbox://styles/mapbox/streets-v12', // style URL
		center: [-74.5, 40], // starting position [lng, lat]
		zoom: 9, // starting zoom
	});
	console.log("done.");
}
window.addEventListener("load", onLoad);
</script>
<style>
body {
	background-color: #f8f9fa;
}
.dashboard-container {
	padding: 20px 0;
}
.stats-card {
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	transition: transform 0.2s;
	height: 100%;
}
.stats-card:hover {
	transform: translateY(-5px);
}
.map-container {
	background-color: #e9ecef;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
.section-title {
	margin: 30px 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dee2e6;
}
.last-refreshed {
	color: #6c757d;
}
.logo-placeholder {
	width: 100px;
	height: 40px;
	background-color: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.metric-icon {
	font-size: 2rem;
	margin-bottom: 10px;
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
}
.metric-value {
	font-size: 2rem;
	font-weight: bold;
}
</style>
{{end}}
{{define "content"}}
<div class="container dashboard-container">
	<!-- Dashboard Header -->
	<div class="row mb-4">
		<div class="col-md-6">
			<h1>{{ .Org }} 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">
			<p class="last-refreshed mb-0">
			<i class="fas fa-sync-alt me-2"></i>Last updated: <span id="last-refreshed-time">{{ .LastSync | timeSince }}</span>
				<button class="btn btn-sm btn-outline-primary ms-3">Refresh Data</button>
			</p>
		</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-info bg-opacity-10 text-info">
						<i class="fas fa-clock"></i>
					</div>
					<h5 class="card-title">Last Data Refresh</h5>
					<p class="metric-value">{{ .LastSync | timeSince }}</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 bg-opacity-10 text-warning">
						<i class="fas fa-ticket-alt"></i>
					</div>
					<h5 class="card-title">Service Requests</h5>
					<p class="metric-value">{{ .CountServiceRequests | bigNumber }}</p>
					<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 bg-opacity-10 text-danger">
						<i class="fas fa-bug"></i>
					</div>
					<h5 class="card-title">Mosquito Sources</h5>
					<p class="metric-value">{{ .CountMosquitoSources | bigNumber }}</p>
					<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-success bg-opacity-10 text-success">
						<i class="fas fa-clipboard-check"></i>
					</div>
					<h5 class="card-title">Inspections</h5>
					<p class="metric-value">{{ .CountInspections | bigNumber }}</p>
					<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">
			<div class="map-container" id="mosquito-heatmap">
				<div id='map' style='width: 400px; height: 300px;'></div>
				<div class="text-center">
					<i class="fas fa-map-marked-alt fa-4x text-muted mb-3"></i>
					<h4>Mosquito Activity Heatmap</h4>
					<p class="text-muted">Map visualization will be displayed here</p>
					<small>Showing activity data for the Central District area</small>
				</div>
			</div>
		</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 := .RecentRequests }}
								<tr>
									<td>{{ $sr.Date | timeSince }}</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>
</div>
{{end}}