

<?php $__env->startSection('title', 'Order-wise Report'); ?>

<?php $__env->startSection('content'); ?>
<div class="grid gap-8 lg:grid-cols-2">
    <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-bold text-gray-800">Weekly Order Volume</h2>
        <p class="text-sm text-gray-600 mb-4">Number of orders created per week.</p>
        <div class="h-80">
            <canvas id="weeklyOrderChart"></canvas>
        </div>
    </div>
    <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-bold text-gray-800">Monthly Order Volume</h2>
        <p class="text-sm text-gray-600 mb-4">Number of orders created per month.</p>
        <div class="h-80">
            <canvas id="monthlyOrderChart"></canvas>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const weeklyData = {
            labels: <?php echo json_encode($weeklyOrders->pluck('date')); ?>,
            datasets: [{
                label: 'Orders',
                data: <?php echo json_encode($weeklyOrders->pluck('count')); ?>,
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        };

        const monthlyData = {
            labels: <?php echo json_encode($monthlyOrders->map(function($item) { return date('M Y', mktime(0, 0, 0, $item->month, 1, $item->year)); })); ?>,
            datasets: [{
                label: 'Orders',
                data: <?php echo json_encode($monthlyOrders->pluck('count')); ?>,
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        };

        const weeklyCtx = document.getElementById('weeklyOrderChart').getContext('2d');
        new Chart(weeklyCtx, {
            type: 'bar',
            data: weeklyData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const monthlyCtx = document.getElementById('monthlyOrderChart').getContext('2d');
        new Chart(monthlyCtx, {
            type: 'bar',
            data: monthlyData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.seller', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\download\project\final cms\laravel-cms\resources\views/seller/reports/orders.blade.php ENDPATH**/ ?>