@extends('store.layout.main')

@section('title', 'Sales Report')

@section('page-header')
    <x-store.page-header pretitle="Store" title="Sales Report" />
@endsection

@section('main-container')

    <div class="row g-3 mb-3">

        {{-- Filters --}}
        <form id="reportFilterForm" method="GET" class="row g-3 mb-3">
            <div class="col-md-3">
                <label class="form-label">Store</label>
                <select name="store_id" class="form-control">
                    <option value="">All Stores</option>
                    @foreach ($stores as $store)
                        <option value="{{ $store->id }}" {{ $storeId == $store->id ? 'selected' : '' }}>
                            {{ $store->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" value="{{ $startDate }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" value="{{ $endDate }}" class="form-control">
            </div>
            <div class="col-md-3 align-self-end">
                <button class="btn btn-primary w-100">Filter</button>
            </div>

            {{-- Quick Filters --}}
            <div class="row mt-3">
                <div class="col-12">
                    <input type="hidden" name="filter" id="filter_type" value="{{ request('filter', 'month') }}">
                    @php
                        $currentFilter = request('filter', 'month');
                    @endphp

                    <button type="button"  onclick="quickFilter('all')" data-filter="all"
                        class="btn btn-sm {{ $currentFilter == 'all' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">
                        All
                    </button>

                    <button type="button"  onclick="quickFilter('today')" data-filter="today"
                        class="btn btn-sm {{ $currentFilter == 'today' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">
                        Today
                    </button>

                    <button type="button"  onclick="quickFilter('yesterday')" data-filter="yesterday"
                        class="btn btn-sm {{ $currentFilter == 'yesterday' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">
                        Yesterday
                    </button>

                    <button type="button"  onclick="quickFilter('7days')" data-filter="7days"
                        class="btn btn-sm {{ $currentFilter == '7days' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">
                        Last 7 Days
                    </button>

                    <button type="button"  onclick="quickFilter('30days')" data-filter="30days"
                        class="btn btn-sm {{ $currentFilter == '30days' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">
                        Last 30 Days
                    </button>

                    <button type="button"  onclick="quickFilter('month')" data-filter="month"
                        class="btn btn-sm {{ $currentFilter == 'month' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">

                        {{ 'This Month ' . \Carbon\Carbon::now()->format('F') }}
                    </button>

                    <button type="button"  onclick="quickFilter('year')" data-filter="year"
                        class="btn btn-sm {{ $currentFilter == 'year' ? 'btn-primary' : 'btn-outline-primary' }} filter-btn">

                        {{ 'This Year ' . \Carbon\Carbon::now()->format('Y') }}
                    </button>

                </div>
            </div>
        </form>

        {{-- Metrics Cards - show only is isset start date start_date and end date in url and not empty --}}
        @if (!empty($_GET['start_date']) && !empty($_GET['end_date']))
            <div class="row g-3 mb-3">
                {{-- Date Range Filtered --}}
                <div class="col-md-6">
                    <div class="card p-3 text-center">
                        <h4>Selected Range Sales</h4>
                        <h5>${{ number_format($metrics['range_sales'], 2) }}</h5>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card p-3 text-center">
                        <h4>Selected Range Orders</h4>
                        <h5>{{ $metrics['range_orders'] }}</h5>
                    </div>
                </div>
            </div>
        @endif


        <div class="row g-3 mb-3">
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>Total Sales</h4>
                    <h5>${{ number_format($metrics['total_sales'], 2) }}</h5>
                    <small>Amount ($) </small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>Total Orders</h4>
                    <h5>{{ $metrics['total_orders'] }}</h5>
                    <small>No. of Orders</small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>Today Sales</h4>
                    <h5>${{ number_format($metrics['today_sales'], 2) }}</h5>
                    <small>{{ $metrics['today_orders'] }} Orders</small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>Yesterday Sales</h4>
                    <h5>${{ number_format($metrics['yesterday_sales'], 2) }}</h5>
                    <small>{{ $metrics['yesterday_orders'] }} Orders</small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>This Week Sales</h4>
                    <h5>${{ number_format($metrics['this_week_sales'], 2) }}</h5>
                    <small>{{ $metrics['this_week_orders'] }} Orders</small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card p-3 text-center">
                    <h4>This Month Sales</h4>
                    <h5>${{ number_format($metrics['this_month_sales'], 2) }}</h5>
                    <small>{{ $metrics['this_month_orders'] }} Orders</small>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h6>Average Order Value</h6>
                        <h4>{{ number_format($averageOrderValue,2) }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="card">
                    <div class="card-body">
                        <h6>Total Items Sold</h6>
                        <h4>{{ $totalItemsSold }}</h4>
                    </div>
                </div>
            </div>
            
        </div>

    </div>

    {{-- Charts Row --}}
    <div class="row g-3">

        {{-- Sales Over Time --}}
        <div class="col-md-6">
            <div class="card p-3">
                <h4>Daily Sales</h4>
                <canvas id="dailySalesChart" height="250"></canvas>
            </div>
        </div>

        {{-- Hourly Sales --}}
        <div class="col-md-6">
            <div class="card p-3">
                <h4>Hourly Sales</h4>
                <canvas id="hourlySalesChart" height="250"></canvas>
            </div>
        </div>

        {{-- Category-wise Sales --}}
        <div class="col-md-6">
            <div class="card p-3">
                <h4>Category-wise Sales</h4>
                <canvas id="categorySalesChart" height="250"></canvas>
            </div>
        </div>

        {{-- Discount vs Tax --}}
        <div class="col-md-6">
            <div class="card p-3">
                <h4>Discount vs Tax</h4>
                <canvas id="discountTaxChart" height="250"></canvas>
            </div>
        </div>

        {{-- Sales Heatmap --}}
        <div class="col-md-6">
            <div class="card p-3">
                <h4>Sales Heatmap (Hour vs Day)</h4>

                 <div class="card-bodyny mt-3">
                    <div id="salesHeatmap"></div>
                </div>
            </div>

           
        </div>

        <div class="col-md-6">
            <div class="card p-3">
                <h5>Sales Forecast (Next 7 Days)</h5>

                <div class="card-body mt-3">
                    <div id="salesForecastChart"></div>
                </div>
            </div>
            
        </div>

    </div>

    {{-- Top Products Tables --}}
    <div class="row g-3 mt-3">

        <div class="col-md-6">
            <div class="card p-3">
                <h4>Top Products (This Week)</h4>
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Sales</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($topProductsWeek as $p)
                            <tr>
                                <td>{{ $p->product_name }}</td>
                                <td>{{ $p->total_qty }}</td>
                                <td>${{ number_format($p->total_sales, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card p-3">
                <h4>Top Products (This Month)</h4>
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Sales</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($topProductsMonth as $p)
                            <tr>
                                <td>{{ $p->product_name }}</td>
                                <td>{{ $p->total_qty }}</td>
                                <td>${{ number_format($p->total_sales, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // --- Daily Sales Chart ---
            const dailyCtx = document.getElementById('dailySalesChart').getContext('2d');
            new Chart(dailyCtx, {
                type: 'line',
                data: {
                    labels: @json($salesChart['labels']),
                    datasets: [{
                        label: 'Daily Sales',
                        data: @json($salesChart['data']),
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        fill: true,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // --- Hourly Sales Chart ---
            const hourlyCtx = document.getElementById('hourlySalesChart').getContext('2d');
            const hourlyData = Array(24).fill(0);
            @foreach ($hourlySales as $h)
                hourlyData[{{ $h->hour }}] = {{ $h->total_sales }};
            @endforeach
            new Chart(hourlyCtx, {
                type: 'bar',
                data: {
                    labels: Array.from({
                        length: 24
                    }, (_, i) => i + ":00"),
                    datasets: [{
                        label: 'Hourly Sales',
                        data: hourlyData,
                        backgroundColor: 'rgba(255, 99, 132, 0.6)',
                        borderColor: 'rgba(255,99,132,1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true
                }
            });

            // --- Category-wise Sales Chart ---
            const categoryCtx = document.getElementById('categorySalesChart').getContext('2d');
            new Chart(categoryCtx, {
                type: 'pie',
                data: {
                    labels: @json($categorySales->pluck('category_name')),
                    datasets: [{
                        label: 'Category Sales',
                        data: @json($categorySales->pluck('total_sales')),
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
                        ]
                    }]
                },
                options: {
                    responsive: true
                }
            });

            // --- Discount vs Tax Chart ---
            const dtCtx = document.getElementById('discountTaxChart').getContext('2d');
            new Chart(dtCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Discount', 'Tax'],
                    datasets: [{
                        label: 'Discount vs Tax',
                        data: [{{ $discountTax->total_discount ?? 0 }},
                            {{ $discountTax->total_tax ?? 0 }}
                        ],
                        backgroundColor: ['#FF6384', '#36A2EB']
                    }]
                },
                options: {
                    responsive: true
                }
            });

        });

        // quick filter
        function quickFilter(type) {
            document.getElementById('filter_type').value = type;

            let start = document.getElementById('start_date');
            let end = document.getElementById('end_date');

            let today = new Date();
            let todayStr = today.toISOString().slice(0, 10);

            if (type === 'today') {
                start.value = todayStr;
                end.value = todayStr;
            }

            if (type === 'yesterday') {
                let y = new Date();
                y.setDate(y.getDate() - 1);

                start.value = y.toISOString().slice(0, 10);
                end.value = y.toISOString().slice(0, 10);
            }

            if (type === '7days') {
                let s = new Date();
                s.setDate(s.getDate() - 6);

                start.value = s.toISOString().slice(0, 10);
                end.value = todayStr;
            }

            if (type === '30days') {
                let s = new Date();
                s.setDate(s.getDate() - 29);

                start.value = s.toISOString().slice(0, 10);
                end.value = todayStr;
            }

            if (type === 'month') {
                let first = new Date(today.getFullYear(), today.getMonth(), 1);
                let last = new Date(today.getFullYear(), today.getMonth() + 1, 0);

                start.value = first.toISOString().slice(0, 10);
                end.value = last.toISOString().slice(0, 10);
            }

            if (type === 'year') {
                let first = new Date(today.getFullYear(), 0, 1);
                let last = new Date(today.getFullYear(), 11, 31);

                start.value = first.toISOString().slice(0, 10);
                end.value = last.toISOString().slice(0, 10);
            }

            if (type === 'all') {
                start.value = '';
                end.value = '';
            }

            document.getElementById('reportFilterForm').submit();
        }

        let heatmapRaw = @json($heatmapData);

let days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

let heatmapSeries = [];

// create structure
for(let d=1; d<=7; d++){

    let row = {
        name: days[d-1],
        data: []
    };

    for(let h=0; h<24; h++){

        let found = heatmapRaw.find(x => x.day == d && x.hour == h);

        row.data.push({
            x: h + ":00",
            y: found ? found.orders : 0
        });

    }

    heatmapSeries.push(row);
}

let options = {

    chart: {
        height: 350,
        type: 'heatmap'
    },

    dataLabels: {
        enabled: false
    },

    colors: ["#008FFB"],

    series: heatmapSeries,

    title: {
        text: 'Sales Heatmap'
    }

};

let chart = new ApexCharts(
    document.querySelector("#salesHeatmap"),
    options
);

chart.render();


let forecastLabels = @json($forecastDays);
let forecastData = @json($forecastValues);

let optionsForecast = {
    chart: {
        type: 'line',
        height: 350
    },
    series: [{
        name: 'Forecast Sales',
        data: forecastData
    }],
    xaxis: {
        categories: forecastLabels
    },
    stroke: {
        curve: 'smooth'
    },
    markers: {
        size: 5
    },
    title: {
        text: 'Next 7 Days Sales Forecast',
        align: 'left'
    },
    yaxis: {
        labels: {
            formatter: function (val) {
                return '$' + val.toFixed(2);
            }
        }
    }
};

let forecastChart = new ApexCharts(
    document.querySelector("#salesForecastChart"),
    optionsForecast
);

forecastChart.render();

    </script>
@endsection