<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Topack System - Dashboard</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    
        /* Estilo adicional para o modal de mensagem */
        .modal-content {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            border-bottom: none;
            background-color: #f8f9fa;
            position: relative;
        }

        .modal-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            top: 15px;
            left: 15px;
            border: 2px solid #4e73df; /* Borda da imagem do perfil */
        }

        .modal-title {
            margin-left: 80px; /* Espaço para a imagem do perfil */
        }

        .modal-body {
            font-size: 1.1rem;
            line-height: 1.5;
            color: #333;
        }
    

    <!-- Script de verificação de autenticação -->
    <script>
        // Verificar se o usuário está autenticado
        if (!localStorage.getItem('authenticated')) {
            // Se não estiver autenticado, redirecionar para a página de login
            window.location.href = 'login.html';
        }

        function showNotActiveModal() {
            $('#notActiveModal').modal('show'); // Exibe o modal
        }

        function openMessageModal(messageContent) {
            // Define o conteúdo do corpo do modal para a mensagem que foi passada
            document.getElementById('modalMessageBody').innerText = messageContent;
            $('#messageModal').modal('show'); // Exibe o modal
        }
    </script>
</head>

<body id="page-top">
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Sidebar -->
        <ul class="navbar-nav sidebar sidebar-dark accordion" id="accordionSidebar" style="background-color: #0D0D0D;">
            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                <div class="sidebar-brand-icon">
                    <img src="https://i.postimg.cc/1zvRGFq5/Logo-Topack.png" alt="Logo da Topack System" style="width: 100px; height: 110px;">
                </div>
                <div class="sidebar-brand-text mx-3"> PCP </div>
            </a>
            <hr class="sidebar-divider my-0">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">
                    <i class="fas fa-fw fa-chart-area"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <hr class="sidebar-divider">
            <div class="sidebar-heading">Interface</div>
            <hr class="sidebar-divider">
            <div class="sidebar-heading">Outros</div>
            <li class="nav-item">
                <a class="nav-link" href="tables.html">
                    <i class="fas fa-fw fa-table"></i>
                    <span>Análise</span>
                </a>
            </li>
            <hr class="sidebar-divider d-none d-md-block">
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>
            <div class="sidebar-card d-none d-lg-flex">
                <img class="sidebar-card-illustration mb-2" src="img/undraw_rocket.png" alt="...">
                <p class="text-center mb-2"><strong>Topack System</strong> Controle de produtividade de big bag!</p>
                <a class="btn btn-success btn-sm" href="https://topack.com.br">Acesse o nosso site!</a>
            </div>
        </ul>

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">
            <!-- Main Content -->
            <div id="content">
                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>
                    <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                        <div class="input-group">
                            <input type="text" class="form-control bg-light border-0 small" placeholder="Buscar..." aria-label="Search" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">
                                    <i class="fas fa-search fa-sm"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown no-arrow mx-1">
                            <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-bell fa-fw"></i>
                                <span class="badge badge-danger badge-counter">3+</span>
                            </a>
                            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
                                <h6 class="dropdown-header">Notificação</h6>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-primary">
                                            <i class="fas fa-file-alt text-white"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">Atualização do Topack System - Versão 1.0.1</div>
                                        <span class="font-weight-bold">Novidades da Versão!</span>
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-success">
                                            <i class="fas fa-donate text-white"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">Informações sobre a atualização</div>
                                        <p>Com a nova atualização, algumas inconsistências podem ocorrer. Se você notar algo incorreto, não hesite em clicar no botão de suporte!</p>
                                    </div>
                                </a>
                                <a class="dropdown-item d-flex align-items-center" href="#">
                                    <div class="mr-3">
                                        <div class="icon-circle bg-warning">
                                            <i class="fas fa-exclamation-triangle text-white"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="small text-gray-500">Aumento de Produção</div>
                                        <p>Atenção: Detectamos um aumento significativo na produção. Verifique se todos os processos estão funcionando como esperado.</p>
                                    </div>
                                </a>
                                <a class="dropdown-item text-center small text-gray-500" href="#">Mostrar todas as alertas</a>
                            </div>
                        </li>

                        <!-- Nav Item - Messages -->
                        <li class="nav-item dropdown no-arrow mx-1">
                            <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-envelope fa-fw"></i>
                                <span class="badge badge-danger badge-counter">1</span>
                            </a>
                            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
                                <h6 class="dropdown-header">Mensagem</h6>
                                <a class="dropdown-item d-flex align-items-center" href="#" onclick="openMessageModal('Oi, eu sou o Messias Marcatto, caso tenha alguma dúvida não resite entrar em contato comigo!'); return false;">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="https://i.postimg.cc/FRGrxLkH/Meu-perfil.png" alt="...">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold">
                                        <div class="text-truncate">Oi, eu sou o Messias Marcatto, caso tenha alguma dúvida não resite entrar em contato comigo!</div>
                                        <div class="small text-gray-500">Messias Marcatto · 1m</div>
                                    </div>
                                </a>
                                <a class="dropdown-item text-center small text-gray-500" href="#">Ler todas as mensagens</a>
                            </div>
                        </li>
                        <div class="topbar-divider d-none d-sm-block"></div>

                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Messias Marcatto</span>
                                <img class="img-profile rounded-circle" src="https://i.postimg.cc/FRGrxLkH/Meu-perfil.png">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#" onclick="showNotActiveModal(); return false;">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Meu Perfil
                                </a>
                                <a class="dropdown-item" href="#" onclick="showNotActiveModal(); return false;">
                                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Configurações
                                </a>
                                <a class="dropdown-item" href="#" onclick="showNotActiveModal(); return false;">
                                    <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Registro de atividades
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Sair
                                </a>
                            </div>
                        </li>
                    </ul>
                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
                        <a href="mailto:pcp2@topack.com.br?subject=Suporte&body=Messias, Por%20gentileza,%20preciso%20de%20ajuda%20com%20topack%20system.%20Eu%20sou%20[nome_do_usuario]%20e%20minha%20d%C3%BAvida%20%C3%A9:%20%22[sua_duvida]%22" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                            <i class="fas fa-download fa-sm text-white-50"></i> Suporte
                        </a>
                    </div>
                    <!-- Content Row -->
                    <div class="row">
                        <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                            <div class="card border-left-primary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Produtividade (Novembro 2024)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">60.872</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-cogs fa-2x text-gray-300"></i> <!-- Ícone alterado -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                            <div class="card border-left-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Produção média por dia útil (Novembro 2024)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">2.899</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-chart-line fa-2x text-gray-300"></i> <!-- Ícone alterado -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                            <div class="card border-left-info shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Taxa de Eficiência</div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">113,70%</div>
                                                </div>
                                                <div class="col">
                                                    <div class="progress progress-sm mr-2">
                                                        <div class="progress-bar bg-info" role="progressbar" style="width: 113.70%" aria-valuenow="113.70" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-tasks fa-2x text-gray-300"></i> <!-- Ícone alterado -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                            <div class="card border-left-warning shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Comparativo relativo do mês anterior</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">28,40% <span style="color: rgb(7, 192, 32);">↑</span></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-arrow-up fa-2x text-gray-300"></i> <!-- Ícone alterado -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Novo Card para Média Ponderada -->
                        <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                            <div class="card border-left-danger shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Média Ponderada</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">20,55</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-calculator fa-2x text-gray-300"></i> <!-- Ícone para média ponderada -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Content Row -->
                    <div class="row">
                        <div class="col-xl-8 col-lg-7">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">Produção diário</h6>
                                    <div class="dropdown no-arrow">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                                            <div class="dropdown-header">Cabeçalho suspenso:</div>
                                            <a class="dropdown-item" href="#">Ação</a>
                                            <a class="dropdown-item" href="#">Outra ação</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Algo mais</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart-area">
                                        <canvas id="myAreaChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-lg-5">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">Produção setor</h6>
                                    <div class="dropdown no-arrow">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                                            <div class="dropdown-header">Cabeçalho suspenso:</div>
                                            <a class="dropdown-item" href="#">Ação</a>
                                            <a class="dropdown-item" href="#">Outra ação</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Algo mais</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart-pie pt-4 pb-2">
                                        <canvas id="myPieChart"></canvas>
                                    </div>
                                    <div class="mt-4 text-center small">
                                        <span class="mr-2">
                                            <i class="fas fa-circle" style="color: #0CF25D;"></i> Confecção - <span id="valor-confec"></span>
                                        </span>
                                        <span class="mr-2">
                                            <i class="fas fa-circle" style="color: #808080;"></i> Especial - <span id="valor-especial"></span>
                                        </span>
                                        <span class="mr-2">
                                            <i class="fas fa-circle" style="color: #0000FF;"></i> Bulkliner - <span id="valor-bulkliner"></span>
                                        </span>
                                        <span class="mr-2">
                                            <i class="fas fa-circle" style="color: #FFA500;"></i> Geobag - <span id="valor-geobag"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Content Row -->
                    <div class="row" style="flex-grow: 1;">
                        <div class="col-lg-6 mb-4 d-flex flex-column">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">Produção em porcentagem por cliente</h6>
                                </div>
                                <div class="card-body" id="production-summary">
                                    <div id="top-clients"></div>
                                    <button class="btn btn-primary" id="show-all-button" style="display:none;">Ver mais</button>
                                </div>
                            </div>

                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">Resíduos percentuais por setor</h6>
                                </div>
                                <div class="card-body" id="waste-summary">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">Produção por dia da semana</h6>
                                </div>
                                <div class="card-body">
                                    <div class="chart-bar">
                                        <canvas id="myBarChart"></canvas>
                                    </div>
                                    <hr>
                                    <code></code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright © Topack System 2024</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->
        </div>
        <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- Modal para Mensagem Completa -->
    <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <img src="https://i.postimg.cc/FRGrxLkH/Meu-perfil.png" alt="Perfil" />
                    <h5 class="modal-title" id="messageModalLabel">Mensagem</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" id="modalMessageBody">
                    Aqui estará a sua mensagem.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Notificação não ativa -->
    <div class="modal fade" id="notActiveModal" tabindex="-1" role="dialog" aria-labelledby="notActiveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notActiveModalLabel">Atenção!</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Este módulo não está ativo. Por favor, contate o Suporte Messias Marcatto.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Você realmente deseja sair?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Selecione "Sair" abaixo se estiver pronto para encerrar sua sessão atual.</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                    <button class="btn btn-primary" type="button" onclick="logout()">Sair</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Script de Logout -->
    <script>
        function logout() {
            localStorage.removeItem('authenticated'); // Remove o estado de autenticação
            window.location.href = 'login.html'; // Redirecionando para a página de login
        }
    </script>

    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin-2.min.js"></script>

    <!-- Page level plugins -->
    <script src="vendor/chart.js/Chart.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="js/demo/chart-area-demo.js"></script>
    <script src="js/demo/chart-pie-demo.js"></script>
    <script src="js/demo/chart-bar-demo.js"></script>

    <script>
        // Formatando os números automaticamente
        const valores = {
            confec: 50700,
            especial: 9730,
            bulkliner: 440,
            geobag: 2,
        };

        document.getElementById('valor-confec').innerText = valores.confec.toLocaleString('pt-BR') + ',000 kg';
        document.getElementById('valor-especial').innerText = valores.especial.toLocaleString('pt-BR') + ',000 kg';
        document.getElementById('valor-bulkliner').innerText = valores.bulkliner.toLocaleString('pt-BR') + ',000 kg';
        document.getElementById('valor-geobag').innerText = valores.geobag.toLocaleString('pt-BR') + ',000 kg';

        // Dados dos setores e resíduos em kg
        const sectors = [
            { name: "Tecelagem Fita", amount: 176, color: "bg-danger" },
            { name: "Confecção", amount: 535, color: "bg-warning" },
            { name: "Tecelagem Plana", amount: 2104, color: "bg-info" },
            { name: "Tecelagem Circular", amount: 4627, color: "bg-primary" },
            { name: "Corte", amount: 1132, color: "bg-success" }
        ];

        const totalWaste = 10000; // Exemplo de total de resíduos

        function calculateWastePercentage() {
            const wasteSummaryElement = document.getElementById('waste-summary');
            wasteSummaryElement.innerHTML = '';

            sectors.forEach(sector => {
                const percentage = ((sector.amount / totalWaste) * 100).toFixed(2);
                const sectorHtml = `
                    <h4 class="small font-weight-bold">${sector.name} <span class="float-right">${percentage}%</span></h4>
                    <div class="progress mb-4" data-toggle="tooltip" data-placement="top" title="${sector.amount.toLocaleString('pt-BR')},000 kg">
                        <div class="progress-bar ${sector.color}" role="progressbar" style="width: ${percentage}%" aria-valuenow="${percentage}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                `;
                wasteSummaryElement.innerHTML += sectorHtml;
            });
        }

        // Chama a função ao carregar a página
        window.onload = function() {
            calculateWastePercentage();
            renderClientData();
        };

        // Cálculo e exibição de porcentagem de produção por cliente
        const totalProduction = 60872; // Total de produção
        const clients = {
            "1": { quantity: 50, name: "3M DO BRASIL LTDA", code: "10.101.0268" },
            "2": { quantity: 500, name: "AÇUCAREIRA QUATÁ S.A LENÇÓIS", code: "10.101.0027" },
            "3": { quantity: 1800, name: "AÇUCAREIRA QUATÁ S.A MACATUBA", code: "10.101.0148" },
            "4": { quantity: 600, name: "AÇUCAREIRA QUATÁ S.A QUATÁ", code: "10.101.0149" },
            "5": { quantity: 200, name: "ALPEK POLYESTER PERNAMBUCO S.A", code: "10.102.0015" },
            "6": { quantity: 610, name: "CAÇU COMÉRCIO INDÚSTRIA DE AÇÚCAR E ÁLCOOL LTDA", code: "10.101.0191" },
            "7": { quantity: 200, name: "CAFÉ TRÊS CORAÇÕES", code: "10.101.0038" },
            "8": { quantity: 100, name: "CP KELCO BRASIL", code: "10.101.0325" },
            "9": { quantity: 21, name: "ENERGY COMERCIAL IMPORTADA E EXPORTADORA LTDA", code: "10.101.0432" },
            "10": { quantity: 500, name: "ESPOLIO DE ARNI ALBERTO SPIERING - PRODUTOR RURAL", code: "10.101.0179" },
            "11": { quantity: 250, name: "INÁCIO CAMILO RUARO", code: "10.101.0113" },
            "12": { quantity: 220, name: "INDORAMA VENTURES POLIMEROS S.A", code: "10.102.0010" },
            "13": { quantity: 20, name: "JSP BRASIL INDÚSTRIA DE PLÁSTICOS", code: "10.102.0002" },
            "14": { quantity: 249, name: "KERAKOLL DO BRASIL INDÚSTRIA E COMÉRCIO LTDA", code: "10.101.0006" },
            "15": { quantity: 100, name: "LOPES ARTEFATOS DE BAQUELITE LTDA", code: "10.101.0386" },
            "16": { quantity: 1000, name: "PRIMARY PRODUCTS INGREDIENTS BRASIL S A", code: "10.101.0315" },
            "17": { quantity: 1500, name: "PRIMARY PRODUCTS INGREDIENTS BRASIL S A", code: "10.101.0317" },
            "18": { quantity: 2, name: "SOLUDRAGA TECH SOLUÇÕES AMBIENTAIS LTDA", code: "10.103.0004" },
            "19": { quantity: 39500, name: "USINA ALTA MOGIANA S.A. AÇÚCAR E ÁLCOOL", code: "10.101.0280" },
            "20": { quantity: 9850, name: "USINA CAETE S A", code: "10.101.0356" },
            "21": { quantity: 600, name: "TRÊS CORAÇÕES ALIMENTOS S.A.", code: "10.101.0038" },
            "22": { quantity: 3000, name: "ESPOLIO DE ARNI ALBERTO SPIERING - PRODUTOR RURAL", code: "10.101.0144" }
        };

        const sortedClients = Object.entries(clients).sort((a, b) => b[1].quantity - a[1].quantity);
        const topClients = sortedClients.slice(0, 5);
        const topClientsDiv = document.getElementById('top-clients');

        // Função para renderizar dados dos clientes
        function renderClientData() {
            topClients.forEach(([key, client]) => {
                const percentage = ((client.quantity / totalProduction) * 100).toFixed(2);
                const clientName = client.name;
                const clientCode = client.code;

                topClientsDiv.innerHTML += `
                    <h4 class="small font-weight-bold">${clientName} (${clientCode}) 
                    <span class="float-right">${percentage}%</span></h4>
                    <div class="progress mb-4" data-toggle="tooltip" data-placement="top" title="${client.quantity.toLocaleString('pt-BR')} unidades">
                        <div class="progress-bar ${getProgressBarColor(percentage)}" role="progressbar" 
                             style="width: ${percentage}%" 
                             aria-valuenow="${percentage}" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                `;
            });

            // Exibir botão se houver mais de 5 clientes
            const showAllButton = document.getElementById('show-all-button');
            if (sortedClients.length > 5) {
                showAllButton.style.display = 'block';
            }
        }

        // Ativar tooltips
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

        function getProgressBarColor(percentage) {
            // Definir cores diferentes com base no valor da porcentagem
            if (percentage < 20) return 'bg-danger';
            if (percentage < 40) return 'bg-warning';
            if (percentage < 60) return 'bg-info';
            if (percentage < 80) return 'bg-primary';
            return 'bg-success';
        }

        // Event listener para o botão "Ver mais"
        document.getElementById('show-all-button').addEventListener('click', () => {
            // Aqui você pode implementar a lógica para mostrar todos os clientes
            topClientsDiv.innerHTML = '';
            renderClientData(sortedClients);
            document.getElementById('show-all-button').style.display = 'none'; // Desaparecer botão após visualização de todos
        });

    </script>

</body>

</html>