@extends('admin.layout')

@section('content')
    <h2>Welcome, {{ auth('admin')->user()->name }}</h2>
    
<div style="width: 70%; margin: auto;">
    <canvas id="payrollChart"></canvas>
</div>

<script>
    const ctx = document.getElementById('payrollChart').getContext('2d');

    const payrollChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($names),
            datasets: [
                {
                    label: 'Total Hours Worked',
                    data: @json($hours),
                    backgroundColor: 'rgba(54, 162, 235, 0.7)'
                },
                {
                    label: 'Total Payroll ($)',
                    data: @json($pay),
                    backgroundColor: 'rgba(255, 99, 132, 0.7)'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>
@endsection