@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Sales Dashboard</h1>

    <div class="row g-3 mb-4">
        <!-- Total Sales -->
        <div class="col-md-3">
            <div class="card border-start border-primary border-4 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted">Total Sales</h6>
                    <h4 class="mb-0">{{ $totalSales }}</h4>
                </div>
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="col-md-3">
            <div class="card border-start border-success border-4 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted">Total Revenue</h6>
                    <h4 class="mb-0">Tsh {{ number_format($totalRevenue, 2) }}</h4>
                </div>
            </div>
        </div>

        <!-- Unique Customers -->
        <div class="col-md-3">
            <div class="card border-start border-info border-4 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted">Unique Customers</h6>
                    <h4 class="mb-0">{{ $totalCustomers }}</h4>
                </div>
            </div>
        </div>

        <!-- Latest Sale -->
        <div class="col-md-3">
            <div class="card border-start border-warning border-4 shadow-sm">
                <div class="card-body">
                    <h6 class="text-muted">Latest Sale</h6>
                    <h4 class="mb-0">{{ $latestSaleDate }}</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Sales Overview Chart -->
    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="mb-3">Monthly Sales Overview</h5>
            <div class="position-relative" style="height: 300px;">
                <canvas id="salesChartMonthly" height="100"></canvas>
            </div>
        </div>
    </div>

    <!-- Filtered Sales Chart -->
    <div class="card shadow-sm mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Sales Overview (Filter)</h5>
                <select id="chartRange" class="form-select w-auto">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="last_7_days" selected>Last 7 Days</option>
                    <option value="last_30_days">Last 30 Days</option>
                    <option value="this_month">This Month</option>
                    <option value="last_month">Last Month</option>
                    <option value="this_month_last_year">This Month Last Year</option>
                    <option value="this_year">This Year</option>
                    <option value="last_year">Last Year</option>
                </select>
            </div>
            <canvas id="salesChartFiltered" height="100"></canvas>
        </div>
    </div>

    <!-- Sales by Brick Type Chart -->
    <div class="card shadow-sm mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Sales by Brick Type</h5>
                <select id="brickTypeRange" class="form-select w-auto">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="last_7_days" selected>Last 7 Days</option>
                    <option value="last_30_days">Last 30 Days</option>
                    <option value="this_month">This Month</option>
                    <option value="last_month">Last Month</option>
                    <option value="this_month_last_year">This Month Last Year</option>
                    <option value="this_year">This Year</option>
                    <option value="last_year">Last Year</option>
                </select>
            </div>
            <canvas id="salesByBrickTypeChart" height="100"></canvas>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let filteredChart, monthlyChart, brickTypeChart;

    function renderChart(canvasId, labels, values, labelText) {
        const ctx = document.getElementById(canvasId).getContext('2d');
        return new Chart(ctx, {
            type: canvasId === 'salesByBrickTypeChart' ? 'bar' : 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: labelText,
                    data: values,
                    backgroundColor: canvasId === 'salesByBrickTypeChart'
                        ? ['#42A5F5', '#66BB6A', '#FFA726', '#EF5350', '#AB47BC', '#FF7043']
                        : 'rgba(54, 162, 235, 0.6)',
                    borderColor: canvasId === 'salesByBrickTypeChart'
                        ? '#fff'
                        : 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: canvasId === 'salesByBrickTypeChart' ? {} : { y: { beginAtZero: true } }
            }
        });
    }

    function fetchChartData(range = 'last_7_days') {
        fetch(`{{ route('sales.chart.data') }}?range=${range}`)
            .then(res => res.json())
            .then(data => {
                if (filteredChart) filteredChart.destroy();
                filteredChart = renderChart('salesChartFiltered', data.labels, data.values, 'Sales (Tsh)');
            });
    }

    function fetchBrickTypeChart(range = 'last_7_days') {
        fetch(`{{ route('sales.chart.data') }}?brickType=true&range=${range}`)
            .then(res => res.json())
            .then(data => {
                if (brickTypeChart) brickTypeChart.destroy();
                brickTypeChart = renderChart('salesByBrickTypeChart', data.labels, data.values, 'Sales by Brick Type');
            });
    }

    document.addEventListener('DOMContentLoaded', () => {
        const defaultRange = 'last_7_days';

        // Initial loads
        fetchChartData(defaultRange);
        fetchBrickTypeChart(defaultRange);

        // Monthly chart (default range)
        fetch("{{ route('sales.chart.data') }}?range=" + defaultRange)
            .then(res => res.json())
            .then(data => {
                monthlyChart = renderChart('salesChartMonthly', data.labels, data.values, 'Monthly Sales (Tsh)');
            });

        // On change range for time-series chart
        document.getElementById('chartRange').addEventListener('change', function () {
            fetchChartData(this.value);
        });

        // On change range for brick type pie chart
        document.getElementById('brickTypeRange').addEventListener('change', function () {
            fetchBrickTypeChart(this.value);
        });
    });
</script>
@endpush