@using BTCPayServer.Services.PaymentRequests
@using Microsoft.AspNetCore.Html
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Components
@model BTCPayServer.Models.PaymentRequestViewModels.ListPaymentRequestsViewModel
@{
    Layout = "_Layout";
    ViewData["Title"] = "Payment Requests";
}

<div class="sticky-header-setup"></div>
<div class="sticky-header d-sm-flex align-items-center justify-content-between">
    <h2 class="mb-0">
        @ViewData["Title"]
        <a href="#descriptor" data-bs-toggle="collapse">
            <vc:icon symbol="info" />
        </a>
    </h2>
    <a asp-action="EditPaymentRequest" asp-route-storeId="@Context.GetStoreData().Id" class="btn btn-primary mt-3 mt-sm-0" role="button" id="CreatePaymentRequest">
        <span class="fa fa-plus"></span>
        Create Payment Request
    </a>
</div>

<div id="descriptor" class="collapse">
    <div class="d-flex px-4 py-4 mb-4 bg-tile rounded">
        <div class="flex-fill">
            <p class="mb-2">Payment requests are persistent shareable pages that enable the receiver to pay at their convenience. Funds are paid to a payment request at the current exchange rate.</p>
            <p class="mb-3">Requests may be paid in partial. They will remain valid until time expires or when paid what is due.</p>
            <a href="https://docs.btcpayserver.org/PaymentRequests/" target="_blank" rel="noreferrer noopener">Learn More</a>
        </div>
        <button type="button" class="btn-close ms-auto" data-bs-toggle="collapse" data-bs-target="#descriptor" aria-expanded="false" aria-label="Close">
            <vc:icon symbol="close" />
        </button>
    </div>
</div>

<partial name="_StatusMessage" />

<div class="row mb-2">
    <div class="col col-lg-8 col-xl-6 mr-auto">
        <form asp-action="GetPaymentRequests" method="get">
            <input type="hidden" asp-for="Count" />
            <input type="hidden" asp-for="TimezoneOffset" />
            <div class="input-group">
                <input asp-for="SearchTerm" class="form-control" />
                <button type="submit" class="btn btn-secondary text-nowrap" title="Search invoice">
                    <span class="fa fa-search"></span> Search
                </button>
                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="SearchDropdownToggle">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="SearchDropdownToggle">
                    <a class="dropdown-item" asp-action="GetPaymentRequests" asp-route-storeId="@Context.GetStoreData().Id" asp-route-count="@Model.Count" asp-route-searchTerm="includearchived:true" id="SearchIncludeArchived">Include Archived</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="?searchTerm=" id="SearchUnfiltered">Unfiltered</a>
                </div>
            </div>
            <span asp-validation-for="SearchTerm" class="text-danger"></span>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        @if (Model.Items.Count > 0)
        {
            <table class="table table-hover table-responsive-md">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th class="w-150px">
                            <div class="d-flex align-items-center gap-1">
                                Expiry
                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
                            </div>
                        </th>
                        <th>Status</th>
                        <th class="text-end">Amount</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Items)
                    {
                        <tr>
                            <td>
                                <a asp-action="EditPaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Edit-@item.Id">@item.Title</a>
                            </td>
                            <td>
                                @(item.ExpiryDate?.ToBrowserDate() ?? new HtmlString($"<span class=\"text-muted\">No Expiry</span>"))
                            </td>
                            <td>
                                <span class="badge badge-@item.Status.ToLower()">@item.Status</span>
                            </td>
                            <td class="text-end">@item.AmountFormatted</td>
                            <td class="text-end">
                                <a asp-controller="UIInvoice" asp-action="ListInvoices" asp-route-storeId="@item.StoreId" asp-route-searchterm="@($"orderid:{PaymentRequestRepository.GetOrderIdForPaymentRequest(item.Id)}")">Invoices</a>
                                <span> - </span>
                                <a asp-action="ClonePaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Clone-@item.Id">Clone</a>
                                <span> - </span>
                                <a asp-action="TogglePaymentRequestArchival" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="ToggleArchival-@item.Id">@(item.Archived ? "Unarchive" : "Archive")</a>
                                <span> - </span>
                                <a asp-action="ViewPaymentRequest" asp-route-payReqId="@item.Id" id="PaymentRequest-@item.Id">View</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

            <vc:pager view-model="Model" />
        }
        else
        {
            <p class="text-secondary mt-3">
                There are no payment requests matching your criteria.
            </p>
        }
    </div>
</div>