@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using gehGassi.Web.Models
@using gehGassi.Web.Helper
@inject IViewLocalizer Localizer
@model CheckoutAddressVm
@{
    ViewData["Title"] = $"{Localizer["Common_Checkout"].Value} {Localizer["Checkout_Step_2"].Value}";
    string companyRequired = "";
    if (Model.OrderSource == OrderSourceVm.Customer)
    {
        companyRequired = "required";
    }
}

<section id="checkoutAddressContainer">
    <div id="pageTitleAdd" style="display: none;"></div>
    <div class="form">
        @await Html.PartialAsync("_CheckoutHeader", new CheckoutHeaderVm() { Step = 2 })

        <form cb-preventsubmit id="frmCheckoutAddress" asp-controller="Shop" asp-action="CheckoutAddress" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#checkoutAddressContainer">
            <div asp-validation-summary="ModelOnly"></div>
            <input type="hidden" asp-for="ShowForm" />
            <input type="hidden" asp-for="OrderSource" />
            <input type="hidden" asp-for="DeliveryAddress.CountryCode" class="validateAlways" />
            <input type="hidden" asp-for="BillingAddress.CountryCode" class="validateAlways" />
            <input type="hidden" asp-for="DeliveryAddress.State" class="validateAlways" />
            <input type="hidden" asp-for="BillingAddress.State" class="validateAlways" />
            <input type="hidden" asp-for="DeliveryAddress.DeliveryAddressIsBilling" />

            <div id="info" class="@(Model.ShowForm ? "d-none" : "")">
                <div class="row mb-2 justify-content-center">
                    <div class="col-12 col-md-6 mt-2">
                        <h3 class="text-uppercase">
                            @if (Model.DeliveryAddressIsBilling)
                            {
                                @Localizer["Checkout_Address_Both"]
                            }
                            else
                            {
                                @Localizer["Checkout_Address_Billing"]
                            }
                        </h3>
                        <div>@Model.Company</div>
                        <div>
                            @if (!string.IsNullOrWhiteSpace(Model.Title))
                            {
                                <span>@Model.Title </span>
                            }
                            <span>@Model.FirstName @Model.LastName</span>
                        </div>
                        <div>@Model.BillingAddress.AddressLine1</div>
                        @if (!string.IsNullOrWhiteSpace(Model.BillingAddress.AddressLine2))
                        {
                            <div>@Model.BillingAddress.AddressLine2</div>
                        }
                        <div>@Model.BillingAddress.Zip @Model.BillingAddress.City</div>
                        <div>@Model.BillingCountryName</div>
                    </div>
                    @if (!Model.DeliveryAddressIsBilling)
                    {
                        <div class="col-12 col-md-6 mt-2">
                            <h3 class="text-uppercase">@Localizer["Checkout_Address_Delivery"]</h3>
                            <div>@Model.DeliveryCompany</div>
                            <div>
                                @if (!string.IsNullOrWhiteSpace(Model.DeliveryTitle))
                                {
                                    <span>@Model.DeliveryTitle </span>
                                }
                                <span>@Model.DeliveryFirstName @Model.DeliveryLastName</span>
                            </div>
                            <div>@Model.DeliveryAddress.AddressLine1</div>
                            @if (!string.IsNullOrWhiteSpace(Model.DeliveryAddress.AddressLine2))
                            {
                                <div>@Model.DeliveryAddress.AddressLine2</div>
                            }
                            <div>@Model.DeliveryAddress.Zip @Model.DeliveryAddress.City</div>
                            <div>@Model.DeliveryCountryName</div>
                        </div>
                    }
                </div>
                <div class="col-12 text-center">
                    <button type="button" id="btnEditAddress" class="btn btn-secondary"><i class="fa fa-fw fa-pencil"></i></button> @Localizer["Checkout_Address_Edit"]
                </div>
            </div>

            <div id="form" class="@(Model.ShowForm == false ? "d-none" : "")">

                <div class="row mb-2 justify-content-center">

                    <div id="billingAddress" class="col-12 col-xl-6 mt-2">
                        <div style="padding: 1em;">
                            <h4 class="text-uppercase text-center mt-2">@Localizer["Checkout_Address_Billing"]</h4>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label @companyRequired" asp-for="Company"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-building"></i></span>
                                        <input asp-for="Company" class="form-control" />
                                        <span asp-validation-for="Company" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <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="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 class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.AddressLine1"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="BillingAddress.AddressLine1" class="form-control" />
                                        <span asp-validation-for="BillingAddress.AddressLine1" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.AddressLine2"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="BillingAddress.AddressLine2" class="form-control" />
                                        <span asp-validation-for="BillingAddress.AddressLine2" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.Zip"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signs-post"></i></span>
                                        <input asp-for="BillingAddress.Zip" class="form-control" />
                                        <span asp-validation-for="BillingAddress.Zip" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.City"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-city"></i></span>
                                        <input asp-for="BillingAddress.City" class="form-control" />
                                        <span asp-validation-for="BillingAddress.City" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.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="BillingCountryName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="BillingAddress.CountryCode" class="invalid-feedback"></span>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="BillingAddress.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="BillingStateName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="BillingAddress.State" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="row mb-2 mt-4">
                                <div class="col-12">
                                    <div class="form-check mb-4">
                                        <input type="checkbox" asp-for="DeliveryAddressIsBilling" class="form-check-input checkout-checkbox" />
                                        <label class="form-check-label ml-2 small" asp-for="DeliveryAddressIsBilling"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="deliveryAddress" class="col-12 col-xl-6 mt-2 @(Model.DeliveryAddressIsBilling ? "d-none" : "")">
                        <div style="background-color: #efefef; padding: 1em;">
                            <h4 class="text-uppercase text-center mt-2">@Localizer["Checkout_Address_Delivery"]</h4>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label @companyRequired" asp-for="DeliveryCompany"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-building"></i></span>
                                        <input asp-for="DeliveryCompany" class="form-control" />
                                        <span asp-validation-for="DeliveryCompany" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryVat"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-barcode"></i></span>
                                        <input asp-for="DeliveryVat" class="form-control" />
                                        <span asp-validation-for="DeliveryVat" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="DeliveryTitle"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-graduation-cap"></i></span>
                                        <input asp-for="DeliveryTitle" class="form-control" />
                                        <span asp-validation-for="DeliveryTitle" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="DeliveryFirstName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="DeliveryFirstName" class="form-control" />
                                        <span asp-validation-for="DeliveryFirstName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label" asp-for="DeliveryLastName"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
                                        <input asp-for="DeliveryLastName" class="form-control" />
                                        <span asp-validation-for="DeliveryLastName" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.AddressLine1"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="DeliveryAddress.AddressLine1" class="form-control" />
                                        <span asp-validation-for="DeliveryAddress.AddressLine1" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.AddressLine2"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
                                        <input asp-for="DeliveryAddress.AddressLine2" class="form-control" />
                                        <span asp-validation-for="DeliveryAddress.AddressLine2" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.Zip"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-signs-post"></i></span>
                                        <input asp-for="DeliveryAddress.Zip" class="form-control" />
                                        <span asp-validation-for="DeliveryAddress.Zip" class="invalid-feedback"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.City"></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-fw fa-city"></i></span>
                                        <input asp-for="DeliveryAddress.City" class="form-control" />
                                        <span asp-validation-for="DeliveryAddress.City" class="invalid-feedback"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.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="DeliveryCountryName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="DeliveryAddress.CountryCode" class="invalid-feedback"></span>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" asp-for="DeliveryAddress.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="DeliveryStateName" class="form-control" />
                                    </div>
                                    <span asp-validation-for="DeliveryAddress.State" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="form-row button-row">
                <div class="col-12">
                    <div class="">
                        <button type="button" id="btnBack" class="btn btn-primary"><i class="fa fa-fw fa-arrow-left"></i> @Localizer["Button_Back"]</button>
                        <button type="button" id="btnNext" class="btn btn-primary @(Model.ShowForm ? "d-none" : "")">@Localizer["Button_Next"] <i class="fa fa-fw fa-arrow-right"></i> </button>
                        <button type="button" id="btnNextForm" class="btn btn-primary @(Model.ShowForm == false ? "d-none" : "")">@Localizer["Button_Next"] <i class="fa fa-fw fa-arrow-right"></i> </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @Html.Hidden("jsLookupCountriesUrl", Url.Action("LookupCountries", "Country"))
    @Html.Hidden("jsLookupStatesUrl", Url.Action("LookupStates", "Country"))
    <system-js url="~/scripts/Views/Shop/checkoutAddress.js" fresh-import="true"></system-js>

</section>