@extends('affiliate.layout.index')
@section('title', 'Muftaax | Restaurant Dashboard')
@section('custom-style')
    <style>
        .swiper-button-next {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
            right: var(--swiper-navigation-sides-offset, 5px);
        }

        .swiper-button-prev {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
            left: var(--swiper-navigation-sides-offset, 5px);
        }
    </style>
@endsection
@section('content')

    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Dashboard</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                            </ol>
                        </nav>
                    </div>
                </div>

            </div>
            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">

                <div class="col-xxl-12 col-xl-12">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="swiper swiper-basic">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-earmark text-warning fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total
                                                                    Generated Links</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalGeneratedLinks }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-bar-graph text-muted fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Active Links</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalActiveLinks }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i
                                                                        class="bi bi-file-earmark-medical text-success fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total Redeemed
                                                                    Links</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalInactiveLinks }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-excel text-danger fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">
                                                                    Cancelled Orders</span>
                                                                <span class="d-block text-muted fs-12">100</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> --}}
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-card-heading text-primary fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total Drivers</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalDriverSignups }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i
                                                                        class="bi bi-file-earmark-image text-secondary fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total Users</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalUserSignups }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-files-alt text-warning fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total Joined
                                                                    Users</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ $totalJoinedUsers }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-button swiper-button-next"></div>
                                        <div class="swiper-button swiper-button-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-6 mb-5">
                            <div class="h-100 card custom-card overflow-hidden">
                                <div class="card-header justify-content-between">
                                    <div class="card-title">Orders and Rides</div>
                                    <div class="dropdown">
                                        {{-- <a href="javascript:void(0);" class="p-2 fs-12" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            View All<i class="ri-arrow-down-s-line align-middle ms-1"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a class="dropdown-item filter-option" href="javascript:void(0);"
                                                    data-filter="today">Today</a></li>
                                            <li><a class="dropdown-item filter-option" href="javascript:void(0);"
                                                    data-filter="this_week">This Week</a></li>
                                            <li><a class="dropdown-item filter-option" href="javascript:void(0);"
                                                    data-filter="last_week">Last Week</a></li>
                                        </ul> --}}

                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row border-bottom border-block-end-dashed">
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalOrdersCount }}</p>
                                                <p class="mb-0 text-muted">Total Orders</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalCompletedOrdersCount }}</p>
                                                <p class="mb-0 text-muted">Completed Orders</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div class="p-4 text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalCancelOrdersCount }}</p>
                                                <p class="mb-0 text-muted">Cancelled Orders</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-3" id="qrAnalysis"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 mb-5">
                            <div class="h-100 card custom-card">
                                <div class="card-header">
                                    <div class="card-title">Statistics</div>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row border-bottom border-block-end-dashed">
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalRideCount }}</p>
                                                <p class="mb-0 text-muted">Total Rides</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalCompletedRide }}</p>
                                                <p class="mb-0 text-muted">Complete Rides</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div class="p-4 text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ $totalCancelledRide }}</p>
                                                <p class="mb-0 text-muted">Cancelled Rides</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-3 mb-3" id="rides-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--End::row-1 -->

            <!-- Start::row-2 -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Recent Users
                            </div>
                            <div class="d-flex">

                                <div class="dropdown ms-2 d-none">
                                    <button class="btn btn-icon btn-secondary-light btn-sm btn-wave waves-light"
                                        type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ti ti-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="javascript:void(0);">All</a></li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive p-2">
                                <table class="table text-nowrap" id="dashboard-orders" width="100%">
                                    <thead>
                                        <tr>
                                            <th scope="col">#ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">User Type</th>
                                            <th scope="col">Join Date</th>
                                        </tr>
                                    </thead>
                                    {{-- Add dummy data --}}
                                    <tbody>
                                        @forelse ($users as $user)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <a href="javascript:void(0)" id="alert-confirm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-custom-class="tooltip-primary" title="Order Data">
                                                            <span type="button" data-bs-toggle="modal"
                                                                data-bs-target="#invoiceActiveDetail">
                                                                {{ $loop->iteration }}
                                                            </span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>{{ $user->first_name . ' ' . $user->last_name }}</td>
                                                <td>{{ $user->email }}</td>
                                                <td>{{ $user->user_type }}</td>
                                                <td>{{ $user->created_at->format('d M Y') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="text-center" colspan="5">No record Found</td>
                                            </tr>
                                        @endforelse

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer border-top-0">
                            <nav aria-label="Page navigation">
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-2 -->


        </div>
    </div>
@endsection
@section('custom-script')
    <script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <!-- Jobs-Dashboard -->
    <script src="{{ asset('assets/js/jobs-dashboard.js') }}"></script>
    <!-- Swiper JS -->
    <script src="{{ asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>

    <script src="{{ asset('assets/js/stocks-dashboard.js') }}"></script>




    <script src="{{ asset('assets/js/jobs-dashboard.js') }}"></script>

    <script>
        // Initialize variables to store the data
        let monthlyRidesData = {!! json_encode($monthlyRides) !!};
        let totalRideCount = {!! $totalRideCount !!};
        let totalCompletedRide = {!! $totalCompletedRide !!};
        let totalCancelledRide = {!! $totalCancelledRide !!};

        // // For debugging - check what data is coming through
        // console.log("Monthly Rides Data:", monthlyRidesData);
        // console.log("Total Rides:", totalRideCount);
        // console.log("Completed Rides:", totalCompletedRide);
        // console.log("Cancelled Rides:", totalCancelledRide);

        // Function to prepare the chart data
        function prepareChartData() {
            // Initialize arrays for all 12 months with zeros
            let totalRides = Array(12).fill(0);
            let completedRides = Array(12).fill(0);
            let cancelledRides = Array(12).fill(0);

            // Check if we have actual monthly data
            const hasMonthlyData = monthlyRidesData &&
                typeof monthlyRidesData === 'object' &&
                Object.keys(monthlyRidesData).length > 0;

            if (hasMonthlyData) {
                // Fill in the total rides data from monthlyRidesData
                Object.keys(monthlyRidesData).forEach(month => {
                    // Convert month string to integer (1-12) and subtract 1 for zero-based array index (0-11)
                    const monthIndex = parseInt(month) - 1;

                    // Check if the month index is valid
                    if (monthIndex >= 0 && monthIndex < 12) {
                        // Get the total rides for this month
                        totalRides[monthIndex] = monthlyRidesData[month];
                    }
                });

                // Calculate monthly completion and cancellation ratios based on overall data
                const completionRatio = totalCompletedRide / totalRideCount;
                const cancellationRatio = totalCancelledRide / totalRideCount;

                // Apply these ratios to each month's data
                completedRides = totalRides.map(monthlyTotal =>
                    Math.round(monthlyTotal * completionRatio)
                );

                cancelledRides = totalRides.map(monthlyTotal =>
                    Math.round(monthlyTotal * cancellationRatio)
                );
            } else {
                // No monthly data - distribute the total rides across recent months
                // This is a fallback to show something meaningful rather than zeros

                // Determine current month (0-11)
                const currentDate = new Date();
                const currentMonth = currentDate.getMonth(); // 0-based index (0=Jan, 11=Dec)

                // Distribute the rides over the last few months with more in recent months
                // This is just a placeholder visualization until real data is available
                for (let i = 0; i < 12; i++) {
                    // Calculate a weight based on recency (more recent = higher weight)
                    // This creates a distribution that favors recent months
                    const monthsAgo = (currentMonth - i + 12) % 12; // How many months ago (wrapping around the year)
                    const weight = Math.max(0, 6 - monthsAgo) / 21; // Weight decreases as monthsAgo increases

                    if (weight > 0) {
                        totalRides[i] = Math.round(totalRideCount * weight);
                        completedRides[i] = Math.round(totalCompletedRide * weight);
                        cancelledRides[i] = Math.round(totalCancelledRide * weight);
                    }
                }
            }

            return {
                totalRides,
                completedRides,
                cancelledRides
            };
        }

        // Get the formatted data
        const chartData = prepareChartData();

        // Create the ApexCharts options
        var options = {
            grid: {
                borderColor: '#f2f5f7'
            },
            series: [{
                    name: 'Total Rides',
                    data: chartData.totalRides
                },
                {
                    name: 'Completed Rides',
                    data: chartData.completedRides
                },
                {
                    name: 'Cancelled Rides',
                    data: chartData.cancelledRides
                }
            ],
            chart: {
                type: 'bar',
                height: 385,
                toolbar: {
                    show: true
                }
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '70%',
                    endingShape: 'rounded'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val > 0 ? val : ''; // Only show labels for non-zero values
                },
                style: {
                    fontSize: '10px'
                }
            },
            colors: ["#007bff", "#28a745", "#dc3545"], // Blue, Green, Red
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: {
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-xaxis-label',
                    }
                }
            },
            yaxis: {
                title: {
                    text: 'Rides',
                    style: {
                        color: "#8c9097"
                    }
                },
                labels: {
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-yaxis-label',
                    }
                }
            },
            fill: {
                opacity: 1
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val + " rides";
                    }
                }
            },
            legend: {
                position: 'top',
                horizontalAlign: 'center'
            }
        };

        // Check if the chart element exists before rendering
        if (document.querySelector("#rides-chart")) {
            var chart = new ApexCharts(document.querySelector("#rides-chart"), options);
            chart.render();
        } else {
            console.error("Chart container element #rides-chart not found!");
        }
    </script>

    <script>
        let monthlyOrdersData = {!! json_encode($monthlyOrders) !!};
        let totalOrdersCount = {!! $totalOrdersCount !!};
        let totalCompletedOrders = {!! $totalCompletedOrdersCount !!};
        let totalCancelledOrders = {!! $totalCancelOrdersCount !!};


        // Function to prepare the chart data
        function prepareOrderChartData() {
            // Initialize arrays for all 12 months with zeros
            let totalOrders = Array(12).fill(0);
            let completedOrders = Array(12).fill(0);
            let cancelledOrders = Array(12).fill(0);

            // Check if we have actual monthly data
            const hasMonthlyOrdersData = monthlyOrdersData &&
                typeof monthlyOrdersData === 'object' &&
                Object.keys(monthlyOrdersData).length > 0;

            if (hasMonthlyOrdersData) {
                Object.keys(monthlyOrdersData).forEach(month => {
                    const monthIndex = parseInt(month) - 1;

                    if (monthIndex >= 0 && monthIndex < 12) {
                        totalOrders[monthIndex] = monthlyOrdersData[month];
                    }
                });

                const completionRatio = totalCompletedOrders / totalOrdersCount;
                const cancellationRatio = totalCancelledOrders / totalOrdersCount;

                // Apply these ratios to each month's data
                completedOrders = totalOrders.map(monthlyTotal =>
                    Math.round(monthlyTotal * completionRatio)
                );

                cancelledOrders = totalOrders.map(monthlyTotal =>
                    Math.round(monthlyTotal * cancellationRatio)
                );
            } else {

                const currentDate = new Date();
                const currentMonth = currentDate.getMonth();

                for (let i = 0; i < 12; i++) {
                    const monthsAgo = (currentMonth - i + 12) % 12;
                    const weight = Math.max(0, 6 - monthsAgo) / 21;

                    if (weight > 0) {
                        totalOrders[i] = Math.round(totalRideCount * weight);
                        completedOrders[i] = Math.round(totalCompletedOrders * weight);
                        cancelledOrders[i] = Math.round(totalCancelledOrders * weight);
                    }
                }
            }

            return {
                totalOrders,
                completedOrders,
                cancelledOrders
            };
        }

        // Get the formatted data
        const ordersChartData = prepareOrderChartData();

        var options = {
            series: [{
                name: 'Total Orders',
                type: 'column',
                data: ordersChartData.totalOrders
            }, {
                name: 'Completed Orders',
                type: 'column',
                data: ordersChartData.completedOrders
            }, {
                name: 'Cancelled Orders',
                type: 'line',
                data: ordersChartData.cancelledOrders
            }, ],
            chart: {
                toolbar: {
                    show: false
                },
                height: 325,
                type: 'line',
                stacked: false,
                fontFamily: 'Poppins, sans-serif',
            },
            grid: {
                borderColor: '#f5f4f4',
                strokeDashArray: 3
            },
            dataLabels: {
                enabled: false
            },
            title: {
                text: undefined,
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            },
            yaxis: [{
                    show: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: false,
                        color: '#4eb6d0'
                    },
                    labels: {
                        style: {
                            colors: '#4eb6d0',
                        }
                    },
                    title: {
                        text: undefined,
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                {
                    seriesName: 'Projects',
                    opposite: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: false,
                    },
                    labels: {
                        style: {
                            colors: '#00E396',
                        }
                    },
                    title: {
                        text: undefined,
                    },
                },
                {
                    seriesName: 'Revenue',
                    opposite: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: false,
                    },
                    labels: {
                        show: false,
                    },
                    title: {
                        text: undefined,
                    }
                },
            ],
            tooltip: {
                enabled: true,
            },
            legend: {
                show: true,
                position: "top",
                offsetX: 0,
                offsetY: 8,
                markers: {
                    width: 5,
                    height: 5,
                    strokeWidth: 0,
                    strokeColor: '#fff',
                    fillColors: undefined,
                    radius: 12,
                    customHTML: undefined,
                    onClick: undefined,
                    offsetX: 0,
                    offsetY: 0
                },
            },
            stroke: {
                show: true,
                width: [5, 5, 1],
                curve: 'smooth',
            },
            plotOptions: {
                bar: {
                    columnWidth: "20%",
                    borderRadius: 3
                }
            },
            colors: ["var(--primary-color)", "rgb(69, 214, 91)", "rgb(231, 76, 60)"]
        };
        var chart1 = new ApexCharts(document.querySelector("#qrAnalysis"), options);
        chart1.render();

        // Handle filter selection
        document.querySelectorAll('.filter-option').forEach(item => {
            item.addEventListener('click', function() {
                var filterType = this.getAttribute('data-filter');
                updateChartData(filterType);
            });
        });

        // Function to update chart data based on filter type
        function updateChartData(filterType) {
            let filteredMonthlyData = [...monthlyData];
            let filteredWeeklyData = [...weeklyData];

            // Get today's date details
            let today = new Date();
            let currentMonth = today.getMonth();
            let currentWeek = Math.ceil(today.getDate() / 7) - 1; // Convert to 0-based index

            switch (filterType) {
                case 'today':
                    filteredMonthlyData = monthlyData.map((data, index) => (index === currentMonth ? data : 0));
                    filteredWeeklyData = weeklyData.map((data, index) => (index === currentWeek ? data : 0));
                    break;

                case 'this_week':
                    filteredWeeklyData = weeklyData.slice(0, 7); // First 7 days of the week
                    break;

                case 'last_week':
                    filteredWeeklyData = weeklyData.slice(7, 14); // Previous 7 days
                    break;

                default:
                    filteredMonthlyData = monthlyData;
                    filteredWeeklyData = weeklyData;
                    break;
            }

            // Update the chart with filtered data
            chart1.updateOptions({
                series: [{
                        name: 'Total Orders (Monthly)',
                        type: 'line',
                        data: filteredMonthlyData
                    },
                    {
                        name: 'Total Orders (Weekly)',
                        type: 'line',
                        data: filteredWeeklyData.slice(0, 12)
                    }
                ]
            });
        }
    </script>

@endsection