{% extends "cliente/base.php" %}
{% block body %}
<style>
.rotate {
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box-header {
    border: none;
}

.box-header.with-border {
    border: none;
}

.input-group-addon {
	border: none !important;
}

.btn-light {
	background-color: #F2F5FA;
	border: none;
	color: #000000;
}

.wrapper .border-light {
	border: none;
}

.btn-close {
  filter: invert(47%) sepia(88%) saturate(403%) hue-rotate(336deg) brightness(90%) contrast(95%);
  opacity: 1;
}

@media (max-width: 768px) {
	.fixed .content-wrapper {
    	margin-top: 75px!important;
	}
}

.fixed .content-wrapper {
    margin-top: 0px;
}

[type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
	border: 2px solid #60b86c;
}
</style>

<div class="content-wrapper bg-light text-start">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="">
				<h4 class="page-title d-flex align-items-center pe-0">
					<div class="col fw-bold text-purple">Grupos</div>
				</h4>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box">
						
						<div class="box-header with-border p-3 pb-0">
							<div class="row p-0">
								<!--h4 class="box-title">Últimas Conversas</h4-->
								<div class="col-lg-5">
									<div class="form-group">
										<label class="form-label text-purple fw-bold"><i class="fa-solid fa-users-rectangle"></i> Nome:</label>
										<input type="text" class="form-control border-0 bg-manager-gray pull-right" placeholder="Digite o nome do grupo para buscar" id="filtroNomeGrupo">
									</div>
								</div>
								

								<div class="col-lg-2 mb-sm-15 mb-xs-15">
									<h6 for="">&nbsp;</h6>
									<button id="buscarGrupos" type="button" class="waves-effect waves-circle btn btn-circle btn-green-manager2 fw-bold btn-sm mb-5"><i class="fa fa-search"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div class="d-flex justify-content-end mb-3">
						<div class="">
							<a id="novoGrupo" class="btn btn-green-manager2 fw-bold btn-sm pull-right"><i class="fa-solid fa-plus me-1"></i>Criar Grupo</a>
						</div>
					</div>
					<div class="box no-padding">
						<div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 15px;">
							<table id="tabelaGrupos" class="table table-hover" >
								<thead class="bg-purple sticky-top" style="z-index: 99;">
									<tr>
										<th>#</th>
										<th><i class="fa-solid fa-users-rectangle"></i> Nome</th>
										<th><i class="fa-solid fa-people-group"></i> Participantes</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>

				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
	
	
	<!-- MODAL PARTICIPANTES -->
	<div id="modalParticipantes" class="modal fade bs-example-modal-lg" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
	    <div class="modal-dialog modal-lg">
	        <div class="modal-content" style="border-radius: 10px;">
	            <div class="modal-header bg-purple fw-bold" style="border-radius: 10px 10px 0 0;">
	                <h5 class="modal-title fw-bold" id="modalParticipantesTitle"></h5>
	                <input type="hidden" id="modalParticipantesIdGrupo" value=""></input>
	                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	            </div>
	            <div class="modal-body">
	                <div class="mt-3 mb-30 col-lg-4 lookup lookup-sm lookup-right">
	                    <input id="buscarContatoModal" type="text" placeholder="Buscar nome/número" class="form-control border-0 bg-manager-gray w-p100" value="" />
	                </div>

	                <div class="table-responsive" style="max-height: 68vh; min-height: 68vh; overflow: auto; border-radius: 10px 10px;">
	                    <table id="tabelaParticipantes" class="table table-hover">
	                        <thead class="bg-purple sticky-top" style="z-index: 99;">
	                            <tr>
	                                <th>
	                                    <div class="bg-purple">
	                                        <input type="checkbox" class="chk-col-success" id="check_contatos" autocomplete="off">
	                                        <label class="" for="check_contatos">#</label>
	                                    </div>
	                                </th>
	                                <th><i class="fa-solid fa-user"></i> Nome</th>
	                                <th><i class="fa-solid fa-mobile-screen-button"></i> Número</th>
	                                <th></th>
	                            </tr>
	                        </thead>
	                        <tbody>

	                        </tbody>
	                    </table>
	                </div>
	            </div>
	            <div class="modal-footer border-0 bg-purple" style="border-radius: 0 0 10px 10px;">
	                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
	                <button id="btnExcluirTodos" type="button" class="btn btn-danger d-none fw-bold"><i class="fa-solid fa-trash me-1"></i>Excluir todos os contatos</button>
					<button id="btnExcluirSelecionados" type="button" class="btn btn-danger d-none fw-bold"><i class="fa-solid fa-trash me-1"></i>Excluir selecionados</button>
	            </div>
	        </div>
	    </div>
	</div>
	<!-- MODAL PARTICIPANTES -->
</div>


<style>
	.swal2-html-container{
		overflow: visible;
	}
	.table-responsive>table .dropdown{position:static;}
</style>
{% endblock %}
{% block scripts %}
<script>
$('body').addClass('sidebar-collapse');

const checkbox = document.getElementById("check_contatos");
const btnExcluirTodos = document.getElementById("btnExcluirTodos");
checkbox.addEventListener("change", () => {
    if (checkbox.checked) {
        btnExcluirTodos.classList.remove("d-none");
    } else {
        btnExcluirTodos.classList.add("d-none");
    }
});

function verificarSelecionados() {
    const algumSelecionado = $('.check_contato:checked').length > 0;
    if (algumSelecionado) {
        $('#btnExcluirSelecionados').removeClass('d-none');
    } else {
        $('#btnExcluirSelecionados').addClass('d-none');
    }
}

$(document).on('change', '.check_contato', function() {
    verificarSelecionados();
});


$(document).ready(function() {
	initilizeTooltips();
	getGrupos();
})

function initilizeTooltips(){
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	  return new bootstrap.Tooltip(tooltipTriggerEl)
	})
}

$('#buscarGrupos').on('click', function(){
	getGrupos();
})

function getGrupos(){
	Swal.fire({title : 'Buscando grupos', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	let nomeGrupo = $('#filtroNomeGrupo').val()
	
	fetch('buscarGrupos', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nomeGrupo=' + nomeGrupo
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#tabelaGrupos > tbody').empty();
			let grupos = res.grupos;
			
			$(grupos).each(function(index,g){
				$('#tabelaGrupos > tbody').append(
					'<tr class="text-muted">' +
						'<td>'+ g.idGrupos +'</td>' +
						'<td>'+ g.nome +'</td>' +
						'<td class="d-flex">'+ 
							'<text class="me-1">' + g.participantes + '</text>' +
						'</td>' +
						'<td>' +
							'<div class="dropdown float-end">' +
								'<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>' +
								'<div class="dropdown-menu dropdown-menu-end" style="position:static;">' +
									'<a data-id="'+ g.idGrupos +'" data-nome="'+ g.nome +'" class="dropdown-item verParticipantes text-purple" href="javascript:void(0)"><i class="mdi mdi-eye"></i> Ver participantes</a>' +
									'<a data-id="'+ g.idGrupos +'" data-nome="'+ g.nome +'" data-atendente="'+ g.idAtendentes +'" class="dropdown-item editarGrupo text-purple" href="javascript:void(0)"><i class="mdi mdi-pencil"></i> Editar grupo</a>' +
									'<a data-id="'+ g.idGrupos +'" data-nome="'+ g.nome +'" class="dropdown-item excluirGrupo text-purple" href="javascript:void(0)"><i class="mdi mdi-close"></i> Excluir grupo</a>' +
								'</div>' +
							'</div>' +
						'</td>' +
					'</tr>'
				)
			})
			
			initilizeTooltips();
			Swal.close();
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

$('#tabelaGrupos > tbody').on('click', '.editarGrupo', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	let nome = ($(this).data('nome') ? $(this).data('nome') : '');
	let atendente = ($(this).data('atendente') ? $(this).data('atendente') : '');

	criarEditarGrupo(id, nome, atendente);
})
$('#novoGrupo').on('click', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	let nome = ($(this).data('nome') ? $(this).data('nome') : '');
	let atendente = ($(this).data('atendente') ? $(this).data('atendente') : '');

	criarEditarGrupo(id, nome, atendente);
})

function criarEditarGrupo(id, nome, atendente){
	
	Swal.fire({
	  title: '<span class="text-purple">' + (id == '' ? 'Novo grupo' : 'Alterar grupo') + '</span>',
	  html:
		'<div class="container">' +
			'<input id="editarGrupoId" type="hidden" class="form-control" value="'+id+'"/>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-users-rectangle me-1"></i>Nome grupo *</h6>' +
				'<input id="novoGrupoNome" placeholder="Nome" class="form-control border-0 bg-manager-gray" value="'+nome+'"/>' +
			'</div>' +
			'<div class="col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-headset me-1"></i>Atendente</h6>' +
				'<select id="novoGrupoAtendente" class="selectpicker col-12" title="Selecione um atendente" data-container="body">' +
					'<option value="" class="" style="letter-spacing: 1px !important;">Nenhum</option>' +
					{% for a in atendentes %}
					'<option value="{{a.getIdAtendentes}}" data-nome="{{a.getNomeAtendente}}" class="" style="letter-spacing: 1px !important;">{{a.getNomeAtendente}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('#novoGrupoNome').focus();
			if('{{userLogged.tipo}}' == 'ATENDENTE'){
				$('#novoGrupoAtendente').attr('disabled', true);
				$('#novoGrupoAtendente').selectpicker('val', '{{userLogged.idAtendentes}}');
			}else{
				if(id == ''){
					  $('#novoGrupoAtendente').selectpicker();
				}else{
					if(atendente != ''){
						$('#novoGrupoAtendente').selectpicker('val', atendente.toString());
					}else{
						$('#novoGrupoAtendente').selectpicker();
					}
				}
			}
		  
	  },
	  preConfirm: (value) => {
		let novoGrupoNome = $('#novoGrupoNome').val();
		
		switch(true){
			case novoGrupoNome == '':
				Swal.showValidationMessage('Nome grupo não pode ser vazio');
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoNome = $('#novoGrupoNome').val();
			let novoGrupoAtendente = $('#novoGrupoAtendente').val();
			
			Swal.fire({title : 'Salvando grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('novoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&nome=' + novoGrupoNome + '&atendente=' + novoGrupoAtendente
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: (id == '' ? 'Novo grupo' : 'Alterar grupo'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getGrupos();
					})
				}else{
					Swal.fire({
						title: (id == '' ? 'Grupo não cadastrado' : 'Erro ao alterar grupo'),
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
}

$('#tabelaGrupos > tbody').on('click', '.excluirGrupo', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Grupo ?</span>',
	  html: '<span class="fw-bold">Deseja excluir o Grupo: <strong class="text-purple">' + nome + '</strong> ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getGrupos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaGrupos > tbody').on('click', '.verParticipantes', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	
	verParticipantes(id, nome, true);
})

function verParticipantes(id, nome, showModal){
	Swal.fire({title : 'Buscando participantes...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('buscarParticipantesGrupo', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_grupos=' + id
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#tabelaParticipantes > tbody').empty();
			
			$('#modalParticipantesIdGrupo').val(id);
			let participantes = res.participantes;
			
			$(participantes).each(function(index,p){
				$('#tabelaParticipantes > tbody').append(
					'<tr class="text-muted" data-nome="'+ (p.idContatos.nomeExibir == null ? p.idContatos.nome : p.idContatos.nomeExibir) +'" data-numero="'+ p.idContatos.numero +'">' +
						'<td class="position-relative">'+ 
							'<input type="checkbox" id="check_'+ p.idContatosGrupos +'" class="check_contato">' +
							'<label for="check_'+ p.idContatosGrupos +'">' + p.idContatosGrupos + '</label>' +
						'</td>' +
						'<td>'+ (p.idContatos.nomeExibir == null ? p.idContatos.nome : p.idContatos.nomeExibir) +'</td>' +
						'<td >'+ p.idContatos.numero +'</td>' +
						'<td>' +
							'<div class="d-flex justify-content-end">' +
								'<a data-id="'+ p.idContatosGrupos +'" class="excluirParticipante waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-danger me-1" data-bs-toggle="tooltip" data-bs-original-title="Excluir participante"><i class="mdi mdi-close"></i></a>' +
							'</div>' +
						'</td>' +
					'</tr>'
				)
			})
			
			initilizeTooltips();
			Swal.close();
			
			if(showModal){
				$('#modalParticipantesTitle').text('Participantes - ' + nome);
				$('#modalParticipantes').modal('show');
			}
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

$('#btnExcluirTodos').on('click', function () {
    Swal.fire({
        title: '<span class="text-purple">Excluir Todos os Participantes</span>',
        html: '<span class="fw-bold">Deseja realmente remover todos os participantes do grupo?</span>',
        icon: 'question',
        showCloseButton: true,
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: 'Excluir Todos',
        cancelButtonText: 'Cancelar',
        scrollbarPadding: false,
        allowOutsideClick: false,
        confirmButtonColor: 'var(--bs-danger)',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Excluindo participantes...',
                allowOutsideClick: false,
                scrollbarPadding: false,
            });
            Swal.showLoading();

            let idGrupo = $('#modalParticipantesIdGrupo').val();
            let promises = [];

            // Percorre os participantes e realiza a exclusão
            $('#tabelaParticipantes tbody tr').each(function () {
                let id = $(this).find('.check_contato').attr('id').split('_')[1];
                let fetchPromise = fetch('excluirParticipante', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'id=' + id + '&id_grupos=' + idGrupo,
                })
                    .then(res => res.text())
                    .then(text => {
                        try {
                            return JSON.parse(text);
                        } catch (err) {
                            return { Success: true };
                        }
                    });

                promises.push(fetchPromise);
            });

            Promise.all(promises).then(results => {
                let errors = results.filter(res => !res.Success);

                if (errors.length === 0) {
                    Swal.fire({
                        title: '<span class="text-purple">Todos os participantes foram excluídos com sucesso!</span>',
                        icon: 'success',
                        confirmButtonColor: '#60b86c',
                        scrollbarPadding: false,
                    }).then(() => {
                        verParticipantes(idGrupo, $('#modalParticipantesTitle').text(), false);
                    });
                } else {
                    Swal.fire({
                        title: 'Erro ao excluir alguns participantes!',
                        text: errors.map(err => err.Erro || 'Erro desconhecido').join('\n'),
                        icon: 'error',
                        confirmButtonColor: '#60b86c',
                        scrollbarPadding: false,
                    });
                }
            }).catch(() => {
                Swal.fire({
                    title: 'Erro inesperado!',
                    text: 'Algumas operações podem não ter sido concluídas, mas o processo foi finalizado.',
                    icon: 'warning',
                    confirmButtonColor: '#60b86c',
                    scrollbarPadding: false,
                });
            });
        }
    });
});

$('#btnExcluirSelecionados').on('click', function () {
    let selectedContacts = [];
    $('#tabelaParticipantes tbody .check_contato:checked').each(function () {
        let id = $(this).attr('id').split('_')[1]; // Extrai o ID do contato
        selectedContacts.push(id);
    });

    if (selectedContacts.length === 0) {
        Swal.fire({
            title: '<span class="text-purple">Nenhum contato selecionado!</span>',
            text: 'Por favor, selecione ao menos um contato para excluir.',
            icon: 'warning',
            confirmButtonColor: '#60b86c',
        });
        return;
    }

    Swal.fire({
        title: '<span class="text-purple">Excluir Contatos Selecionados</span>',
        text: `Você deseja realmente excluir os ${selectedContacts.length} contatos selecionados?`,
        icon: 'question',
        showCloseButton: true,
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: 'Excluir',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: 'var(--bs-danger)',
        allowOutsideClick: false,
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: '<span class="text-purple">Excluindo contatos...</span>',
                allowOutsideClick: false,
                scrollbarPadding: false,
            });
            Swal.showLoading();

            let idGrupo = $('#modalParticipantesIdGrupo').val();
            let promises = selectedContacts.map(id =>
                fetch('excluirParticipante', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: 'id=' + id + '&id_grupos=' + idGrupo,
                })
                    .then(res => res.text())
                    .then(text => {
                        try {
                            return JSON.parse(text);
                        } catch (err) {
                            return { Success: true };
                        }
                    })
            );

            Promise.all(promises).then(results => {
                let errors = results.filter(res => !res.Success);

                if (errors.length === 0) {
                    Swal.fire({
                        title: '<span class="text-purple">Contatos excluídos com sucesso!</span>',
                        icon: 'success',
                        confirmButtonColor: '#60b86c',
                    }).then(() => {
                        verParticipantes(idGrupo, $('#modalParticipantesTitle').text(), false);
                    });
                } else {
                    Swal.fire({
                        title: '<span class="text-purple">Erro ao excluir alguns contatos!</span>',
                        text: errors.map(err => err.Erro || 'Erro desconhecido').join('\n'),
                        icon: 'error',
                        confirmButtonColor: '#60b86c',
                    });
                }
            }).catch(() => {
                Swal.fire({
                    title: '<span class="text-purple">Erro inesperado!</span>',
                    text: 'Algumas operações podem não ter sido concluídas.',
                    icon: 'warning',
                    confirmButtonColor: '#60b86c',
                });
            });
        }
    });
});


$('#tabelaParticipantes > tbody').on('click', '.excluirParticipante', function(){
	let id = $(this).data('id');
	
	Swal.fire({
	  title: 'Excluir Participante',
	  text: 'Deseja remover o participante do grupo ?',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo participante...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirParticipante', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id + '&id_grupos=' + $('#modalParticipantesIdGrupo').val()
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						verParticipantes($('#modalParticipantesIdGrupo').val(), $('#modalParticipantesTitle').text(), false);
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$("#buscarContatoModal").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$("#tabelaParticipantes > tbody > tr").filter(function() {
		$(this).toggle(
			$(this).data('nome').toString().toLowerCase().indexOf(value) > -1 || $(this).data('numero').toString().toLowerCase().indexOf(value) > -1
		);
		
	});
	/*$("#tabelaParticipantes > tbody > tr > td.numero").filter(function() {
		$(this).parent().toggle($(this).data('numero').toString().toLowerCase().indexOf(value) > -1)
	});*/
});

</script>
{% endblock %}