@extends('layouts.app')

@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <h1 class="h3 mb-1">Dashboard</h1>
            <p class="text-muted mb-0">Live profit, due, and cash collection insights for your store.</p>
        </div>

        <div class="btn-group" role="group" aria-label="Dashboard period selector">
            <button type="button" class="btn btn-outline-primary active" data-period="today">Day</button>
            <button type="button" class="btn btn-outline-primary" data-period="week">Week</button>
            <button type="button" class="btn btn-outline-primary" data-period="month">Month</button>
            <button type="button" class="btn btn-outline-primary" data-period="year">Year</button>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-12 col-lg-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <p class="text-uppercase text-secondary small mb-1">Profit</p>
                            <h2 class="h4 mb-0" id="dashboard-profit-value">0.00</h2>
                        </div>
                        <span class="badge bg-success" id="dashboard-profit-badge">Day</span>
                    </div>
                    <p class="text-muted mb-0">Revenue minus cost for the selected period.</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <p class="text-uppercase text-secondary small mb-1">Due</p>
                            <h2 class="h4 mb-0 text-danger" id="dashboard-due-value">0.00</h2>
                        </div>
                        <span class="badge bg-warning text-dark" id="dashboard-due-badge">Day</span>
                    </div>
                    <p class="text-muted mb-0">Total unpaid balance for the selected period.</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <p class="text-uppercase text-secondary small mb-1">Cash Collection</p>
                            <h2 class="h4 mb-0 text-primary" id="dashboard-collected-value">0.00</h2>
                        </div>
                        <span class="badge bg-info text-dark" id="dashboard-collected-badge">Day</span>
                    </div>
                    <p class="text-muted mb-0">Money collected in the selected period.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-xl-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4 gap-3">
                        <div>
                            <p class="text-uppercase text-secondary small mb-1">Selected period</p>
                            <h3 class="h5 mb-0" id="dashboard-period-label">Today</h3>
                        </div>
                        <div class="text-end">
                            <p class="text-secondary small mb-1">Revenue</p>
                            <h4 class="mb-0" id="dashboard-sales-label">0.00</h4>
                        </div>
                    </div>

                    <div class="p-3 rounded-4 bg-light chart-container">
                        <canvas id="dashboardChart" height="220"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h5 class="mb-4">Insights</h5>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-secondary">Profit trend</span>
                        <strong id="insight-profit">0.00</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-secondary">Due trend</span>
                        <strong id="insight-due">0.00</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-secondary">Cash collection</span>
                        <strong id="insight-collected">0.00</strong>
                    </div>
                    <p class="text-muted small mb-0">The chart compares revenue, cost, cash collected, and due amount in the selected period.</p>
                </div>
            </div>
        </div>
    </div>

    <style>
        .chart-container {
            position: relative;
            min-height: 260px;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.6.0/dist/chart.umd.min.js"></script>
    <script>
        const dashboardMetrics = @json($metrics);
        const periodButtons = document.querySelectorAll('[data-period]');
        let dashboardChart = null;

        const formatCurrency = (value) => Number(value).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        });

        const setText = (id, value) => {
            const element = document.getElementById(id);
            if (element) {
                element.textContent = formatCurrency(value);
            }
        };

        const updateChartData = (metric) => {
            if (!dashboardChart) {
                return;
            }

            dashboardChart.data = {
                labels: ['Sales', 'Cost', 'Cash', 'Due'],
                datasets: [
                    {
                        label: metric.label,
                        data: [metric.sales, metric.cost, metric.collected, metric.due],
                        backgroundColor: ['#19875480', '#6c757d80', '#0d6efd80', '#ffc10780'],
                        borderColor: ['#198754', '#6c757d', '#0d6efd', '#ffc107'],
                        borderWidth: 1,
                    },
                ],
            };

            dashboardChart.options.plugins.title = {
                display: true,
                text: `${metric.label} Overview`,
            };

            dashboardChart.update();
        };

        const renderDashboard = (periodKey) => {
            const metric = dashboardMetrics[periodKey];
            if (!metric) {
                return;
            }

            document.getElementById('dashboard-period-label').textContent = metric.label;
            document.getElementById('dashboard-profit-value').textContent = formatCurrency(metric.profit);
            document.getElementById('dashboard-due-value').textContent = formatCurrency(metric.due);
            document.getElementById('dashboard-collected-value').textContent = formatCurrency(metric.collected);
            document.getElementById('dashboard-sales-label').textContent = formatCurrency(metric.sales);
            document.getElementById('dashboard-profit-badge').textContent = metric.label;
            document.getElementById('dashboard-due-badge').textContent = metric.label;
            document.getElementById('dashboard-collected-badge').textContent = metric.label;
            document.getElementById('insight-profit').textContent = formatCurrency(metric.profit);
            document.getElementById('insight-due').textContent = formatCurrency(metric.due);
            document.getElementById('insight-collected').textContent = formatCurrency(metric.collected);

            updateChartData(metric);
        };

        const createDashboardChart = () => {
            const ctx = document.getElementById('dashboardChart');
            if (!ctx) {
                return;
            }

            dashboardChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Sales', 'Cost', 'Cash', 'Due'],
                    datasets: [
                        {
                            label: 'Overview',
                            data: [0, 0, 0, 0],
                            backgroundColor: ['#19875480', '#6c757d80', '#0d6efd80', '#ffc10780'],
                            borderColor: ['#198754', '#6c757d', '#0d6efd', '#ffc107'],
                            borderWidth: 1,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        title: {
                            display: true,
                            text: 'Today Overview',
                        },
                        tooltip: {
                            callbacks: {
                                label: (context) => {
                                    return `${context.label}: ${formatCurrency(context.parsed.y)}`;
                                },
                            },
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false,
                            },
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: (value) => formatCurrency(value),
                            },
                        },
                    },
                },
            });
        };

        const activatePeriodButton = (selectedKey) => {
            periodButtons.forEach((button) => {
                button.classList.toggle('active', button.dataset.period === selectedKey);
            });
        };

        document.addEventListener('DOMContentLoaded', () => {
            periodButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    const periodKey = button.dataset.period;
                    activatePeriodButton(periodKey);
                    renderDashboard(periodKey);
                });
            });

            createDashboardChart();
            renderDashboard('today');
        });
    </script>
@endsection