@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using Microsoft.Extensions.Localization
@using Microsoft.Extensions.Options
@using gehGassi.Web.Helper
@using gehGassi.Web.Models
@model gehGassi.Web.Models.DogCrudVm
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = Localizer["Button_Create"];
}

<section id="dogCreateContainer">
    <div>
        <div id="pageTitleAdd" style="display: none;">@ViewData["Title"]</div>
        <div class="pageDesc">@Localizer["Dog_Create_Desc"]</div>
        <form cb-preventsubmit id="frmCreateDog" class="form" asp-controller="Dog" asp-action="Create" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dogCreateContainer">
            <div asp-validation-summary="ModelOnly"></div>
            <input type="hidden" asp-for="Id" />
            <input type="hidden" asp-for="UpdatedAt" />
            <input type="hidden" asp-for="Deleted" />
            <input type="hidden" asp-for="DogRaceId" class="validateAlways" />
            <input type="hidden" asp-for="AppUserId" class="validateAlways" />
            <input type="hidden" asp-for="Photo" />


            <div id="tabContainer">
                <div class="e-tab-header">
                    <div>@Localizer["Common_Tab_Details"]</div>
                    <div>@Localizer["Common_Tab_Personality"]</div>
                    <div>@Localizer["Common_Tab_WalkTheDog"]</div>
                    <div>@Localizer["Common_Tab_AtHome"]</div>
                    <div>@Localizer["Common_Tab_Medical"]</div>
                    <div>@Localizer["Common_Tab_Sitting"]</div>
                    <div>@Localizer["Common_Tab_Photo"]</div>
                </div>
                <div class="e-content">
                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="Number"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-hashtag"></i></span>
                                    <input asp-for="Number" class="form-control" readonly="readonly" />
                                    <span asp-validation-for="Number" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="Name"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-dog"></i></span>
                                    <input asp-for="Name" class="form-control" />
                                    <span asp-validation-for="Name" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="AppUserId"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-bone"></i></div>
                                    <input asp-for="AppUserName" class="form-control" />
                                </div>
                                <span asp-validation-for="AppUserId" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="DogRaceId"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-schield-dog"></i></div>
                                    <input asp-for="DogRaceName" class="form-control" />
                                </div>
                                <span asp-validation-for="DogRaceId" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Sex"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-mars-and-venus"></i></span>
                                    <select asp-for="Sex" class="form-control" asp-items="Html.GetEnumSelectList<DogSexVm>()"></select>
                                    <span asp-validation-for="Sex" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Size"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-up-down"></i></span>
                                    <select asp-for="Size" class="form-control" asp-items="Html.GetEnumSelectList<DogSizeVm>()"></select>
                                    <span asp-validation-for="Size" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="BirthDate"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-calendar"></i></div>
                                    <input asp-for="BirthDate" class="form-control" />
                                </div>
                                <span asp-validation-for="BirthDate" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2 mt-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="Description"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea asp-for="Description" class="form-control" rows="5" placeholder="@Localizer["Dog_Description_Placeholder"]"></textarea>
                                    <span asp-validation-for="Description" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row mb-2 mt-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="Comment"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea asp-for="Comment" class="form-control" rows="5"></textarea>
                                    <span asp-validation-for="Comment" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="LikesAdults"></label>
                                <input type="checkbox" asp-for="LikesAdults" class="switch" />
                                <span asp-validation-for="LikesAdults" class="invalid-feedback"></span>
                            </div>
                           @* <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="LikesChildren"></label>
                                <input type="checkbox" asp-for="LikesChildren" class="switch" />
                                <span asp-validation-for="LikesChildren" class="invalid-feedback"></span>
                            </div>*@
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="LikesConspecifics"></label>
                                <input type="checkbox" asp-for="LikesConspecifics" class="switch" />
                                <span asp-validation-for="LikesConspecifics" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsTrustful"></label>
                                <input type="checkbox" asp-for="IsTrustful" class="switch" />
                                <span asp-validation-for="IsTrustful" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsLoneGunner"></label>
                                <input type="checkbox" asp-for="IsLoneGunner" class="switch" />
                                <span asp-validation-for="IsLoneGunner" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsAggressiv"></label>
                                <input type="checkbox" asp-for="IsAggressiv" class="switch" />
                                <span asp-validation-for="IsAggressiv" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="AggressionLevel"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-face-angry"></i></span>
                                    <select asp-for="AggressionLevel" class="form-control" asp-items="Html.GetEnumSelectList<DogAggressionLevelVm>()"></select>
                                    <span asp-validation-for="AggressionLevel" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="WalksTheLeash"></label>
                                <input type="checkbox" asp-for="WalksTheLeash" class="switch" />
                                <span asp-validation-for="WalksTheLeash" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="PullsTheLeash"></label>
                                <input type="checkbox" asp-for="PullsTheLeash" class="switch" />
                                <span asp-validation-for="PullsTheLeash" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="BasicCommands"></label>
                                <input type="checkbox" asp-for="BasicCommands" class="switch" />
                                <span asp-validation-for="BasicCommands" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Hunter"></label>
                                <input type="checkbox" asp-for="Hunter" class="switch" />
                                <span asp-validation-for="Hunter" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Eating"></label>
                                <input type="checkbox" asp-for="Eating" class="switch" />
                                <span asp-validation-for="Eating" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Jumper"></label>
                                <input type="checkbox" asp-for="Jumper" class="switch" />
                                <span asp-validation-for="Jumper" class="invalid-feedback"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="RushesOutside"></label>
                                <input type="checkbox" asp-for="RushesOutside" class="switch" />
                                <span asp-validation-for="RushesOutside" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsCalm"></label>
                                <input type="checkbox" asp-for="IsCalm" class="switch" />
                                <span asp-validation-for="IsCalm" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsPeeing"></label>
                                <input type="checkbox" asp-for="IsPeeing" class="switch" />
                                <span asp-validation-for="IsPeeing" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsShy"></label>
                                <input type="checkbox" asp-for="IsShy" class="switch" />
                                <span asp-validation-for="IsShy" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="IsGuard"></label>
                                <input type="checkbox" asp-for="IsGuard" class="switch" />
                                <span asp-validation-for="IsGuard" class="invalid-feedback"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="Intolerances"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea asp-for="Intolerances" class="form-control" rows="5"></textarea>
                                    <span asp-validation-for="Intolerances" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="MedicalInfo"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea asp-for="MedicalInfo" class="form-control" rows="5"></textarea>
                                    <span asp-validation-for="MedicalInfo" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Chiped"></label>
                                <input type="checkbox" asp-for="Chiped" class="switch" />
                                <span asp-validation-for="Chiped" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Sterilized"></label>
                                <input type="checkbox" asp-for="Sterilized" class="switch" />
                                <span asp-validation-for="Sterilized" class="invalid-feedback"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="HouseTrained"></label>
                                <input type="checkbox" asp-for="HouseTrained" class="switch" />
                                <span asp-validation-for="HouseTrained" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="FeedingTimes"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-utensils"></i></span>
                                    <select asp-for="FeedingTimes" class="form-control" asp-items="Html.GetEnumSelectList<DogFeedingTimesVm>()"></select>
                                    <span asp-validation-for="FeedingTimes" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="FeedingIndividual"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea asp-for="FeedingIndividual" class="form-control" rows="3"></textarea>
                                    <span asp-validation-for="FeedingIndividual" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-5">
                                <div class="text-center">
                                    @if (!string.IsNullOrWhiteSpace(Model.Photo))
                                    {
                                        <img id="photo" src="/file/temp/@Model.Photo" class="upload-image-container" alt="" />
                                    }
                                    else
                                    {
                                        <img id="photo" class="upload-image-container" alt="" />
                                    }
                                </div>
                                <div class="text-center">
                                    <span asp-validation-for="Photo" class="invalid-feedback"></span>
                                </div>
                                <div class="text-center mt-2">
                                    <button type="button" id="btnUploadPhoto" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-edit"></i></button>
                                    <button type="button" id="btnDeletePhoto" class="btn btn-primary btn-sm" style="display: none;"><i class="fa fa-fw fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-7">
                                <div class="alert alert-info">
                                    <p>@Localizer["Dog_Photo_Desc"]</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row button-row">
                <div class="col-12">
                    <div class="">
                        <button type="button" id="btnSave" class="btn btn-primary">@Localizer["Button_Save"]</button>
                        <button type="button" id="btnCancel" class="btn btn-primary">@Localizer["Button_Cancel"]</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @Html.Hidden("jsLookupDogRacesUrl", Url.Action("Lookup", "DogRace"))
    @Html.Hidden("jsLookupAppUsersUrl", Url.Action("Lookup", "AppUser"))
    @Html.Hidden("jsUploadUrl", Url.Action("UploadTempFile", "Common"))
    @Html.Hidden("jsRemoveUrl", Url.Action("RemoveTempFile", "Common"))
    <system-js url="~/scripts/Views/Dog/create.js" fresh-import="true"></system-js>
</section>