@model ConfigurationModel

@{
    Layout = "_ConfigurePlugin";
    NopHtml.SetActiveMenuItemSystemName($"{PayPalCommerceDefaults.SystemName} Configuration");

    //tour step
    ViewBag.TourStep = TourStep.PaymentPayPal;

    var learnMore = "<p>Learn more about the PayPal Commerce plugin configuration <a href='https://docs.nopcommerce.com/getting-started/configure-payments/payment-methods/paypal-commerce.html' target='_blank'>here</a>.</p>";
}

@await Html.PartialAsync("_AdminTour")

@await Component.InvokeAsync(typeof(StoreScopeConfigurationViewComponent))

@if (Model.IsConfigured)
{
    @await Component.InvokeAsync(typeof(SettingModeViewComponent))
}

<script>
    $(function () {
        if ($('#@Html.IdFor(model => model.SetCredentialsManually)').length > 0) {
            $('#@Html.IdFor(model => model.SetCredentialsManually)').click(toggleCredentials);
        }
        if ($('#@Html.IdFor(model => model.UseSandbox)').length > 0) {
            $('#@Html.IdFor(model => model.UseSandbox)').change(toggleUseSandbox);
        }
        $('#@Html.IdFor(model => model.UseApplePay)').change(toggleUseApplePay);
        toggleCredentials();
        toggleUseSandbox();
        toggleUseApplePay();
    });

    function toggleCredentials() {
        if ($('#@Html.IdFor(model => model.SetCredentialsManually)').length > 0) {
            if ($('#@Html.IdFor(model => model.SetCredentialsManually)').is(':checked')) {
                $('#pnlOnboarding').hideElement();
                $('#pnlCredentials').showElement();
                $('#pnlDescription').showElement();
                @if (!Model.IsConfigured)
                {
                    <text>
                        $('#pnlSave').showElement();
                        $('#pnlLearnMore').showElement();
                    </text>
                }
            }
            else {
                $('#pnlOnboarding').showElement();
                $('#pnlCredentials').hideElement();
                $('#pnlDescription').hideElement();
                @if (!Model.IsConfigured)
                {
                    <text>
                        $('#pnlSave').hideElement();
                        $('#pnlLearnMore').hideElement();
                    </text>
                }
            }
        } else {
            $('#pnlOnboarding').showElement();
            $('#pnlLearnMore').hideElement();
        }
    }

    function toggleUseSandbox() {
        if ($('#@Html.IdFor(model => model.UseSandbox)').length > 0) {
            var useSandbox = $('#@Html.IdFor(model => model.UseSandbox)').is(':checked');
            if ($('#onboardingButton').length > 0) {
                if (useSandbox == true) {
                    $('#onboardingButton').prop('href', '@Html.Raw(Model.SandboxSignUpUrl)');
                    $('#onboardingButton').html('@T("Plugins.Payments.PayPalCommerce.Onboarding.Button.Sandbox")');
                } else {
                    $('#onboardingButton').prop('href', '@Html.Raw(Model.LiveSignUpUrl)');
                    $('#onboardingButton').html('@T("Plugins.Payments.PayPalCommerce.Onboarding.Button")');
                }
            }
        }
    }

    function toggleUseApplePay() {
        warningValidation('@Url.Action("ChangeUseApplePay", "PayPalCommerce")', '@Html.NameFor(model => model.UseApplePay)', { enabled: $('#@Html.IdFor(model => model.UseApplePay)').is(':checked') });
    }
</script>

<form asp-controller="PayPalCommerce" asp-action="Configure" method="post">
    <div class="cards-group">
        <div class="card card-default card-outline card-info" id="pnlOnboarding">
            <div class="card-header">
                @T("Plugins.Payments.PayPalCommerce.Onboarding.Title")
            </div>
            <div class="card-body">
                <p>
                    Complete onboarding to configure the plugin automatically and start accepting PayPal payments in your store.<br />
                    <em>Read more about <a href="https://www.paypal.com/us/webapps/mpp/security/seller-protection" target="_blank">Seller Protection Policy</a>.</em>
                </p>
                <hr />
                @if (Model.MerchantModel.DisplayStatus)
                {
                    <div class="onboarding-step-@(Model.MerchantModel.AccountCreated ? "completed" : "in-process")">
                        @if (Model.MerchantModel.AccountCreated)
                        {
                            <i class="fas fa-check true-icon" nop-value="true"></i>
                        }
                        else
                        {
                            <i class="fas fa-times false-icon" nop-value="false"></i>
                        }
                        @T("Plugins.Payments.PayPalCommerce.Onboarding.Process.Account.Success")
                    </div>
                    <div class="onboarding-step-@(Model.MerchantModel.EmailConfirmed ? "completed" : "in-process")">
                        @if (Model.MerchantModel.EmailConfirmed)
                        {
                            <i class="fas fa-check true-icon" nop-value="true"></i>
                        }
                        else
                        {
                            <i class="fas fa-times false-icon" nop-value="false"></i>
                        }
                        @T("Plugins.Payments.PayPalCommerce.Onboarding.Process.Email.Success")
                    </div>
                    <div class="onboarding-step-@(Model.MerchantModel.PaymentsReceivable ? "completed" : "in-process")">
                        @if (Model.MerchantModel.PaymentsReceivable)
                        {
                            <i class="fas fa-check true-icon" nop-value="true"></i>
                        }
                        else
                        {
                            <i class="fas fa-times false-icon" nop-value="false"></i>
                        }
                        @T("Plugins.Payments.PayPalCommerce.Onboarding.Process.Payments.Success")
                    </div>
                    <hr />
                }
                @if (!Model.SetCredentialsManually && !string.IsNullOrEmpty(Model.MerchantId))
                {
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="MerchantId" />
                        </div>
                        <div class="col-md-9">
                            <div class="form-text-row">@Model.MerchantId</div>
                        </div>
                    </div>
                    @if (Model.UseSandbox)
                    {
                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <div class="callout">
                                    @T("Plugins.Payments.PayPalCommerce.Onboarding.Sandbox")
                                </div>
                            </div>
                        </div>
                    }
                }
                <div class="form-group row">
                    <div class="col-md-9 offset-md-3 mb-3">
                        @if (!string.IsNullOrEmpty(Model.UseSandbox ? Model.SandboxSignUpUrl : Model.LiveSignUpUrl))
                        {
                            <a id="onboardingButton" href="@(Model.UseSandbox ? Model.SandboxSignUpUrl : Model.LiveSignUpUrl)" target="_blank" class="btn btn-info" data-paypal-onboard-complete="onboardedCallback" data-paypal-button="true" onclick="return onboarding();">
                                @T("Plugins.Payments.PayPalCommerce.Onboarding.Button")
                            </a>
                            <script src="@PayPalCommerceDefaults.Onboarding.ScriptUrl" id="paypal-js"></script>
                            <script asp-location="Footer">
                                function onboarding() {
                                    var postData = {
                                        MerchantGuid: '@Model.MerchantGuid',
                                        UseSandbox: $('#@Html.IdFor(model => model.UseSandbox)').is(':checked')
                                    };
                                    addAntiForgeryToken(postData);
                                    $.ajax({
                                        cache: false,
                                        type: 'POST',
                                        url: '@Url.Action("Onboarding", "PayPalCommerce")',
                                        data: postData,
                                        success: function (data, textStatus, jqXHR) {
                                            if (data.error) {
                                                showAlert('signUpFailed', data.error);
                                            }
                                        },
                                        error: function (jqXHR, textStatus, errorThrown) {
                                            showAlert('signUpFailed', errorThrown);
                                        },
                                    });
                                }
                                function onboardedCallback(authCode, sharedId) {
                                    var postData = {
                                        StoreId: '@Model.ActiveStoreScopeConfiguration',
                                        SharedId: sharedId,
                                        AuthCode: authCode
                                    };
                                    addAntiForgeryToken(postData);
                                    $.ajax({
                                        cache: false,
                                        type: 'POST',
                                        url: '@Url.Action("SignUp", "PayPalCommerce")',
                                        data: postData,
                                        success: function (data, textStatus, jqXHR) {
                                            if (data.error) {
                                                showAlert('signUpFailed', data.error);
                                            }
                                        },
                                        error: function (jqXHR, textStatus, errorThrown) {
                                            showAlert('signUpFailed', errorThrown);
                                        },
                                    });
                                }
                            </script>
                        }
                        else
                        {
                            <button type="submit" name="revoke" class="btn btn-danger">
                                @T("Plugins.Payments.PayPalCommerce.Onboarding.ButtonRevoke")
                            </button>
                        }
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-12">
                        @Html.Raw(learnMore)
                    </div>
                </div>
            </div>
        </div>
        <div class="card card-default">
            <div class="card-body">
                <p id="pnlDescription" class="d-none">
                    You must set up your development environment to get OAuth 2.0 client ID and secret credentials for the sandbox and live environments.<br />
                    Follow these steps to generate REST API credentials:<br />
                    1. <a href="https://developer.paypal.com/developer/applications" target="_blank">Log into the Developer Dashboard</a> with your PayPal account credentials. If you don't have an account, you can click on the <b>sign up</b> option.<br />
                    2. On <b>My Apps & Credentials</b>, use the toggle to switch between live and sandbox testing apps.<br />
                    3. Navigate to the <b>REST API apps</b> section and click <b>Create App</b>.<br />
                    4. Type a name for your app and click <b>Create App</b>. The app details page opens and displays your credentials.<br />
                    5. Copy and save the client ID and secret for your app.<br />
                    6. Find the merchant ID of your PayPal account and copy it.<br />
                    7. Review your app details and save your app.<br />
                    <br />
                </p>
                @if (!Model.IsConfigured || Model.SetCredentialsManually)
                {
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseSandbox_OverrideForStore" asp-input="UseSandbox" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseSandbox" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseSandbox" />
                            <span asp-validation-for="UseSandbox"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="SetCredentialsManually_OverrideForStore" asp-input="SetCredentialsManually" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="SetCredentialsManually" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="SetCredentialsManually" />
                            <span asp-validation-for="SetCredentialsManually"></span>
                        </div>
                    </div>
                    <nop-nested-setting asp-for="SetCredentialsManually" id="pnlCredentials" disable-auto-generation="true">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-override-store-checkbox asp-for="ClientId_OverrideForStore" asp-input="ClientId" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                <nop-label asp-for="ClientId" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="ClientId" asp-required="true" />
                                <span asp-validation-for="ClientId"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-override-store-checkbox asp-for="SecretKey_OverrideForStore" asp-input="SecretKey" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                <nop-label asp-for="SecretKey" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="SecretKey" asp-required="true" html-attributes="@(new { value = Model.SecretKey })" />
                                <span asp-validation-for="SecretKey"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-override-store-checkbox asp-for="MerchantId_OverrideForStore" asp-input="MerchantId" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                <nop-label asp-for="MerchantId" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="MerchantId" asp-required="true" />
                                <span asp-validation-for="MerchantId"></span>
                            </div>
                        </div>
                    </nop-nested-setting>
                }
                @if (Model.IsConfigured)
                {
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="PaymentTypeId_OverrideForStore" asp-input="PaymentTypeId" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="PaymentTypeId" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="PaymentTypeId" asp-items="Model.PaymentTypes" />
                            <span asp-validation-for="PaymentTypeId"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseCardFields_OverrideForStore" asp-input="UseCardFields" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseCardFields" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseCardFields" html-attributes="@(Model.SetCredentialsManually || Model.MerchantModel.AdvancedCardsEnabled ? null : new { disabled = true })" />
                            <span asp-validation-for="UseCardFields"></span>
                        </div>
                    </div>
                    <nop-nested-setting asp-for="UseCardFields">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-override-store-checkbox asp-for="CustomerAuthenticationRequired_OverrideForStore" asp-input="CustomerAuthenticationRequired" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                <nop-label asp-for="CustomerAuthenticationRequired" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="CustomerAuthenticationRequired" />
                                <span asp-validation-for="CustomerAuthenticationRequired"></span>
                            </div>
                        </div>
                    </nop-nested-setting>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseApplePay_OverrideForStore" asp-input="UseApplePay" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseApplePay" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseApplePay" html-attributes="@(Model.SetCredentialsManually || Model.MerchantModel.ApplePayEnabled ? null : new { disabled = true })" />
                            <span asp-validation-for="UseApplePay"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseGooglePay_OverrideForStore" asp-input="UseGooglePay" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseGooglePay" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseGooglePay" html-attributes="@(Model.SetCredentialsManually || Model.MerchantModel.GooglePayEnabled ? null : new { disabled = true })" />
                            <span asp-validation-for="UseGooglePay"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseAlternativePayments_OverrideForStore" asp-input="UseAlternativePayments" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseAlternativePayments" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseAlternativePayments" />
                            <span asp-validation-for="UseAlternativePayments"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="UseVault_OverrideForStore" asp-input="UseVault" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="UseVault" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseVault" html-attributes="@(Model.SetCredentialsManually || Model.MerchantModel.VaultingEnabled ? null : new { disabled = true })" />
                            <span asp-validation-for="UseVault"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-override-store-checkbox asp-for="SkipOrderConfirmPage_OverrideForStore" asp-input="SkipOrderConfirmPage" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                            <nop-label asp-for="SkipOrderConfirmPage" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="SkipOrderConfirmPage" />
                            <span asp-validation-for="SkipOrderConfirmPage"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="UseShipmentTracking" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseShipmentTracking" />
                            <span asp-validation-for="UseShipmentTracking"></span>
                        </div>
                    </div>
                    <div id="prominently-card" class="card card-default advanced-setting">
                        <div class="card-header">
                            @T("Plugins.Payments.PayPalCommerce.Prominently")
                        </div>
                        <div class="card-body">
                            <p>
                                Build customer trust with PayPal branding on your website.<br />
                                Feature the PayPal button on all pages that initiate checkout. Including PayPal branding early in the checkout experience helps increase site conversion. You can also attract new customers to your site by announcing PayPal acceptance.<br />
                                <em>TIP: You can find more PayPal logos and banners on <a href="https://www.paypal.com/gd/webapps/mpp/logo-center" target="_blank">PayPal Logo Center</a></em>
                                <br />
                            </p>
                            <div class="form-group row advanced-setting">
                                <div class="col-md-3">
                                    <nop-override-store-checkbox asp-for="DisplayButtonsOnShoppingCart_OverrideForStore" asp-input="DisplayButtonsOnShoppingCart" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                    <nop-label asp-for="DisplayButtonsOnShoppingCart" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="DisplayButtonsOnShoppingCart" />
                                    <span asp-validation-for="DisplayButtonsOnShoppingCart"></span>
                                </div>
                            </div>
                            <div class="form-group row advanced-setting">
                                <div class="col-md-3">
                                    <nop-override-store-checkbox asp-for="DisplayButtonsOnProductDetails_OverrideForStore" asp-input="DisplayButtonsOnProductDetails" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                    <nop-label asp-for="DisplayButtonsOnProductDetails" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="DisplayButtonsOnProductDetails" />
                                    <span asp-validation-for="DisplayButtonsOnProductDetails"></span>
                                </div>
                            </div>
                            <div class="form-group row advanced-setting">
                                <div class="col-md-3">
                                    <nop-override-store-checkbox asp-for="DisplayLogoInHeaderLinks_OverrideForStore" asp-input="DisplayLogoInHeaderLinks" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                    <nop-label asp-for="DisplayLogoInHeaderLinks" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="DisplayLogoInHeaderLinks" />
                                    <span asp-validation-for="DisplayLogoInHeaderLinks"></span>
                                </div>
                            </div>
                            <nop-nested-setting asp-for="DisplayLogoInHeaderLinks">
                                <div class="form-group row advanced-setting">
                                    <div class="col-md-3">
                                        <nop-override-store-checkbox asp-for="LogoInHeaderLinks_OverrideForStore" asp-input="LogoInHeaderLinks" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                        <nop-label asp-for="LogoInHeaderLinks" />
                                    </div>
                                    <div class="col-md-9">
                                        <nop-textarea asp-for="LogoInHeaderLinks" />
                                        <span asp-validation-for="LogoInHeaderLinks"></span>
                                    </div>
                                </div>
                            </nop-nested-setting>
                            <div class="form-group row advanced-setting">
                                <div class="col-md-3">
                                    <nop-override-store-checkbox asp-for="DisplayLogoInFooter_OverrideForStore" asp-input="DisplayLogoInFooter" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                    <nop-label asp-for="DisplayLogoInFooter" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="DisplayLogoInFooter" />
                                    <span asp-validation-for="DisplayLogoInFooter"></span>
                                </div>
                            </div>
                            <nop-nested-setting asp-for="DisplayLogoInFooter">
                                <div class="form-group row advanced-setting">
                                    <div class="col-md-3">
                                        <nop-override-store-checkbox asp-for="LogoInFooter_OverrideForStore" asp-input="LogoInFooter" asp-store-scope="@Model.ActiveStoreScopeConfiguration" />
                                        <nop-label asp-for="LogoInFooter" />
                                    </div>
                                    <div class="col-md-9">
                                        <nop-textarea asp-for="LogoInFooter" />
                                        <span asp-validation-for="LogoInFooter"></span>
                                    </div>
                                </div>
                            </nop-nested-setting>
                        </div>
                    </div>
                    <div class="form-group row"></div>
                }
                <div class="form-group row" id="pnlSave">
                    <div class="col-md-9 offset-md-3">
                        <button type="submit" name="save" class="btn btn-primary">@T("Admin.Common.Save")</button>
                    </div>
                </div>
                <div class="form-group row" id="pnlLearnMore">
                    <div class="col-12">
                        @Html.Raw(learnMore)
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<nop-alert asp-alert-id="signUpFailed" />