{{ template "sync/base.html" . }}

{{ define "title" }}Login{{ end }}
{{ define "extraheader" }}
	<style>
		body {
			background-color: #f8f9fa;
		}
		.page-container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.content-card {
			background-color: white;
			border-radius: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			padding: 25px;
			margin-bottom: 20px;
		}
		.logo-area {
			text-align: center;
			margin-bottom: 20px;
		}
		.logo-placeholder {
			height: 50px;
			max-width: 200px;
			margin: 0 auto;
		}
		.progress-container {
			margin: 30px 0 20px;
		}
		.progress {
			height: 8px;
		}
		.calendar-section {
			margin-bottom: 30px;
		}
		.dates-container {
			display: flex;
			overflow-x: auto;
			gap: 10px;
			padding-bottom: 10px;
			margin-bottom: 20px;
		}
		.date-card {
			min-width: 110px;
			border: 1px solid #dee2e6;
			border-radius: 8px;
			padding: 10px;
			text-align: center;
			cursor: pointer;
			transition: all 0.2s;
		}
		.date-card:hover {
			border-color: #0d6efd;
			background-color: #f8f9fa;
		}
		.date-card.selected {
			border-color: #0d6efd;
			background-color: #e6f2ff;
			box-shadow: 0 0 0 1px #0d6efd;
		}
		.date-card .month {
			font-size: 0.8rem;
			text-transform: uppercase;
			color: #6c757d;
			font-weight: 600;
		}
		.date-card .day {
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1.2;
		}
		.date-card .weekday {
			font-size: 0.8rem;
			color: #6c757d;
		}
		.time-slots {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 10px;
			margin-bottom: 20px;
		}
		.time-slot {
			border: 1px solid #dee2e6;
			border-radius: 6px;
			padding: 10px;
			text-align: center;
			cursor: pointer;
			transition: all 0.2s;
		}
		.time-slot:hover {
			border-color: #0d6efd;
			background-color: #f8f9fa;
		}
		.time-slot.selected {
			border-color: #0d6efd;
			background-color: #e6f2ff;
			box-shadow: 0 0 0 1px #0d6efd;
		}
		.time-slot.unavailable {
			background-color: #f8f9fa;
			color: #adb5bd;
			cursor: not-allowed;
			text-decoration: line-through;
		}
		.form-section {
			margin-top: 30px;
			padding-top: 20px;
			border-top: 1px solid #dee2e6;
		}
		.section-title {
			margin-bottom: 20px;
			display: flex;
			align-items: center;
		}
		.section-title i {
			margin-right: 10px;
			color: #0d6efd;
		}
		.selected-date-time {
			background-color: #e8f4f8;
			border-left: 4px solid #0d6efd;
			padding: 15px;
			border-radius: 5px;
			margin-bottom: 20px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="page-container">
		<!-- Logo -->
		<div class="logo-area">
			<img
				src="https://placehold.co/200x50/e9ecef/adb5bd?text=County+Vector+Control"
				alt="County Vector Control"
				class="logo-placeholder"
			/>
		</div>

		<!-- Progress Bar -->
		<div class="progress-container">
			<div class="d-flex justify-content-between mb-1">
				<span class="text-muted small">Schedule Follow-up</span>
				<span class="text-muted small">4 of 4</span>
			</div>
			<div class="progress">
				<div
					class="progress-bar"
					role="progressbar"
					style="width: 100%"
					aria-valuenow="100"
					aria-valuemin="0"
					aria-valuemax="100"
				></div>
			</div>
		</div>

		<!-- Main Content -->
		<div class="content-card">
			<h1 class="h4 mb-3">Schedule a Follow-up Inspection</h1>
			<p>
				Please select a convenient date and time for our inspector to visit your
				property.
			</p>

			<!-- Calendar Section -->
			<div class="calendar-section">
				<div class="section-title">
					<i class="bi bi-calendar-date"></i>
					<h5 class="mb-0">Select Date</h5>
				</div>

				<!-- Date Selection -->
				<div class="dates-container">
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">20</div>
						<div class="weekday">Tue</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">21</div>
						<div class="weekday">Wed</div>
					</div>
					<div class="date-card selected">
						<div class="month">Jun</div>
						<div class="day">22</div>
						<div class="weekday">Thu</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">23</div>
						<div class="weekday">Fri</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">26</div>
						<div class="weekday">Mon</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">27</div>
						<div class="weekday">Tue</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">28</div>
						<div class="weekday">Wed</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">29</div>
						<div class="weekday">Thu</div>
					</div>
					<div class="date-card">
						<div class="month">Jun</div>
						<div class="day">30</div>
						<div class="weekday">Fri</div>
					</div>
					<div class="date-card">
						<div class="month">Jul</div>
						<div class="day">03</div>
						<div class="weekday">Mon</div>
					</div>
				</div>

				<!-- Time Slot Selection -->
				<div class="section-title">
					<i class="bi bi-clock"></i>
					<h5 class="mb-0">Select Time</h5>
				</div>

				<div class="time-slots">
					<div class="time-slot unavailable">8:00 AM</div>
					<div class="time-slot unavailable">9:00 AM</div>
					<div class="time-slot selected">10:00 AM</div>
					<div class="time-slot">11:00 AM</div>
					<div class="time-slot">1:00 PM</div>
					<div class="time-slot">2:00 PM</div>
					<div class="time-slot">3:00 PM</div>
					<div class="time-slot">4:00 PM</div>
				</div>

				<!-- Selected Date & Time Summary -->
				<div class="selected-date-time">
					<div class="d-flex justify-content-between align-items-center">
						<strong>Selected Appointment:</strong>
						<span>Thursday, June 22, 2023 at 10:00 AM</span>
					</div>
				</div>
			</div>

			<!-- Contact Information Form -->
			<div class="form-section">
				<div class="section-title">
					<i class="bi bi-person-lines-fill"></i>
					<h5 class="mb-0">Contact Information</h5>
				</div>

				<form>
					<div class="row g-3">
						<div class="col-md-6">
							<label for="fullName" class="form-label">Full Name</label>
							<input type="text" class="form-control" id="fullName" required />
						</div>

						<div class="col-md-6">
							<label for="phone" class="form-label">Phone Number</label>
							<input
								type="tel"
								class="form-control"
								id="phone"
								placeholder="(555) 555-5555"
								required
							/>
						</div>

						<div class="col-12">
							<label for="email" class="form-label">Email Address</label>
							<input type="email" class="form-control" id="email" required />
						</div>

						<div class="col-12">
							<label for="notes" class="form-label"
								>Additional Notes (Optional)</label
							>
							<textarea
								class="form-control"
								id="notes"
								rows="3"
								placeholder="Any special instructions or information for the inspector"
							></textarea>
						</div>

						<div class="col-12">
							<div class="form-check">
								<input
									class="form-check-input"
									type="checkbox"
									id="reminders"
									checked
								/>
								<label class="form-check-label" for="reminders">
									Send me text reminders about my appointment
								</label>
							</div>
						</div>
					</div>

					<!-- Information -->
					<div class="alert alert-secondary mt-4">
						<small
							>Our inspector will need access to view your pool area. If you
							won't be home during the appointment, please provide access
							instructions in the notes.</small
						>
					</div>

					<!-- Action Buttons -->
					<div class="d-flex justify-content-between mt-4">
						<a
							href="{{ .URLs.ReportContribute }}"
							class="btn btn-outline-secondary"
						>
							<i class="bi bi-arrow-left me-2"></i> Back
						</a>
						<a href="{{ .URLs.ReportConfirmation }}" class="btn btn-success">
							<i class="bi bi-calendar-check me-2"></i> Confirm Appointment
						</a>
					</div>
				</form>
			</div>
		</div>

		<!-- Help Text -->
		<div class="text-center text-muted small">
			<p>
				If you need assistance, please contact Vector Control at (555) 123-4567
			</p>
		</div>
	</div>
{{ end }}