@model BTCPayServer.Models.InvoicingModels.CreateInvoiceModel
@using BTCPayServer.TagHelpers
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Abstractions.TagHelpers
@{
    ViewData.SetLayoutModel(new("Invoices", StringLocalizer["Create Invoices"]));
}

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            $("#create-invoice-form").on("submit", function() {
                $(this).find("input[type='submit']").prop('disabled', true);
            });

            $("#create-invoice-form input").on("input", function () {
                // Give it a timeout to make sure all form validation has completed by the time we run our callback
                setTimeout(function() {
                    var validationErrors = $('.field-validation-error');
                    if (validationErrors.length === 0) {
                        $("input[type='submit']#Create").removeAttr('disabled');
                    }
                }, 100);
            });
        });
    </script>
}

<form asp-action="CreateInvoice" method="post" id="create-invoice-form">
    <div class="sticky-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" text-translate="true">Invoices</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">@ViewData["Title"]</li>
            </ol>
            <h2>@ViewData["Title"]</h2>
        </nav>
		<input id="page-primary" type="submit" value="Create" class="btn btn-primary" />
    </div>

    <partial name="_StatusMessage" />

    <div class="row">
        <div class="col-xl-8 col-xxl-constrain">
            @if (!ViewContext.ModelState.IsValid)
            {
                <div asp-validation-summary="ModelOnly"></div>
            }
            @if (Model.StoreId != null)
            {
                <input type="hidden" asp-for="StoreId" />
            }
            <div class="d-flex justify-content-between">
                <div class="form-group flex-fill me-4">
                    <label asp-for="Amount" class="form-label"></label>
                    <input inputmode="decimal" asp-for="Amount" class="form-control" />
                    <span asp-validation-for="Amount" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Currency" class="form-label"></label>
                    <input asp-for="Currency" class="form-control w-auto" currency-selection />
                    <span asp-validation-for="Currency" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="OrderId" class="form-label"></label>
                <input asp-for="OrderId" class="form-control" />
                <span asp-validation-for="OrderId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ItemDesc" class="form-label"></label>
                <input asp-for="ItemDesc" class="form-control" />
                <span asp-validation-for="ItemDesc" class="text-danger"></span>
            </div>
            <div class="form-group mb-4">
                <label asp-for="SupportedTransactionCurrencies" class="form-label"></label>
                @foreach (var item in Model.AvailablePaymentMethods)
                {
                    <div class="form-check mb-2">
                        <label class="form-check-label">
                            <input name="SupportedTransactionCurrencies" class="form-check-input" checked="checked" type="checkbox" value="@item.Value">
                            @item.Text
                        </label>
                    </div>
                }
                <span asp-validation-for="SupportedTransactionCurrencies" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DefaultPaymentMethod" class="form-label"></label>
                <select asp-for="DefaultPaymentMethod" asp-items="Model.AvailablePaymentMethods" class="form-select">
                    <option value="" selected text-translate="true">Use the store’s default</option>
                </select>
                <span asp-validation-for="DefaultPaymentMethod" class="text-danger"></span>
            </div>
            <h4 class="mt-5 mb-4" text-translate="true">Customer Information</h4>
            <div class="form-group">
                <label asp-for="BuyerEmail" class="form-label"></label>
                <input asp-for="BuyerEmail" class="form-control"/>
                <span asp-validation-for="BuyerEmail" class="text-danger"></span>
            </div>

            <h4 class="mt-5 mb-2" text-translate="true">Additional Options</h4>
            <div class="form-group">
                <div class="accordion" id="additional">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="additional-pos-data-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-pos-data" aria-expanded="false" aria-controls="additional-pos-data">
                                <span text-translate="true">Metadata</span>
                                <vc:icon symbol="caret-down" />
                            </button>
                        </h2>
                        <div id="additional-pos-data" class="accordion-collapse collapse" aria-labelledby="additional-pos-data-header">
                            <p html-translate="true">Custom data to expand the invoice. This data is a JSON object, e.g. <code>{ "orderId": 615, "product": "Pizza" }</code></p>
                            <div class="form-group">
                                <label asp-for="Metadata" class="form-label"></label>
                                <textarea asp-for="Metadata" class="form-control" rows="10" cols="40"></textarea>
                                <span asp-validation-for="Metadata" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="additional-notifications-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-notifications" aria-expanded="false" aria-controls="additional-notifications">
                                <span text-translate="true">Invoice Notifications</span>
                                <vc:icon symbol="caret-down" />
                            </button>
                        </h2>
                        <div id="additional-notifications" class="accordion-collapse collapse" aria-labelledby="additional-notifications-header">
                            <div class="accordion-body">
                                <div class="form-group">
                                    <label asp-for="NotificationUrl" class="form-label"></label>
                                    <input asp-for="NotificationUrl" class="form-control" />
                                    <span asp-validation-for="NotificationUrl" class="text-danger"></span>
                                </div>
                                <div class="form-group">
                                    <label asp-for="NotificationEmail" class="form-label"></label>
                                    <input asp-for="NotificationEmail" class="form-control" />
                                    <span asp-validation-for="NotificationEmail" class="text-danger"></span>
                                    <div id="InvoiceEmailHelpBlock" class="form-text" text-translate="true">Receive updates for this invoice.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>