250 lines
7.6 KiB
PHP
250 lines
7.6 KiB
PHP
<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">
|
|
<label class="form-label small">Due date</label>
|
|
<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 mb-3 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="2"></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">
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<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>
|