<div class="install-wait-viewport">
	
	<div class="install-wait-steps-wrapper">

		<!-- STEP 1 -->
		<div class="install-wait-step" id="installWaitStep1">

		<div class="step-content">

			<div class="mb-3">
				<div class="fw-bold">Step 1 of 3 - Select customer</div>
			</div>

			<hr>

			<div class="mb-3">
				<label class="form-label">Search customer</label>
				<input type="text" id="customerSearchInput" class="form-control" placeholder="Customer / Account">
			</div>

			<div id="customerSearchResult" class="border rounded p-2" style="min-height:300px; max-height:300px; overflow-y:auto;">
			</div>

		</div>

		<div class="d-flex justify-content-end mt-3">
			<button id="btnStep1Next" class="btn btn-sm btn-secondary d-flex align-items-center gap-1" disabled>
			<span>Next</span> 
			<i class="bi bi-arrow-right"></i>
			</button>
		</div>

		</div>

		<!-- STEP 2 -->
		<div class="install-wait-step" id="installWaitStep2">

		<div class="step-content">

			<div class="mb-3">
				<div class="fw-bold">Step 2 of 3 - Job Type</div>
			</div>

			<hr>

			<div class="mb-3 p-3 bg-light rounded">
				<div class="row g-2">
					<div class="col-md-4">
						<label class="form-label small text-muted mb-1">Account</label>
						<input type="text" id="iwCustomerAccount" class="form-control form-control-sm" readonly>
					</div>
					<div class="col-md-8">
						<label class="form-label small text-muted mb-1">Customer name</label>
						<input type="text" id="iwCustomerName" class="form-control form-control-sm">
					</div>
					<div class="col-md-12">
						<label class="form-label small text-muted mb-1">Address</label>
						<input type="text" id="iwCustomerAddress" class="form-control form-control-sm">
					</div>
					<div class="col-md-4">
						<label class="form-label small text-muted mb-1">City</label>
						<input type="text" id="iwCustomerCity" class="form-control form-control-sm">
					</div>
					<div class="col-md-4">
						<label class="form-label small text-muted mb-1">Postal code</label>
						<input type="text" id="iwCustomerPostal" class="form-control form-control-sm">
					</div>
					<div class="col-md-4">
						<label class="form-label small text-muted mb-1">Phone</label>
						<input type="text" id="iwCustomerPhone" class="form-control form-control-sm">
					</div>
				</div>
			</div>

			<div class="iw-job-grid">
				<button class="iw-job-card" data-job="INSTALL">
					<i class="bi bi-plus-square"></i>
					<span>Install</span>
				</button>

				<button class="iw-job-card" data-job="PICKUP">
					<i class="bi bi-dash-square"></i>
					<span>Pickup</span>
				</button>

				<button class="iw-job-card" data-job="EXCHANGE">
					<i class="bi bi-arrow-left-right"></i>
					<span>Exchange</span>
				</button>

				<button class="iw-job-card" data-job="RELOCATE">
					<i class="bi bi-arrows-move"></i>
					<span>Relocate</span>
				</button>

				<button class="iw-job-card" data-job="CLEAN">
					<i class="bi bi-brush"></i>
					<span>Clean</span>
				</button>

			</div>
		</div>

		<div class="d-flex justify-content-between mt-4">
			<button id="btnStep2Back" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1">
				<i class="bi bi-arrow-left"></i>
				<span>Back</span>
			</button>
			<button id="btnStep2Next" class="btn btn-sm btn-secondary d-flex align-items-center gap-1" disabled>
				<span>Next (Draft)</span>
				<i class="bi bi-arrow-right"></i>
			</button>
		</div>

		</div>

		<div class="install-wait-step" id="installWaitStep3">

			<div class="step-content">

				<div class="mb-3">
					<div class="fw-bold" id="iwStep3Title"></div>
				</div>

				<hr>

				<!-- JS가 action box를 생성 -->
				<div id="iwStep3ContainerArea" class="task-actions mt-2"></div>

				<!-- Row 1 : Req date + Due date -->
				<div class="row g-2 mb-3 align-items-end">
					<div class="col-md-6">
						<label class="form-label small">Request date</label>
						<input type="text" id="iwRequestDate" class="form-control form-control-sm date-picker-form" autocomplete="off" placeholder="<?=date('Y-m-d')?>" readonly>
					</div>
					<div class="col-md-6">
						<div class="d-flex justify-content-between align-items-center">
							<label class="form-label small">Due date</label>
							<div>
								<input class="form-check-input me-2" type="checkbox" id="iwLockDate"><label class="form-check-label small" for="iwLockDate">Preferred Date</label>
							</div>
						</div>
						<input type="text" id="iwScheduleDate" class="form-control form-control-sm date-picker-form" autocomplete="off" placeholder="yyyy-mm-dd" readonly>
					</div>
				</div>

				<!-- Row 2 : Req By + Photos -->
				<div class="row g-2 mb-3 align-items-end">
					<div class="col-md-6">
						<label class="form-label small">Request By</label>
						<select id="iwRequestBy" class="form-select form-select-sm"></select>
					</div>
					<div class="col-md-6">
						<div class="d-flex justify-content-between align-items-center">
							<label class="form-label small">Photos</label>
							<button type="button" id="btnViewPhotos" class="btn btn-sm btn-outline-primary d-none">
								<i class="bi bi-image"></i> View
							</button>
						</div>
						<input type="file" id="iwPhotos" class="form-control form-control-sm" multiple>
					</div>
				</div>

				<!-- Row 3 : Request Note + CS Note -->
				<div class="row g-2 mb-3">
					<div class="col-md-6">
						<label class="form-label small">Note from Request</label>
						<textarea id="iwRequestNote" class="form-control form-control-sm" rows="2"></textarea>
					</div>
					<div class="col-md-6">
						<label class="form-label small">Note for CS</label>
						<textarea id="iwCsNote" class="form-control form-control-sm" rows="2"></textarea>
					</div>
				</div>

				<!-- Row 4 : Two-person job + Recurring -->
				<div class="row g-2 align-items-start">

					<!-- LEFT : Note for Install Driver -->
					<div class="col-md-6">
						<label class="form-label small">Note for Install Driver</label>
						<textarea id="iwWorkNote" class="form-control form-control-sm" rows="4"></textarea>
					</div>

					<!-- RIGHT : Two-person + Recurring -->
					<div class="col-md-6">
						<label class="form-label small">Other Options</label>
						<!-- Two-person row -->
						<div class="row g-2 align-items-center mb-2">
						<div class="col-md-4">
							<button type="button"
							id="btnTwoPerson"
							class="btn btn-sm btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2 iw-inline-ctrl">
							<i class="bi bi-people"></i>
							Two-person
							</button>
						</div>

						<div class="col-md-8">
							<div class="input-group input-group-sm iw-inline-ctrl">
							<input id="iwTwoPersonReason"
								class="form-control"
								placeholder="Reason (required if enabled)"
								disabled>
							</div>
						</div>
						</div>

						<!-- Recurring row -->
						<div class="row g-2 align-items-center mb-2">
						<div class="col-md-4">
							<button type="button"
							id="btnRecurring"
							class="btn btn-sm btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2 iw-inline-ctrl">
							<i class="bi bi-arrow-repeat"></i>
							Recurring
							</button>
						</div>

						<div class="col-md-8">
							<div class="input-group input-group-sm iw-inline-ctrl">
							<input type="number"
								id="iwRecurringDays"
								class="form-control"
								placeholder="Cycle (days)"
								min="1"
								disabled>
							</div>
						</div>
						</div>

						<!-- Need Oil Pickup row -->
						<div class="row g-2 align-items-center">
						<div class="col-md-4">
							<button type="button"
							id="btnNeedOilPickup"
							class="btn btn-sm btn-outline-secondary w-100 d-flex align-items-center justify-content-center gap-2 iw-inline-ctrl">
							<i class="bi bi-droplet"></i>
							Need Oil Pickup
							</button>
						</div>

					</div>

				</div>


			</div>

			<!-- Footer -->
			<div class="d-flex justify-content-between">
				<button id="btnStep3Back" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1">
					<i class="bi bi-arrow-left"></i><span>Back</span>
				</button>

				<button id="btnStep3Complete" class="btn btn-sm btn-success d-flex align-items-center gap-1">
					<i class="bi bi-check-lg"></i>Complete</button>
			</div>

		</div>



	</div>
</div>
