@model PowderCoating.Web.ViewModels.Reports.CustomerOverviewViewModel
@{ ViewData["Title"] = "Customer Overview"; }

<partial name="_ReportHeader" model="Model" />

<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="card text-bg-primary">
            <div class="card-body py-2">
                <div class="small">Active Customers</div>
                <div class="fs-5 fw-bold">@Model.ActiveCustomersCount</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-success">
            <div class="card-body py-2">
                <div class="small">Retention Rate</div>
                <div class="fs-5 fw-bold">@Model.CustomerRetentionRate.ToString("N1")%</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-bg-info">
            <div class="card-body py-2">
                <div class="small">Quote Win Rate</div>
                <div class="fs-5 fw-bold">@Model.QuoteFunnel.ConversionRate.ToString("N1")%</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-secondary">
            <div class="card-body py-2 text-center">
                <div class="small text-muted">Total Quotes</div>
                <div class="fs-5 fw-bold">@Model.QuoteFunnel.Total</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header fw-semibold">New Customers per Month</div>
            <div class="card-body">
                <canvas id="newCustChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header fw-semibold">Quote Conversion Funnel</div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tbody>
                        <tr><td>Draft</td><td class="text-end">@Model.QuoteFunnel.Draft</td></tr>
                        <tr><td>Sent</td><td class="text-end">@Model.QuoteFunnel.Sent</td></tr>
                        <tr class="table-success"><td><strong>Approved</strong></td><td class="text-end fw-bold">@Model.QuoteFunnel.Approved</td></tr>
                        <tr class="table-success"><td><strong>Converted</strong></td><td class="text-end fw-bold">@Model.QuoteFunnel.Converted</td></tr>
                        <tr class="table-danger"><td>Rejected</td><td class="text-end text-danger">@Model.QuoteFunnel.Rejected</td></tr>
                        <tr class="table-warning"><td>Expired</td><td class="text-end text-warning">@Model.QuoteFunnel.Expired</td></tr>
                        <tr class="table-light fw-bold"><td>Total</td><td class="text-end">@Model.QuoteFunnel.Total</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header fw-semibold">Top Customers by Lifetime Value</div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead class="table-light">
                        <tr><th>Customer</th><th class="text-end">Revenue</th><th class="text-end">Jobs</th><th class="text-end">Avg Order</th></tr>
                    </thead>
                    <tbody>
                        @foreach (var c in Model.CustomerLifetimeValue)
                        {
                            <tr>
                                <td class="small">@c.CustomerName</td>
                                <td class="text-end fw-semibold">@c.TotalRevenue.ToString("C")</td>
                                <td class="text-end text-muted">@c.JobCount</td>
                                <td class="text-end text-muted">@c.AvgOrderValue.ToString("C")</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header fw-semibold">Catalog Items by Category</div>
            <div class="card-body">
                <canvas id="catalogChart" height="220"></canvas>
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script src="~/lib/chartjs/chart.umd.min.js"></script>
<script>
(function () {
    const labels   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.MonthLabels));
    const newCusts = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.NewCustomersPerMonth));

    new Chart(document.getElementById('newCustChart'), {
        type: 'bar',
        data: { labels, datasets: [{ label: 'New Customers', data: newCusts, backgroundColor: 'rgba(13,110,253,0.7)' }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });

    const catLabels = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.CatalogByCategory.Keys));
    const catData   = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.CatalogByCategory.Values));
    const palette   = ['#0d6efd','#6610f2','#6f42c1','#d63384','#dc3545','#fd7e14','#ffc107','#198754'];

    new Chart(document.getElementById('catalogChart'), {
        type: 'doughnut',
        data: { labels: catLabels, datasets: [{ data: catData, backgroundColor: palette }] },
        options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } } }
    });
})();
</script>
}