ApplianceRepair/Components/Pages/Book.razor

@page "/book"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.Forms

@if(!Complete)
{
    <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 FormName="RepairRequestForm" Model="Model" OnValidSubmit="HandleSubmit" On 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>
                        <ValidationMessage For="@(() => Model.Type)" class="text-danger" />
                    </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>
                        <ValidationMessage For="@(() => Model.Brand)" class="text-danger" />
                    </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" />
                        <ValidationMessage For="@(() => Model.Notes)" class="text-danger" />
                    </div>
                </div>

                <div class="form-column">
                    <h3 class="form-heading">2. Photos & Contact</h3>

                    <div class="upload-zone">
                        <p><strong>Upload Photos/Video (10MB max)</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" />
                        <ValidationMessage For="@(() => Model.Name)" class="text-danger" />
                    </div>

                    <div class="field-group">
                        <label>Phone Number</label>
                        <InputText @bind-Value="Model.Phone" class="custom-input" />
                        <ValidationMessage For="@(() => Model.Phone)" class="text-danger" />
                    </div>
                </div>
            </div>

            <div class="form-footer">
                <button type="submit" class="btn btn-primary btn-large">Submit Repair Request</button>
            </div>
        </EditForm>
    </div>
}
else
{
    <div class="complete-container">
        <div class="complete-content">
            <h1 class="complete-heading">Thank You!</h1>
            <p class="complete-subheading">We will be contacting you shortly.</p>
            <p class="complete-subheading">Your request number is: @Model.RequestNumber</p>
            <NavLink class="btn-home" href="" Match="NavLinkMatch.All">
                <span class="home-icon">🏠</span> Back to Home
            </NavLink>
        </div>
    </div>
}