@extends('admin.layout')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@section('content')
    <h2>Welcome, {{ auth('admin')->user()->name }}</h2>
    
<h2>Workers Payroll & Timelog Overview</h2>

<div style="width: 70%; margin: auto;">
    <canvas id="payrollChart"></canvas>
</div>
<script>
    window.isTenant = @json(tenant() ? true : false);
    window.tenant=@json(tenant());
</script>
<script>
    const ctx = document.getElementById('payrollChart').getContext('2d');
    var currency='AED';
if (window.isTenant) {
    currency=window.tenant.currency;
}

    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 ('+currency+')',
                    data: @json($pay),
                    backgroundColor: 'rgba(255, 99, 132, 0.7)'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>
@endsection