<?php
require '../conexao/conexao.php';
require '../configuacoes.php';
require '../sessao.php';
require '../conexao/acesso.php';
$meuPerfil = $_GET['perfil'] ?? null;
$meuPerfilID = $_GET['id_perfil'] ?? null;

if (isset($_GET['id']) && $_GET['id'] == '0') {
    $pageTitle = "Incluir novo perfil e permissões";
} else {
    $pageTitle = "Alterar permissões do perfil $meuPerfil";

    $sql_perfil_acessos = "SELECT * FROM perfil_modulo pm JOIN modulo m ON pm.id_modulo = m.id_modulo WHERE pm.id_perfil = ?";
    $stmt = $connectionmysql->prepare($sql_perfil_acessos);
    $stmt->bind_param("i", $meuPerfilID);
    $stmt->execute();
    $result_perfil_acessos = $stmt->get_result();
    $perfilAcessos = [];
    while ($row = $result_perfil_acessos->fetch_assoc()) {
        $perfilAcessos[] = $row;
    }
    $stmt->close();
}


$sql_acessos = "SELECT m.id_modulo, m.modulo, descricao FROM modulo m";
$result_acessos = $connectionmysql->query($sql_acessos);
if ($result_acessos) {
    $acessosArray = array();

    while ($row3 = $result_acessos->fetch_assoc()) {
        $acessosArray[] = $row3;
    }
} else {
    echo "Erro na execução da consulta: " . $connectionmysql->error;
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<?php
include('../geral/header.php');
?>
<style>
    #addModuloButton {
        background-color: #1351b4;
        color: white;
        border: none;
        margin-left: 18px;
        margin-top: 30px;
        border-radius: 3px;
        width: 37px;
        height: 37px;
        font-size: large;
    }
</style>

<body>

    <!-- Navigation Bar-->
    <?php
    include('../geral/menu.php');
    ?>
    <!-- End Navigation Bar-->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="wrapper">
        <div class="container-fluid">
            <div class="card-box mt-3">
                <div class="row">
                    <div class="col-6 text-left">
                        <h4 class="page-title">
                            <?php echo $pageTitle; ?>
                        </h4>
                    </div>
                    <div class="col-6 text-right">
                        <a href="index.php" class="btn btn-light"><i class="mdi mdi-keyboard-backspace"></i> Voltar</a>
                    </div>
                    <div class="col-12">
                        <hr>
                    </div>
                    <div class="col-12">
                        <form id="PasswordForm" method="post" action="processa_inclusao_alteracao_acesso.php" onsubmit="return prepararDadosFormulario();">
                            <div class="form-row-mb-3">
                                <div class="d-flex">

                                    <?php if (isset($_GET['id']) && $_GET['id'] == '0') { ?>
                                        <div class="form-group col-md-3">
                                            <label for="novoPerfil" class="form-label">Novo Perfil</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="novoPerfil" placeholder="Novo Perfil" name="novoPerfil" oninput="validarCampo('novoPerfil', this.value)">
                                            </div>
                                        </div>
                                    <?php } else {  ?>
                                        <div class="form-group col-md-3">
                                            <label for="novoPerfil" class="form-label">Nome Perfil</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="novoPerfil" placeholder="Nome Perfil" name="novoPerfil" oninput="validarCampo('novoPerfil', this.value)" value="<?php echo (!empty($meuPerfil)) ? $meuPerfil : ""; ?>">
                                            </div>
                                        </div>
                                    <?php }  ?>

                                    <div class="form-group col-md-3">
                                        <label for="acesso" class="form-label">Acessos</label>
                                        <div class="input-group">
                                            <input type="text" id="acesso" name="acessoText" class="form-control" placeholder="Digite para filtrar Acessos" autocomplete="off" oninput="validarCampo('acesso', this.value)">
                                        </div>
                                        <div id="acessoDropdown" class="dropdown-menu" style="width: 100%;">
                                            <?php
                                            foreach ($acessosArray as $acesso) {
                                                $id_modulo = htmlspecialchars($acesso['id_modulo']);
                                                $modulo = htmlspecialchars($acesso['modulo']);
                                                $descricao_modulo = htmlspecialchars($acesso['descricao']);
                                                echo '<a class="dropdown-item" href="#" data-modulo="' . $modulo . ' ' .  '(' . $descricao_modulo . ')' . '" data-id_modulo="' . $id_modulo . '">' . $modulo . ' ' .  '(' . $descricao_modulo . ')' . '</a>';
                                            }
                                            ?>
                                        </div>
                                    </div>

                                    <div class="input-group-append">
                                        <button type="button" id="addModuloButton">+</button>
                                    </div>

                                </div>

                                <table class="table" id="modulosTable">
                                    <thead>
                                        <tr>
                                            <th>Módulo</th>
                                            <th>Descrição</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <?php if (isset($_GET['id']) && $_GET['id'] == '1') {
                                            if (!empty($perfilAcessos)) {
                                                foreach ($perfilAcessos as $acesso) {
                                                    echo '<tr>';
                                                    echo '<td>' . htmlspecialchars($acesso['modulo']) . '</td>';
                                                    echo '<td>' . htmlspecialchars($acesso['descricao']) . '</td>';
                                                    echo '<td><button class="remove-modulo-button"><i class=" remove-modulo fas fa-trash"></i></button></td>';
                                                    echo '<input type="hidden" name="moduloIds[]" value="' . htmlspecialchars($acesso['id_modulo']) . '"></td>';
                                                    echo '</tr>';
                                                }
                                            }
                                        }
                                        ?>
                                    </tbody>
                                </table>

                                <input type="hidden" name="id_perfil" id="id_perfil" value="<?php echo htmlspecialchars($meuPerfilID); ?>">

                                <div class="text-right mb-2">
                                    <button type="submit" class="btn btn-primary">Salvar</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div> <!-- end container -->
    </div>

    <!-- end wrapper -->

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

    <!-- Footer Start -->
    <?php
    include('../geral/footer.php');
    ?>
    <!-- end Footer -->

    <?php
    include('../geral/mensagens_modais.php');
    ?>

    <!-- Vendor js -->
    <script src="../../assets/js/vendor.min.js"></script>


    <!-- Init js-->
    <script src="../../assets/js/pages/form-advanced.init.js"></script>

    <!-- knob plugin -->
    <script src="../../assets/libs/jquery-knob/jquery.knob.min.js"></script>
    <!-- App js-->
    <script src="../../assets/js/app.min.js"></script>

    <script src="../geral/javascript.js"></script>


</body>

</html>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        function setupDropdown(filterId, dropdownId) {
            const filterInput = document.getElementById(filterId);
            const dropdown = document.getElementById(dropdownId);

            filterInput.addEventListener('focus', function() {
                const items = dropdown.querySelectorAll('.dropdown-item');
                items.forEach(function(item) {
                    item.style.display = 'block';
                });
                dropdown.style.display = 'block';
            });

            filterInput.addEventListener('input', function() {
                const filterValue = this.value.toLowerCase();
                const items = dropdown.querySelectorAll('.dropdown-item');

                items.forEach(function(item) {
                    if (item.textContent.toLowerCase().includes(filterValue)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
                dropdown.style.display = filterValue ? 'block' : 'none';
            });

            dropdown.addEventListener('click', function(e) {
                if (e.target.classList.contains('dropdown-item')) {
                    const selectedModulo = e.target.getAttribute('data-modulo');
                    const selectedIdModulo = e.target.getAttribute('data-id_modulo');

                    filterInput.value = selectedModulo;
                    filterInput.setAttribute('data-id_modulo', selectedIdModulo);
                    dropdown.style.display = 'none';
                }
            });

            document.addEventListener('click', function(e) {
                if (!filterInput.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.style.display = 'none';
                }
            });
        }

        function addModuloToTable(modulo, descricaoModulo, idModulo) {
            const tableBody = document.querySelector('#modulosTable tbody');
            const row = document.createElement('tr');

            // Verifica se há descrição entre parênteses e separa nome do módulo e descrição
            let moduleName = modulo;
            let moduleDescription = '';
            const openParenIndex = modulo.indexOf('(');
            if (openParenIndex !== -1) {
                moduleName = modulo.substring(0, openParenIndex).trim();
                moduleDescription = modulo.substring(openParenIndex + 1, modulo.indexOf(')', openParenIndex)).trim(); // Remove os parênteses
            }

            row.innerHTML = `
            <td>${moduleName}</td>
            <td>${moduleDescription}</td>
            <td><button class="remove-modulo-button"><i class="fas fa-trash"></i></button></td>
            <input type="hidden" name="moduloIds[]" value="${idModulo}">
        `;
            tableBody.appendChild(row);

            // Adicionar evento de clique ao botão de remoção
            row.querySelector('.remove-modulo-button').addEventListener('click', function() {
                tableBody.removeChild(row);
            });
        }

        function moduloExists(idModulo) {
            const tableBody = document.querySelector('#modulosTable tbody');
            const rows = tableBody.querySelectorAll('tr');
            for (let row of rows) {
                const hiddenInput = row.querySelector('input[name="moduloIds[]"]');
                if (hiddenInput && hiddenInput.value === idModulo) {
                    return true; // Módulo já existe na tabela
                }
            }
            return false;
        }

        // Configurar dropdown
        setupDropdown('acesso', 'acessoDropdown');

        // Adicionar evento ao botão de adição
        const addModuloButton = document.getElementById('addModuloButton');
        addModuloButton.addEventListener('click', function() {
            const filterInput = document.getElementById('acesso');
            const modulo = filterInput.value.trim();
            const idModulo = filterInput.getAttribute('data-id_modulo');

            // Verificação se o valor digitado está na lista de itens
            const dropdown = document.getElementById('acessoDropdown');
            const items = dropdown.querySelectorAll('.dropdown-item');
            let isValidModulo = false;
            let descricaoModulo = '';

            items.forEach(function(item) {
                if (item.getAttribute('data-modulo') === modulo && item.getAttribute('data-id_modulo') === idModulo) {
                    isValidModulo = true;
                    descricaoModulo = item.textContent.split('(')[1].split(')')[0]; // Extrai a descrição entre parênteses
                }
            });

            if (!modulo || !isValidModulo) {
                filterInput.classList.add('is-invalido');
                showModal('exampleModal', 'Informação', 'Por favor, selecione um módulo válido.');
            } else if (moduloExists(idModulo)) {
                showModal('exampleModal', 'Informação', 'Este módulo já foi adicionado.');
            } else {
                addModuloToTable(modulo, descricaoModulo, idModulo);
                filterInput.value = '';
                filterInput.removeAttribute('data-id_modulo');
            }
        });
        const tableBody = document.querySelector('#modulosTable tbody');
        tableBody.addEventListener('click', function(event) {
            const removeButton = event.target.closest('.remove-modulo-button');
            const removeBut = event.target.closest('.remove-modulo');

            if (removeButton || removeBut) {
                event.preventDefault();

                // Aqui você pode adicionar código adicional para remover o módulo da tabela
                const row = removeButton.closest('tr');
                if (row) {
                    row.remove(); // Remove a linha da tabela
                }
            }
        });

    });

    function verificarErroNaURL() {
        const urlParams = new URLSearchParams(window.location.search);
        const errorMessage = urlParams.get('error');
        if (errorMessage) {
            showModal('exampleModal', 'Erro', errorMessage);
        }
    }

    function showModal(modalId, title, message) {
        const modalElement = document.getElementById(modalId);
        const modal = new bootstrap.Modal(modalElement);
        modalElement.querySelector('.modal-title').textContent = title;
        modalElement.querySelector('.modal-body p').innerHTML = message;
        modal.show();
    }

    window.onload = verificarErroNaURL;

    function goBack() {
        window.history.back();
    }

    function prepararDadosFormulario() {
        const tableBody = document.querySelector('#modulosTable tbody');
        const rows = tableBody.querySelectorAll('tr');
        const form = document.getElementById('PasswordForm');

        // Remover campos ocultos existentes
        const existingInputs = document.querySelectorAll('input[name="modulos[]"]');
        existingInputs.forEach(input => input.remove());

        rows.forEach(row => {
            const modulo = row.cells[0].textContent;
            const idModulo = row.cells[1].textContent;

            const inputModulo = document.createElement('input');
            inputModulo.type = 'hidden';
            inputModulo.name = 'modulos[]';
            inputModulo.value = modulo;
            form.appendChild(inputModulo);

            const inputIdModulo = document.createElement('input');
            inputIdModulo.type = 'hidden';
            inputIdModulo.name = 'moduloIds[]';
            inputIdModulo.value = idModulo;
            form.appendChild(inputIdModulo);
        });

        return validarFormulario();
    }

    function validarCampo(id) {
        const campo = document.getElementById(id);
        const valor = campo.value.trim();
        let campoValido = true;

        if (!valor) {
            campoValido = false;
            campo.classList.add('is-invalido');
            showModal('exampleModal', 'Informação', 'Pro Favor, Defina um nome para o novo Perfil.');
        } else {
            campo.classList.remove('is-invalido');
        }

        return campoValido;
    }


    function validarFormulario() {
        let novoPerfilValido = validarCampo("novoPerfil");


        return novoPerfilValido;
    }
</script>

<style>
    .remove-modulo-button {
        background-color: white;
        color: red;
        border: 1px solid red;
        border-radius: 5px;
        width: 35px;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .remove-modulo-button i {
        font-size: 1rem;
    }

    .is-invalido {
        box-shadow: 0 0 5px red;
    }

    .dropdown-menu {
        display: none;
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        z-index: 1000;
    }

    .dropdown-item {
        cursor: pointer;
    }
</style>