@using BTCPayServer.Payments
@model CheckoutExperienceViewModel
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePageAndTitle(StoreNavPages.Checkout, "Checkout experience", Context.GetStoreData().StoreName);
}

<div class="row">
    <div class="col-lg-8">
        <form method="post">
            @if (!ViewContext.ModelState.IsValid)
            {
                <div asp-validation-summary="All" class="text-danger"></div>
            }
            <h4 class="mb-3">Payment</h4>
            @if (Model.PaymentMethods.Any())
            {
                <div class="form-group mb-4">
                    <label asp-for="DefaultPaymentMethod" class="form-label"></label>
                    <select asp-for="DefaultPaymentMethod" asp-items="Model.PaymentMethods" class="form-select w-auto"></select>
                </div>
                <div class="form-group mb-4">
                    <div class="form-label mb-1">Enable payment methods only when amount is …</div>
                    <table class="table">
                        @for (var index = 0; index < Model.PaymentMethodCriteria.Count; index++)
                        {
                            var criteria = Model.PaymentMethodCriteria[index];
                            <tr>
                                <td class="border-0 ps-0 align-middle">
                                    <input type="hidden" asp-for="PaymentMethodCriteria[index].PaymentMethod"/>
                                    @PaymentMethodId.Parse(criteria.PaymentMethod).ToPrettyString()
                                </td>
                                <td class="border-0">
                                    <select asp-for="PaymentMethodCriteria[index].Type" class="form-select"
                                            asp-items="@((PaymentMethodCriteriaViewModel.CriteriaType[]) Enum.GetValues(typeof(PaymentMethodCriteriaViewModel.CriteriaType))).Select(s => new SelectListItem(PaymentMethodCriteriaViewModel.ToString(s), s.ToString()))">
                                    </select>
                                </td>
                                <td class="border-0">
                                    <input placeholder="6.15 USD" asp-for="PaymentMethodCriteria[index].Value" class="form-control my-0" style="max-width: 20ch;"/>
                                </td>
                            </tr>
                        }
                    </table>
                </div>
            }
            <h5 class="mb-3">General</h5>
            <div class="form-check my-1">
                <input asp-for="RequiresRefundEmail" type="checkbox" class="form-check-input"/>
                <label asp-for="RequiresRefundEmail" class="form-check-label"></label>
            </div>
            <div class="form-check my-1">
                <input asp-for="LazyPaymentMethods" type="checkbox" class="form-check-input" />
                <label asp-for="LazyPaymentMethods" class="form-check-label"></label>
            </div>
            <div class="form-check my-1">
                <input asp-for="RedirectAutomatically" type="checkbox" class="form-check-input" />
                <label asp-for="RedirectAutomatically" class="form-check-label"></label>
            </div>
            <div class="form-check my-1">
                <input asp-for="ShowRecommendedFee" type="checkbox" class="form-check-input"/>
                <label asp-for="ShowRecommendedFee" class="form-check-label"></label>
                <p class="form-text text-muted mb-0">Fee will be shown for BTC and LTC onchain payments only.</p>
            </div>
            <div class="form-group mt-2 mb-4">
                <label asp-for="RecommendedFeeBlockTarget" class="form-label"></label>
                <input asp-for="RecommendedFeeBlockTarget" class="form-control" style="width:8ch" min="1" />
                <span asp-validation-for="RecommendedFeeBlockTarget" class="text-danger"></span>
            </div>
            
            <h5 class="mt-4 mb-3">Lightning</h5>
            <div class="form-check my-1">
                <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input"/>
                <label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
            </div>
            <div class="form-check my-1">
                <input asp-for="LightningPrivateRouteHints" type="checkbox" class="form-check-input"/>
                <label asp-for="LightningPrivateRouteHints" class="form-check-label"></label>
            </div>
            <div class="form-check my-1">
                <input asp-for="OnChainWithLnInvoiceFallback" type="checkbox" class="form-check-input"/>
                <label asp-for="OnChainWithLnInvoiceFallback" class="form-check-label"></label>
            </div>

            <h4 class="mt-5 mb-3">Appearance</h4>
            <div class="form-group">
                <label asp-for="DefaultLang" class="form-label"></label>
                <select asp-for="DefaultLang" asp-items="Model.Languages" class="form-select w-auto"></select>
            </div>
            <div class="form-group">
                <label asp-for="HtmlTitle" class="form-label"></label>
                <input asp-for="HtmlTitle" class="form-control"/>
                <span asp-validation-for="HtmlTitle" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CustomLogo" class="form-label"></label>
                <a href="https://docs.btcpayserver.org/Theme/#checkout-page-themes" target="_blank">
                    <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                </a>
                <input asp-for="CustomLogo" class="form-control"/>
                <span asp-validation-for="CustomLogo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CustomCSS" class="form-label"></label>
                <a href="https://docs.btcpayserver.org/Theme/#checkout-page-themes" target="_blank">
                    <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                </a>
                <input asp-for="CustomCSS" class="form-control"/>
                <span asp-validation-for="CustomCSS" class="text-danger"></span>
                <p class="form-text text-muted">
                    Bundled Themes:
                    <a href="#" onclick="return setTheme(1);">Legacy</a>
                    | <a href="#" onclick="return setTheme(2);">Dark</a>
                </p>
            </div>
            <button name="command" type="submit" class="btn btn-primary" value="Save">Save</button>
        </form>
    </div>
</div>

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script type="text/javascript">
        function setTheme(themeChoice) {
            if (themeChoice === 1) { // reserving 0 for potential clear down the road
                $('#CustomCSS').val('/checkout/css/themes/legacy.css');
            } else if (themeChoice === 2) {
                $('#CustomCSS').val('/checkout/css/themes/dark.css');
            } else {
                $('#CustomCSS').val('');
            }
            return false;
        }
    </script>
}