<div class="card">
    <h6 class="card-header">
        <?php echo app('translator')->get('Community History'); ?>
    </h6>

    <?php
    // 1. Group and Count Submissions by Month
        $submissionsByMonth = \Illuminate\Support\Facades\DB::table('communities')
            // Extract the month and year, and count submissions
            ->select(
                \Illuminate\Support\Facades\DB::raw('COUNT(id) as count'),
                \Illuminate\Support\Facades\DB::raw('DATE_FORMAT(created_at, "%Y-%m") as month_year'), // MySQL/MariaDB syntax
                // For PostgreSQL, use: DB::raw("to_char(created_at, 'YYYY-MM') as month_year")
                // For SQLite, use: DB::raw("strftime('%Y-%m', created_at) as month_year")
                \Illuminate\Support\Facades\DB::raw('DATE_FORMAT(created_at, "%b %Y") as month_label') // e.g., "Jan 2025"
            )
            ->groupBy('month_year', 'month_label') // Group by the year-month to keep months in order
            ->orderBy('month_year', 'ASC') // Sort chronologically
            ->get();

        // 2. Prepare Data for Chart.js
        $labels = $submissionsByMonth->pluck('month_label');
        $data = $submissionsByMonth->pluck('count');
    ?>

    <div class="card-body">
        <div class="pt-4 px-3">
            

            <canvas id="submissionsChart" height="65"></canvas>
        </div>
    </div>
    
</div>

<div class="card">
    <h6 class="card-header">
        <?php echo app('translator')->get('Users History'); ?>
    </h6>
 

    <div class="card-body">
        <div class="pt-4 px-3">
            <canvas id="myChart" height="365"></canvas>

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


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    // 1. Retrieve data passed from the controller
    const labels = <?php echo json_encode($labels, 15, 512) ?>;
    const data = <?php echo json_encode($data, 15, 512) ?>;

    // 2. Get the canvas element
    const ctx = document.getElementById('submissionsChart').getContext('2d');

    // 3. Create the chart
    new Chart(ctx, {
        type: 'bar', // You can change this to 'line' for a line chart
        data: {
            labels: labels, // Month labels (e.g., "Jan 2025")
            datasets: [{
                label: 'Number of Submissions',
                data: data, // Submission counts
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Submissions Count'
                    }
                }
            }
        }
    });
</script><?php /**PATH /Applications/AMPPS/www/vanguard/resources/views/plugins/dashboard/widgets/registration-history.blade.php ENDPATH**/ ?>