@page "/employeeEdit"
@page "/employeeEdit/{EmployeeId:int}"
@using BethanysPieShopHRM.Shared.Domain
@if (!Saved)
{
    <section id="EmployeeEditSectionForm" class="employee-edit">
        @if (Employee != null)
        {
            <h1 class="page-title">Details de @Employee.FirstName @Employee.LastName</h1>
            <EditForm Model="Employee" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
                <DataAnnotationsValidator />
                <ValidationSummary />

                @if (!EmployeeId.HasValue)
                {
                    <div class="row mb-3">
                        <label for="image" class="col-12 col-sm-3">Select Image:</label>
                        <InputFile OnChange="OnInputFileChange" />
                    </div>
                }
                <div class="row mb-3">
                    <label for="lastName" class="col-form-label col-md-3">Last name: </label>
                    <div class="col-md-8">
                        <InputText id="lastName" class="form-control col-md-8" @bind-Value="@Employee.LastName" placeholder="Enter last name"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.LastName)" />
                    </div>

                </div>
		
                <div class="row mb-3">
                    <label for="firstName" class="col-form-label col-md-3">First name: </label>
                    <div class="col-md-8">
                        <InputText id="firstName" class="form-control col-md-8" @bind-Value="@Employee.FirstName" placeholder="Enter first name"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.FirstName)" />

                    </div>
               
                </div>

                <div class="row mb-3">
                    <label for="birthdate" class="col-form-label col-md-3">Birthdate: </label>
                    <div class="col-md-8">
                        <InputDate id="birthdate" class="form-control col-md-8" @bind-Value="@Employee.BirthDate" placeholder="Enter birthdate"></InputDate>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.BirthDate)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="email" class="col-form-label col-md-3">Email: </label>
                    <div class="col-md-8">
                        <InputText id="email" class="form-control col-md-8" @bind-Value="@Employee.Email" placeholder="Enter email"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Email)" />

                    </div>
                
                </div>

                <div class="row mb-3">
                    <label for="street" class="col-form-label col-md-3">Street: </label>
                    <div class="col-md-8">
                        <InputText id="street" class="form-control col-md-8" @bind-Value="@Employee.Street" placeholder="Enter street"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Street)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="zip" class="col-form-label col-md-3">Zip code: </label>
                    <div class="col-md-8">
                        <InputText id="zip" class="form-control col-md-8" @bind-Value="@Employee.Zip" placeholder="Enter zip code"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Zip)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="city" class="col-form-label col-md-3">City: </label>
                    <div class="col-md-8">
                        <InputText id="city" class="form-control col-md-8" @bind-Value="@Employee.City" placeholder="Enter city"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.City)" />

                    </div>
                </div>
                <div class="row mb-3">
                    <label for="country" class="col-form-label col-md-3">Country: </label>
                    <div class="col-md-8">
                        <InputSelect id="country" class="form-control col-md-8" @bind-Value="Employee.CountryId">
                            @foreach (var country in Countries)
                            {
                                <option value="@country.CountryId">@country.Name</option>
                            }
                        </InputSelect>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.CountryId)" />

                    </div>
                </div>
                <div class="row mb-3">
                    <label for="phonenumber" class="col-form-label col-md-3">Phone number: </label>
                    <div class="col-md-8">
                        <InputText id="phonenumber" class="form-control col-md-8" @bind-Value="@Employee.PhoneNumber" placeholder="Enter phone number"></InputText>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.PhoneNumber)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="longitude" class="col-form-label col-md-3">Longitude: </label>
                    <div class="col-md-8">
                        <InputNumber id="longitude" class="form-control col-md-8" @bind-Value="@Employee.Longitude"></InputNumber>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Longitude)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="latitude" class="col-form-label col-md-3">Latitude: </label>
                    <div class="col-md-8">
                        <InputNumber id="latitude" class="form-control col-md-8" @bind-Value="@Employee.Latitude"></InputNumber>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Latitude)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-8 offset-md-3">
                        <div class="form-check">
                            <InputCheckbox id="smoker" class="form-check-input" @bind-Value="@Employee.Smoker"></InputCheckbox>
                            <label class="form-check-label" for="smoker">
                                Smoker
                            </label>
                            <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Smoker)" />

                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="jobcategory" class="col-form-label col-md-3">Job category: </label>
                    <div class="col-md-8">
                        <InputSelect id="jobcategory" class="form-select col-md-8" @bind-Value="@Employee.JobCategoryId">
                            @foreach (var jobCategory in JobCategories)
                            {
                                <option value="@jobCategory.JobCategoryId">@jobCategory.JobCategoryName</option>
                            }
                        </InputSelect>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.JobCategoryId)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <InputRadioGroup Name="genderRadioGroup" @bind-Value="@Employee.Gender">
                        <label class="col-form-label col-md-3">Gender: </label>
                        <div class="col-md-8">
                            @foreach (var gender in (Gender[])Enum.GetValues(typeof(Gender)))
                            {
                                <InputRadio Name="genderRadioGroup" Value="gender" class="form-check-input" />
                                <label class="form-check-label">
                                    @gender
                                </label>
                                <br />
                            }
                        </div>
                    </InputRadioGroup>
                    <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Gender)" />

                </div>

                <div class="row mb-3">
                    <label for="maritalstatus" class="col-form-label col-md-3">Marital status: </label>
                    <div class="col-md-8">
                        <InputSelect id="maritalstatus" class="form-select col-md-8" @bind-Value=@Employee.MaritalStatus>
                            <option value="@(MaritalStatus.Single)">Single</option>
                            <option value="@(MaritalStatus.Married)">Married</option>
                            <option value="@(MaritalStatus.Other)">Other</option>
                        </InputSelect>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.MaritalStatus)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="joineddate" class="col-form-label col-md-3">Joined on: </label>
                    <div class="col-md-8">
                        <InputDate id="joineddate" class="form-control" @bind-Value="@Employee.JoinedDate" placeholder="Enter date joined"></InputDate>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.JoinedDate)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="exitdate" class="col-form-label col-md-3">Left on: </label>
                    <div class="col-md-8">
                        <InputDate id="exitdate" class="form-control" @bind-Value="@Employee.ExitDate" placeholder="Enter exit date"></InputDate>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.ExitDate)" />

                    </div>
                </div>

                <div class="row mb-3">
                    <label for="comment" class="col-form-label col-md-3">Comment: </label>
                    <div class="col-md-8">
                        <InputTextArea id="comment" class="form-control" @bind-Value="@Employee.Comment" placeholder="Enter comment"></InputTextArea>
                        <ValidationMessage class="offset-md-3 col-md-8 text-danger" For="@(() => Employee.Comment)" />

                    </div>
              
                </div>
                <button class="btn btn-secondary" @onclick="BackToOverview">Cancel</button>
                <button class="btn btn-primary me-1" type="submit">Submit</button>
                @if(EmployeeId.HasValue){
                    <button class="btn btn-danger" @onclick="DeleteEmployee">Delete</button>
                }
                
            </EditForm>

        }
        else
        {
            <div>Loading...</div>
        }
    </section>
} else
{
    <div class="alert @StatusClass">@Message</div>
    <button class="btn btn-secondary" @onclick="BackToOverview">Back to overview</button>
}