@model VendorInfoModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Vendorinfo"]);
}
@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.VendorInfo })
}
<div class="page vendorinfo-page">
    <h1 class="text-center generalTitle h2">@Loc["Account.MyAccount"] - @Loc["Account.VendorInfo"]</h1>
    <validation-observer v-slot="{ handleSubmit }">
        <form asp-controller="Vendor" method="post" enctype="multipart/form-data" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
            <div asp-validation-summary="ModelOnly" class="message-error alert alert-danger" my-3></div>
            <div class="form-fields">
                <div class="form-group">
                    <validation-provider tag="div" rules="required" name="Name" v-slot="{ errors, classes }">
                        <label asp-for="Name" class="col-form-label">@Loc["Account.VendorInfo.Name"]:</label>
                        <span class="required">*</span>
                        <input asp-for="Name" v-model="vendorinfo.Name" placeholder="@Loc["Account.VendorInfo.Name.Hint"]" v-bind:class="[classes , 'form-control']" />
                        <span class="field-validation-error">{{ errors[0] }}</span>
                        <span asp-validation-for="Name"></span>
                    </validation-provider>
                </div>
                <div class="form-group">
                    <validation-provider tag="div" rules="required|email" name="Email" v-slot="{ errors, classes }">
                        <label asp-for="Email" class="col-form-label">@Loc["Account.VendorInfo.Email"]:</label>
                        <span class="required">*</span>
                        <input asp-for="Email" v-model="vendorinfo.Email" placeholder="@Loc["Account.VendorInfo.Email.Hint"]" v-bind:class="[classes , 'form-control']" />
                        <span class="field-validation-error">{{ errors[0] }}</span>
                        <span asp-validation-for="Email"></span>
                    </validation-provider>
                </div>
                <div class="form-group">
                    <label asp-for="Description" class="col-form-label">@Loc["Account.VendorInfo.Description"]:</label>
                    <textarea asp-for="Description" class="form-control description"></textarea>
                </div>
                <div class="form-group">
                    <label asp-for="PictureUrl" class="col-form-label">@Loc["Account.VendorInfo.Picture"]:</label>
                    <b-form-file id="uploadedFile" name="uploadedFile" accept="image/*"></b-form-file>
                    @if (!String.IsNullOrEmpty(Model.PictureUrl))
                    {
                        <div class="vendor-picture mt-3">
                            <img src="@(Model.PictureUrl)" alt="picture" style="width:100px; display:block" />
                            <a asp-route="CustomerVendorRemovePicture" name="remove-picture" class="btn btn-danger remove-picture-button mt-3">@Loc["Account.VendorInfo.Picture.Remove"]</a>
                        </div>
                    }
                </div>
                @{
                    var dataDictAddress = new ViewDataDictionary(ViewData);
                    dataDictAddress.TemplateInfo.HtmlFieldPrefix = "Address";
                    <partial name="Partials/CreateOrUpdateVendorAddress" model="Model.Address" view-data="dataDictAddress" />
                }
            </div>
            <div class="row">
                <div class="col-12 buttons pt-1 pb-1">
                    <input type="submit" asp-action="Info" name="save-info-button" class="btn btn-info apply-vendor-button" value="@Loc["Common.Save"]" />
                </div>
            </div>
        </form>
    </validation-observer>
</div>
<script asp-location="Footer" asp-order="300">
    var vendorinfo = new Vue({
            data: () => ({
                @{
                    <text>
                        Name: '@Html.Raw(Model.Name)',
                        Email: '@Html.Raw(Model.Email)',
                    </text>
                }
            })
        });
</script>