@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>