@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel

@addTagHelper *, BundlerMinifier.TagHelpers
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
@{
    ViewData["Title"] = Model.Title;
    Layout = null;
}

<!DOCTYPE html>
<html class="h-100">
<head>
    <title>@Model.Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
    @if (Model.CustomCSSLink != null)
    {
        <link href="@Model.CustomCSSLink" rel="stylesheet" />
    }
    @if (!Context.Request.Query.ContainsKey("simple"))
    {
        <script type="text/javascript">
            var srvModel = @Html.Raw(Json.Serialize(Model));
        </script>
        <bundle name="wwwroot/bundles/payment-request-bundle-1.min.js"></bundle>
        <bundle name="wwwroot/bundles/payment-request-bundle-2.min.js"></bundle>
        @*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@
        <script src="~/modal/btcpay.js"></script>
    }

    <bundle name="wwwroot/bundles/payment-request-bundle.min.css"></bundle>
    @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
    {
        <style>
            @Html.Raw(Model.EmbeddedCSS);
        </style>
    }
</head>
<body>

<partial name="_StatusMessage" for="StatusMessage" />
@if (Context.Request.Query.ContainsKey("simple"))
{
    @await Html.PartialAsync("MinimalPaymentRequest", Model)
}
else
{
    <noscript>
        @await Html.PartialAsync("MinimalPaymentRequest", Model)
    </noscript>

    <div class="container" id="app" v-cloak>
        <div class="row w-100 p-0 m-0" style="height: 100vh">
            <div class="mx-auto my-auto w-100">
                <div class="card">
                    <h1 class="card-header">
                        {{srvModel.title}}

                        <span class="text-muted float-right text-center">
                            <template v-if="settled">Settled</template>
                            <template v-else>
                                <template v-if="ended">Request Expired</template>
                                <template v-else-if="endDiff">Expires in {{endDiff}}</template>
                                <template v-else>{{srvModel.status}}</template>
                            </template>
                        </span>
                    </h1>
                    <div class="card-body px-0 pt-0">
                        <div class="row mb-4">
                            <div class="col-sm-12 col-md-12 col-lg-6 ">
                                <ul class="w-100 list-group list-group-flush">
                                    <li class="list-group-item">
                                        <div class="d-flex justify-content-between">
                                            <span class="h2 text-muted">Request amount:</span>
                                            <span class="h2">{{srvModel.amountFormatted}}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item">
                                        <div class="d-flex justify-content-between">
                                            <span class="h2 text-muted">Paid so far:</span>
                                            <span class="h2">{{srvModel.amountCollectedFormatted}}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item">
                                        <div class="d-flex justify-content-between">
                                            <span class="h2 text-muted">Amount due:</span>
                                            <span class="h2">{{srvModel.amountDueFormatted}}</span>
                                        </div>
                                    </li>
                                </ul>
                                <div v-html="srvModel.description" class="w-100 p-2"></div>

                            </div>
                            <div class="col-sm-12 col-md-12  col-lg-6">
                                <div class="table-responsive">
                                    <table class="table border-top-0 ">
                                        <thead>
                                        <tr>
                                            <th class=" border-top-0" scope="col">Invoice #</th>
                                            <th class=" border-top-0">Price</th>
                                            <th class=" border-top-0">Expiry</th>
                                            <th class=" border-top-0">Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-if="!srvModel.invoices || srvModel.invoices.length == 0">
                                            <td colspan="4" class="text-center">No payments made yet</td>
                                        </tr>
                                        <template v-else v-for="invoice of srvModel.invoices" :key="invoice.id">
                                            <tr class="bg-light">
                                                <td scope="row">{{invoice.id}}</td>
                                                <td>{{invoice.amountFormatted}}</td>
                                                <td>{{moment(invoice.expiryDate).format('L HH:mm')}}</td>
                                                <td>{{invoice.status}}</td>
                                            </tr>
                                            <tr class="bg-light" v-if="invoice.payments && invoice.payments.length > 0">
                                                <td colspan="4" class=" px-2 py-1 border-top-0">

                                                    <div class="table-responsive">
                                                        <table class="table table-bordered">
                                                            <tr>
                                                                <th class="p-1" style="max-width: 300px">Tx Id</th>
                                                                <th class="p-1">Payment Method</th>
                                                                <th class="p-1">Amount</th>
                                                                <th class="p-1">Link</th>
                                                            </tr>
                                                            <tr v-for="payment of invoice.payments">
                                                                <td class="p-1 m-0 d-print-none d-block" style="max-width: 300px">
                                                                    <div style="width: 100%; overflow-x: auto; overflow-wrap: initial;">{{payment.id}}</div>
                                                                </td>
                                                                <td class="p-1 m-0 d-none d-print-table-cell" style="max-width: 150px;">
                                                                    {{payment.id}}
                                                                </td>
                                                                <td class="p-1">{{formatPaymentMethod(payment.paymentMethod)}}</td>
                                                                <td class="p-1">{{payment.amount.noExponents()}}</td>
                                                                <td class="p-1 d-print-none">
                                                                    <a v-if="payment.link" :href="payment.link" target="_blank">Link</a>
                                                                </td>
                                                                <td class="p-1 d-none d-print-table-cell" style="max-width: 150px;">
                                                                    {{payment.link}}
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        </template>
                                        <tr v-if="!ended && (srvModel.amountDue) > 0" class="d-print-none">
                                            <td colspan="4" class="text-center">

                                                <template v-if="srvModel.allowCustomPaymentAmounts && !srvModel.anyPendingInvoice">
                                                    <form v-on:submit="submitCustomAmountForm">

                                                        <div class="input-group m-auto" style="max-width: 250px">
                                                            <input
                                                                :readonly="!srvModel.allowCustomPaymentAmounts"
                                                                class="form-control"
                                                                type="number"
                                                                v-model="customAmount"
                                                                :max="srvModel.amountDue"
                                                                step="any"
                                                                placeholder="Amount"
                                                                required>
                                                            <div class="input-group-append">
                                                                <span class='input-group-text'>{{currency}}</span>
                                                                <button
                                                                    class="btn btn-primary"
                                                                    v-bind:class="{ 'btn-disabled': loading}"
                                                                    :disabled="loading"
                                                                    type="submit">
                                                                    <div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
                                                                        <span class="sr-only">Loading...</span>
                                                                    </div>
                                                                    Pay now
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </template>

                                                <template v-else>
                                                    <button class="btn btn-primary btn-lg mt-1" v-on:click="pay(null)"
                                                            :disabled="loading">
                                                        <div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
                                                            <span class="sr-only">Loading...</span>
                                                        </div>

                                                        Pay now
                                                    </button>
                                                    <button class="btn btn-secondary btn-lg mt-1" 
                                                            v-if="!srvModel.pendingInvoiceHasPayments" 
                                                            v-on:click="cancelPayment()"
                                                            :disabled="loading">
                                                        <div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
                                                            <span class="sr-only">Loading...</span>
                                                        </div>

                                                            Cancel current invoice</button>
                                                </template>
                                               
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-footer text-muted d-flex justify-content-between">

                        <div >
                            <span v-on:click="print" class="btn-link d-print-none" style="cursor: pointer"> <span class="fa fa-print"></span> Print</span>
                            <span>Updated {{lastUpdated}}</span>
                        </div>
                        <div >
                            <span class="text-muted">Powered by </span><a href="https://btcpayserver.org" target="_blank">BTCPay Server</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
</body>
</html>
