@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
@model gehGassi.Web.Models.CustomerCrudVm
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = Localizer["Button_Create"];
}

<section id="customerCreateContainer">
    <div>
        <div id="pageTitleAdd" style="display: none;">@ViewData["Title"]</div>
        <div class="pageDesc">@Localizer["Customer_Create_Desc"]</div>
        <form cb-preventsubmit id="frmCreateCustomer" class="form" asp-controller="Customer" asp-action="Create" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#customerCreateContainer">
            <div asp-validation-summary="ModelOnly"></div>
            <input type="hidden" asp-for="Id" />
            <input type="hidden" asp-for="TypeId" />
            <input type="hidden" asp-for="BranchId" />
            <input type="hidden" asp-for="BranchesJson" />
            <input type="hidden" asp-for="UniqueId" />
            <input type="hidden" asp-for="Languages" class="validateAlways" />
            <input type="hidden" asp-for="Address.CountryCode" class="validateAlways" />
            <input type="hidden" asp-for="Address.State" class="validateAlways" />
            <input type="hidden" asp-for="Logo" />
            <input type="hidden" asp-for="MarkupListing" />
            <input type="hidden" asp-for="MarkupAdvertisement" />
            <input type="hidden" asp-for="MarkupPin" />
            <input type="hidden" asp-for="MarkupBanner" />
            <input type="hidden" asp-for="MangopayIdCreated" />
            <input type="hidden" asp-for="MangopayAddress.CountryCode" class="validateAlways" />
            <input type="hidden" asp-for="MangopayAddress.State" class="validateAlways" />
            <input type="hidden" asp-for="MangopayContactNationality" class="validateAlways" />
            <input type="hidden" asp-for="MangopayContactMainResidenceCode" class="validateAlways" />

            <div id="tabContainer">
                <div class="e-tab-header">
                    <div>@Localizer["Customer_Tab_Details"]</div>
                    <div>@Localizer["Customer_Tab_Contact"]</div>
                    <div>@Localizer["Common_Tab_Settings"]</div>
                    <div>@Localizer["Customer_Tab_Logo"]</div>
                    <div>@Localizer["Customer_Tab_Mangopay"]</div>
                </div>
                <div class="e-content">
                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <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-4">
                                <label class="form-label" asp-for="Name"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-cash-register"></i></span>
                                    <input asp-for="Name" class="form-control" />
                                    <span asp-validation-for="Name" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="BranchId"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-tags"></i></div>
                                    <input asp-for="BranchName" class="form-control" />
                                </div>
                                <span asp-validation-for="BranchId" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <label class="form-label" asp-for="BranchesJson"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-tags"></i></div>
                                    <input id="BranchesJsonHelper" class="form-control" />
                                </div>
                                <span asp-validation-for="BranchesJson" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="TypeId"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-id-badge"></i></div>
                                    <input asp-for="TypeName" class="form-control" />
                                </div>
                                <span asp-validation-for="TypeId" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="Languages"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-language"></i></div>
                                    <input id="LanguagesHelper" class="form-control" />
                                </div>
                                <span asp-validation-for="Languages" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-2">
                                <div class="col-sm-6">
                                    <label class="form-label d-block" asp-for="IsCompany"></label>
                                    <input type="checkbox" asp-for="IsCompany" class="switch" />
                                    <span asp-validation-for="IsCompany" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="form-label" asp-for="Vat"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-barcode"></i></span>
                                    <input asp-for="Vat" class="form-control" />
                                    <span asp-validation-for="Vat" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="group mt-4">
                            <div class="group-header">@Localizer["Customer_Tab_Address"]</div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.AddressLine1"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="Address.AddressLine1" class="form-control" />
                                        <span asp-validation-for="Address.AddressLine1" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.AddressLine2"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="Address.AddressLine2" class="form-control" />
                                        <span asp-validation-for="Address.AddressLine2" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.Zip"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signs-post"></i></span>
                                        <input asp-for="Address.Zip" class="form-control" />
                                        <span asp-validation-for="Address.Zip" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.City"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-city"></i></span>
                                        <input asp-for="Address.City" class="form-control" />
                                        <span asp-validation-for="Address.City" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.CountryCode"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                        <input asp-for="CountryName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="Address.CountryCode" class="invalid-feedback"></span>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="Address.State"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-map"></i></div>
                                        <input asp-for="StateName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="Address.State" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>

                        <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-6">
                                <label class="form-label" asp-for="Contact.Email"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
                                    <input asp-for="Contact.Email" class="form-control" />
                                    <span asp-validation-for="Contact.Email" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="Contact.Web"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa-brands fa-fw fa-chrome"></i></span>
                                    <input asp-for="Contact.Web" class="form-control" />
                                    <span asp-validation-for="Contact.Web" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Mobile"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-mobile-screen"></i></span>
                                    <input asp-for="Contact.Mobile" class="form-control" />
                                    <span asp-validation-for="Contact.Mobile" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Phone"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-phone"></i></span>
                                    <input asp-for="Contact.Phone" class="form-control" />
                                    <span asp-validation-for="Contact.Phone" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Fax"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-fax"></i></span>
                                    <input asp-for="Contact.Fax" class="form-control" />
                                    <span asp-validation-for="Contact.Fax" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="group mt-4">
                            <div class="group-header">@Localizer["Customer_Contact_Person"]</div>
                            <div class="row mb-2">
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="Title"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-graduation-cap"></i></span>
                                        <input asp-for="Title" class="form-control" />
                                        <span asp-validation-for="Title" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="FirstName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="FirstName" class="form-control" />
                                        <span asp-validation-for="FirstName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="LastName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="LastName" class="form-control" />
                                        <span asp-validation-for="LastName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MarkupListing"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-percent"></i></div>
                                    <input id="MarkupListingHelper" class="form-control" autocomplete="off" list="autocompleteOff" />
                                </div>
                                <span asp-validation-for="MarkupListing" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MarkupAdvertisement"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-percent"></i></div>
                                    <input id="MarkupAdvertisementHelper" class="form-control" autocomplete="off" list="autocompleteOff" />
                                </div>
                                <span asp-validation-for="MarkupAdvertisement" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MarkupPin"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-percent"></i></div>
                                    <input id="MarkupPinHelper" class="form-control" autocomplete="off" list="autocompleteOff" />
                                </div>
                                <span asp-validation-for="MarkupPin" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MarkupBanner"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-panorama"></i></div>
                                    <input id="MarkupBannerHelper" class="form-control" autocomplete="off" list="autocompleteOff" />
                                </div>
                                <span asp-validation-for="MarkupBanner" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label d-block" asp-for="PaymentOnInvoice"></label>
                                <input type="checkbox" asp-for="PaymentOnInvoice" class="switch" />
                                <span asp-validation-for="PaymentOnInvoice" class="invalid-feedback"></span>
                            </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.Logo))
                                    {
                                        <img id="logoImage" src="/file/temp/@Model.Logo" class="upload-image-169-container" alt="" />
                                    }
                                    else
                                    {
                                        <img id="logoImage" class="upload-image-169-container" alt="" />
                                    }
                                </div>
                                <div class="text-center">
                                    <span asp-validation-for="Logo" class="invalid-feedback"></span>
                                </div>
                                <div class="text-center mt-2">
                                    <button type="button" id="btnUploadLogo" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-edit"></i></button>
                                    <button type="button" id="btnDeleteLogo" 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["Customer_Logo_Desc1"]</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pt-3 ">
                        <div class="alert alert-info">@Localizer["Customer_Mangopay_Desc"]</div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MangopayCompanyName"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-cash-register"></i></span>
                                    <input asp-for="MangopayCompanyName" class="form-control" />
                                    <span asp-validation-for="MangopayCompanyName" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MangopayEmail"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
                                    <input asp-for="MangopayEmail" class="form-control" />
                                    <span asp-validation-for="MangopayEmail" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-6">
                                <label class="form-label" asp-for="MangopayRegistrationNumber"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-hashtag"></i></span>
                                    <input asp-for="MangopayRegistrationNumber" class="form-control" />
                                    <span asp-validation-for="MangopayRegistrationNumber" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label d-block" asp-for="MangopayTermsAccepted"></label>
                                <input type="checkbox" asp-for="MangopayTermsAccepted" class="switch" />
                                <span asp-validation-for="MangopayTermsAccepted" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="group mt-4">
                            <div class="group-header">@Localizer["Customer_MangopayAddress"]</div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.AddressLine1"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="MangopayAddress.AddressLine1" class="form-control" />
                                        <span asp-validation-for="MangopayAddress.AddressLine1" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.AddressLine2"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="MangopayAddress.AddressLine2" class="form-control" />
                                        <span asp-validation-for="MangopayAddress.AddressLine2" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.Zip"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signs-post"></i></span>
                                        <input asp-for="MangopayAddress.Zip" class="form-control" />
                                        <span asp-validation-for="MangopayAddress.Zip" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.City"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-city"></i></span>
                                        <input asp-for="MangopayAddress.City" class="form-control" />
                                        <span asp-validation-for="MangopayAddress.City" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.CountryCode"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                        <input asp-for="MangopayCountryName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="MangopayAddress.CountryCode" class="invalid-feedback"></span>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label" asp-for="MangopayAddress.State"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-map"></i></div>
                                        <input asp-for="MangopayStateName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="MangopayAddress.State" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="group mt-4">
                            <div class="group-header">@Localizer["Customer_MangopayPerson"]</div>
                            <div class="row mb-2">
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactFirstName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="MangopayContactFirstName" class="form-control" />
                                        <span asp-validation-for="MangopayContactFirstName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactLastName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="MangopayContactLastName" class="form-control" />
                                        <span asp-validation-for="MangopayContactLastName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactBirthdate"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-calendar"></i></div>
                                        <input asp-for="MangopayContactBirthdate" class="form-control" />
                                    </div>
                                    <span asp-validation-for="MangopayContactBirthdate" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactEmail"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
                                        <input asp-for="MangopayContactEmail" class="form-control" />
                                        <span asp-validation-for="MangopayContactEmail" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactNationality"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                        <input asp-for="MangopayContactNationalityName" class="form-control"/>
                                    </div>
                                    <span asp-validation-for="MangopayContactNationality" class="invalid-feedback"></span>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="MangopayContactMainResidenceCode"></label>
                                    <div class="e-input-group">
                                        <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                        <input asp-for="MangopayContactMainResidenceCodeName" class="form-control"/>
                                    </div>
                                    <span asp-validation-for="MangopayContactMainResidenceCode" class="invalid-feedback"></span>
                                </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("jsLookupTypesUrl", Url.Action("Lookup", "CustomerType", new { includeNone = true }))
    @Html.Hidden("jsLookupBranchesUrl", Url.Action("Lookup", "Branch", new { includeNone = true }))
    @Html.Hidden("jsLookupBranchesListingsUrl", Url.Action("LookupListings", "Branch"))
    @Html.Hidden("jsLookupCountriesUrl", Url.Action("LookupCountries", "Country"))
    @Html.Hidden("jsLookupStatesUrl", Url.Action("LookupStates", "Country"))
    @Html.Hidden("jsGetLanguagesUrl", Url.Action("GetLanguages", "Common"))
    @Html.Hidden("jsUploadUrl", Url.Action("UploadTempFile", "Common"))
    @Html.Hidden("jsRemoveUrl", Url.Action("RemoveTempFile", "Common"))
    <system-js url="~/scripts/Views/Customer/create.js" fresh-import="true"></system-js>
</section>