@extends('layouts.admin.app')

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

@section('content')

{{-- CONTAINER --}}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-xl-12 d-flex align-self-stretch">
            <div class="card w-100 border-0">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0 text-gray font-weight-normal">Sales Report <i
                                    class="fas fa-chart-line ml-1"></i>
                            </h3>
                        </div>
                        <div class="col-sm-2 text-right">
                            <select name="month" id="month" class="form-control form-control-sm">
                            </select>
                        </div>
                        <div class="col-sm-2 text-right">
                            <select name="year" id="year" class="form-control form-control-sm">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body d-flex and flex-column">
                    <canvas id="chart_sales_report"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .active{
        background-color: #2c3e50 !important;
        color: #fff !important;
    }
</style>
{{-- End CONTAINER --}}
@endsection
@section('script')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js'></script>
<script>
    const bgc = ['#2E2E2E', '#ffb449', '#2c3e50', '#f1c40f', '#95a5a6', '#ecf0f1'];
    const sales = @json($sales);
    const currentYear = (new Date()).getFullYear();
    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const currentMonth = (new Date()).getMonth() + 1;

    const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + (i * step));
    const years = range(currentYear, currentYear - 50, -1);

    $.each(years, function (index, value) {
        const isActive = value === currentYear ? 'selected' : ''; // Mark the current year as selected
        $('#year').append(`<option value="${value}" ${isActive}>${value}</option>`);
    });

    for (let month = 0; month < 12; month++) {
        const monthName = monthNames[month];
        const monthValue = (month + 1).toString().padStart(2, '0');
        const isActive = (month + 1) === currentMonth ? 'selected' : ''; // Mark the current month as selected
        $('#month').append(`<option value="${monthValue}" ${isActive}>${monthName}</option>`);
    }
    $('#month').prepend('<option value="#" selected>All</option>');

    // Highlight active classes for the selected year and month
    function highlightActiveSelection() {
        $('#month option').removeClass('active');
        $('#year option').removeClass('active');

        $('#month option:selected').addClass('active');
        $('#year option:selected').addClass('active');
    }

    const salesDataByDay = sales.reduce((acc, { amount, date_sale }) => {
        const date = new Date(date_sale);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const key = `${year}-${month}-${day}`;
        acc[key] = acc[key] ? acc[key] + amount : amount;
        return acc;
    }, {});

    function getSalesForMonthYear(month, year) {
        const days = [];
        const salesValues = [];
        const daysInMonth = new Date(year, month, 0).getDate();
        for (let day = 1; day <= daysInMonth; day++) {
            const key = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
            days.push(day);
            salesValues.push(salesDataByDay[key] || 0);
        }
        return { days, salesValues };
    }

    function getSalesForAllMonths(year) {
        const months = [];
        const salesValues = [];
        for (let month = 1; month <= 12; month++) {
            let totalSales = 0;
            for (let day = 1; day <= 31; day++) {
                const key = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                totalSales += salesDataByDay[key] || 0;
            }
            months.push(monthNames[month - 1]);
            salesValues.push(totalSales);
        }
        return { months, salesValues };
    }

    const chart_monthly_users = document.getElementById('chart_sales_report');
    let chartInstance = new Chart(chart_monthly_users, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Sales Data',
                data: [],
                backgroundColor: 'rgba(255, 180, 73, 0.3)',
                borderColor: '#ffb449',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#ffb449',
                pointRadius: 5
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Sales Report',
                    font: {
                        size: 20
                    }
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Day/Month'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Sales'
                    }
                }
            }
        }
    });

    function updateChart() {
        const selectedYear = $('#year').val();
        const selectedMonth = $('#month').val();

        if (selectedYear === '#' || selectedYear === '') {
            const { months, salesValues } = getSalesForAllMonths(currentYear);
            chartInstance.data.labels = months;
            chartInstance.data.datasets[0].data = salesValues;
        } else if (selectedMonth === '#' || selectedMonth === '') {
            const { months, salesValues } = getSalesForAllMonths(selectedYear);
            chartInstance.data.labels = months;
            chartInstance.data.datasets[0].data = salesValues;
        } else {
            const { days, salesValues } = getSalesForMonthYear(selectedMonth, selectedYear);
            chartInstance.data.labels = days;
            chartInstance.data.datasets[0].data = salesValues;
        }

        chartInstance.update();
        highlightActiveSelection();
    }

    $('#month, #year').change(updateChart);

    $(document).ready(updateChart);
</script>
@endsection