@using BTCPayServer.Views.Stores
@model BTCPayServer.Plugins.Shopify.Models.ShopifySettings
@{
    ViewData.SetActivePage("shopify", nameof(StoreNavPages), "Shopify", Context.GetStoreData().Id);

    var shopifyCredsSet = Model?.IntegratedAt.HasValue is true;
    var shopifyUrl = Model?.ShopifyUrl;
}

<div class="sticky-header">
    <h2 class="my-1">
        @ViewData["Title"]
        <small>
            <a href="https://docs.btcpayserver.org/Shopify" target="_blank" rel="noreferrer noopener" title="More information...">
                <vc:icon symbol="info" />
            </a>
        </small>
    </h2>
</div>

<partial name="_StatusMessage" />

<div class="row">
    <div class="col-xxl-constrain col-xl-8">
        <p>Connect BTCPay Server to your Shopify checkout experience to accept Bitcoin.</p>

        @if (!ViewContext.ModelState.IsValid)
        {
            <div asp-validation-summary="All"></div>
        }

        <form method="post" id="shopifyForm">
            <div class="form-group">
                <label asp-for="ShopName" class="form-label"></label>
                <div class="input-group">
                    @if (!Model?.ShopName?.Contains(".") is true)
                    {
                        <span class="input-group-text">https://</span>
                    }
                    <input asp-for="ShopName" class="form-control" readonly="@shopifyCredsSet"/>

                    @if (!shopifyCredsSet || !Model?.ShopName?.Contains(".") is true)
                    {
                        <span class="input-group-text">.myshopify.com</span>
                    }
                </div>
                <span asp-validation-for="ShopName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="ApiKey" class="form-label"></label>
                <input asp-for="ApiKey" class="form-control" readonly="@shopifyCredsSet"/>
                <span asp-validation-for="ApiKey" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Password" class="form-label"></label>
                <input asp-for="Password" class="form-control" type="password" value="@Model?.Password" readonly="@shopifyCredsSet"/>
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>

            @if (shopifyCredsSet)
            {
                <div class="alert alert-warning">
                    <h5 class="alert-heading">In Shopify, please do the following …</h5> 
                    <ul>
                        <li>
                            Add a payment method at <a href="@shopifyUrl/admin/settings/payments" class="alert-link fw-bold" target="_blank" rel="noreferrer noopener">Settings &gt; Payments &gt; Manual Payment Methods</a> with the name <strong>Bitcoin with BTCPay Server</strong>
                        </li>
                        <li>
                            Paste this script at <a href="@shopifyUrl/admin/settings/checkout#PolarisTextField1" class="fw-bold alert-link" target="_blank" rel="noreferrer noopener">Settings &gt; Checkout &gt; Order Processing &gt; Additional Scripts</a>:
                            <pre class="mt-2 mb-0 text-wrap">@($"<script src='{Url.Action("ShopifyJavascript", "UIShopify", new { storeId = Context.GetRouteValue("storeId") }, Context.Request.Scheme)}'></script>")</pre>
                        </li>
                    </ul>
                </div>
                <p class="alert alert-success">
                    Orders on <b>@Model.ShopName</b>.myshopify.com will be marked as paid on successful invoice payment.
                    Started: @Model.IntegratedAt.Value.ToBrowserDate()
                </p>

                <button name="command" type="submit" class="btn btn-danger mt-3" value="ShopifyClearCredentials">
                    Stop Shopify calls and clear credentials
                </button>
            }
            else
            {
                <button name="command" type="submit" class="btn btn-primary mt-3" value="ShopifySaveCredentials">
                    Save
                </button>
            }
        </form>
    </div>
</div>