<div class="modal fade" id="modalLinkPagamento" tabindex="-1" style="z-index: 10">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel">Links de Pagamento</h5>
            </div>
            <div class="modal-body" id='modalLinkPagamentoBody'>
                <!-- QR Code ou outras informações -->
                <nav>
                    <div class="nav nav-tabs justify-content-start" id="nav-tab" role="tablist" style="text-decoration: none">
                        <a class="nav-link abaLink abaLinkPagamento active" id="tabAtivos" data-toggle="tab" href="#divAtivos" role="tab" aria-controls="divAtivos" aria-selected="true">Ativos</a>
                        <a class="nav-link abaLink abaLinkPagamento" id="tabInativos" data-toggle="tab" href="#divInativos" role="tab" aria-controls="divInativos" aria-selected="false">Inativos</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active card" id="divAtivos" role="tabpanel" aria-labelledby="tabAtivos">
                        <div style="padding: 16px;">
                            <!-- Tabela de Links de Pagamento -->
                            <div class="row">
                                <div class="col-sm-12" style="margin-bottom: 16px;">
                                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                        <table class="table table-bordered table-hover" id="tblLinksPagamento">
                                            <thead></thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Campo de Número WhatsApp e Botão de Envio -->
                            <div class="row">
                                <div class="col-sm-6" style="padding-bottom: 16px;">
                                    <label for="txtNumeroCelular">Número WhatsApp</label>
                                    <input type="text" class="input-default" id="txtNumeroCelular" placeholder="Ex: 5511999999999">
                                </div>
                                <div class="col-sm-6" style="margin-top: 28px;">
                                    <button id="btnWppLinkPagamento" class="btn-sisp btn btn-danger" style="background-color: #25D366!important; border-color: #25D366!important;">
                                        <i class="fab fa-whatsapp"></i> WhatsApp
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade card" id="divInativos" role="tabpanel" aria-labelledby="tabInativos">
                        <div style="padding: 16px;">
                            <div class="row">
                                <div class="col-sm-12" style="margin-bottom: 16px;">
                                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                        <table class="table table-bordered table-hover" id="tblLinksPagamentoInativos">
                                            <thead></thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <button id="btn-fechar-link" type="button" data-dismiss='modal' class="btn btn-danger"> Fechar </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>