@ {
    ViewData ["Title"] = "Sales Analysis";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Styles {
    <!-- Tabler CSS is already loaded in your _Layout.cshtml. No extra CSS needed! -->
    <style >
    /* Only tiny tweaks for chart containers - the rest is handled by Tabler */
    .chart-container {
        position: relative;
        height: 250px;
        width: 100%;
    }

    .filter-btn-group .btn {
        border-radius: 20px;
        font-weight: 500;
    }

        .filter-btn-group .btn.active {
            background-color: var(--tblr-primary);
            color: var(--tblr-white);
            border-color: var(--tblr-primary);
        }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 600;
    }

        .kpi-value.text-green {
            color: var(--tblr-green);
        }

        .kpi-value.text-blue {
            color: var(--tblr-primary);
        }

        .kpi-value.text-orange {
            color: var(--tblr-orange);
        }

        .kpi-value.text-red {
            color: var(--tblr-red);
        }

    </style>
}

<div class="page-body" >
<div class="container-xl" >
<!-- Page Header -->
<div class="page-header d-print-none" >
<div class="row align-items-center" >
<div class="col" >
<h2 class="page-title" > Sales Analysis</h2 >
<div class="page-subtitle" > Revenue by order type, payment methods, and discount impact</div >
</div >
</div >
</div >
<!-- Filter Bar (Using Tabler Card & Button classes) -->
<div class="card mb-3" >
<div class="card-body p-3" >
<div class="row g-2 align-items-center" >
<div class="col-auto filter-btn-group" >
<button class="btn btn-outline-secondary btn-sm filter-btn" > This Week</button >
<button class="btn btn-outline-secondary btn-sm filter-btn active" > Current Month</button >
<button class="btn btn-outline-secondary btn-sm filter-btn" > Last Month</button >
<button class="btn btn-outline-secondary btn-sm filter-btn" > Last 3 Months</button >
</div >
<div class="col-auto ms-auto" >
<div class="input-group input-group-sm" >
<input type="date" class="form-control" id="startDate" / >
<span class="input-group-text" > —</span >
<input type="date" class="form-control" id="endDate" / >
<button class="btn btn-outline-secondary" id="applyBtn" > Apply</button >
</div >
</div >
<div class="col-auto" >
<span class="text-muted" id="dateRangeLabel" style="font-size: 0.875rem;" > </span >
</div >
</div >
</div >
</div >
<!-- KPI Cards (Tabler Card classes) -->
<div class="row g-3 mb-3" >
<div class="col-md-3 col-sm-6" >
<div class="card" >
<div class="card-body p-3" >
<div class="text-muted mb-1" > Total Revenue</div >
<div class="kpi-value text-blue" id="totalRevenue" > 0.00</div >
</div >
</div >
</div >
<div class="col-md-3 col-sm-6" >
<div class="card" >
<div class="card-body p-3" >
<div class="text-muted mb-1" > Total Orders</div >
<div class="kpi-value text-green" id="totalOrders" > 0</div >
</div >
</div >
</div >
<div class="col-md-3 col-sm-6" >
<div class="card" >
<div class="card-body p-3" >
<div class="text-muted mb-1" > Avg Order Value</div >
<div class="kpi-value text-orange" id="avgOrderValue" > 0.00</div >
</div >
</div >
</div >
<div class="col-md-3 col-sm-6" >
<div class="card" >
<div class="card-body p-3" >
<div class="text-muted mb-1" > Total Discounts</div >
<div class="kpi-value text-red" id="totalDiscounts" > 0.00</div >
</div >
</div >
</div >
</div >
<!-- Charts Row 1 -->
<div class="row g-3 mb-3" >
<div class="col-md-6" >
<div class="card" >
<div class="card-header" >
<h3 class="card-title" > Revenue by Order Type</h3 >
</div >
<div class="card-body" >
<div class="chart-container" > <canvas id="revenuePieChart" > </canvas > </div >
</div >
</div >
</div >
<div class="col-md-6" >
<div class="card" >
<div class="card-header" >
<h3 class="card-title" > Orders by Type</h3 >
</div >
<div class="card-body" >
<div class="chart-container" > <canvas id="ordersBarChart" > </canvas > </div >
</div >
</div >
</div >
</div >
<!-- Charts Row 2 -->
<div class="row g-3 mb-3" >
<div class="col-md-6" >
<div class="card" >
<div class="card-header" >
<h3 class="card-title" > Payment Methods</h3 >
</div >
<div class="card-body" >
<div class="chart-container" > <canvas id="paymentPieChart" > </canvas > </div >
</div >
</div >
</div >
<div class="col-md-6" >
<div class="card" >
<div class="card-header" >
<h3 class="card-title" > Avg Order Value by Type</h3 >
</div >
<div class="card-body" >
<div class="chart-container" > <canvas id="avgOrderBarChart" > </canvas > </div >
</div >
</div >
</div >
</div >
<!-- Discount Impact (Tabler Card) -->
<div class="card mt-2" >
<div class="card-header" >
<h3 class="card-title" > Discount Impact</h3 >
</div >
<div class="card-body" >
<div class="row text-center" >
<div class="col-md-4" >
<div class="text-muted" > Total Discounts</div >
<div class="kpi-value text-red" id="discountTotal" > 0.00</div >
</div >
<div class="col-md-4" >
<div class="text-muted" > % of Revenue</div >
<div class="kpi-value" id="discountPercent" > 0.0%</div >
</div >
<div class="col-md-4" >
<div class="text-muted" > Orders with Discount</div >
<div class="kpi-value" id="discountOrders" > 0</div >
</div >
</div >
</div >
</div >
</div >
</div >

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> let revenueChart, ordersChart, paymentChart, avgOrderChart;
    // --- Tabler Color Helpers --- // These match the CSS variables defined in your tabler.css const colors =

{
    blue: getComputedStyle(document.documentElement).getPropertyValue('--tblr-primary').trim() || '#066fd1', green: getComputedStyle(document.documentElement).getPropertyValue('--tblr-green').trim() || '#2fb344', orange: getComputedStyle(document.documentElement).getPropertyValue('--tblr-orange').trim() || '#f76707', red: getComputedStyle(document.documentElement).getPropertyValue('--tblr-red').trim() || '#d63939', yellow: getComputedStyle(document.documentElement).getPropertyValue('--tblr-yellow').trim() || '#f59f00', gray: getComputedStyle(document.documentElement).getPropertyValue('--tblr-gray-500').trim() || '#6b7280'
}

;

// Helper for Chart.js colors
const chartColors = {
    dineIn: colors.blue, delivery: colors.yellow, takeaway: colors.green, online: colors.red, cash: colors.blue, card: colors.yellow, other: colors.gray
}

;

// Set default dates (Current Month)
const today = new Date();
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
document.getElementById('startDate').value = firstDay.toISOString().split('T')[0];
document.getElementById('endDate').value = today.toISOString().split('T')[0];
updateDateRangeLabel();

// Event Listeners
document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const now = new Date();
                let start = new Date();
                let end = new Date();

                const text = this.textContent.trim();
                if (text === 'This Week') {
                    start.setDate(now.getDate() - now.getDay());
                } else if (text === 'Current Month') {
                    start = new Date(now.getFullYear(), now.getMonth(), 1);
                } else if (text === 'Last Month') {
                    start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                    end = new Date(now.getFullYear(), now.getMonth(), 0);
                } else if (text === 'Last 3 Months') {
                    start.setMonth(now.getMonth() - 3);
                }

                document.getElementById('startDate').value = start.toISOString().split('T')[0];
                document.getElementById('endDate').value = end.toISOString().split('T')[0];
                updateDateRangeLabel();
                loadDashboardData();
            });
        });

document.getElementById('applyBtn').addEventListener('click', function() {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            updateDateRangeLabel();
            loadDashboardData();
        });

function updateDateRangeLabel() {
    const start = document.getElementById('startDate').value;
    const end = document.getElementById('endDate').value;
    const startDate = new Date(start + 'T00:00:00');
    const endDate = new Date(end + 'T00:00:00');
    document .getElementById('dateRangeLabel').textContent = `$

{
    startDate .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}

— $ {
    endDate .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
}

`;
}

// Load Data
async function loadDashboardData() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    try

{
    const response = await fetch(`/Reports/GetSalesAnalysisData?startDate=${startDate}&endDate=${endDate}`);
    const result = await response.json();
    if (result.success)

{
    renderDashboard(result.data);
}

else {
    console .error(result.message);
}

}

catch (error) {
    console .error('Error loading dashboard data:', error);
}

}

function renderDashboard(data) {
    const rows = data.rows;
    // Helper to get row by SectionName const getRow = (name) => rows.find(r => r.sectionName === name);
    const getChartRows = (name) => rows.filter(r => r.sectionName === name);
    // 1. KPI const kpi = getRow('KPI');
    if (kpi)

{
    document .getElementById('totalRevenue').textContent = parseFloat(kpi.value1).toFixed(2);
    document .getElementById('totalOrders').textContent = parseInt(kpi.value2);
    document .getElementById('avgOrderValue').textContent = parseFloat(kpi.value3).toFixed(2);
    document .getElementById('totalDiscounts').textContent = parseFloat(kpi.value4).toFixed(2);
}

// 2. Revenue Pie Chart
const revenueRows = getChartRows('RevenueByOrderType');
renderPieChart('revenuePieChart', revenueRows, revenueChart, chartColors);

// 3. Orders Bar Chart
const ordersRows = getChartRows('OrdersByType');
renderHorizontalBarChart('ordersBarChart', ordersRows, ordersChart, chartColors.blue);

// 4. Payment Methods Pie Chart
const paymentRows = getChartRows('PaymentMethods');
renderPieChart('paymentPieChart', paymentRows, paymentChart, chartColors);

// 5. Avg Order Value Bar Chart
const avgRows = getChartRows('AvgOrderValueByType');
renderHorizontalBarChart('avgOrderBarChart', avgRows, avgOrderChart, chartColors.green);

// 6. Discount Impact
const discount = getRow('DiscountImpact');
if (discount) {
    document .getElementById('discountTotal').textContent = parseFloat(discount.value1).toFixed(2);
    document .getElementById('discountPercent').textContent = discount.value2 + '%';
    document .getElementById('discountOrders').textContent = discount.value3;
}

}

// Chart Helper Functions
function renderPieChart(canvasId, data, existingChart, colorMap) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    if (existingChart) existingChart.destroy();
    const labels = data.map(r => r.chartLabel);
    const values = data.map(r => r.chartValue1);
    const percentages = data.map(r => r.percentage);
    // Dynamically assign colors based on label const bgColors = labels.map(label => {
                const lower = label.toLowerCase();
                if (lower.includes('dine')) return colorMap.dineIn;
                if (lower.includes('delivery')) return colorMap.delivery;
                if (lower.includes('takeaway')) return colorMap.takeaway;
                if (lower.includes('online')) return colorMap.online;
                if (lower.includes('cash')) return colorMap.cash;
                if (lower.includes('card')) return colorMap.card;
                return colorMap.other;
            });
    existingChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: bgColors,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'circle',
                                padding: 15,
                                font: { size: 12 }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const percentage = percentages[context.dataIndex] || 0;
                                    return `${label}: ${value.toFixed(2)} (${percentage.toFixed(1)}%)`;
                                }
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
}

function renderHorizontalBarChart(canvasId, data, existingChart, color) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    if (existingChart) existingChart.destroy();
    const labels = data.map(r => r.chartLabel);
    const values = data.map(r => r.chartValue1);
    existingChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: color,
                        borderRadius: 4,
                        barThickness: 20
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: { color: 'rgba(0,0,0,0.05)' }
                        },
                        y: {
                            grid: { display: false }
                        }
                    }
                }
            });
}

// Initial Load
loadDashboardData();
</script >
}