<!-- Modal -->
<div class="modal fade" id="MyModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="standard-modalLabel">Lista de novos clientes</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="clientes-produto-container">
                    <!-- O conteúdo será carregado dinamicamente -->
                    <p>Carregando...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const modalLinkElements = document.querySelectorAll(".open-modal-cliente");
        const modalContainer = document.getElementById("clientes-produto-container");

        modalLinkElements.forEach(function(element) {
            element.addEventListener("click", function(event) {
                event.preventDefault();
                const requisicaoId = element.getAttribute("data-produto");

                // Carregue a modal
                const modal = new bootstrap.Modal(document.getElementById("MyModal2"));
                modal.show();

                // Carregue o conteúdo da página buscar_detalhes_produto.php na modal
                modalContainer.innerHTML = '<p>Carregando...</p>';
                fetch('lista_novos_clientes.php?id=' + encodeURIComponent(requisicaoId) + '&filial=<?php echo urlencode($filial); ?>&ano=<?php echo urlencode($ano); ?>&mes=<?php echo urlencode($mes); ?>&periodo=<?php echo urlencode($periodo); ?>&semana=<?php echo urlencode($semana); ?>&data_fim=<?php echo urlencode($data_fim); ?>&data_inicio=<?php echo urlencode($data_inicio); ?>')
                    .then(response => response.text())
                    .then(data => {
                        modalContainer.innerHTML = data;

                        // Inicializar DataTable na modal
                        const tabela = modalContainer.querySelector('table');
                        if (tabela) {
                            $(tabela).DataTable({
                                "language": {
                                    "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"
                                },
                                "paging": true,
                                "lengthMenu": [
                                    [10, 25, 50, 100, -1],
                                    [10, 25, 50, 100, "Todos"]
                                ],
                                "searching": true,
                                "ordering": true,
                                "info": true,
                                "buttons": [
                                    'excelHtml5',
                                    'pdfHtml5'
                                ],
                                dom: '<"d-flex justify-content-start mb-2"l>' + // Row 1: length à esquerda
                                    '<"d-flex justify-content-between align-items-center mb-2"Bf>' + // Row 2: botões e pesquisa
                                    't' +
                                    '<"datatable-footer d-flex justify-content-between align-items-center mt-2 w-100"<"footer-center"i><"footer-right"p>>',
                            });
                        }
                    });
            });
        });

        // Remover backdrop e corrigir scroll após fechar a modal
        const myModalEl = document.getElementById('MyModal2');
        myModalEl.addEventListener('hidden.bs.modal', function() {
            const modalsBackdrop = document.getElementsByClassName('modal-backdrop');
            while (modalsBackdrop.length > 0) {
                modalsBackdrop[0].parentNode.removeChild(modalsBackdrop[0]);
            }
            document.body.style.overflow = ''; // Reset overflow
        });
    });
</script>