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

/////// consultas e funções para o CRUDE DENTRO DO ARQUIVO TAMBÉM ENCONTRA A PREFERENCIA (QUINZENAL OU MENSAL)
require '../../querys/query-metas.php';

$Metas = new Metas($connectionmysql);

$Metas->DefineMeta($connectionmysql);

$meu_periodo = $Metas->get_periodo();

require '../../querys/query-filiais.php';

$filiais = new Filiais($connectionmysql);


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

?>

<!DOCTYPE html>
<html lang="pt-br">
<?php
$pageTitle = "Definir Metas"; // Definir o título da página aqui
?>

<head>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

</head>

<style>
    .select-all-container {
        margin-bottom: 10px;
    }

    .months-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .month-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .month-checkbox input[type="checkbox"] {
        margin: 0;
    }

    #vendedores_input2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #vendedor_input {
        width: 100% !important;
        max-width: 250px !important;
    }

    #vendedor_dropdown {
        max-height: 200px;
        overflow-y: auto;
        width: auto;
        min-width: 200px;
        max-width: 254px;
        position: absolute;
        z-index: 1000;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        display: none;
    }

    .table th,
    .table td {
        vertical-align: middle;
    }
</style>

<body>


    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <div class="row">
            <?php
            include('../lateral.php');
            ?>

            <main class="col-md-9 col-lg-10 content">
                <div class="wrapper candidato">
                    <div class="container-fluid">

                        <div class="card-box mt-3">
                            <div class="row">

                                <div class="col-6 text-left">
                                    <h4 class="page-title">Definir nova meta</h4>
                                </div>

                                <div class="col-6 text-right">
                                    <button onclick="history.back()" class="btn btn-light"><i class="mdi mdi-keyboard-backspace"></i> Voltar</button>
                                </div>

                                <div class="col-12">
                                    <hr>
                                </div>

                                <div class="col-12">
                                    <form method="post" id="meuFormulario">
                                        <div class="form-row mb-3">


                                            <table width="1213" class="table table-striped table-bordered dt-responsive nowrap" id="datatable-buttons">
                                                <thead>
                                                    <tr class="text-center">
                                                        <th width="155">Filial</th>
                                                        <th width="188">Nome Meta</th>
                                                        <th width="144">Tipo Meta</th>
                                                        <th colspan="2" nowrap="nowrap" id="vendedores_input" style="display: none;">Código Vendedor</th>
                                                        <th width="105" nowrap="nowrap">Ano </th>
                                                        <?php if ($meu_periodo !== 'Mês') { ?>
                                                            <th width="159" nowrap="nowrap">Valor (1° Quinzena)</th>
                                                            <th width="158" nowrap="nowrap">Valor (2° Quinzena)</th>
                                                        <?php } else { ?>
                                                            <th width="166" nowrap="nowrap">Valor da Meta</th>
                                                        <?php } ?>
                                                    </tr>
                                                    <tr class="text-center">
                                                        <th>
                                                            <select name="codigo_filial" require class="form-control" id="codigo_filial">

                                                                <option value="">Selecione uma filial</option>
                                                                <?php $listagemFiliais = $filiais->listarFiliais();
                                                                foreach ($listagemFiliais as $itens) { ?>
                                                                    <option value="<?php echo $itens['id']; ?>"><?php echo $itens['nome_filial']; ?></option>
                                                                <?php } ?>
                                                            </select>
                                                        </th>
                                                        <th>
                                                            <select name="codigo_meta[]" class="form-control" id="codigo_meta" multiple="multiple">
                                                                <option value=""></option>
                                                                <?php $ListaMetas = $Metas->listarMetas();
                                                                foreach ($ListaMetas as $itens) { ?>
                                                                    <option value="<?php echo $itens['id']; ?>"><?php echo $itens['nome_meta']; ?></option>
                                                                <?php } ?>
                                                            </select>
                                                        </th>
                                                        <th>
                                                            <select name="tipo_meta" id="tipo_meta" class="form-control">
                                                                <option value="" disabled selected>Selecione</option>
                                                                <option value="2">Vendedores</option>
                                                                <option value="3">Loja</option>
                                                            </select>
                                                        </th>

                                                        <th id="vendedores_input2" style="display: none;">
                                                            <div class="vendedor-header">
                                                                <input type="checkbox" id="select_all" onchange="toggleSelectAll(this)">
                                                                <input type="hidden" id="vendedorselecionados" name="vendedor_ids[]"> <!-- Campo oculto para enviar IDs -->
                                                                <label for="select_all">Marcar Todos</label>
                                                            </div>
                                                            <input type="text" id="vendedor_input" name="vendedor_nomes" class="form-control" placeholder="Digite para filtrar..." autocomplete="off" style="width: 100%; max-width: 200px;">
                                                            <div id="vendedor_dropdown" class="dropdown-menu" style="display: block; position: relative;"></div>
                                                        </th>
                                                        <th><input type="text" class="form-control" name="ano" id="ano"></th>


                                                        <?php if ($meu_periodo === 'Mês') { ?>
                                                            <th><input type="text" class="form-control" name="valor_meta" id="valor_meta" placeholder="Valor da Meta"></th>
                                                        <?php } else { ?>
                                                            <th><input type="text" class="form-control" name="valor_meta" id="valor_meta_0" placeholder="Valor da Quinzena 1"></th>
                                                            <th><input type="text" class="form-control" name="valor_meta_2" id="valor_meta_2" placeholder="Valor da Quinzena 2"></th>
                                                        <?php } ?>
                                                    </tr>
                                                </thead>
                                            </table>

                                            <div class="select-all-container">
                                                <strong style="color: #000;">Meses</strong> <br>
                                                <label>
                                                    <input type="checkbox" id="select-all">
                                                    Selecionar Todos os meses
                                                </label>
                                            </div>
                                            <div class="months-container">
                                                <label class="month-checkbox">
                                                    <input type="checkbox" name="meses[]" class="month" value="01">
                                                    Janeiro
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="02">
                                                    Fevereiro
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="03">
                                                    Março
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="04">
                                                    Abril
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="05">
                                                    Maio
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="06">
                                                    Junho
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="07">
                                                    Julho
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="08">
                                                    Agosto
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="09">
                                                    Setembro
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="10">
                                                    Outubro
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="11">
                                                    Novembro
                                                </label>
                                                <label class="month-checkbox">
                                                    <input type="checkbox" class="month" name="meses[]" value="12">
                                                    Dezembro
                                                </label>
                                            </div>

                                            <div class="col-12 text-right">
                                                <!--  <a href="index.php" class="btn btn-warning mr-2"> Limpar</a> -->

                                                <input type="hidden" name="periodo" id="periodo" value="1,2">
                                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-plus"></i> Inserir Dados</button>
                                            </div>
                                    </form>
                                </div>
                            </div>



                        </div>
                    </div>

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

    <!-- end wrapper -->

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

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

    <script>
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            $j('#codigo_meta').select2({
                placeholder: "Selecione uma ou mais opções",
                allowClear: true
            });
        });
    </script>

<script>
document.getElementById('meuFormulario').addEventListener('submit', function(event) {
    var selectFilial = document.getElementById('codigo_filial');
    
    // Verifica se o valor selecionado está vazio
    if (selectFilial.value === '') {
        alert('Por favor, selecione uma filial.');
        event.preventDefault(); // Impede o envio do formulário
    }
});
</script>


    <script>
        // Selecionar todos os checkboxes quando o checkbox "Selecionar Todos" for marcado
        document.getElementById('select-all').addEventListener('change', function() {
            const checked = this.checked;
            document.querySelectorAll('.month').forEach(checkbox => {
                checkbox.checked = checked;
            });
        });

        // Desmarcar o checkbox "Selecionar Todos" se algum checkbox individual for desmarcado
        document.querySelectorAll('.month').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (!this.checked) {
                    document.getElementById('select-all').checked = false;
                } else {
                    // Verifica se todos os checkboxes estão marcados
                    const allChecked = Array.from(document.querySelectorAll('.month')).every(checkbox => checkbox.checked);
                    document.getElementById('select-all').checked = allChecked;
                }
            });
        });

        document.getElementById('tipo_meta').addEventListener('change', function() {
            var tipoMeta = this.value;
            var vendedoresInput = document.getElementById('vendedores_input');

            if (tipoMeta === '2') { // Verifica se a opção 'Vendedores' foi selecionada
                vendedoresInput.style.display = 'block'; // Mostra o campo de input
            } else {
                vendedoresInput.style.display = 'none'; // Esconde o campo de input para outras opções
            }
        });

        document.getElementById('tipo_meta').addEventListener('change', function() {
            var tipoMeta = this.value;
            var vendedoresInput = document.getElementById('vendedores_input2');

            if (tipoMeta === '2') { // Verifica se a opção 'Vendedores' foi selecionada
                vendedores_input2.style.display = 'block'; // Mostra o campo de input
            } else {
                vendedores_input2.style.display = 'none'; // Esconde o campo de input para outras opções
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const dropdown = document.getElementById('vendedor_dropdown');
            const selectAllCheckbox = document.getElementById('select_all');
            const hiddenField = document.getElementById('vendedorselecionados');
            const filialSelect = document.getElementById('codigo_filial'); // Campo de seleção de filial
            const filterInput = document.getElementById('vendedor_input'); // Campo de input para filtrar

            // Capturar o evento de mudança no campo de seleção de filial
            filialSelect.addEventListener('change', function() {
                const filialSelecionada = this.value; // Obtém o valor selecionado no select

                // Verifica se a filial está definida
                if (filialSelecionada) {
                    // Carregar vendedores com base na filial selecionada
                    carregarVendedores(filialSelecionada);
                } else {
                    dropdown.innerHTML = ''; // Se nenhuma filial for selecionada, limpa a lista de vendedores
                    dropdown.style.display = 'none'; // Oculta o dropdown
                }
            });

            function carregarVendedores(filial) {
                // Enviar requisição AJAX para obter os vendedores de acordo com a filial
                fetch('get_vendedores.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'filial=' + encodeURIComponent(filial)
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Resposta recebida do servidor:', data);

                        if (Array.isArray(data)) {
                            dropdown.innerHTML = ''; // Limpar o dropdown

                            // Armazenar vendedores em uma variável global para filtragem
                            window.vendedoresData = data;

                            data.forEach(vendedor => {
                                const nomeVendedor = vendedor.NOME_VENDEDOR; // Ajuste conforme necessário
                                const idVendedor = vendedor.COD_VENDEDOR; // Ajuste conforme necessário

                                const divItem = document.createElement('div');
                                divItem.className = 'dropdown-item';
                                divItem.innerHTML = `
                        <input type="checkbox" class="vendedor-checkbox" data-id="${idVendedor}" data-name="${nomeVendedor}" id="vendedor_${idVendedor}" onchange="updateSelectedVendedores()">
                        <label for="vendedor_${idVendedor}">${idVendedor} - ${nomeVendedor}</label>
                    `;
                                dropdown.appendChild(divItem);
                            });

                            // Atualiza o campo de seleção para garantir que os checkboxes não sejam afetados erroneamente
                            updateSelectedVendedores();

                            // Mostra o dropdown após adicionar os itens
                            dropdown.style.display = 'block';
                        } else {
                            console.error('A resposta não é um array:', data);
                            dropdown.innerHTML = '<div class="dropdown-item">Nenhum vendedor encontrado.</div>'; // Mensagem de erro para o usuário
                            dropdown.style.display = 'block'; // Garante que o dropdown seja exibido
                        }
                    })
                    .catch(error => console.error('Erro ao obter vendedores:', error));
            }

            // Função para marcar/desmarcar todos os checkboxes
            window.toggleSelectAll = function(selectAllCheckbox) {
                const checkboxes = document.querySelectorAll('.vendedor-checkbox');
                checkboxes.forEach(checkbox => (checkbox.checked = selectAllCheckbox.checked));
                updateSelectedVendedores();
            };

            // Atualizar vendedores selecionados e atualizar o campo oculto
            window.updateSelectedVendedores = function() {
                const selectedNames = Array.from(document.querySelectorAll('.vendedor-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.getAttribute('data-name')); // Obter os nomes dos vendedores
                const selectedIds = Array.from(document.querySelectorAll('.vendedor-checkbox'))
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.getAttribute('data-id')); // Obter os IDs dos vendedores

                // Atualiza o campo oculto com os IDs para envio via GET
                hiddenField.value = selectedIds.join(',');

                // Exibir os nomes dos vendedores selecionados em algum lugar na interface
                filterInput.value = selectedNames.join(', '); // Exibe os nomes no campo de input
            };

            // Manter o dropdown aberto
            filterInput.addEventListener('focus', function() {
                const filialSelecionada = filialSelect.value; // Obtém o valor selecionado na filial
                if (filialSelecionada) {
                    carregarVendedores(filialSelecionada); // Carregar vendedores quando o input recebe foco
                }
            });

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

            // Função para filtrar vendedores com base na pesquisa do input
            filterInput.addEventListener('input', function() {
                const searchValue = this.value.toLowerCase(); // Obtém o valor de pesquisa em minúsculas
                const filteredVendedores = window.vendedoresData.filter(vendedor =>
                    vendedor.NOME_VENDEDOR.toLowerCase().includes(searchValue) || // Filtra os vendedores pelo nome
                    vendedor.COD_VENDEDOR.toString().toLowerCase().includes(searchValue) // Filtra também pelo ID
                );

                // Atualiza o dropdown com os vendedores filtrados
                dropdown.innerHTML = ''; // Limpar o dropdown
                filteredVendedores.forEach(vendedor => {
                    const nomeVendedor = vendedor.NOME_VENDEDOR; // Ajuste conforme necessário
                    const idVendedor = vendedor.COD_VENDEDOR; // Ajuste conforme necessário

                    const divItem = document.createElement('div');
                    divItem.className = 'dropdown-item';
                    divItem.innerHTML = `
                <input type="checkbox" class="vendedor-checkbox" data-id="${idVendedor}" data-name="${nomeVendedor}" id="vendedor_${idVendedor}" onchange="updateSelectedVendedores()">
                <label for="vendedor_${idVendedor}">${idVendedor} - ${nomeVendedor}</label>
            `;
                    dropdown.appendChild(divItem);
                });

                // Se não houver vendedores filtrados, exibe mensagem
                if (filteredVendedores.length === 0) {
                    dropdown.innerHTML = '<div class="dropdown-item">Nenhum vendedor encontrado.</div>'; // Mensagem de erro para o usuário
                }

                // Mostra o dropdown após adicionar os itens filtrados
                dropdown.style.display = 'block';
            });
        });
    </script>

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

    <!-- App js-->
    <script src="../../../assets/js/app.min.js"></script>

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

</body>

</html>