{{template "base.html" .}}

{{define "title"}}Dash{{end}}
{{define "style"}}
body {
	overflow-x: hidden;
}
.map-container {
	height: 250px;
	background-color: #e9ecef;
	border-radius: 4px;
}
.calendar-container {
	background-color: #f8f9fa;
	border-radius: 4px;
}
.calendar-day {
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
}
.calendar-day.has-events {
	position: relative;
}
.calendar-day.has-events::after {
	content: '';
	position: absolute;
	bottom: 0.2rem;
	left: 50%;
	transform: translateX(-50%);
	height: 0.25rem;
	border-radius: 0.125rem;
	background-color: #0d6efd;
}
.calendar-day.has-events.light::after {
	width: 0.25rem;
	background-color: #0d6efd;
}
.calendar-day.has-events.medium::after {
	width: 0.5rem;
	background-color: #fd7e14;
}
.calendar-day.has-events.heavy::after {
	width: 0.75rem;
	background-color: #dc3545;
}
.trap-increase {
	color: #dc3545;
}
.trap-decrease {
	color: #28a745;
}
.status-active {
	background-color: #d4edda;
}
.status-break {
	background-color: #fff3cd;
}
.status-transit {
	background-color: #cce5ff;
}
.tech-table tr td {
	vertical-align: middle;
}
{{end}}
{{define "content"}}
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container-fluid">
		<a class="navbar-brand d-flex align-items-center" href="#">
			<img src="https://via.placeholder.com/40" alt="{{.DistrictName}} Logo" class="me-2">
			<span>{{.DistrictName}} Mosquito Abatement District</span>
		</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav ms-auto">
				<li class="nav-item">
					<a class="nav-link active" href="#"><i class="bi bi-house-door"></i> Dashboard</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-people"></i> Residents</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-clipboard-data"></i> Reports</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-gear"></i> Settings</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<div class="container-fluid py-3">
	<div class="row mb-3">
		<div class="col-12">
			<div class="card shadow-sm">
				<div class="card-body py-2">
					<form action="/phone-call/search-results" method="GET">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="Search by ID (e.g., easy twin jazz cats), address, GPS, name or phone..." aria-label="Search">
							<button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Search</button>
						</div>
						<small class="form-text text-muted">Quick search for request ID, address, coordinates, contact name, or phone number</small>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<!-- Left Column -->
		<div class="col-md-8 mb-3">
			<div class="card shadow-sm h-100">
				<div class="card-header bg-success text-white d-flex justify-content-between align-items-center py-2">
					<h5 class="mb-0">Mosquito Activity & Relief</h5>
					<a href="/phone-call/service-request" class="btn btn-light btn-sm"><i class="bi bi-plus-circle"></i> New Service Request</a>
				</div>
				<div class="card-body">
					<div class="row mb-2">
						<div class="col-12">
							<label class="form-label mb-1">Location of Concern</label>
							<div class="map-container d-flex justify-content-center align-items-center">
								<div class="text-center text-muted">
									<i class="bi bi-map fs-1"></i>
									<p>Interactive map will be loaded here</p>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-md-6 mb-2">
							<h6 class="mb-1">Recent Trap Counts</h6>
							<div class="table-responsive">
								<table class="table table-sm table-bordered">
									<thead class="table-light">
										<tr>
											<th>Trap Location</th>
											<th>Current</th>
											<th>Week Δ</th>
											<th>Month Δ</th>
											<th>YoY</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Elmwood Park</td>
											<td>47</td>
											<td class="trap-decrease">-12%</td>
											<td class="trap-decrease">-23%</td>
											<td class="trap-increase">+5%</td>
										</tr>
										<tr>
											<td>Riverside Dr</td>
											<td>32</td>
											<td class="trap-increase">+8%</td>
											<td class="trap-decrease">-5%</td>
											<td class="trap-decrease">-10%</td>
										</tr>
										<tr>
											<td>Oakdale Creek</td>
											<td>53</td>
											<td class="trap-increase">+15%</td>
											<td class="trap-increase">+22%</td>
											<td class="trap-increase">+17%</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						
						<div class="col-md-6">
							<h6 class="mb-1">Nearby Service Requests</h6>
							<div class="table-responsive">
								<table class="table table-sm table-bordered">
									<thead class="table-light">
										<tr>
											<th>Date</th>
											<th>Status</th>
											<th>Type</th>
											<th>Distance</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>10/15/23</td>
											<td><span class="badge bg-success">Completed</span></td>
											<td>Green Pool</td>
											<td>0.2 mi</td>
										</tr>
										<tr>
											<td>10/18/23</td>
											<td><span class="badge bg-warning text-dark">Scheduled</span></td>
											<td>Mosquito Nuisance</td>
											<td>0.3 mi</td>
										</tr>
										<tr>
											<td>10/19/23</td>
											<td><span class="badge bg-info text-dark">Accepted</span></td>
											<td>Previous Source</td>
											<td>0.5 mi</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Right Column - Calendar -->
		<div class="col-md-4 mb-3">
			<div class="card shadow-sm h-100">
				<div class="card-header bg-dark text-white py-2">
					<h5 class="mb-0">Calendar</h5>
				</div>
				<div class="card-body p-2">
					<div class="calendar-container p-2 mb-2">
						<div class="d-flex justify-content-between align-items-center mb-2">
							<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></button>
							<h6 class="mb-0">October 2023</h6>
							<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></button>
						</div>
						<table class="table table-sm mb-0">
							<thead>
								<tr class="text-center">
									<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
								</tr>
							</thead>
							<tbody>
								<tr class="text-center">
									<td class="calendar-day text-muted">1</td>
									<td class="calendar-day text-muted has-events light">2</td>
									<td class="calendar-day text-muted has-events medium">3</td>
									<td class="calendar-day text-muted">4</td>
									<td class="calendar-day text-muted has-events light">5</td>
									<td class="calendar-day text-muted">6</td>
									<td class="calendar-day text-muted">7</td>
								</tr>
								<tr class="text-center">
									<td class="calendar-day text-muted">8</td>
									<td class="calendar-day text-muted has-events medium">9</td>
									<td class="calendar-day text-muted has-events light">10</td>
									<td class="calendar-day text-muted has-events heavy">11</td>
									<td class="calendar-day text-muted has-events medium">12</td>
									<td class="calendar-day text-muted has-events light">13</td>
									<td class="calendar-day text-muted">14</td>
								</tr>
								<tr class="text-center">
									<td class="calendar-day text-muted">15</td>
									<td class="calendar-day text-muted has-events medium">16</td>
									<td class="calendar-day text-muted has-events light">17</td>
									<td class="calendar-day text-muted has-events medium">18</td>
									<td class="calendar-day text-muted has-events heavy">19</td>
									<td class="calendar-day text-muted has-events medium">20</td>
									<td class="calendar-day text-muted">21</td>
								</tr>
								<tr class="text-center">
									<td class="calendar-day">22</td>
									<td class="calendar-day bg-primary text-white rounded has-events heavy">23</td>
									<td class="calendar-day has-events medium">24</td>
									<td class="calendar-day has-events light">25</td>
									<td class="calendar-day has-events medium">26</td>
									<td class="calendar-day has-events heavy">27</td>
									<td class="calendar-day">28</td>
								</tr>
								<tr class="text-center">
									<td class="calendar-day">29</td>
									<td class="calendar-day has-events medium">30</td>
									<td class="calendar-day has-events light">31</td>
									<td class="calendar-day text-muted">1</td>
									<td class="calendar-day text-muted has-events light">2</td>
									<td class="calendar-day text-muted">3</td>
									<td class="calendar-day text-muted">4</td>
								</tr>
							</tbody>
						</table>
						<div class="d-flex justify-content-center mt-1 small">
							<span class="me-3"><span class="d-inline-block bg-primary rounded-circle" style="width:8px;height:8px"></span> Light</span>
							<span class="me-3"><span class="d-inline-block bg-warning rounded-circle" style="width:8px;height:8px"></span> Medium</span>
							<span><span class="d-inline-block bg-danger rounded-circle" style="width:8px;height:8px"></span> Heavy</span>
						</div>
					</div>
					
					<h6 class="mb-1">Today's Schedule - October 23, 2023</h6>
					<div class="table-responsive">
						<table class="table table-sm table-hover mb-0">
							<thead>
								<tr>
									<th>Time</th>
									<th>Address</th>
									<th>Type</th>
									<th>Technician</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>8:00 AM</td>
									<td>123 Maple St</td>
									<td>Nuisance</td>
									<td>S. Johnson</td>
								</tr>
								<tr>
									<td>9:30 AM</td>
									<td>456 Oak Ave</td>
									<td>Green Pool</td>
									<td>M. Williams</td>
								</tr>
								<tr class="table-active">
									<td>11:00 AM</td>
									<td>789 Pine Ln</td>
									<td>Prev Source</td>
									<td>L. Rodriguez</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Technician Roster - Table View -->
	<div class="row">
		<div class="col-12">
			<div class="card shadow-sm">
				<div class="card-header bg-info text-white py-2">
					<h5 class="mb-0">Today's Technician Roster</h5>
				</div>
				<div class="card-body p-0">
					<div class="table-responsive">
						<table class="table table-hover table-sm tech-table mb-0">
							<thead>
								<tr>
									<th>Technician</th>
									<th>Scheduled</th>
									<th>Completed</th>
									<th>Phone</th>
									<th>Status</th>
									<th>Location</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<div class="d-flex align-items-center">
											<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
											<span>Sarah Johnson</span>
										</div>
									</td>
									<td>8</td>
									<td>5</td>
									<td>(555) 234-5678</td>
									<td><span class="badge bg-success">Servicing</span></td>
									<td>123 Maple St, Zone 3</td>
								</tr>
								<tr>
									<td>
										<div class="d-flex align-items-center">
											<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
											<span>Mark Williams</span>
										</div>
									</td>
									<td>7</td>
									<td>3</td>
									<td>(555) 345-6789</td>
									<td><span class="badge bg-warning text-dark">On Break</span></td>
									<td>Office - Lunchroom</td>
								</tr>
								<tr>
									<td>
										<div class="d-flex align-items-center">
											<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
											<span>Lisa Rodriguez</span>
										</div>
									</td>
									<td>9</td>
									<td>6</td>
									<td>(555) 456-7890</td>
									<td><span class="badge bg-primary">In Transit</span></td>
									<td>En route to 789 Pine Ln</td>
								</tr>
								<tr>
									<td>
										<div class="d-flex align-items-center">
											<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
											<span>Carlos Martinez</span>
										</div>
									</td>
									<td>6</td>
									<td>4</td>
									<td>(555) 567-8901</td>
									<td><span class="badge bg-success">Servicing</span></td>
									<td>202 Birch Dr, Zone 2</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{end}}