@model InvoiceDetailsModel
@{
    ViewData["Title"] = $"Invoice {Model.Id}";
}

@section PageHeadContent {
    <meta name="robots" content="noindex,nofollow">
    <style>
        #posData td > table:last-child { margin-bottom: 0 !important; }
        #posData table > tbody > tr:first-child > td > h4 { margin-top: 0 !important; }
        .invoice-information { display: flex; flex-wrap: wrap; gap: var(--btcpay-space-xl) var(--btcpay-space-xxl); }
    </style>
}

@section PageFootContent {
    <script>
        const alertClasses = { "Settled (marked)": 'success', "Invalid (marked)": 'danger' }
        
        function changeInvoiceState(invoiceId, newState) {
            console.log(invoiceId, newState)
            const toggleButton = $("#markStatusDropdownMenuButton");
            toggleButton.attr("disabled", "disabled");

            $.post(`${invoiceId}/changestate/${newState}`)
                .done(({ statusString }) => {
                    const alertClass = alertClasses[statusString];
                    toggleButton.replaceWith(`<span class="fs-6 fw-normal badge bg-${alertClass}">${statusString} <span class="fa fa-check"></span></span>`);
                })
                .fail(function () {
                    toggleButton.removeAttr("disabled");
                    alert("Invoice state update failed");
                });
        }
        
        delegate('click', '[data-change-invoice-status-button]', e => {
            const button = e.target.closest('[data-change-invoice-status-button]')
            const { id, status } = button.dataset
            changeInvoiceState(id, status)
        })
        
        const handleRefundResponse = async response => {
            const modalBody = document.querySelector('#RefundModal .modal-body')
            if (response.ok && response.redirected) {
                window.location = response.url
            } else if (response.ok) {
                modalBody.innerHTML = await response.text()
            } else {
                modalBody.innerHTML = '<div class="alert alert-danger" role="alert">Failed to load refund options.</div>'
            }
        }
        
        delegate('click', '#IssueRefund', async e => {
            e.preventDefault()
            const { href: url } = e.target
            const response = await fetch(url)
            await handleRefundResponse(response)
        })
        
        delegate('submit', '#RefundForm', async e => {
            e.preventDefault()
            const form = e.target
            const { action: url, method } = form
            const body = new FormData(form)
            const response = await fetch(url, { method, body })
            await handleRefundResponse(response)
        })
    </script>
}

@if (Model.CanRefund)
{
    <div id="RefundModal" class="modal fade" tabindex="-1" aria-labelledby="RefundTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="RefundTitle">Issue Refund</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <vc:icon symbol="close"/>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<div class="sticky-header-setup"></div>
<div class="sticky-header d-flex flex-wrap gap-3 align-items-center justify-content-between">
    <h2 class="mb-0 text-break">@ViewData["Title"]</h2>
    <div class="d-flex flex-wrap gap-3">
        @if (Model.ShowCheckout)
        {
            <a asp-action="Checkout" class="invoice-checkout-link btn btn-primary text-nowrap" asp-route-invoiceId="@Model.Id">Checkout</a>
        }
        @if (Model.ShowReceipt)
        {
            <a asp-action="InvoiceReceipt" asp-route-invoiceId="@Model.Id" id="Receipt" class="btn btn-secondary" target="InvoiceReceipt-@Model.Id">Receipt</a>
        }
        @if (Model.CanRefund)
        {
            <a asp-action="Refund" asp-route-invoiceId="@Model.Id" id="IssueRefund" class="btn btn-primary text-nowrap" data-bs-toggle="modal" data-bs-target="#RefundModal">Issue Refund</a>
        }
        else
        {
            <button class="btn btn-secondary text-nowrap" data-bs-toggle="tooltip" title="You can only refund an invoice that has been settled. Please wait for the transaction to confirm on the blockchain before attempting to refund it." disabled>Issue refund</button>
        }
        <form asp-action="ToggleArchive" asp-route-invoiceId="@Model.Id" method="post">
            <button type="submit" class="btn btn-secondary" id="btn-archive-toggle">
                @if (Model.Archived)
                {
                    <span class="text-nowrap" data-bs-toggle="tooltip" title="Unarchive this invoice">Unarchive</span>
                }
                else
                {
                    <span class="text-nowrap" data-bs-toggle="tooltip" title="Archive this invoice so that it does not appear in the invoice list by default"><i class="fa fa-archive me-1"></i> Archive</span>
                }
            </button>
        </form>
    </div>
</div>

<partial name="_StatusMessage"/>

<div class="invoice-details">
    <div class="invoice-information mb-5">
        <div>
            <h3 class="mb-3">General Information</h3>
            <table class="table mb-0">
                <tr>
                    <th class="fw-semibold">Store</th>
                    <td>
                        <a href="@Model.StoreLink" rel="noreferrer noopener">@Model.StoreName</a>
                    </td>
                </tr>
                <tr>
                    <th class="fw-semibold">Invoice Id</th>
                    <td>@Model.Id</td>
                </tr>
                @if (!string.IsNullOrEmpty(Model.TypedMetadata.OrderId))
                {
                    <tr>
                        <th class="fw-semibold">Order Id</th>
                        <td>
                            @if (!string.IsNullOrEmpty(Model.TypedMetadata.OrderUrl))
                            {
                                <a href="@Model.TypedMetadata.OrderUrl" rel="noreferrer noopener" target="_blank">
                                    @if (string.IsNullOrEmpty(Model.TypedMetadata.OrderId))
                                    {
                                        <span>View Order</span>
                                    }
                                    else
                                    {
                                        @Model.TypedMetadata.OrderId
                                    }
                                </a>
                            }
                            else
                            {
                                <span>@Model.TypedMetadata.OrderId</span>
                            }
                        </td>
                    </tr>
                }
                @if (Model.TypedMetadata.PaymentRequestId is not null)
                {
                    <tr>
                        <th class="fw-semibold">Payment Request Id</th>
                        <td>
                            <a href="@Model.PaymentRequestLink" rel="noreferrer noopener">@Model.TypedMetadata.PaymentRequestId</a>
                        </td>
                    </tr>
                }
                <tr>
                    <th class="fw-semibold">State</th>
                    <td>
                        @if (Model.CanMarkStatus)
                        {
                            <div class="dropdown changeInvoiceStateToggle">
                                <button class="btn btn-secondary btn-sm dropdown-toggle py-1 px-2" type="button" id="markStatusDropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    @Model.State
                                </button>
                                <div class="dropdown-menu" aria-labelledby="markStatusDropdownMenuButton">
                                    @if (Model.CanMarkInvalid)
                                    {
                                        <button type="button" class="dropdown-item lh-base changeInvoiceState" data-id="@Model.Id" data-status="invalid" data-change-invoice-status-button>
                                            Mark as invalid
                                        </button>
                                    }
                                    @if (Model.CanMarkSettled)
                                    {
                                        <button type="button" class="dropdown-item lh-base changeInvoiceState" href="#" data-id="@Model.Id" data-status="settled" data-change-invoice-status-button>
                                            Mark as settled
                                        </button>
                                    }
                                </div>
                            </div>
                        }
                        else
                        {
                            @Model.State
                        }
                    </td>
                </tr>
                <tr>
                    <th class="fw-semibold">Created Date</th>
                    <td>@Model.CreatedDate.ToBrowserDate()</td>
                </tr>
                <tr>
                    <th class="fw-semibold">Expiration Date</th>
                    <td>@Model.ExpirationDate.ToBrowserDate()</td>
                </tr>
                <tr>
                    <th class="fw-semibold">Monitoring Date</th>
                    <td>@Model.MonitoringDate.ToBrowserDate()</td>
                </tr>
                <tr>
                    <th class="fw-semibold">Transaction Speed</th>
                    <td>@Model.TransactionSpeed</td>
                </tr>
                <tr>
                    <th class="fw-semibold">Total Fiat Due</th>
                    <td>@Model.Fiat</td>
                </tr>
                @if (!string.IsNullOrEmpty(Model.RefundEmail))
                {
                    <tr>
                        <th class="fw-semibold">Refund Email</th>
                        <td>
                            <a href="mailto:@Model.RefundEmail">@Model.RefundEmail</a>
                        </td>
                    </tr>
                }
                @if (!string.IsNullOrEmpty(Model.NotificationUrl))
                {
                    <tr>
                        <th class="fw-semibold">Notification Url</th>
                        <td>@Model.NotificationUrl</td>
                    </tr>
                }
                @if (!string.IsNullOrEmpty(Model.RedirectUrl))
                {
                    <tr>
                        <th class="fw-semibold">Redirect Url</th>
                        <td>
                            <a href="@Model.RedirectUrl" rel="noreferrer noopener">@Model.RedirectUrl</a>
                        </td>
                    </tr>
                }
            </table>
        </div>
        <div class="d-flex flex-column gap-5">
			@if (!string.IsNullOrEmpty(Model.TypedMetadata.ItemCode) ||
				 !string.IsNullOrEmpty(Model.TypedMetadata.ItemDesc) ||
				 Model.TypedMetadata.TaxIncluded is not null)
			{
                <div>
					<h3 class="mb-3">Product Information</h3>
					<table class="table mb-0">
						@if (!string.IsNullOrEmpty(Model.TypedMetadata.ItemCode))
						{
							<tr>
								<th class="fw-semibold">Item code</th>
								<td>@Model.TypedMetadata.ItemCode</td>
							</tr>
						}
						@if (!string.IsNullOrEmpty(Model.TypedMetadata.ItemDesc))
						{
							<tr>
								<th class="fw-semibold">Item Description</th>
								<td>@Model.TypedMetadata.ItemDesc</td>
							</tr>
						}
						@if (Model.TaxIncluded is not null)
						{
							<tr>
								<th class="fw-semibold">Tax Included</th>
								<td>@Model.TaxIncluded</td>
							</tr>
						}
					</table>
		       </div>
			}
            @if (Model.TypedMetadata.BuyerName is not null ||
                 Model.TypedMetadata.BuyerEmail is not null ||
                 Model.TypedMetadata.BuyerPhone is not null ||
                 Model.TypedMetadata.BuyerAddress1 is not null ||
                 Model.TypedMetadata.BuyerAddress2 is not null ||
                 Model.TypedMetadata.BuyerCity is not null ||
                 Model.TypedMetadata.BuyerState is not null ||
                 Model.TypedMetadata.BuyerCountry is not null ||
                 Model.TypedMetadata.BuyerZip is not null)
            {
                <div>
                    <h3 class="mb-3">Buyer Information</h3>
                    <table class="table mb-0">
                        @if (Model.TypedMetadata.BuyerName is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Name</th>
                                <td>@Model.TypedMetadata.BuyerName</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerEmail is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Email</th>
                                <td>
                                    <a href="mailto:@Model.TypedMetadata.BuyerEmail">@Model.TypedMetadata.BuyerEmail</a>
                                </td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerPhone is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Phone</th>
                                <td>@Model.TypedMetadata.BuyerPhone</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerAddress1 is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Address 1</th>
                                <td>@Model.TypedMetadata.BuyerAddress1</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerAddress2 is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Address 2</th>
                                <td>@Model.TypedMetadata.BuyerAddress2</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerCity is not null)
                        {
                            <tr>
                                <th class="fw-semibold">City</th>
                                <td>@Model.TypedMetadata.BuyerCity</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerState is not null)
                        {
                            <tr>
                                <th class="fw-semibold">State</th>
                                <td>@Model.TypedMetadata.BuyerState</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerCountry is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Country</th>
                                <td>@Model.TypedMetadata.BuyerCountry</td>
                            </tr>
                        }
                        @if (Model.TypedMetadata.BuyerZip is not null)
                        {
                            <tr>
                                <th class="fw-semibold">Zip</th>
                                <td>@Model.TypedMetadata.BuyerZip</td>
                            </tr>
                        }
                    </table>
                </div>
            }
            @if (Model.AdditionalData.Any())
            {
                <div>
                    <h3 class="mb-3">Additional Information</h3>
                    <partial name="PosData" model="(Model.AdditionalData, 1)" />
                </div>
            }
        </div>
    </div>

    <h3 class="mb-0">Invoice Summary</h3>
    <partial name="ListInvoicesPaymentsPartial" model="(Model, true)"/>

    @if (Model.Deliveries.Count != 0)
    {
        <h3 class="mb-3 mt-4">Webhooks</h3>
        <div class="table-responsive-xl">
            <table class="table table-hover table-responsive-md mb-5">
                <thead>
                <tr>
                    <th>Status</th>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Url</th>
                    <th>Date</th>
                    <th class="text-end">Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach (var delivery in Model.Deliveries)
                {
                    <tr>
                        <form asp-action="RedeliverWebhook"
                              asp-route-storeId="@Model.StoreId"
                              asp-route-invoiceId="@Model.Id"
                              asp-route-deliveryId="@delivery.Id"
                              method="post">
                            <td>
                                <span>
                                    @if (delivery.Success)
                                    {
                                        <span class="fa fa-check text-success" title="Success"></span>
                                    }
                                    else
                                    {
                                        <span class="fa fa-times text-danger" title="@delivery.ErrorMessage"></span>
                                    }
                                </span>
                            </td>
                            <td>
                                <span>
                                    <a asp-action="WebhookDelivery"
                                       asp-route-invoiceId="@Model.Id"
                                       asp-route-deliveryId="@delivery.Id"
                                       class="delivery-content"
                                       target="_blank">
                                        @delivery.Id
                                    </a>
                                </span>
                            </td>
                            <td>
                                <span>@delivery.Type</span>
                            </td>
                            <td>
                                <span class="text-nowrap" data-bs-toggle="tooltip" title="@delivery.PayloadUrl" style="cursor: pointer;">
                                    <span style="max-width: 250px;">@delivery.PayloadUrl</span>
                                </span>
                            </td>
                            <td>
                                <span>
                                    @delivery.Time.ToBrowserDate()
                                </span>
                            </td>
                            <td class="text-end">
                                <button id="#redeliver-@delivery.Id"
                                        type="submit"
                                        class="btn btn-link p-0 redeliver">
                                    Redeliver
                                </button>
                            </td>
                        </form>
                    </tr>
                }
                </tbody>
            </table>
        </div>
    }
    @if ((Model.Refunds?.Count ?? 0) > 0)
    {
        <h3 class="mb-3 mt-4">Refunds</h3>
        <div class="table-responsive-xl">
            <table class="table table-hover table-responsive-md mb-5">
                <thead>
                <tr>
                    <th>Pull Payment</th>
                    <th>Amount</th>
                    <th>Date</th>
                </tr>
                </thead>
                <tbody>
                @foreach (var refund in Model.Refunds)
                {
                    var blob = refund.PullPaymentData.GetBlob();
                    <tr>

                        <td>
                            <span>
                                <a asp-action="ViewPullPayment" asp-controller="UIPullPayment"
                                   asp-route-pullPaymentId="@refund.PullPaymentDataId"
                                   class="delivery-content"
                                   target="_blank">
                                    @refund.PullPaymentData.Id
                                </a>
                            </span>
                        </td>
                        <td>
                            <span>@blob.Limit @blob.Currency</span>
                        </td>
                        <td>
                            <span> @refund.PullPaymentData.StartDate.ToBrowserDate() </span>
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
    }
    <h3 class="mb-0 mt-5">Events</h3>
    <table class="table table-hover mt-3 mb-4">
        <thead>
        <tr>
            <th>Date</th>
            <th>Message</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var evt in Model.Events)
        {
            <tr class="text-@evt.GetCssClass()">
                <td>@evt.Timestamp.ToBrowserDate()</td>
                <td>@evt.Message</td>
            </tr>
        }
        </tbody>
    </table>
</div>