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

{{ define "title" }}Planning{{ 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() {}
		window.addEventListener("load", onLoad);
	</script>
	<style>
		.metric-card h3 {
			font-size: 1.75rem;
		}
		.status-badge {
			font-size: 0.75rem;
		}
		.table-hover tbody tr:hover {
			cursor: pointer;
		}
		.anomaly {
			background-color: #fff3cd;
		}
		.flagged {
			background-color: #f8d7da;
		}
		.reviewed {
			background-color: #e2f0e9;
		}
		.modal-lg {
			max-width: 90%;
		}
	</style>
{{ end }}
{{ define "content" }}

	<div class="row">
		<!-- LEFT PANE -->
		<div class="col-lg-3 mb-4">
			<div class="card mb-4">
				<div class="card-header">Daily Overview</div>
				<div class="card-body">
					<div class="mb-3 d-flex justify-content-between">
						<div>
							<div>Total Records</div>
							<strong>142</strong>
						</div>
						<span class="text-success"
							><i class="bi bi-arrow-up-right"></i> +8%</span
						>
					</div>
					<div class="mb-3 d-flex justify-content-between">
						<div>
							<div>Acres Treated</div>
							<strong>318.4</strong>
						</div>
						<span class="text-danger"
							><i class="bi bi-arrow-down-right"></i> -5%</span
						>
					</div>
					<div class="d-flex justify-content-between">
						<div>
							<div>Anomalies</div>
							<strong>9</strong>
						</div>
						<span class="text-warning">Above Avg</span>
					</div>
				</div>
			</div>

			<div class="card mb-4">
				<div class="card-header">System Signals</div>
				<div class="list-group list-group-flush">
					<div class="list-group-item d-flex justify-content-between">
						High acreage deviation
						<span class="badge bg-warning text-dark">System</span>
					</div>
					<div class="list-group-item d-flex justify-content-between">
						Product-to-acre variance
						<span class="badge bg-warning text-dark">System</span>
					</div>
					<div class="list-group-item d-flex justify-content-between">
						Rare task combination
						<span class="badge bg-info text-dark">Review</span>
					</div>
				</div>
			</div>

			<div class="card">
				<div class="card-header">Process Performance</div>
				<div class="card-body">
					<div class="mb-2">
						<strong>Recommendation Acceptance:</strong> 78%
					</div>
					<div class="mb-2"><strong>Time Saved vs Plan:</strong> +6%</div>
					<div><strong>Override Logs:</strong> 5</div>
				</div>
			</div>
		</div>

		<!-- CENTER PANE -->
		<div class="col-lg-6 mb-4">
			<div class="card mb-4">
				<div class="card-header">Geospatial Review</div>
				<div class="card-body p-0">
					<div
						class="bg-light d-flex align-items-center justify-content-center"
						style="height:350px;"
					>
						<div class="text-center text-muted">
							<i class="bi bi-geo-alt-fill fs-1"></i>
							<div>Interactive Map Placeholder</div>
							<small
								>Spatial context for records, anomalies, and follow-ups.</small
							>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<div class="card-header">Technician Records</div>
				<div class="table-responsive">
					<table class="table table-hover align-middle">
						<thead class="table-light">
							<tr>
								<th><input type="checkbox" /></th>
								<th>ID</th>
								<th>Technician</th>
								<th>Section</th>
								<th>Task</th>
								<th>Acres</th>
								<th>Product</th>
								<th>Status</th>
								<th><i class="bi bi-exclamation-triangle"></i></th>
								<th>Comments</th>
								<th>Tags</th>
							</tr>
						</thead>
						<tbody>
							<tr
								data-bs-toggle="modal"
								data-bs-target="#recordDetailModal"
								class="anomaly"
							>
								<td><input type="checkbox" /></td>
								<td>REC-0142</td>
								<td>J. Alvarez</td>
								<td>Agricultural</td>
								<td>Treatment</td>
								<td>24.5</td>
								<td>Bti</td>
								<td><span class="badge bg-warning">Flagged</span></td>
								<td>
									<i class="bi bi-exclamation-triangle-fill text-danger"></i>
								</td>
								<td><span class="badge bg-secondary">3</span></td>
								<td>
									<span class="badge bg-primary">Training</span>
									<span class="badge bg-secondary">Data Quality</span>
									<span class="badge bg-warning text-dark"
										>System: Acreage Outlier</span
									>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- RIGHT PANE -->
		<div class="col-lg-3 mb-4">
			<div class="card mb-4">
				<div class="card-header">Filters</div>
				<div class="card-body">
					<div class="mb-2">
						<label class="form-label">Date</label>
						<input type="date" class="form-control" value="2026-02-26" />
					</div>
					<div class="mb-2">
						<label class="form-label">Section</label>
						<select class="form-select">
							<option>All Sections</option>
							<option>Residential</option>
							<option>Agricultural</option>
						</select>
					</div>
					<div class="mb-2">
						<label class="form-label">Technician</label>
						<select class="form-select">
							<option>All Technicians</option>
						</select>
					</div>
					<div class="form-check mt-3">
						<input class="form-check-input" type="checkbox" />
						<label class="form-check-label">Show only flagged</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" />
						<label class="form-check-label">Open questions</label>
					</div>
					<div class="mt-3">
						<label class="form-label">Filter by Tag</label>
						<select class="form-select">
							<option>All Tags</option>
							<option>Training</option>
							<option>Data Quality</option>
							<option>System: Acreage Outlier</option>
						</select>
					</div>
				</div>
			</div>

			<div class="card">
				<div class="card-header">Bulk Actions</div>
				<div class="card-body d-grid gap-2">
					<button class="btn btn-warning btn-sm">Flag for Follow-up</button>
					<button class="btn btn-success btn-sm">Mark as Reviewed</button>
					<button class="btn btn-outline-secondary btn-sm">Add Comment</button>
					<button class="btn btn-outline-dark btn-sm">Export</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Record Detail Modal -->
	<div class="modal fade" id="recordDetailModal" tabindex="-1">
		<div class="modal-dialog modal-lg modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Record Detail: REC-2026-0142</h5>
					<button
						type="button"
						class="btn-close"
						data-bs-dismiss="modal"
					></button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-6">
							<h6>Structured Details</h6>
							<ul class="list-group mb-3">
								<li class="list-group-item">Origin Assignment: AG-Canal-12B</li>
								<li class="list-group-item">
									Origin Signals: High Larval Counts
								</li>
								<li class="list-group-item">Equipment Used: Backpack Blower</li>
								<li class="list-group-item">Duration: 3.2 hrs</li>
								<li class="list-group-item">GPS Location: Map Placeholder</li>
							</ul>
						</div>
						<div class="col-md-6">
							<h6>Products & Media</h6>
							<ul class="list-group mb-3">
								<li class="list-group-item">Product Applied: Bti Granular</li>
								<li class="list-group-item text-muted">Photo Placeholder</li>
							</ul>
						</div>
					</div>

					<h6 class="mt-3">Reviewer & Technician Questions</h6>
					<div
						class="border rounded p-3 mb-4"
						style="max-height:180px; overflow-y:auto;"
					>
						<p class="mb-2">
							<strong>Reviewer:</strong> Confirm acreage measurement method.
						</p>
						<p class="mb-0">
							<strong>Technician:</strong> Measured using GPS track log.
						</p>
					</div>

					<h6>Tags</h6>
					<div class="border rounded p-3 mb-3">
						<span class="badge bg-primary me-1">Training</span>
						<span class="badge bg-secondary me-1">Data Quality</span>
						<span class="badge bg-warning text-dark me-1"
							>System: Acreage Outlier</span
						>
					</div>

					<div class="mb-3">
						<label class="form-label">Add Tag</label>
						<div class="input-group">
							<input
								type="text"
								class="form-control"
								placeholder="Enter new or existing tag"
							/>
							<button class="btn btn-outline-secondary">Add</button>
						</div>
						<small class="text-muted"
							>Tags may be user-defined or system-generated. System tags assist
							review but can be overridden.</small
						>
					</div>

					<h6>Review Comments</h6>
					<div
						class="border rounded p-3 mb-3"
						style="max-height:200px; overflow-y:auto;"
					>
						<div class="mb-3">
							<div class="d-flex justify-content-between">
								<strong>Operations Review</strong>
								<small class="text-muted">2026-02-26 14:12</small>
							</div>
							<div class="text-muted small">
								Checked pesticide rate against label requirements. Within
								tolerance.
							</div>
						</div>
						<div class="mb-3">
							<div class="d-flex justify-content-between">
								<strong>Data Quality</strong>
								<small class="text-muted">2026-02-26 15:02</small>
							</div>
							<div class="text-muted small">
								Acreage appears high relative to canal width. Monitor similar
								entries this week.
							</div>
						</div>
					</div>

					<div class="mb-3">
						<label class="form-label">Add Review Comment</label>
						<textarea
							class="form-control"
							rows="3"
							placeholder="Enter internal review comment regarding data quality, process observations, or training notes."
						></textarea>
					</div>
					<button class="btn btn-outline-secondary btn-sm">Save Comment</button>
				</div>

				<div class="modal-footer">
					<button class="btn btn-outline-secondary">Post Question</button>
					<button class="btn btn-warning">Flag for Follow-up</button>
					<button class="btn btn-success">Mark as Reviewed</button>
					<button class="btn btn-primary">Edit Record</button>
				</div>
			</div>
		</div>
	</div>
{{ end }}