@inherits ViewModelTemplate<OrderListViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Ecommerce.ProductCatalog
@using Dynamicweb.Ecommerce.Orders

@{
    string baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview.Page.ID}");
    string currentSortBy = Dynamicweb.Context.Current?.Request.QueryString.Get("SortBy") ?? Pageview.CurrentParagraph?.ModuleProperties?.GetValue("SortByField") ?? string.Empty;
    string currentSortOrder = Dynamicweb.Context.Current?.Request.QueryString.Get("SortOrder") ?? Pageview.CurrentParagraph?.ModuleProperties?.GetValue("SortOrder") ?? string.Empty;
    string nextSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
    string arrow = currentSortOrder == "asc" ? @ReadFile("/Files/Images/Icons/arrow-up.svg") : @ReadFile("/Files/Images/Icons/arrow-down.svg");
}

<header class="hstack gap-3 mb-4">
    <h1 class="h4 mb-0">@(Pageview.Page.GetDisplayName())</h1>
</header>

<form data-swift-order-list 
    hx-get="@(baseUrl)"
    hx-trigger="keyup delay:.3s, change, click from:input[type='radio'][name='SortBy']" 
    hx-swap="outerHTML"
    hx-target="[data-swift-order-list]"
    hx-select="[data-swift-order-list]"
    hx-replace-url="true"
    hx-on:click="if (event.target.querySelector('input[type=radio][name=SortBy]') && event.target.querySelector('input[type=radio][name=SortBy]').checked) {
     this.querySelector('[name=SortOrder]').value = '@(nextSortOrder)';
    }">

    <input type="hidden" name="SortOrder" value="@(currentSortOrder)">

    <nav class="hstack gap-2 mb-3">
        <div class="flex-fill">
            <div class="input-group">
                <span class="input-group-text border-end-0 bg-body">
                    <span class="htmx-indicator spinner-border spinner-border-sm" aria-hidden="true"></span>
                    <span class="icon-2" data-swift-indicator-origin>@ReadFile("/Files/Images/Icons/magnifying-glass.svg")</span>
                </span>
                <input type="text" class="form-control border-start-0 border-end-0" name="FilterText" value="@Dynamicweb.Context.Current?.Request.QueryString.Get("FilterText")" placeholder="@Translate("Search payments, invoices, or PO numbers")...">
                <button type="reset" class="input-group-text border-start-0 bg-body" onclick="this.closest('form').querySelector('[name=FilterText]').value = ''; this.closest('form').dispatchEvent(new Event('change', { bubbles: true }))">
                    <span class="icon-2">@ReadFile("/Files/Images/Icons/xmark.svg")</span>
                    <span class="visually-hidden">@Translate("Clear search")</span>
                </button>
            </div>
        </div>
    </nav>

    <div class="card overflow-hidden">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <label class="hstack gap-1" role="button">
                                <input type="radio" name="SortBy" value="Id" class="visually-hidden" checked="@(currentSortBy=="Id")" />
                                @Translate("Payment ID") 
                                @if(currentSortBy=="Id") {
                                    <span class="icon-1">@arrow</span>
                                }
                            </label>
                        </th>
                        <th>
                            <label class="hstack gap-1" role="button">
                                <input type="radio" name="SortBy" value="CreatedAt" class="visually-hidden" checked="@(currentSortBy=="CreatedAt")" />
                                @Translate("Payment date") 
                                @if(currentSortBy=="CreatedAt") {
                                    <span class="icon-1">@arrow</span>
                                }
                            </label>
                        </th>
                        <th>
                            @Translate("Method") 
                        </th>
                        <th>
                            <label class="hstack gap-1" role="button">
                                <input type="radio" name="SortBy" value="Price" class="visually-hidden" checked="@(currentSortBy=="Price")" />
                                @Translate("Amount") 
                                @if(currentSortBy=="Price") {
                                    <span class="icon-1">@arrow</span>
                                }
                            </label>
                        </th>
                        <th>@Translate("Actions")</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ( var payment in Model.Orders )
                    {
                        <tr class="position-relative">
                            <td>
                                <a class="stretched-link text-decoration-none text-decoration-underline-hover" href="@(baseUrl)?OrderId=@(payment.Id)">@(payment.Id)</a>
                            </td>
                            <td>
                                <div class="vstack">
                                    @(payment.CreatedAt.ToShortDateString())
                                    <span class="fs-8 text-muted">@(payment.CreatedAt.ToShortTimeString())</span>
                                </div>
                            </td>
                            <td>
                                <div class="hstack">
                                    @if (!string.IsNullOrEmpty(payment.PaymentMethod?.Icon)) {
                                        if (payment.PaymentMethod.Icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase)) 
                                        {
                                            <span class="icon-2 me-2">
                                                @ReadFile(payment.PaymentMethod.Icon)
                                            </span>
                                        }
                                        else
                                        {
                                            <img src="@payment.PaymentMethod.Icon" class="me-2" style="max-width: 1.5rem; max-height: 1.5rem;">
                                        }
                                    }
                                    <span>@(payment.PaymentMethod?.Name)</span>
                                </div>
                            </td>
                            <td>
                                <div class="text-price">@(payment.Price.PriceFormatted)</div>
                            </td>
                            <td>
                                <div class="hstack gap-3">
                                    <button class="btn btn-icon position-relative z-2" data-dw-button type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-popper-config='{"strategy":"fixed", "placement":"bottom-end"}'>
                                        <span class="icon-2">
                                            @ReadFile("/Files/Images/Icons/ellipsis.svg")
                                        </span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item hstack gap-2" href="@(baseUrl)?OrderId=@(payment.Id)">
                                                <span class="icon-2">
                                                    @ReadFile("/Files/Images/Icons/eye.svg")
                                                </span>
                                                @Translate("View")
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    }

                    @if( Model.Orders.Count() < 1 )
                    {
                        <tr class="position-relative">
                            <td class="text-center py-5" colspan="8">
                                <div data-swift-empty-state>
                                    <div data-swift-empty-state-icon>
                                        <span class="icon">
                                            @ReadFile("/Files/Images/Icons/file-contract.svg")
                                        </span>
                                    </div>
                                    <div>@Translate("No payments found")</div>
                                </div>
                            </td>
                        </tr>
                    }

                </tbody>

            </table>

        </div>
    </div>

    @if (Model.PageCount > 1)
    {
        <ul class="pagination m-0 mt-3">
            @for (int i = 1; i <= Model.PageCount; i++)
            {
                var active = (i == Model.CurrentPage) ? "active" : string.Empty;
                <li class="page-item @active">
                    <button type="submit"
                            class="page-link"
                            name="PageNum"
                            value="@i"
                            aria-label="@Translate("Go to page") @i"
                            @(active == "active" ? "aria-current=\"page\"" : "")>
                        @i
                    </button>
                </li>
            }
        </ul>
    }
</form>