@model OnePageCheckoutModel
@using Nop.Core
@using Nop.Services.Customers
@inject IWebHelper webHelper
@inject IWorkContext workContext
@inject ICustomerService _customerService
@{
    Layout = "_ColumnsOne";

    var storeLocation = webHelper.GetStoreLocation();

    //title
    NopHtml.AddTitleParts(T("PageTitle.Checkout").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-checkout-page");
}
@{
    //step numbers
    var billingAddressStepNumber = 1;
    var shippingAddressStepNumber = 2;
    var shippingMethodStepNumber = 3;
    var paymentMethodStepNumber = 4;
    var paymentInfoStepNumber = 5;
    var confirmOrderStepNumber = 6;
    if (!Model.ShippingRequired)
    {
        paymentMethodStepNumber = paymentMethodStepNumber - 2;
        paymentInfoStepNumber = paymentInfoStepNumber - 2;
        confirmOrderStepNumber = confirmOrderStepNumber - 2;
    }
    if (Model.DisableBillingAddressCheckoutStep)
    {
        shippingAddressStepNumber--;
        shippingMethodStepNumber--;
        paymentMethodStepNumber--;
        paymentInfoStepNumber--;
        confirmOrderStepNumber--;
    }
}

<script src="~/js/public.accordion.js" asp-location="Footer"></script>
<script src="~/js/public.onepagecheckout.js" asp-location="Footer"></script>

<div class="page checkout-page">
    <div class="page-title">
        <h1>@T("Checkout")</h1>
    </div>
    <div class="page-body checkout-data">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.OpcContentBefore, additionalData = Model })
        <ol class="opc" id="checkout-steps">
            <li id="opc-billing" class="tab-section allow">
                <div class="step-title">
                    <span class="number">@billingAddressStepNumber</span>
                    <h2 class="title">@T("Checkout.BillingAddress")</h2>
                </div>
                <div id="checkout-step-billing" class="step a-item" style="display: none;">
                    <form id="co-billing-form" action="" method="post">
                        <div id="checkout-billing-load">
                            @await Html.PartialAsync("OpcBillingAddress", Model.BillingAddress)
                            @*billing address content will be loaded here*@
                        </div>
                    </form>
                    <script asp-location="Footer">
                        Billing.init('#co-billing-form', '@(storeLocation)checkout/OpcSaveBilling/',
                            @(Model.DisableBillingAddressCheckoutStep.ToString().ToLowerInvariant()),
                            @((await _customerService.IsGuestAsync(await workContext.GetCurrentCustomerAsync())).ToString().ToLowerInvariant()));
                        if ($("#billing-address-select").length > 0) {
                            Billing.newAddress(!$('#billing-address-select').val());
                        }
                    </script>
                    <div class="buttons" id="billing-buttons-container">
                        <button id="save-billing-address-button" type="button" class="button-1" style="display: none" onclick="Billing.saveEditAddress('@(storeLocation)checkout/SaveEditBillingAddress/'); return false;">@T("Common.Save")</button>

                        <button type="button" name="save" class="button-1 new-address-next-step-button" onclick="Billing.save()">@T("Common.Continue")</button>

                        <span class="please-wait" id="billing-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                    </div>
                </div>
            </li>
            @if (Model.ShippingRequired)
            {
                <li id="opc-shipping" class="tab-section">
                    <div class="step-title">
                        <span class="number">@shippingAddressStepNumber</span>
                        <h2 class="title">@T("Checkout.ShippingAddress")</h2>
                    </div>
                    <div id="checkout-step-shipping" class="step a-item" style="display: none;">
                        <form action="" id="co-shipping-form" method="post">
                            <div id="checkout-shipping-load">
                                @*shipping address content will be loaded here*@
                            </div>
                        </form>
                        <script asp-location="Footer">
                            Shipping.init('#co-shipping-form', '@(storeLocation)checkout/OpcSaveShipping/');
                            if ($("#shipping-address-select").length > 0) {
                                Shipping.newAddress($('#shipping-address-select').val(), @Model.BillingAddress.BillingNewAddress.Id);
                            }
                        </script>
                        <div class="buttons" id="shipping-buttons-container">
                            @if (!Model.DisableBillingAddressCheckoutStep)
                            {
                                <p class="back-link">
                                    <a href="#" onclick="Checkout.back(); return false; "><small>&laquo; </small>@T("Common.Back")</a>
                                </p>
                            }

                            <span id="edit-shipping-address-buttons">
                                <button id="save-shipping-address-button" type="button" class="button-1" style="display: none" onclick="Shipping.saveEditAddress('@(storeLocation)checkout/SaveEditShippingAddress/'); return false;">@T("Common.Save")</button>
                            </span>

                            <button type="button" class="button-1 new-address-next-step-button" onclick="Shipping.save()">@T("Common.Continue")</button>
                            <span id="shipping-please-wait" class="please-wait" style="display: none;"> @T("Common.LoadingNextStep")</span>
                        </div>
                    </div>
                </li>
                <li id="opc-shipping_method" class="tab-section">
                    <div class="step-title">
                        <span class="number">@shippingMethodStepNumber</span>
                        <h2 class="title">@T("Checkout.ShippingMethod")</h2>
                    </div>
                    <div id="checkout-step-shipping-method" class="step a-item" style="display: none;">
                        <form id="co-shipping-method-form" action="" method="post">
                            <div id="checkout-shipping-method-load">
                                @*shipping methods content will be loaded here*@
                            </div>
                            <script asp-location="Footer">
                                var localized_data = {
                                    NotAvailableMethodsError: "@T("ShippingMethod.NotAvailableMethodsError")",
                                    SpecifyMethodError: "@T("ShippingMethod.SpecifyMethodError")"
                                };
                                ShippingMethod.init('#co-shipping-method-form', '@(storeLocation)checkout/OpcSaveShippingMethod/', localized_data);
                            </script>
                            <div class="buttons" id="shipping-method-buttons-container">
                                <p class="back-link">
                                    <a href="#" onclick="Checkout.back(); return false;"><small>&laquo; </small>@T("Common.Back")</a>
                                </p>
                                <button type="button" class="button-1 shipping-method-next-step-button" onclick="ShippingMethod.save()">@T("Common.Continue")</button>
                                <span id="shipping-method-please-wait" class="please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                            </div>
                        </form>
                    </div>
                </li>
            }
            <li id="opc-payment_method" class="tab-section">
                <div class="step-title">
                    <span class="number">@paymentMethodStepNumber</span>
                    <h2 class="title">@T("Checkout.PaymentMethod")</h2>
                </div>
                <div id="checkout-step-payment-method" class="step a-item" style="display: none;">
                    <form action="" id="co-payment-method-form" method="post">
                        <div id="checkout-payment-method-load">
                            @*payment methods content will be loaded here*@ Payment is not required
                        </div>
                    </form>
                    <script asp-location="Footer">
                        var localized_data = {
                            NotAvailableMethodsError: "@T("PaymentMethod.NotAvailableMethodsError")",
                            SpecifyMethodError: "@T("PaymentMethod.SpecifyMethodError")"
                        };
                        PaymentMethod.init('#co-payment-method-form', '@(storeLocation)checkout/OpcSavePaymentMethod/', localized_data);
                    </script>
                    <div class="buttons" id="payment-method-buttons-container">
                        <p class="back-link">
                            <a href="#" onclick="Checkout.back(); return false;"><small>&laquo; </small>@T("Common.Back")</a>
                        </p>
                        <button type="button" name="save" class="button-1 payment-method-next-step-button" onclick="PaymentMethod.save()">@T("Common.Continue")</button>
                        <span class="please-wait" id="payment-method-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                    </div>
                </div>
            </li>
            <li id="opc-payment_info" class="tab-section">
                <div class="step-title">
                    <span class="number">@paymentInfoStepNumber</span>
                    <h2 class="title">@T("Checkout.PaymentInfo")</h2>
                </div>
                <div id="checkout-step-payment-info" class="step a-item" style="display: none;">
                    <form action="" id="co-payment-info-form" method="post">
                        <div id="checkout-payment-info-load">
                            @*payment info content will be loaded here*@ Payment is not required
                        </div>
                    </form>
                    <script asp-location="Footer">
                        PaymentInfo.init('#co-payment-info-form', '@(storeLocation)checkout/OpcSavePaymentInfo/');
                    </script>
                    <div class="buttons" id="payment-info-buttons-container">
                        <p class="back-link">
                            <a href="#" onclick="Checkout.back(); return false;"><small>&laquo; </small>@T("Common.Back")</a>
                        </p>
                        <button type="button" class="button-1 payment-info-next-step-button" onclick="PaymentInfo.save()">@T("Common.Continue")</button>
                        <span class="please-wait" id="payment-info-please-wait" style="display: none;">@T("Common.LoadingNextStep")</span>
                    </div>
                </div>
            </li>
            <li id="opc-confirm_order" class="tab-section">
                <div class="step-title">
                    <span class="number">@confirmOrderStepNumber</span>
                    <h2 class="title">@T("Checkout.ConfirmOrder")</h2>
                </div>
                <div id="checkout-step-confirm-order" class="step a-item" style="display: none;">
                    <div id="checkout-confirm-order-load">
                        @*confirm order content will be loaded here*@
                    </div>
                    <script asp-location="Footer">
                        ConfirmOrder.init('@(storeLocation)checkout/OpcConfirmOrder/', '@Url.RouteUrl("CheckoutCompleted")', @Model.DisplayCaptcha.ToString().ToLowerInvariant(), @Model.IsReCaptchaV3.ToString().ToLowerInvariant(), '@Model.ReCaptchaPublicKey', '#checkout-step-confirm-order');
                    </script>
                    <div class="buttons" id="confirm-order-buttons-container">
                        <p class="back-link">
                            <a href="#" onclick="Checkout.back(); return false;"><small>&laquo; </small>@T("Common.Back")</a>
                        </p>
                        <button type="button" class="button-1 confirm-order-next-step-button" onclick="ConfirmOrder.save()">@T("Checkout.ConfirmButton")</button>
                        <span class="please-wait" id="confirm-order-please-wait" style="display: none;">@T("Checkout.SubmittingOrder")</span>
                    </div>
                </div>
            </li>
        </ol>
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.OpcContentAfter, additionalData = Model })
    </div>
    <script asp-location="Footer">
        Accordion.init('checkout-steps', '.step-title', true);
        Accordion.openSection('#opc-billing');
        Checkout.init('@(storeLocation)cart/');
        if (Billing.disableBillingAddressCheckoutStep)
        {
            Accordion.hideSection('#opc-billing');
            Billing.save();
        }
    </script>
</div>