<div>

    <div class="row">
        <div class="col-sm d-flex justify-content-end">
            <button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageEquipments">
                <i class="fa-solid fa-percent"></i>
            </button>
            <button class="btn btn-primary mr-2 mb-2" wire:click="updateTimeGrafics">
                <i class="fa-solid fa-chart-pie"></i>
            </button>
            <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
                <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">
            <h6>Equipamentos da Obra</h6>
            <p style="color:gray; font-size:13px">Total de ações para concluir todos os equipamentos da obra.</p>
            <canvas id="myPieChart"></canvas>
        </div>
        <div class="col-sm">
            <h6>Equivalente de equipamentos da Obra</h6>
            <p style="color:gray; font-size:13px">Total de equipamentos e os seus estados actuais.</p>
            <canvas id="myPieChart1"></canvas>
        </div>
    </div>

</div>

<script>
    // O code em si e refeito pois o code inicial busca valores do componente livewire apos atualizar ele vem como data, posteriormente atualizar esta parte para nao repetir code.
    window.addEventListener('refreshData', event => {
        // Obter dados do evento
        var data = event.detail[0];

        if (myPieChart) {
            myPieChart.destroy(); // Destrua o gráfico antigo antes de criar um novo
        }

        var equipmentGraph = document.getElementById('myPieChart').getContext('2d');

        var myPieChart = new Chart(equipmentGraph, {
            type: 'doughnut',
            data: {
                labels: [
                    'Total: ' + data.totalEquipmentsCount,
                    'Por Iniciar: ' + data.unstarted,
                    'Em Curso: ' + data.inProgress,
                    'Concluídos: ' + data.completed
                ],
                datasets: [{
                    data: [null, data.unstarted, data.inProgress, data.completed],
                    backgroundColor: [
                        'rgba(0,80,0,0.5)', //green color
                        'rgb(9, 37, 92)', //Azul escuro ISPT
                        'rgb(0, 176, 234)', // Azull Claro ISPT
                        'rgb(5, 107, 163)', // Azul parecido 
                    ],
                    // borderColor: [
                    //     '#FFFFFF', // Cor branca para o total (não será visível)
                    //     'rgba(255, 99, 132, 1)',
                    //     'rgba(54, 162, 235, 1)',
                    //     'rgba(255, 206, 86, 1)'
                    // ],
                    borderWidth: 1
                }]
            },
            options: {
                events: [],
                // responsive: true,
                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
            }
        });

        if (myPieChart1) {
            myPieChart1.destroy(); // Destrua o gráfico antigo antes de criar um novo
        }

        var grafico2 = document.getElementById('myPieChart1').getContext('2d');

        var myPieChart1 = new Chart(grafico2, {
            type: 'doughnut',
            data: {
                labels: [
                    'Total: ' + data.totalEquivalentEquipment,
                    'Por Iniciar: ' + data.equivalentUnstarted,
                    'Em Curso: ' + data.equivalentInProgress,
                    'Concluídos: ' + data.equivalentCompleted
                ],
                datasets: [{
                    data: [null, data.equivalentUnstarted, data.equivalentInProgress, data
                        .equivalentCompleted
                    ],
                    backgroundColor: [
                        'rgba(0,80,0,0.5)', //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)'
                    // ],
                    borderWidth: 1.
                }]
            },
            options: {
                events: [],
                // responsive: true,
                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
            }
        });
    });

    // Obtenha o contexto do elemento canvas
    var equipmentGraph = document.getElementById('myPieChart').getContext('2d');

    // Dados do componente Livewire
    var totalEquipmentsCount = {{ $totalEquipmentsCount }};
    var unstarted = {{ $unstarted }};
    var inProgress = {{ $inProgress }};
    var completed = {{ $completed }};


    // Crie um novo gráfico circular
    var myPieChart = new Chart(equipmentGraph, {
        type: 'doughnut',
        data: {
            labels: [
                'Total: ' + totalEquipmentsCount,
                'Por Iniciar: ' + unstarted,
                'Em Curso: ' + inProgress,
                'Concluídos: ' + completed
            ],
            datasets: [{
                data: [null, unstarted, inProgress, completed],
                backgroundColor: [
                    'rgba(0,80,0,0.5)', //green color
                    'rgb(9, 37, 92)', //Azul escuro ISPT
                    'rgb(0, 176, 234)', // Azull Claro ISPT
                    'rgb(5, 107, 163)', // Azul parecido 
                ],
                // borderColor: [
                //     '#FFFFFF', // Cor branca para o total (não será visível)
                //     'rgba(255, 99, 132, 1)',
                //     'rgba(54, 162, 235, 1)',
                //     'rgba(255, 206, 86, 1)'
                // ],
                borderWidth: 1
            }]
        },
        options: {
            events: [],
            // responsive: true,
            // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
        }
    });

    var grafico2 = document.getElementById('myPieChart1').getContext('2d');

    // Dados do componente Livewire
    var totalEquivalentEquipment = {{ $totalEquivalentEquipment }}
    var equivalentUnstarted = {{ $equivalentUnstarted }}
    var equivalentInProgress = {{ $equivalentInProgress }}
    var equivalentCompleted = {{ $equivalentCompleted }}

    var myPieChart1 = new Chart(grafico2, {
        type: 'doughnut',
        data: {
            labels: [
                'Total: ' + totalEquivalentEquipment,
                'Por Iniciar: ' + equivalentUnstarted,
                'Em Curso: ' + equivalentInProgress,
                'Concluídos: ' + equivalentCompleted
            ],
            datasets: [{
                data: [null, equivalentUnstarted, equivalentInProgress,
                    equivalentCompleted
                ], // Dados do componente Livewire
                backgroundColor: [
                    'rgba(0,80,0,0.5)', //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)'
                // ],
                borderWidth: 1
            }]
        },
        options: {
            events: []
        }
    });
</script>

<script>
    window.addEventListener('refreshPercentageEquipments', event => {
        // Obter dados do evento
        var data = event.detail[0];

        // Calcular porcentagens
        var unstartedPercentage = ((data.unstarted / data.totalEquipmentsCount) * 100).toFixed(2);
        var inProgressPercentage = ((data.inProgress / data.totalEquipmentsCount) * 100).toFixed(2);
        var completedPercentage = ((data.completed / data.totalEquipmentsCount) * 100).toFixed(2);


        var totalEquivalentEquipmentPercentage = ((data.equivalentUnstarted / data.totalEquivalentEquipment) *
            100).toFixed(
            2);
        var equivalentInProgressPercentage = ((data.equivalentInProgress / data.totalEquivalentEquipment) * 100)
            .toFixed(2);
        var equivalentCompletedPercentage = ((data.equivalentCompleted / data.totalEquivalentEquipment) * 100)
            .toFixed(2);


        if (myPieChart) {
            myPieChart.destroy(); // Destrua o gráfico antigo antes de criar um novo
        }

        var equipmentGraph = document.getElementById('myPieChart').getContext('2d');

        var myPieChart = new Chart(equipmentGraph, {
            type: 'pie',
            data: {
                labels: [
                    'Total: ' + data.totalEquipmentsCount,
                    'Por Iniciar: ' + unstartedPercentage + '%',
                    'Em Curso: ' + inProgressPercentage + '%',
                    'Concluídos: ' + completedPercentage + '%'
                ],
                datasets: [{
                    data: [null, data.unstarted, data.inProgress, data.completed],
                    backgroundColor: [
                        'rgba(0,80,0,0.5)', //green color
                        'rgb(9, 37, 92)', //Azul escuro ISPT
                        'rgb(0, 176, 234)', // Azull Claro ISPT
                        'rgb(5, 107, 163)', // Azul parecido 
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                events: [],
            }
        });
        if (myPieChart1) {
            myPieChart1.destroy(); // Destrua o gráfico antigo antes de criar um novo
        }

        var grafico2 = document.getElementById('myPieChart1').getContext('2d');

        var myPieChart1 = new Chart(grafico2, {
            type: 'pie',
            data: {
                labels: [
                    'Total: ' + data.totalEquivalentEquipment,
                    'Por Iniciar: ' + totalEquivalentEquipmentPercentage + '%',
                    'Em Curso: ' + equivalentInProgressPercentage + '%',
                    'Concluídos: ' + equivalentCompletedPercentage + '%'
                ],
                datasets: [{
                    data: [null, data.equivalentUnstarted, data.equivalentInProgress, data
                        .equivalentCompleted
                    ],
                    backgroundColor: [
                        'rgba(0,80,0,0.5)', //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)'
                    // ],
                    borderWidth: 1.
                }]
            },
            options: {
                events: [],
                // responsive: true,
                // maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
            }
        });

    });
</script>
