@using System.Text.Json
@model PlanTempus.Application.Features.Customers.Components.CustomerDetailEconomyViewModel

@if (!Model.HasData)
{
    <swp-empty-state>
        <i class="ph ph-currency-circle-dollar"></i>
        <span>@Model.EmptyStateText</span>
    </swp-empty-state>
}
else
{
    <swp-detail-grid>
        <!-- Stat Cards -->
        <swp-stats-row class="cols-4 full-width">
            <swp-stat-card class="highlight">
                <swp-stat-value>@Model.CurrentYearValue</swp-stat-value>
                <swp-stat-label>@Model.CurrentYearLabel</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>@Model.LastYearValue</swp-stat-value>
                <swp-stat-label>@Model.LastYearLabel</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>@Model.AvgPerVisitValue</swp-stat-value>
                <swp-stat-label>@Model.AvgPerVisitLabel</swp-stat-label>
            </swp-stat-card>
            <swp-stat-card>
                <swp-stat-value>@Model.AvgPerMonthValue</swp-stat-value>
                <swp-stat-label>@Model.AvgPerMonthLabel</swp-stat-label>
            </swp-stat-card>
        </swp-stats-row>

        <!-- Revenue Chart Card -->
        <swp-card class="full-width">
            <swp-card-header>
                <swp-card-title>@Model.RevenueOverTimeTitle</swp-card-title>
                <swp-chart-legend>
                    <swp-chart-legend-item>
                        <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
                        <span>@Model.ServicesLabel</span>
                    </swp-chart-legend-item>
                    <swp-chart-legend-item>
                        <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
                        <span>@Model.ProductsLabel</span>
                    </swp-chart-legend-item>
                </swp-chart-legend>
            </swp-card-header>
@if (Model.ChartData != null)
            {
                <swp-chart-container id="customerRevenueChart"></swp-chart-container>
                <script id="customerRevenueChartData" type="application/json">@Html.Raw(JsonSerializer.Serialize(Model.ChartData, new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase }))</script>
            }
            else
            {
                <swp-chart-container>
                    <!-- No chart data available -->
                </swp-chart-container>
            }
        </swp-card>

        <!-- Purchase History Card -->
        <swp-card class="customer-economy full-width">
            <swp-card-header>
                <swp-card-title>@Model.PurchaseHistoryTitle</swp-card-title>
            </swp-card-header>
            <swp-data-table>
                <swp-data-table-header>
                    <swp-data-table-cell>Faktura</swp-data-table-cell>
                    <swp-data-table-cell>Dato/tid</swp-data-table-cell>
                    <swp-data-table-cell>Medarbejder</swp-data-table-cell>
                    <swp-data-table-cell>Ydelser</swp-data-table-cell>
                    <swp-data-table-cell>Type</swp-data-table-cell>
                    <swp-data-table-cell>Beløb</swp-data-table-cell>
                </swp-data-table-header>
                @foreach (var purchase in Model.Purchases)
                {
                    <swp-data-table-row>
                        <swp-data-table-cell>
                            <swp-invoice-cell>@purchase.Invoice</swp-invoice-cell>
                        </swp-data-table-cell>
                        <swp-data-table-cell>
                            <swp-datetime-cell>
                                <span class="date">@purchase.Date</span>
                                <span class="time">@purchase.Time</span>
                            </swp-datetime-cell>
                        </swp-data-table-cell>
                        <swp-data-table-cell class="muted">@purchase.Employee</swp-data-table-cell>
                        <swp-data-table-cell>@purchase.Services</swp-data-table-cell>
                        <swp-data-table-cell>
                            <swp-tag class="@purchase.Type">@purchase.TypeLabel</swp-tag>
                        </swp-data-table-cell>
                        <swp-data-table-cell>
                            <swp-amount-cell>@purchase.Amount</swp-amount-cell>
                        </swp-data-table-cell>
                    </swp-data-table-row>
                }
            </swp-data-table>
            <swp-see-all>@Model.SeeAllText</swp-see-all>
        </swp-card>
    </swp-detail-grid>
}
