<?php
//require '../sessao.php';
require '../conexao/acesso.php';
require '../configuacoes.php';
require '../configuracao/consulta_banco_dados.php';
require '../configuracao/filtros.php';
require '../configuracao/get_config.php';
require '../conexao/conexao.php';
require '../querys/query-performance-vendedores.php';
require 'consulta_bd.php';

$resultmeta = null;

// Instancia a classe de consulta_bb ao banco de dados
$Configuracoes = new Configuracoes();

$consulta_bb = new ConsultaBancoDeDados();
//$consultapcp = new ConsultasMetasPCP();
$filtros = new Filtros();

$cidades = $consulta_bb->get_cidades();

//$vendedorlojas = $consultapcp->getVendedores();

$filiaisf = $consulta_bb->get_filiais();

$ids = array_column($filiaisf, 'ID');
array_unshift($ids, 'x');
$ids_filial = implode(',', $ids);
$filialselect = !empty($_GET['filial']) ? $_GET['filial'] : null;
$filial = explode(',', $filialselect);

$filial = array_filter($filial, function ($item) {
    return $item !== 'x';
});
$filial = array_values($filial);
$filial = implode(',', $filial);

$cidade = $_GET['cidade'] ?? null;
$cidadeSelecionadaId = null;

if (!empty($cidade) && $cidade !== 'Todos') {
    if (is_numeric($cidade)) {
        $cidadeSelecionadaId = (int) $cidade;
    } elseif (!empty($cidades)) {
        $cidadeNormalizada = trim($cidade);
        foreach ($cidades as $cidadeItem) {
            $nomeCidadeItem = trim($cidadeItem['nome_cidade'] ?? '');
            if ($nomeCidadeItem !== '' && strcasecmp($nomeCidadeItem, $cidadeNormalizada) === 0) {
                $cidadeSelecionadaId = (int) $cidadeItem['id_cidade'];
                break;
            }
        }
    }
}
$anos = $_GET['ano'] ?? [];
$mes = $_GET['mes'] ?? null;
$codvendedor = $_GET['codvendedor'] ?? null;

$busca_gestao = $_GET['busca_gestao'] ?? null;

$PerformanceVendedores = new PerformanceVendedores();

$dadosManipulados = [];
$dadosMarcaPropria = [];
$dadosRevenda = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $anosSelecionados = isset($_POST['ano']) ? $_POST['ano'] : [];

    if (count($anosSelecionados) < 2) {
        die("Você deve selecionar pelo menos dois anos.");
    }
}

$query_vendedor_filial = "SELECT  DISTINCT
              FU.CODIGO AS CDFUN,
              FU.NOMEFUNCIONARIO AS NOMEFUN
          FROM FUNCIONARIO FU
          INNER JOIN FUNCIONARIO_FUNCAO FF ON FU.CODIGO_FUNCIONARIO_FUNCAO = FF.CODIGO
          INNER JOIN FUNCIONARIO_DEPTO FD ON FU.CODIGO_FUNCIONARIO_DEPTO = FD.CODIGO
          WHERE FU.CODIGO <> 0 AND FU.ATIVO = '-1'
          --and FU.CODIGO_EMPRESA = ? -- filtro pela filial selecionada
";
$result_vendedor_filial = ibase_query($connection, $query_vendedor_filial);

if (!$result_vendedor_filial) {
    die('Erro na consulta: ' . ibase_errmsg());
}

$vendedorlojas = [];
while ($row = ibase_fetch_assoc($result_vendedor_filial)) {
    $vendedorlojas[] = $row;
}



?>

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


<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<?php
$pageTitle = "Acompanhamento de performance vendedores"; // Definir o título da página aqui
include('../geral/header.php');
?>

<!-- JavaScript do Bootstrap e dependência de jQuery e Popper.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.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<body>


    <!-- Navigation Bar-->
    <?php
    include('../geral/menu.php');
    ?>
    <!-- End Navigation Bar-->
    <style>
        .equal-height {
            height: 143px;
            /* Defina a altura desejada */
        }

        /* Estilo para o dropdown de vendedores */
        #acessoDropdown {
            max-height: 300px;
            overflow-y: auto;
            display: none;
            position: absolute;
            z-index: 1000;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        }

        #acessoDropdown .dropdown-item {
            padding: 8px 12px;
            display: block;
            clear: both;
            font-weight: 400;
            color: #212529;
            text-decoration: none;
            white-space: nowrap;
        }

        #acessoDropdown .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #16181b;
            text-decoration: none;
        }

        #acessoDropdown .dropdown-item.selected {
            background-color: #007bff;
            color: white;
        }

        /* Garante que o select2 tenha largura adequada */
        .select2-container {
            width: 100% !important;
        }

        /* Ajusta o alinhamento do campo select */
        .select2-container--default .select2-selection--multiple {
            height: 38px;
            border: 1px solid #ced4da;
            padding: 5px;
            display: flex;
            align-items: center;
        }

        /* Centraliza o texto no campo de seleção */
        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            cursor: default;
            padding-left: 18px;
            padding-right: 5px;
        }

        .select2-container--open .select2-dropdown--below {
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            width: 296px !important;
        }

        /* Adicionar barra de rolagem horizontal */
        #datatable-buttons {
            width: 100%;
            table-layout: auto;
        }

        /* Fixar a primeira coluna */
        #datatable-buttons th:first-child,
        #datatable-buttons td:first-child {
            position: sticky;
            left: 0;
            background-color: #f8f9fa;
            /* Cor de fundo para o destaque da coluna fixa */
            z-index: 1;

        }

        /* Ajustes de estilo para a tabela */
        #datatable-buttons th {
            text-align: center;
            white-space: nowrap;
            /* Impede que o texto quebre em várias linhas */
        }

        #datatable-buttons td {
            text-align: center;

        }

        #datatable-buttons th,
        #datatable-buttons td {
            padding: 10px;
        }

        /* Adicionar barra de rolagem horizontal */
        #datatable-buttons-meses {
            width: 100%;
            table-layout: auto;
        }

        /* Fixar apenas o cabeçalho */
        #datatable-buttons-meses thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            /* Cor de fundo para o destaque do cabeçalho fixo */
            z-index: 2;
            /* Garante que o cabeçalho fique acima das células */
        }

        /* Ajustes de estilo para a tabela */
        #datatable-buttons-meses th {
            text-align: center;
            white-space: nowrap;
            /* Impede que o texto quebre em várias linhas */
        }

        #datatable-buttons-meses td {
            text-align: center;
        }

        #datatable-buttons-meses th,
        #datatable-buttons-meses td {
            padding: 10px;
        }

        /* Adicionar barra de rolagem horizontal */
        #datatable-buttons-ano {
            width: 100%;
            table-layout: auto;
        }

        /* Ajustes de estilo para a tabela */
        #datatable-buttons-ano th {
            text-align: center;
            white-space: nowrap;
            /* Impede que o texto quebre em várias linhas */
        }

        #datatable-buttons-ano td {
            text-align: center;

        }

        #datatable-buttons-ano th,
        #datatable-buttons-ano td {
            padding: 10px;
        }

        /* Garante que o select do vendedor tenha a mesma aparência */
        .form-group select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #ced4da;
            background-color: #fff;
            padding: 6px 12px;
            font-size: 14px;
            color: #495057;
            border-radius: 5px;
            width: 100%;
            height: 38px;
        }

        /* Ajuste específico para o Selectpicker */
        .bootstrap-select .dropdown-toggle {
            border: 1px solid #ced4da !important;
            background-color: #fff !important;
            padding: 6px 12px !important;
            font-size: 14px !important;
            color: #495057 !important;
            border-radius: 5px !important;
            height: 38px !important;
        }

        /* Remove efeito estranho ao focar */
        .bootstrap-select .dropdown-toggle:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    </style>

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

    <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"><?= $pageTitle ?></h4>
                    </div>

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

                    <div class="col-12">
                        <form id="indexForm" method="get" action="" onsubmit="return validarFormulario()">
                            <div class="form-row mb-12">

                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="ano" class="col-form-label">Gestão</label>
                                    <select id="busca_gestao" name="busca_gestao" required class="form-control">
                                        <option value="">Selecione um</option>
                                        <option value="1" <?php if (isset($busca_gestao) and $busca_gestao == 1) {
                                                                echo 'selected';
                                                            } ?>>Faturamento Total</option>
                                        <option value="2" <?php if (isset($busca_gestao) and $busca_gestao == 2) {
                                                                echo 'selected';
                                                            } ?>>Manipulado</option>
                                        <option value="3" <?php if (isset($busca_gestao) and $busca_gestao == 3) {
                                                                echo 'selected';
                                                            } ?>>Revenda</option>
                                        <option value="4" <?php if (isset($busca_gestao) and $busca_gestao == 4) {
                                                                echo 'selected';
                                                            } ?>>Marca Própria</option>
                                    </select>

                                </div>

                                <?php
                                // Exibe o filtro de cidade
                                echo $filtros->filtroCidade($cidade, $cidades);
                              


                                echo $filtros->filtroCheckBox('filial', $filiaisf);

                                ?>

                                <?php
                                // Supondo que $codvendedor e $vendedorlojas estejam disponíveis
                                $nomeVendedor = '';
                                if (isset($codvendedor) && !empty($codvendedor)) {
                                    foreach ($vendedorlojas as $ven) {
                                        if ($ven['CDFUN'] == $codvendedor) {
                                            $nomeVendedor = htmlspecialchars($ven['NOMEFUN']);
                                            break;
                                        }
                                    }
                                }
                                ?>

                                <div class="form-group col-6 col-md-4 col-lg-2 mt-2">
                                    <label for="nomevendedor" class="form-label">Vendedor</label>
                                    <div class="input-group">
                                        <!-- Campo que exibe o nome do vendedor -->
                                        <input type="text" id="nomevendedor" class="form-control" placeholder="Nome Vendedor" value="<?php echo $nomeVendedor; ?>" autocomplete="off">
                                        <!-- Campo oculto que contém o código do vendedor -->
                                        <input type="hidden" id="codvendedor" name="codvendedor" value="<?php echo isset($codvendedor) ? htmlspecialchars($codvendedor) : ''; ?>">
                                    </div>
                                    <div id="acessoDropdown" class="dropdown-menu" style="width: 100%;">
                                        <?php foreach ($vendedorlojas as $ven) : ?>
                                            <a class="dropdown-item" href="#" data-nome="<?php echo htmlspecialchars($ven['NOMEFUN']); ?>" data-id_ven="<?php echo htmlspecialchars($ven['CDFUN']); ?>">
                                                <?php echo htmlspecialchars($ven['NOMEFUN']); ?>
                                            </a>
                                        <?php endforeach; ?>
                                    </div>
                                </div>

                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="ano" class="col-form-label">Ano</label>
                                    <select id="ano" name="ano[]" class="form-control" multiple="multiple" required>
                                        <?php
                                        $anosSelecionados = isset($_GET['ano']) ? $_GET['ano'] : []; // Captura os anos da URL
                                        $anoAtual = date("Y") + 1; // Obtém o ano atual incrementado em 1
                                        $anosDisponiveis = [];

                                        // Gera os anos de forma decrescente a partir de $anoAtual
                                        for ($i = 0; $i < 5; $i++) {
                                            $anosDisponiveis[] = $anoAtual - $i;
                                        }

                                        foreach ($anosDisponiveis as $ano) {
                                            $selected = in_array($ano, $anosSelecionados) ? 'selected' : ''; // Verifica se o ano está selecionado
                                            echo "<option value=\"$ano\" $selected>$ano</option>";
                                        }
                                        ?>
                                    </select>
                                </div>


                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label for="ano" class="col-form-label">Gestão por Dias</label>
                                    <input type="checkbox" name="dias" value="S" <?php if (isset($_GET['dias']) and $_GET['dias'] == 'S') {
                                                                                        echo 'checked';
                                                                                    } ?>>
                                </div>

                                <?php
                                // Exibe o filtro de mes
                                //echo $filtros->filtroMes($mes);
                                ?>

                                <input type="hidden" name="form_submitted" value="1" />
                                <div class="col-12 d-flex " style="align-items:center;justify-content: end;">
                                    <a href="index.php" class="btn btn-warning mr-2"><i class="mdi mdi-plus"></i> Limpar</a>
                                    <button type="submit" id="submit-button" class="btn btn-primary"><i class="mdi mdi-magnify"></i> Pesquisar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <br>
                <br>

                <?php if (isset($_GET['form_submitted']) and $_GET['form_submitted'] == 1 and !isset($_GET['dias'])) { ?>

                    <?php include('crescimento_mensal.php'); ?>

                <?php } elseif (isset($_GET['form_submitted']) and $_GET['form_submitted'] == 1 and isset($_GET['dias']) and $_GET['dias'] == 'S') { ?>

                    <?php include('crescimento_dias.php'); ?>


                <?php } ?>
            </div>
        </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>

        <!-- 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>
        <script src="../../assets/js/funcoes.js"></script>
        <!-- Inclua isso no cabeçalho para garantir que as bibliotecas sejam carregadas -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">

        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

        <script>
            $(document).ready(function() {
                // Inicializa o Select2 no campo de seleção de ano
                $('#ano').select2({
                    placeholder: "Selecione os anos",
                    allowClear: true,
                    dropdownParent: $('body'),
                    maximumSelectionLength: 2,
                    language: {
                        noResults: function() {
                            return "Nenhum resultado encontrado";
                        },
                        searching: function() {
                            return "Procurando...";
                        },
                        maximumSelected: function() {
                            return "Você só pode selecionar até 2 anos.";
                        }
                    }
                });

                // Validação para garantir pelo menos dois anos selecionados
                $('form').on('submit', function(e) {
                    const selectedYears = $('#ano').val();
                    if (!selectedYears || selectedYears.length < 2) {
                        e.preventDefault();
                        alert("Você deve selecionar pelo menos dois anos.");
                        $('#ano').focus();
                    }
                });
            });


            initDropdownFilter('filial');
            document.addEventListener('DOMContentLoaded', function() {
                const url = new URL(window.location);
                url.searchParams.delete('status');
                url.searchParams.delete('message');
                window.history.replaceState({}, document.title, url);
            });

            applyFilter('cidade', 'filial', 'data-cidade', '<?php echo isset($filial) ? $filial : ''; ?>');

            $(document).ready(function() {
                var table = $('#datatable-buttons').DataTable({
                    "language": {
                        "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                    },
                    "ordering": true,
                    "responsive": true,
                    "autoWidth": false,
                    "order": [
                        [0, 'asc']
                    ],
                    "dom": 'Bfrtip',
                    "paging": false,
                    "searching": false,
                    "info": false
                });
            });

            $(document).ready(function() {
                var table = $('#datatable-buttons-meses').DataTable({
                    "language": {
                        "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                    },
                    "ordering": true,
                    "responsive": true,
                    "autoWidth": false,
                    "order": false,
                    "dom": 'Bfrtip',
                    "paging": false,
                    "searching": false,
                    "info": false
                });
            });

            $(document).ready(function() {
                var table = $('#datatable-buttons-ano').DataTable({
                    "language": {
                        "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                    },
                    "ordering": true,
                    "responsive": true,
                    "autoWidth": false,
                    "order": false,
                    "dom": 'Bfrtip',
                    "paging": false,
                    "searching": false,
                    "info": false
                });
            });

            function openModal(button) {
                var ano = button.getAttribute('data-ano');
                var mes = button.getAttribute('data-mes');
                var cidade = button.getAttribute('data-cidade');
                var filial = button.getAttribute('data-cod-filial');

                document.getElementById('anopcp').value = ano;
                document.getElementById('mespcp').value = mes;
                document.getElementById('filialpcp').value = filial;
                document.getElementById('cidadepcp').value = cidade;
                document.getElementById('myModalAdicaoPCP').style.display = 'block';
            }

            document.addEventListener("DOMContentLoaded", function() {
                const url = new URL(window.location);
                url.searchParams.delete('status');
                url.searchParams.delete('message');
                window.history.replaceState({}, document.title, url);
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const hiddenInput = document.getElementById('filialselecionados'); // Campo oculto para armazenar filiais

                function atualizarFiliais(checkbox) {
                    const hiddenInput = document.getElementById('filialselecionados'); // Referência ao input oculto
                    let valores = hiddenInput.value ? hiddenInput.value.split(',') : [];

                    // Checkbox individual
                    const id = checkbox.getAttribute('data-filial-id');
                    if (checkbox.checked) {
                        if (!valores.includes(id)) {
                            valores.push(id); // Adiciona o ID
                        }
                    } else {
                        valores = valores.filter(item => item !== id); // Remove o ID
                    }

                    // Atualiza o valor do input oculto
                    hiddenInput.value = valores.join(',');

                    // Dispara um evento personalizado para sinalizar a mudança do valor
                    const event = new Event('filialChange');
                    hiddenInput.dispatchEvent(event);

                    // Atualiza a lista de vendedores
                    filterVendedoresByFilial();
                }

                // Marcar Todos
                function marcarTodos(toggleCheckbox) {
                    const checkboxes = document.querySelectorAll('.filial-checkbox');
                    const hiddenInput = document.getElementById('filialselecionados'); // Referência ao input oculto
                    let valores = [];

                    checkboxes.forEach(function(checkbox) {
                        checkbox.checked = toggleCheckbox.checked; // Marca ou desmarca todos
                        if (toggleCheckbox.checked) {
                            const id = checkbox.getAttribute('data-filial-id');
                            valores.push(id); // Adiciona todos os IDs
                        }
                    });
                    console.log();
                    // Atualiza o valor do input oculto
                    hiddenInput.value = valores.join(',');

                    // Dispara um evento personalizado para sinalizar a mudança do valor
                    const event = new Event('filialChange');
                    hiddenInput.dispatchEvent(event);

                    // Atualiza a lista de vendedores
                    filterVendedoresByFilial();
                }

                // Configuração do evento para o checkbox "Marcar Todos"
                document.getElementById('filial_clear_btn').addEventListener('click', function() {
                    marcarTodos(this);
                });

                // Configura os checkboxes individuais para atualizar o hiddenInput e os vendedores
                const checkboxesx = document.querySelectorAll('.filial-checkbox');
                checkboxesx.forEach(function(checkbox) {
                    checkbox.addEventListener('change', function() {
                        atualizarFiliais(this);
                    });
                });

                // Filtragem inicial ao carregar a página
                filterVendedoresByFilial();



                // Configuração do dropdown para o campo de vendedor
                function setupDropdown(inputId, dropdownId) {
                    const input = document.getElementById(inputId);
                    const dropdown = document.getElementById(dropdownId);

                    // Verifica se já existe um valor pré-selecionado
                    if (input.value) {
                        // Encontra o item correspondente no dropdown
                        const items = dropdown.querySelectorAll('.dropdown-item');
                        items.forEach(function(item) {
                            if (item.getAttribute('data-nome') === input.value) {
                                // Atualiza o campo hidden com o ID do vendedor
                                const selectedId = item.getAttribute('data-id_ven');
                                document.getElementById('codvendedor').value = selectedId;
                                // Adiciona a classe selected para destacar o item
                                item.classList.add('selected');
                            }
                        });
                    }

                    input.addEventListener('focus', function() {
                        dropdown.style.display = 'block';
                    });

                    input.addEventListener('input', function() {
                        const filterValue = this.value.toLowerCase();
                        const selectedFiliais = hiddenInput.value.split(','); // Obtém o array de filiais
                        const items = dropdown.querySelectorAll('.dropdown-item');

                        const uniqueNames = new Set();

                        // items.forEach(function(item) {
                        //     const vendedorFilial = item.getAttribute('data-cdcon'); // Código da filial do vendedor
                        //     const vendedorNome = item.getAttribute('data-nome').toLowerCase();

                        //     // Verifica se o vendedor corresponde a alguma das filiais selecionadas
                        //     const isFilialMatch = selectedFiliais.includes(vendedorFilial);

                        //     // Filtra por nome do vendedor e por filial
                        //     if (vendedorNome.includes(filterValue) && isFilialMatch) {
                        //         // Exibe o vendedor apenas se o nome ainda não foi exibido (evita duplicados)
                        //         if (!uniqueNames.has(vendedorNome)) {
                        //             item.style.display = 'block';
                        //             uniqueNames.add(vendedorNome);
                        //         } else {
                        //             item.style.display = 'none';
                        //         }
                        //     } else {
                        //         item.style.display = 'none';
                        //     }
                        // });

                        dropdown.style.display = filterValue ? 'block' : 'none';
                    });

                    dropdown.addEventListener('click', function(e) {
                        if (e.target.classList.contains('dropdown-item')) {
                            const selectedId = e.target.getAttribute('data-id_ven');
                            const selectedName = e.target.getAttribute('data-nome');

                            // Remove a classe 'selected' de todos os itens
                            dropdown.querySelectorAll('.dropdown-item').forEach(item => {
                                item.classList.remove('selected');
                            });

                            // Adiciona a classe 'selected' ao item clicado
                            e.target.classList.add('selected');

                            input.value = selectedName;
                            document.getElementById('codvendedor').value = selectedId;
                            dropdown.style.display = 'none';
                        }
                    });

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

                // Filtra os vendedores com base nas filiais selecionadas
                function filterVendedoresByFilial() {
                    const selectedFiliais = hiddenInput.value.split(','); // Obtém o array de filiais
                    const dropdown = document.getElementById('acessoDropdown');
                    const items = dropdown.querySelectorAll('.dropdown-item');

                    const uniqueNames = new Set();

                    // items.forEach(function(item) {
                    //     const vendedorFilial = item.getAttribute('data-cdcon'); // Código da filial do vendedor
                    //     const vendedorNome = item.getAttribute('data-nome');

                    //     // Exibe o vendedor apenas se ele pertence a uma das filiais selecionadas
                    //     const isFilialMatch = selectedFiliais.includes(vendedorFilial);

                    //     if (isFilialMatch) {
                    //         // Exibe o vendedor apenas se o nome ainda não foi exibido
                    //         if (!uniqueNames.has(vendedorNome)) {
                    //             item.style.display = 'block';
                    //             uniqueNames.add(vendedorNome);
                    //         } else {
                    //             item.style.display = 'none';
                    //         }
                    //     } else {
                    //         item.style.display = 'none';
                    //     }
                    // });
                }

                // Configura o dropdown para o campo de vendedor
                setupDropdown('nomevendedor', 'acessoDropdown');

                // Configura os checkboxes para atualizar o hiddenInput e os vendedores
                const checkboxes = document.querySelectorAll('.filial-checkbox');
                checkboxes.forEach(function(checkbox) {
                    checkbox.addEventListener('change', function() {
                        atualizarFiliais(this);
                    });
                });

                // Filtragem inicial ao carregar a página, com base nas filiais selecionadas
                filterVendedoresByFilial();
            });
        </script>


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

                    input.addEventListener('focus', function() {
                        dropdown.style.display = 'block';
                    });

                    input.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 selectedId = e.target.getAttribute('data-id_ven');
                            const selectedName = e.target.getAttribute('data-nome');

                            // Define o valor do input como o nome do vendedor
                            input.value = selectedName;
                            // Armazena o código do vendedor no campo oculto
                            document.getElementById('codvendedor').value = selectedId;
                            dropdown.style.display = 'none';
                        }
                    });

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

                // Configura o dropdown para o campo de vendedor
                setupDropdown('nomevendedor', 'acessoDropdown');
            });
        </script>

</body>

</html>