<?php
require '../../conexao/conexao.php';
require '../../configuacoes.php';
require '../../sessao.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 = [];
    while ($row3 = $result_acessos->fetch_assoc()) {
        $acessosArray[] = $row3;
    }
} else {
    echo "Erro na execução da consulta: " . $connectionmysql->error;
}

include('../header.php');
include('../menu.php');
?>

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

<head>
    <meta charset="UTF-8">
    <title><?php echo $pageTitle; ?></title>
    <link rel="icon" href="/kpi/pages/configuracoes/logo-sm.png">
    <link rel="shortcut icon" href="/kpi/pages/configuracoes/logo-sm.png">
    <style>
        #addModuloButton {
            background-color: #1351b4;
            color: white;
            border: none;
            margin-left: 18px;
            border-radius: 3px;
            width: 37px;
            height: 37px;
            font-size: large;

            display: flex;
            /* Flex para centralizar conteúdo */
            align-items: center;
            /* Alinhamento vertical */
            justify-content: center;
            /* Alinhamento horizontal */
            margin-top: 0;
            /* Remove a margem que desalinha */
        }



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

        .dropdown-menu {
            display: none;
            max-height: 250px;
            overflow-y: auto;
            position: absolute;
            z-index: 1000;
            width: 100%;
        }
    </style>
</head>

<body>

    <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 d-flex">

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

                                <!-- Dropdown de módulos -->
                                <div class="form-group col-md-3">
                                    <label for="acesso" class="form-label">Acessos</label>
                                    <div class="input-group">
                                        <input type="text" id="acesso" class="form-control" placeholder="Selecione os módulos" autocomplete="off">
                                        <div class="input-group-append">
                                            <button type="button" id="addModuloButton" class="btn btn-primary">+</button>
                                        </div>
                                    </div>
                                    <div id="acessoDropdown" class="dropdown-menu p-2">
                                        <?php foreach ($acessosArray as $acesso):
                                            $id_modulo = htmlspecialchars($acesso['id_modulo']);
                                            $modulo = htmlspecialchars($acesso['modulo']);
                                            $descricao_modulo = htmlspecialchars($acesso['descricao']);
                                            $label = $modulo . ' (' . $descricao_modulo . ')';
                                        ?>
                                            <div class="form-check dropdown-item" data-modulo="<?= $modulo ?>" data-id_modulo="<?= $id_modulo ?>">
                                                <input class="form-check-input acesso-checkbox" type="checkbox" value="<?= $id_modulo ?>" id="acesso_<?= $id_modulo ?>" data-label="<?= $label ?>">
                                                <label class="form-check-label" for="acesso_<?= $id_modulo ?>"><?= $label ?></label>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>

                                <input type="hidden" name="acessosSelecionados" id="acessosSelecionados">

                            </div>

                            <!-- Tabela de Módulos -->
                            <table class="table" id="modulosTable">
                                <thead>
                                    <tr>
                                        <th>Módulo</th>
                                        <th>Descrição</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (!empty($perfilAcessos)) {
                                        foreach ($perfilAcessos as $acesso) { ?>
                                            <tr data-id_modulo="<?= htmlspecialchars($acesso['id_modulo']) ?>">
                                                <td><?= htmlspecialchars($acesso['modulo']) ?></td>
                                                <td><?= htmlspecialchars($acesso['descricao']) ?></td>
                                                <td>
                                                    <button
                                                        class="table-actions link-view excluir-btn remove-modulo-button"  title=" Excluir Horário">
                                                        <i class="mdi mdi-delete-forever"></i>
                                                    </button> <input type="hidden" name="moduloIds[]" value="<?= htmlspecialchars($acesso['id_modulo']) ?>">
                                                </td>
                                            </tr>
                                    <?php }
                                    } ?>
                                </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>
                        </form>
                    </div>

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

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

    <!-- Vendor js -->
    <script src="../../../assets/js/vendor.min.js"></script>
    <script src="../../../assets/js/pages/form-advanced.init.js"></script>
    <script src="../../../assets/libs/jquery-knob/jquery.knob.min.js"></script>
    <script src="../../../assets/js/app.min.js"></script>
    <script src="../../geral/javascript.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputAcesso = document.getElementById('acesso');
            const dropdown = document.getElementById('acessoDropdown');
            const addButton = document.getElementById('addModuloButton');
            const tableBody = document.querySelector('#modulosTable tbody');
            const hiddenAcessos = document.getElementById('acessosSelecionados');

            // Mostrar dropdown ao clicar no input
            inputAcesso.addEventListener('click', () => dropdown.classList.add('show'));

            // Fechar dropdown ao clicar fora
            document.addEventListener('click', e => {
                if (!inputAcesso.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.classList.remove('show');
                }
            });

            // Filtrar dropdown
            inputAcesso.addEventListener('input', () => {
                const filtro = inputAcesso.value.toLowerCase();
                let algumVisivel = false;
                dropdown.querySelectorAll('.dropdown-item').forEach(item => {
                    const label = item.querySelector('label').textContent.toLowerCase();
                    item.style.display = label.includes(filtro) ? 'block' : 'none';
                    if (label.includes(filtro)) algumVisivel = true;
                });
                dropdown.classList.toggle('show', algumVisivel);
            });

            // Atualiza o hidden baseado nas checkboxes do dropdown
            document.addEventListener('change', e => {
                if (e.target.classList.contains('acesso-checkbox')) atualizarHiddenAcessosSelecionados();
            });

            function atualizarHiddenAcessosSelecionados() {
                const ids = [],
                    labels = [];
                document.querySelectorAll('.acesso-checkbox:checked').forEach(chk => {
                    ids.push(chk.value);
                    labels.push(chk.dataset.label);
                });
                hiddenAcessos.value = ids.join(',');
                inputAcesso.value = labels.join(', ');
            }

            // Função para adicionar módulo à tabela
            function addModuloToTable(modulo, descricao, idModulo) {
                // Evita duplicatas
                if (Array.from(tableBody.querySelectorAll('input[name="moduloIds[]"]'))
                    .some(input => input.value === idModulo)) return;

                const row = document.createElement('tr');
                row.setAttribute('data-id_modulo', idModulo);
                row.innerHTML = `
            <td>${modulo}</td>
            <td>${descricao}</td>
            <td>
                <button class="remove-modulo-button"><i class="fas fa-trash"></i></button>
                <input type="hidden" name="moduloIds[]" value="${idModulo}">
            </td>
        `;
                tableBody.appendChild(row);

                // Evento de remoção
                row.querySelector('.remove-modulo-button').addEventListener('click', e => {
                    e.preventDefault(); // previne comportamento padrão
                    row.remove(); // remove a linha da tabela
                    atualizarHiddenAcessosTabela(); // atualiza o hidden input
                });


                atualizarHiddenAcessosTabela();
            }

            // Atualiza o hidden baseado nas linhas da tabela
            function atualizarHiddenAcessosTabela() {
                const ids = Array.from(tableBody.querySelectorAll('input[name="moduloIds[]"]'))
                    .map(input => input.value);
                hiddenAcessos.value = ids.join(',');
            }

            // Clique no botão "+" para adicionar módulos selecionados
            addButton.addEventListener('click', () => {
                const ids = hiddenAcessos.value.split(',').filter(id => id !== '');
                const labels = inputAcesso.value.split(', ').filter(l => l !== '');

                if (!ids.length) {
                    showModal('exampleModal', 'Informação', 'Selecione ao menos um módulo.');
                    return;
                }

                ids.forEach((id, i) => {
                    const modulo = labels[i].split(' (')[0];
                    const descricao = labels[i].split(' (')[1]?.replace(')', '') || '';
                    addModuloToTable(modulo, descricao, id);
                });

                // Limpa input e checkboxes
                hiddenAcessos.value = '';
                inputAcesso.value = '';
                document.querySelectorAll('.acesso-checkbox').forEach(chk => chk.checked = false);
            });

            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();
            }
        });

        // Validação do formulário
        function prepararDadosFormulario() {
            return validarCampo('novoPerfil');
        }

        function validarCampo(id) {
            const campo = document.getElementById(id);
            if (!campo.value.trim()) {
                campo.classList.add('is-invalido');
                showModal('exampleModal', 'Informação', 'Defina um nome para o perfil.');
                return false;
            }
            campo.classList.remove('is-invalido');
            return true;
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableBody = document.querySelector('#modulosTable tbody');
            const hiddenAcessos = document.getElementById('acessosSelecionados');

            // Função para atualizar o hidden input com os módulos da tabela
            function atualizarHiddenAcessosTabela() {
                const ids = Array.from(tableBody.querySelectorAll('input[name="moduloIds[]"]'))
                    .map(input => input.value);
                hiddenAcessos.value = ids.join(',');
            }

            // Adicionar listener de remoção para todos os botões existentes
            tableBody.querySelectorAll('.remove-modulo-button').forEach(button => {
                button.addEventListener('click', e => {
                    e.preventDefault(); // previne submissão
                    const row = button.closest('tr');
                    row.remove();
                    atualizarHiddenAcessosTabela();
                });
            });

            // Adicionar novos módulos (botão +)
            const inputAcesso = document.getElementById('acesso');
            const dropdown = document.getElementById('acessoDropdown');
            const addButton = document.getElementById('addModuloButton');

            addButton.addEventListener('click', () => {
                const ids = document.getElementById('acessosSelecionados').value.split(',').filter(id => id !== '');
                const labels = inputAcesso.value.split(', ').filter(l => l !== '');

                // if (!ids.length) {
                //     showModal('exampleModal', 'Informação', 'Selecione ao menos um módulo.');
                //     return;
                // }

                ids.forEach((id, i) => {
                    const modulo = labels[i].split(' (')[0];
                    const descricao = labels[i].split(' (')[1]?.replace(')', '') || '';

                    // Evita duplicados
                    if (Array.from(tableBody.querySelectorAll('input[name="moduloIds[]"]'))
                        .some(input => input.value === id)) return;

                    const row = document.createElement('tr');
                    row.setAttribute('data-id_modulo', id);
                    row.innerHTML = `
                <td>${modulo}</td>
                <td>${descricao}</td>
                <td>
                    <button type="button" class="remove-modulo-button"><i class="fas fa-trash"></i></button>
                    <input type="hidden" name="moduloIds[]" value="${id}">
                </td>
            `;
                    tableBody.appendChild(row);

                    // Listener do novo botão de remoção
                    row.querySelector('.remove-modulo-button').addEventListener('click', e => {
                        e.preventDefault();
                        row.remove();
                        atualizarHiddenAcessosTabela();
                    });

                    atualizarHiddenAcessosTabela();
                });

                // Limpa checkboxes e input
                inputAcesso.value = '';
                document.querySelectorAll('.acesso-checkbox').forEach(chk => chk.checked = false);
                hiddenAcessos.value = '';
            });

            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();
            }
        });
    </script>


</body>

</html>