<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sky Apps - Dashboard</title>
    <link rel="icon" href="../assets/logo.png" type="image/png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner"></div>
    </div>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html"><img src="../assets/logo.png" height="40px" id="navbar-icon" style="transform: scale(1.5);"></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav mx-auto">
                  <a class="nav-link me-2" href="../index.html">Home</a>
                  <a class="nav-link me-2" aria-current="page" href="produtos.html">Serviços</a>
                  <a class="nav-link me-2" href="termos.html">Termos</a>
                  <a class="nav-link main-btn me-2" href="login.html"><i class="fa-solid fa-right-to-bracket"></i> Dashboard</a>
                  <a class="nav-link btn-d me-2" href="https://discord.gg/skyapps"><i class="fa-brands fa-discord"></i></a>
                </div>
            </div>
        </div>
    </nav>

    <div class="gerenciarh">
        <div class="maincontainergerenciar">
            <div class="container">
                <div class="allcontainers">
                    <div class="cointainers-left">
                        <div class="informacoesPrincipaiscontainer">
                            <div class="titulo"><i class="fa-solid fa-heading"></i> Titulo do BOT</div>
                            <div class="produto"><i class="fa-solid fa-tag"></i> Produto BOT</div>
                            <div class="owner"><i class="fa-solid fa-crown"></i> ID do Owner</div>
                        </div>
                        <br>
                        <div class="informacoesDatacontainer">
                            <div class="dias"><i class="fa-solid fa-calendar-days"></i> Dias comprados</div>
                            <div class="contagemregressivaDiasRestantes"><i class="fa-solid fa-clock"></i> Contagem Regressiva</div>
                        </div>
                        <br>
                        <div class="metricasMainContainer">
                            <div class="statusAplicacao"><i class="fa-solid fa-signal"></i> Ligado/Desligado</div>
                            <div class="buttonsflex">
                                <button class="button-gerenciar"><i class="fa-solid fa-play"></i> Ligar</button>
                                <button class="button-gerenciar"><i class="fa-solid fa-power-off"></i> Desligar</button>
                                <button class="button-gerenciar"><i class="fa-solid fa-spinner"></i> Reiniciar</button>
                            </div>
                        </div>
                    </div>
                    <div class="center-right">
                        <div class="metricasCenter">
                            <div class="logs-container h-full max-h-[32rem] overflow-y-auto rounded-md bg-square-700 font-mono text-xs" id="logs-container"></div>                            
                            <div class="idapp"><i class="fa-solid fa-id-badge"></i> ID do APP</div>
                        </div>
                        <div class="ConfiguracoesContainer">
                                <div class="esquerda">
                                    <button class="button-gerenciar" disabled data-bs-toggle="modal" data-bs-target="#alterarPosseModal"><i class="fa-solid fa-gear"></i> Alterar Posse</button>
                                    <button class="button-gerenciar" disabled data-bs-toggle="modal" data-bs-target="#alterarNomeModal"><i class="fa-solid fa-gear"></i> Alterar Nome</button>
                                </div>
                                <div class="direita">
                                    <button class="button-gerenciar" disabled data-bs-toggle="modal" data-bs-target="#alterarTokenModal"><i class="fa-solid fa-gear"></i> Alterar Token</button>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="alterarPosseModal" tabindex="-1" aria-labelledby="alterarPosseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background-color: #111111; color: #58a6ff;">
                <div class="modal-header">
                    <h5 class="modal-title" id="alterarPosseModalLabel">Alterar Posse</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="alterarPosseForm">
                        <div class="mb-3">
                            <label for="novoOwner" class="form-label">Novo Owner ID (necessário reiniciar o BOT)</label>
                            <input type="text" class="form-control accessKey formModal" id="novoOwner" placeholder="Insira o novo ID do Owner">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="alterarPosse()">Alterar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="alterarNomeModal" tabindex="-1" aria-labelledby="alterarNomeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background-color: #111111; color: #58a6ff;">
                <div class="modal-header">
                    <h5 class="modal-title" id="alterarNomeModalLabel">Alterar Nome</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="alterarNomeForm">
                        <div class="mb-3">
                            <label for="novoNome" class="form-label">Novo Nome</label>
                            <input type="text" class="form-control accessKey formModal" id="novoNome" placeholder="Insira o novo nome do bot">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="alterarNome()">Alterar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="alterarTokenModal" tabindex="-1" aria-labelledby="alterarTokenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background-color: #111111; color: #58a6ff;">
                <div class="modal-header">
                    <h5 class="modal-title" id="alterarTokenModalLabel">Alterar Token</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="alterarTokenForm">
                        <div class="mb-3">
                            <label for="novoToken" class="form-label">Novo Token (necessário reiniciar o BOT)</label>
                            <input type="text" class="form-control accessKey formModal" id="novoToken" placeholder="Insira o novo token">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="alterarToken()">Alterar</button>
                </div>
            </div>
        </div>
    </div>

    <hr>
    <div class="footer">
        <img src="../assets/logo.png" class="footer-icon" style="transform: scale(1.5);">
        <div class="vertical-line"></div>
        <div class="categorias">
            <div class="redessociais">
                Páginas
                <ul>
                    <li><a href="https://discord.gg/skyapps" target="_blank"><i class="fa-brands fa-discord"></i> Discord</a></li>
                    <li><a href="https://instagram.com/skyapps" target="_blank"><i class="fa-solid fa-server"></i> Serviços</a></li>
                    <li><a href="https://twitter.com/skyapps" target="_blank"><i class="fa-solid fa-scroll"></i> Termos</a></li>
                </ul>
            </div>
        </div>
    </div>    

    <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../js/gerenciar.js"></script>
    <script src="https://kit.fontawesome.com/92bef1279f.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
</body>
</html>
