@inherits ViewModelTemplate<ParagraphViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend

@{
    AddStylesheet("/Files/Templates/Designs/Swift-v2/Paragraph/Swift-v2_Dashboard_Chart/Charts/bar-chart.css");
    var widgetTitle = Model?.Item?.GetString("Title") ?? Translate("Monthly spending");
    var baseUrl = string.Empty;
    var icon = "/Files/Images/Icons/dollar.svg";
    
    if((Model?.Item?.TryGetLink("BaseLink", out var baseLinkViewModel) ?? false)) {
        baseUrl = baseLinkViewModel.Url;
        var basePageId = baseLinkViewModel?.PageId ?? 0;
        var basePage = Dynamicweb.Content.Services.Pages.GetPage(basePageId);
        var basePageIcon = basePage?.Icon;
        icon = !string.IsNullOrEmpty(basePageIcon) ? basePageIcon : icon;
    }
}

<div class="card h-100" style="--swift-content-padding: 1.25rem;">
    <div class="card-body">
        <div class="hstack gap-3 mb-3">
            <div class="hstack gap-2 flex-grow-1">
                <div class="d-grid p-2 rounded-2" style="background-color: color-mix(in srgb, var(--bs-green) 10%, transparent);">
                    <span class="icon fs-5" style="color: var(--bs-green);">@ReadFile(icon)</span>
                </div>
                <h2 class="h6 mb-0 fw-semibold">@(widgetTitle)</h2>
            </div>
            @if (!string.IsNullOrEmpty(baseUrl))
            {
                <a class="fs-8 fw-semibold text-decoration-none text-muted text-decoration-underline-hover" href="@(baseUrl)">@Translate("View all") →</a>
            }
        </div>
        <div data-swift-htmx-widget="@(Model?.ID)"
            hx-get="/dwapi/ecommerce/orders/search?Type=order&PageSize=999&ShopId=@(Pageview?.Area?.EcomShopId)&ToCompletedDate=@(DateTime.Now.AddDays(1).ToString("yyyy-MM-dd"))"
            hx-headers='{"x-dw-template": "/Designs/Swift-v2/Paragraph/Swift-v2_Dashboard_Chart/Charts/MonthlySpending.cshtml", "accept": "text/html", "x-dw-culture": "@(Pageview?.Area?.CultureInfo?.Name)"}'
            hx-vals='{"baseUrl": "@(baseUrl)", "ShowPricesWithVat": "@(Dynamicweb.Ecommerce.Common.Context.DisplayPricesWithVat)"}'
            hx-ext="swift-auth"
            hx-trigger="tokenFetched.swift.authentication from:body"
            hx-swap="innerHTML">
            
            <div class="d-grid pt-2" style="grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem;">
                <div class="position-relative placeholder-glow" aria-hidden="true">
                    @for (var i = 0; i < 5; i++)
                    {
                        var bottom = ((4 - i) * 100m) / 4m;
                        <span class="placeholder rounded-pill position-absolute end-0 translate-middle-y bg-primary-subtle" style="bottom: @(bottom.ToString(System.Globalization.CultureInfo.InvariantCulture))%; width: 2rem; height: 0.65rem;"></span>
                    }
                </div>
                <div class="position-relative">
                    @for (var i = 0; i < 5; i++)
                    {
                        var bottom = ((4 - i) * 100m) / 4m;
                        <span class="position-absolute start-0 end-0 opacity-25" aria-hidden="true" style="bottom: @(bottom.ToString(System.Globalization.CultureInfo.InvariantCulture))%; border-top: 1px dashed currentColor;"></span>
                    }
                    <div class="d-grid h-100 align-items-end" style="grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem;">
                        @{
                            var labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
                        }
                        @for (var i = 0; i < 6; i++)
                        {
                            <div class="d-grid" style="grid-template-rows: 15rem auto; gap: 0.5rem;">
                                <div class="d-flex align-items-end justify-content-center placeholder-glow">
                                    <span class="placeholder rounded-top-3 bg-primary-subtle d-block" style="width: min(100%, 3.25rem); height: @(Random.Shared.Next(20, 75).ToString(System.Globalization.CultureInfo.InvariantCulture))%;"></span>
                                </div>
                                <span class="text-center text-muted fs-8">@(labels[i])</span>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
