@model (string WidgetZone, int ProductId, string ProductCost)

@if (Model.ProductId > 0)
{
    <div>
        <div class="add-to-cart-panel" id="paypal-button-container@($"-{Model.ProductId}")"></div>
         <div
            data-pp-message
            data-pp-layout="text"
            data-pp-placement="product"
            data-pp-amount="@Model.ProductCost">
        </div>
    </div>
}
else
{
    <script asp-location="Footer">
        $(function() {
            $('#checkout').after('<div id="paypal-button-container"></div>');
            $('#checkout').hide();

            $('#paypal-button-container').after('<div data-pp-message data-pp-layout="text" data-pp-placement="cart"></div>');
        });
    </script>
}

<script asp-location="Footer">
    $(function() {
        var paymentForm = paypal.Buttons({
            fundingSource: paypal.FUNDING.PAYPAL,
            onClick: function (e, n) {
                if ($('#checkout').length > 0) {
                    $('#checkout').trigger("click");
                }
                if ($('#add-to-cart-button-@Model.ProductId').length > 0) {
                    $('#add-to-cart-button-@Model.ProductId').trigger('click');
                }
                return false;
            },
            style: {
                layout: '@settings.StyleLayout',
                color: '@settings.StyleColor',
                shape: '@settings.StyleShape',
                label: '@settings.StyleLabel',
                tagline: '@settings.StyleTagline'
            }
        });
        if (paymentForm) {
            paymentForm.render('#paypal-button-container@(Model.ProductId > 0 ? $"-{Model.ProductId}" : null)');
        }
    });
</script>