87 lines
3.6 KiB
Plaintext
87 lines
3.6 KiB
Plaintext
|
@page "/book"
|
||
|
|
@using Microsoft.AspNetCore.Components.Forms
|
||
|
|
|
||
|
|
<div class="container booking-page">
|
||
|
|
<div class="section-title">
|
||
|
|
<h1>Request an Appointment</h1>
|
||
|
|
<p>Complete the form below and a technician will review your case.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<EditForm Model="@Model" OnValidSubmit="HandleSubmit" class="booking-form-wrapper">
|
||
|
|
<DataAnnotationsValidator />
|
||
|
|
|
||
|
|
<div class="form-grid">
|
||
|
|
<div class="form-column">
|
||
|
|
<h3 class="form-heading">1. Appliance Details</h3>
|
||
|
|
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Appliance Type</label>
|
||
|
|
<InputSelect @bind-Value="Model.Type" class="custom-input">
|
||
|
|
<option value="">Select an appliance...</option>
|
||
|
|
<option>Refrigerator</option>
|
||
|
|
<option>Washing Machine</option>
|
||
|
|
<option>Dishwasher</option>
|
||
|
|
<option>Oven / Stove</option>
|
||
|
|
<option>Dryer</option>
|
||
|
|
</InputSelect>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Appliance Brand</label>
|
||
|
|
<InputSelect @bind-Value="Model.Brand" class="custom-input">
|
||
|
|
<option value="">Select a brand...</option>
|
||
|
|
<option>LG</option>
|
||
|
|
<option>Maytag</option>
|
||
|
|
<option>Whirlpool</option>
|
||
|
|
<option>Kitchen Aid</option>
|
||
|
|
<option>Amana</option>
|
||
|
|
<option>GE</option>
|
||
|
|
<option>Samsung</option>
|
||
|
|
<option>Bosch</option>
|
||
|
|
<option>Frigidaire</option>
|
||
|
|
<option>Kenmore</option>
|
||
|
|
<option>Other (please include in notes)</option>
|
||
|
|
</InputSelect>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Describe the Issue</label>
|
||
|
|
<InputTextArea @bind-Value="Model.Notes"
|
||
|
|
placeholder="e.g. Making a clicking noise, not draining, error code F1E2..."
|
||
|
|
class="custom-input textarea" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-column">
|
||
|
|
<h3 class="form-heading">2. Photos & Contact</h3>
|
||
|
|
|
||
|
|
<div class="upload-zone">
|
||
|
|
<p><strong>Upload Photos/Video</strong></p>
|
||
|
|
<p class="small-text">Tip: A photo of the <u>model number sticker</u> helps us arrive with the right parts!</p>
|
||
|
|
<InputFile OnChange="HandleFiles" multiple class="file-input" id="file-upload" />
|
||
|
|
<label for="file-upload" class="btn btn-secondary">Add Media</label>
|
||
|
|
|
||
|
|
@if (SelectedFiles.Any())
|
||
|
|
{
|
||
|
|
<div class="file-count">@SelectedFiles.Count files attached</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Full Name</label>
|
||
|
|
<InputText @bind-Value="Model.Name" class="custom-input" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<InputText @bind-Value="Model.Phone" class="custom-input" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-footer">
|
||
|
|
<button type="submit" class="btn btn-primary btn-large">Submit Repair Request</button>
|
||
|
|
</div>
|
||
|
|
</EditForm>
|
||
|
|
</div>
|