<?php
require '../../conexao/conexao.php';
require '../../sessao.php';
require '../../configuacoes.php';


require '../../querys/query-configuracao-metas.php';

$ConfiguracaoMetas = new ConfiguracaoMetas($connectionmysql);

$ConsultaPermissoes = $ConfiguracaoMetas->consultaPermissoes();

//print_r($ConsultaPermissoes);

$ConfiguracaoMetas->addConfig($connectionmysql);

$listagemMetas = $ConfiguracaoMetas->listarMetas();

//print_r($listagemMetas);

if (isset($_SESSION['message'])) {
    echo "<script>alert('" . $_SESSION['message'] . "');</script>";
    unset($_SESSION['message']); // Limpa a mensagem após exibição
}

$ConfiguracaoMetas->desativaMeta($connectionmysql);
?>

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <link rel="icon" href="\KPI\pages/configuracoes/logo-sm.png">
    <link rel="shortcut icon" href="\KPI\pages/configuracoes/logo-sm.png">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->

    <!--Material Icon -->
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
</head>

<?php $pageTitle = 'Configuração de Metas - Manda Receita'; ?>

<body>

    <div class="container-fluid">
        <div class="row">
            <!-- Menu Lateral -->
            <?php include('../lateral.php'); ?>

            <!-- Conteúdo Principal -->
            <main class="col-md-9 col-lg-10 content">
                <form action="" method="post" enctype="multipart/form-data">
                    <div class="wrapper candidato">
                        <div class="container-fluid">
                            <div class="card-box mt-3">
                                <div class="row align-items-center">
                                    <div class="col-12 text-left mb-4">
                                        <h4 class="page-title">Configura Metas</h4>
                                        <hr>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-row mb-3">
                                            <div class="form-group col-md-3 pessoa-fisica">
                                                <label class="col-form-label">Metas</label>
                                                <!-- Select para escolher a meta -->
                                                <select name="id_tipo_meta" class="form-control" id="id_tipo_meta" required>
                                                    <option value=""></option>

                                                    <?php foreach ($listagemMetas as $item) { ?>
                                                        <option value="<?php echo $item['id']; ?>" data-nome="<?php echo $item['nome_valores']; ?>">
                                                            <?php echo $item['nome_meta']; ?>
                                                        </option>
                                                    <?php } ?>

                                                    <option disabled="disabled">Controle de Metas</option>
                                                    <option value="add">Incluir nova meta</option>
                                                </select>

                                                <!-- Inputs hidden para armazenar os valores -->
                                                <input type="hidden" name="nome_meta" class="form-control" id="nome_meta" >
                                                <input type="hidden" name="nome_valores" class="form-control" id="nome_valores" >

                                                <!-- Script separado para atualizar os valores -->
                                                <script>
                                                    document.getElementById("id_tipo_meta").addEventListener("change", function() {
                                                        atualizarNomeMeta();
                                                        if (this.value === 'add') {
                                                            window.location = 'add-metas.php';
                                                        }
                                                    });

                                                    function atualizarNomeMeta() {
                                                        console.log("Função atualizarNomeMeta chamada"); // Debug: Verifica se a função é chamada

                                                        // Obtém o select e os inputs
                                                        var select = document.getElementById("id_tipo_meta");
                                                        var inputNomeMeta = document.getElementById("nome_meta");
                                                        var inputNomeValores = document.getElementById("nome_valores");

                                                        // Verifica se uma opção válida foi selecionada
                                                        if (select.selectedIndex === -1 || select.selectedIndex === 0) {
                                                            inputNomeMeta.value = ""; // Limpa o campo se nenhuma opção for selecionada
                                                            inputNomeValores.value = ""; // Limpa o campo hidden também
                                                            console.log("Nenhuma opção válida selecionada"); // Debug
                                                            return; // Sai da função se nenhuma opção válida for selecionada
                                                        }

                                                        // Obtém o texto da opção selecionada e o valor de `data-nome_valores`
                                                        var nomeMeta = select.options[select.selectedIndex].text;
                                                        var nomeValores = select.options[select.selectedIndex].getAttribute("data-nome");

                                                        // Atualiza os campos
                                                        inputNomeMeta.value = nomeMeta;
                                                        inputNomeValores.value = nomeValores; // Atualiza o campo hidden com `data-nome_valores`
                                                    }
                                                </script>
                                            </div>
                                            <div class="form-group col-md-3 pessoa-fisica" style="margin-top: 30px;">
                                                <button type="submit" class="btn btn-primary">Confirmar</button>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <hr>

                                <div class="col-12">
                                    <table class="table table-striped table-bordered dt-responsive nowrap">
                                        <tbody>
                                            <tr>
                                                <th colspan="2" valign="middle" nowrap="nowrap">Metas Liberadas</th>
                                            </tr>

                                            <?php foreach ($ConsultaPermissoes as $itens) { ?>
                                                <tr>
                                                    <td width="87%"><?php echo $itens['nome_meta']; ?></td>
                                                    <td width="13%"><a href="configuracao_metas.php?id=<?php echo $itens['id']; ?>"><button type="button" class="btn btn-danger">Desativar</button></a></td>
                                                </tr>
                                            <?php } ?>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>


            </main>
        </div>
    </div>


    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
