<div>
    <div class="row">
        <div class="col-sm d-flex justify-content-end">
            <button class="btn btn-primary mb-2" wire:click="updateData">
                <i class="fa-solid fa-arrows-rotate"></i>
            </button>
            <div
                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
                {{ $lastUpdated }}
            </div>
        </div>
    </div>

    <canvas id="myPieChart5" width="50" height="50"></canvas>

</div>

<script>
    var receivefnishTasksInWorkstation = @json($receivefnishTasksInWorkstation);

    var grafico5 = document.getElementById('myPieChart5').getContext('2d');
    var labels = Object.keys(receivefnishTasksInWorkstation);
    var data = Object.values(receivefnishTasksInWorkstation);

    var myPieChart5 = new Chart(grafico5, {
        type: 'bar',
        data: {
            labels: labels.map(label => label),
            datasets: [{
                data: data,
                backgroundColor: [
                    'rgb(117,210,240)', //green color
                    'rgb(9, 37, 92)', //Azul escuro ISPT
                    'rgb(0, 176, 234)', // Azull Claro ISPT
                    'rgb(5, 107, 163)', // Azul parecido 
                ],

                borderColor: [
                    'rgba(0,80,0,0.5)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                    // ... (adicionar mais cores se necessário)
                ],
                borderWidth: 1
            }]
        },
        options: {
            animation: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                }
            }
        },
    });
</script>
