{{-- <div>
    <div class="row">
        <div class="col-sm d-flex justify-content-end">
            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageElementalTasks">
                <i class="fa-solid fa-percent"></i>
            </button>
            <button class="btn btn-primary mr-2 mb-2" wire:click="refreshTaskGraph">
                <i class="fa fa-bar-chart fa-rotate-270"></i>
            </button>
            <button class="btn btn-primary mb-2" wire:click="refreshTaskGraph">
                <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>

    <div class="row text-center">
        <div class="col-sm-12">
            <h6>Quantidade Tarefas</h6>
            <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
            <canvas id="stackedBarChart" width="800" height="400"></canvas>
        </div>
    </div>
</div> --}}


{{-- <script>
    // Atualização do gráfico quando os dados são atualizados via Livewire
    window.addEventListener('refreshDataTasks', event => {
        var data = event.detail[0];
        var elementalTasksCount = data.receiveElementalTasks;
        var elementalTasksCountAll = data.receiveElementalTasksAll;

        var dataConcluidas = [];
        var dataRestantes = [];
        var labels = Object.keys(elementalTasksCountAll);

        labels.forEach(function(label) {
            var valorConcluido = elementalTasksCount[label] || 0;
            dataConcluidas.push(valorConcluido);
            var valorTotal = elementalTasksCountAll[label] || 0;
            dataRestantes.push(valorTotal - valorConcluido);
        });

        var canvas = document.getElementById('stackedBarChart').getContext('2d');

        if (window.stackedBarChartInstance) {
            window.stackedBarChartInstance.destroy();
        }

        window.stackedBarChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Concluídas',
                    data: dataConcluidas,
                    backgroundColor: 'rgb(9,37,92)'
                }, {
                    label: 'Restantes',
                    data: dataRestantes,
                    backgroundColor: 'rgba(168,168,168)'
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    });

    // Função para inicializar o gráfico pela primeira vez
    function initializeChart() {
        var elementalTasksCountAll = @json($receiveElementalTasksAll);
        var elementalTasksCount = @json($receiveElementalTasks);

        var dataConcluidas = [];
        var dataRestantes = [];
        var labels = Object.keys(elementalTasksCountAll);

        labels.forEach(function(label) {
            var valorConcluido = elementalTasksCount[label] || 0;
            dataConcluidas.push(valorConcluido);
            var valorTotal = elementalTasksCountAll[label];
            dataRestantes.push(valorTotal - valorConcluido);
        });

        var canvas = document.getElementById('stackedBarChart').getContext('2d');

        if (window.stackedBarChartInstance) {
            window.stackedBarChartInstance.destroy();
        }

        window.stackedBarChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Concluídas',
                    data: dataConcluidas,
                    backgroundColor: 'rgb(9,37,92)'
                }, {
                    label: 'Restantes',
                    data: dataRestantes,
                    backgroundColor: 'rgba(168,168,168)'
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    }

    // Inicialização inicial do gráfico
    initializeChart();
</script> --}}

<div>
    <div class="row">
        <div class="col-sm d-flex justify-content-end">
            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageElementalTasks">
                <i class="fa-solid fa-arrows-rotate"></i>
                {{-- <i class="fa-solid fa-percent"></i> --}}
            </button>
            {{-- <button class="btn btn-primary mr-2 mb-2" wire:click="refreshTaskGraph">
                <i class="fa fa-bar-chart fa-rotate-270"></i>
            </button>
            <button class="btn btn-primary mb-2" wire:click="refreshTaskGraph">
                <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>

    <div class="row text-center">
        <div class="col-sm-12">
            <h6>Quantidade Tarefas</h6>
            <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
            <canvas id="stackedBarChart" width="800" height="400"></canvas>
        </div>
    </div>
</div>


<script>
    // Atualização do gráfico quando os dados são atualizados via Livewire
    window.addEventListener('refreshDataTasks', event => {
        var data = event.detail[0];
        var elementalTasksCount = data.receiveElementalTasks;
        var elementalTasksCountAll = data.receiveElementalTasksAll;

        var dataConcluidas = [];
        var dataRestantes = [];
        var labels = Object.keys(elementalTasksCountAll);

        labels.forEach(function(label) {
            var valorConcluido = elementalTasksCount[label] || 0;
            dataConcluidas.push(valorConcluido);
            var valorTotal = elementalTasksCountAll[label] || 0;
            dataRestantes.push(valorTotal - valorConcluido);
        });

        var canvas = document.getElementById('stackedBarChart').getContext('2d');

        if (window.stackedBarChartInstance) {
            window.stackedBarChartInstance.destroy();
        }

        window.stackedBarChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Concluídas',
                    data: dataConcluidas,
                    backgroundColor: 'rgb(9,37,92)'
                }, {
                    label: 'Restantes',
                    data: dataRestantes,
                    backgroundColor: 'rgba(168,168,168)'
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    });

    // Função para inicializar o gráfico pela primeira vez
    function initializeChart() {
        var elementalTasksCountAll = @json($receiveElementalTasksAll);
        var elementalTasksCount = @json($receiveElementalTasks);

        var dataConcluidas = [];
        var dataRestantes = [];
        var labels = Object.keys(elementalTasksCountAll);

        labels.forEach(function(label) {
            var valorConcluido = elementalTasksCount[label] || 0;
            dataConcluidas.push(valorConcluido);
            var valorTotal = elementalTasksCountAll[label];
            dataRestantes.push(valorTotal - valorConcluido);
        });

        var canvas = document.getElementById('stackedBarChart').getContext('2d');

        if (window.stackedBarChartInstance) {
            window.stackedBarChartInstance.destroy();
        }

        window.stackedBarChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Concluídas',
                    data: dataConcluidas,
                    backgroundColor: 'rgb(9,37,92)'
                }, {
                    label: 'Restantes',
                    data: dataRestantes,
                    backgroundColor: 'rgba(168,168,168)'
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    }

    // Inicialização inicial do gráfico
    initializeChart();
</script>