{% 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;
}

.custom-padding {
    padding: 0.5rem 1rem!important;
}


@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;
}

.nav-tabs {
	border-bottom: none !important;
}

.nav-tabs-custom>.nav-tabs>li>a.active {
	background-color: #585EA8 !important;
	color: #ffffff !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none;
	border-radius: 0 0 10px 10px;
}
</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-between mb-3">
                        <div class="d-flex">
                            <button class="btn btn-sm btn-green-manager2 fw-bold me-2" id="btnGruposAtivos"><i class="fa-solid fa-toggle-on me-1"></i>Grupos Ativos</button>
                            <button class="btn btn-sm btn-secondary fw-bold " id="btnGruposDesativados"><i class="fa-solid fa-toggle-off me-1"></i>Grupos Desativados</button>
                        </div>
                        <div>
                            <a id="novoGrupo" class="btn btn-green-manager2 fw-bold btn-sm"><i class="fa-solid fa-plus me-1"></i>Criar Grupo</a>
                        </div>
                    </div>

                    <div class="tab-content" style="border-radius: 10px!important; margin: 0;">
                        <!-- Grupos Ativos Tab -->
                        <div class="tab-pane fade show active" id="gruposAtivos">
                            <div class="box no-padding">
                                <div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 15px;">
                                    <table id="tabelaGruposAtivos" 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><i class="fa-solid fa-file-alt"></i> Descrição</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="gruposDesativados">
                            <div class="box no-padding">
                                <div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 15px;">
                                    <table id="tabelaGruposDesativados" 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><i class="fa-solid fa-file-alt"></i> Descrição</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </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');

    document.getElementById('btnGruposAtivos').addEventListener('click', function() {
        document.getElementById('gruposAtivos').classList.add('show', 'active');
        document.getElementById('gruposDesativados').classList.remove('show', 'active');
        this.classList.add('btn-green-manager2');
        this.classList.remove('btn-secondary');
        document.getElementById('btnGruposDesativados').classList.add('btn-secondary');
        document.getElementById('btnGruposDesativados').classList.remove('btn-purple-manager');
    });

    document.getElementById('btnGruposDesativados').addEventListener('click', function() {
        document.getElementById('gruposDesativados').classList.add('show', 'active');
        document.getElementById('gruposAtivos').classList.remove('show', 'active');
        this.classList.add('btn-purple-manager');
        this.classList.remove('btn-secondary');
        document.getElementById('btnGruposAtivos').classList.add('btn-secondary');
        document.getElementById('btnGruposAtivos').classList.remove('btn-green-manager2');
    });

const checkbox = document.getElementById("check_contatos");
const btnExcluirTodos = document.getElementById("btnExcluirTodos");
const btnExcluirSelecionados = document.getElementById("btnExcluirSelecionados");

// Evento para o checkbox "Selecionar Todos"
checkbox.addEventListener("change", () => {
    // Mostrar ou esconder o botão "Excluir Todos"
    if (checkbox.checked) {
        btnExcluirTodos.classList.remove("d-none");
        btnExcluirSelecionados.classList.add("d-none"); // Esconde o botão "Excluir Selecionados"
    } else {
        btnExcluirTodos.classList.add("d-none");
    }

    // Seleciona ou desmarca todos os checkboxes de itens
    const checkboxes = document.querySelectorAll('.check_contato');
    checkboxes.forEach(chk => {
        chk.checked = checkbox.checked;
    });
});

function verificarSelecionados() {
    // Verifica se algum checkbox individual está selecionado
    const algumSelecionado = $('.check_contato:checked').length > 0;

    // Atualiza a visibilidade do botão "Excluir Selecionados"
    if (algumSelecionado && !checkbox.checked) {
        $('#btnExcluirSelecionados').removeClass('d-none');
    } else {
        $('#btnExcluirSelecionados').addClass('d-none');
    }
}

// Evento para os checkboxes individuais
$(document).on('change', '.check_contato', function() {
    verificarSelecionados();

    // Sincroniza o estado do checkbox "Selecionar Todos"
    const todosMarcados = $('.check_contato').length === $('.check_contato:checked').length;
    checkbox.checked = todosMarcados;

    // Esconde o botão "Excluir Todos" se nenhum checkbox estiver selecionado
    if (!checkbox.checked) {
        btnExcluirTodos.classList.add('d-none');
    }
});

$(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() {
    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){
            // Limpa as tabelas
            $('#tabelaGruposAtivos > tbody').empty();
            $('#tabelaGruposDesativados > tbody').empty();

            let grupos = res.grupos;
            
            $(grupos).each(function(index, g){
                let statusAction = g.status === 'DESATIVADO' ? 'Ativar' : 'Desativar';
                let statusIcon = g.status === 'DESATIVADO' ? 'mdi-check' : 'mdi-block-helper';
                let statusClass = g.status === 'DESATIVADO' ? 'ativarGrupo' : 'desativarGrupo';
                let newStatus = g.status === 'DESATIVADO' ? 'ATIVO' : 'DESATIVADO';

                // Define a tabela com base no status
                let tabelaAlvo = g.status === 'DESATIVADO' ? '#tabelaGruposDesativados > tbody' : '#tabelaGruposAtivos > tbody';

                $(tabelaAlvo).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>'+ g.descricao +'</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-descricao="'+ g.descricao +'" data-status="'+ g.status +'" 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>' +
                                    '<a data-id="'+ g.idGrupos +'" data-nome="'+ g.nome +'" data-status="'+ newStatus +'" class="dropdown-item '+ statusClass +' text-purple" href="javascript:void(0)"><i class="mdi '+ statusIcon +'"></i> '+ statusAction +' 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();
            });
        }
    });
}

function alterarStatusGrupo(id, status) {
    let action = status === 'ATIVO' ? 'ATIVAR' : 'DESATIVAR';
    let action2 = status === 'ATIVO' ? 'ATIVADO' : 'DESATIVADO';
    Swal.fire({
        title: '<span class="text-purple">Tem certeza?</span>',
        text: "Tem certeza que deseja " + action + " o grupo?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#60b86c',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sim, ' + action + '!'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('ativarDesativarGrupo', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: 'id=' + id + '&status=' + status
            })
            .then(function(res){ return res.json(); })
            .then(function(res){
                if(res.Success){
                    Swal.fire({
                        title: '<span class="text-purple">'+action2.charAt(0).toUpperCase() + action2.slice(1)+'!</span>',
                        text: 'O grupo foi ' + action2 + ' com sucesso!',
                        icon: 'success',
                        confirmButtonColor: '#585EA8',
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire(
                        'Erro!',
                        res.Erro,
                        'error'
                    );
                }
            });
        }
    });
}

// Adiciona o evento de clique para alterar o status do grupo
$(document).on('click', '.desativarGrupo, .ativarGrupo', function() {
    let id = $(this).data('id');
    let status = $(this).data('status');
    alterarStatusGrupo(id, status);
});

$('#tabelaGruposAtivos > tbody, #tabelaGruposDesativados > 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') : '');
    let status = ($(this).data('status') ? $(this).data('status') : '');
    let descricao = ($(this).data('descricao') ? $(this).data('descricao') : '');

    criarEditarGrupo(id, nome, atendente, status, descricao);
})
$('#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, status, descricao = '') {
    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 class="col-12 text-start mt-3">' +
                    '<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-file-alt me-1"></i>Descrição</h6>' +
                    '<textarea id="novoGrupoDescricao" placeholder="Descrição" class="form-control border-0 bg-manager-gray">'+descricao+'</textarea>' +
                '</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();
            let novoGrupoDescricao = $('#novoGrupoDescricao').val();
            let novoGrupoStatus = id == '' ? 'ATIVO' : status;
            
            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 + '&descricao=' + novoGrupoDescricao + '&status=' + novoGrupoStatus
            })
            .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();
                    })
                }
            })
        }
    })
}

$('#tabelaGruposAtivos > tbody, #tabelaGruposDesativados > 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();
					})
				}
			})
	
		}
	})
})

$('#tabelaGruposAtivos > tbody, #tabelaGruposDesativados > 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 custom-padding">'+ 
			                '<input type="checkbox" id="check_'+ p.idContatosGrupos +'" class="check_contato">' +
			                '<label for="check_'+ p.idContatosGrupos +'">' + p.idContatosGrupos + '</label>' +
			            '</td>' +
			            '<td class="custom-padding">'+ (p.idContatos.nomeExibir == null ? p.idContatos.nome : p.idContatos.nomeExibir) +'</td>' +
			            '<td class="custom-padding">'+ p.idContatos.numero +'</td>' +
			            '<td class="custom-padding">' +
			                '<div class="d-flex justify-content-center">' +
			                    '<i data-id="'+ p.idContatosGrupos +'" class="excluirParticipante mdi mdi-close text-danger fs-4" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="Excluir participante"></i>' +
			                '</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();
			})
		}
	})
}

function excluirParticipantes(ids, idGrupo) {
    return fetch('excluirParticipante', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'id_grupos=' + idGrupo + '&ids=' + JSON.stringify(ids),
    })
    .then(res => res.text())
    .then(text => {
        try {
            return JSON.parse(text);
        } catch (err) {
            return { Success: true };
        }
    });
}

$('#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();

            excluirParticipantes([], idGrupo).then(result => {
                if (result.Success) {
                    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 participantes!',
                        text: result.Erro || 'Erro desconhecido',
                        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];
        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();

            excluirParticipantes(selectedContacts, idGrupo).then(result => {
                if (result.Success) {
                    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: result.Erro || 'Erro desconhecido',
                        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');
    let idGrupo = $('#modalParticipantesIdGrupo').val();

    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)',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Excluindo participante...',
                allowOutsideClick: false,
                scrollbarPadding: false,
            });
            Swal.showLoading();

            excluirParticipantes([id], idGrupo).then(result => {
                if (result.Success) {
                    Swal.fire({
                        title: 'Participante excluído com sucesso!',
                        icon: 'success',
                        confirmButtonColor: '#60b86c',
                    }).then(() => {
                        verParticipantes(idGrupo, $('#modalParticipantesTitle').text(), false);
                    });
                } else {
                    Swal.fire({
                        title: 'Erro ao excluir participante!',
                        text: result.Erro || 'Erro desconhecido',
                        icon: 'error',
                        confirmButtonColor: '#60b86c',
                    });
                }
            }).catch(() => {
                Swal.fire({
                    title: 'Erro inesperado!',
                    text: 'Algumas operações podem não ter sido concluídas.',
                    icon: 'warning',
                    confirmButtonColor: '#60b86c',
                });
            });
        }
    });
});

$("#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 %}