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

.swal2-html-container{
	overflow: visible !important;
}
.table-responsive>table .dropdown{position:static;}
#.table-responsive>table .dropdown>.dropdown-menu{left:0 !important;top:0 !important;}


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

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

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

	.card-header {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		padding: 1.5rem;
		background-color: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		border-radius: 15px 15px 0 0 !important;
	}

	.card {
		border-radius: 15px;
		box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.05);
		margin-bottom: 1.5rem !important;
		border: none;
		border-bottom: 15px solid #5255CC;
	}

	.card-body {
		padding: 1.5rem;
		background-color: #F2F2F2;
	}

	.daterangepicker .ranges li.active {
		background-color: #60b86c !important;
		color: #fff;
	}

	.theme-primary .ranges li:hover,
	.theme-primary .ranges li:active,
	.theme-primary .ranges li.active {
		border: none;
	}

	.theme-primary .daterangepicker td.active {
		background-color: #60b86c !important;
	}

	.daterangepicker td.in-range {
		background-color: #c2efcb;
		border-color: transparent;
		color: #000;
		border-radius: 0;
	}

	.theme-primary .btn-primary {
		background-color: #60b86c;
		border-color: #60b86c;
		color: #ffffff;
	}

	.theme-primary .btn-primary:hover,
	.theme-primary .btn-primary:active,
	.theme-primary .btn-primary:focus,
	.theme-primary .btn-primary.active {
		background-color: #1b9c35 !important;
		border-color: #1b9c35 !important;
		color: #ffffff !important;
	}

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

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

	.form-control:disabled, .form-control:read-only {
	    background-color: #f2f5fa;
	    opacity: 1;
	}

	/* Modal Styling */
#modalInformacoesContato .modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#modalInformacoesContato .modal-header {
    color: #fff;
    padding: 15px 20px;
}

#modalInformacoesContato .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

#modalInformacoesContato .btn-close {
    filter: invert(100%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#modalInformacoesContato .btn-close:hover {
    opacity: 1;
}

#modalInformacoesContato .modal-body {
    padding: 20px;
    background-color: #f9f9f9;
}

#modalInformacoesContato #infoContato p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
}

#modalInformacoesContato #infoContato p strong {
    color: #585EA8 ;
}

#modalInformacoesContato hr {
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

#modalInformacoesContato #historicoFunil h6,
#modalInformacoesContato #proximaInteracao h6 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #585EA8 ;
    margin-bottom: 10px;
}

#modalInformacoesContato #funilHistorico {
    padding-left: 0;
    list-style: none;
}

#modalInformacoesContato #funilHistorico .list-group-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 0.95rem;
    color: #555;
}

#modalInformacoesContato #proximaInteracao p {
    font-size: 1rem;
    color: #333;
}

#modalInformacoesContato #proximaInteracao p strong {
    color: #585EA8 ;
}

#modalInformacoesContato .modal-footer {
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    padding: 15px;
}

#modalInformacoesContato .btn-secondary {
    background-color: #6c757d;
    border: none;
    color: #fff;
    transition: background-color 0.3s ease;
}

#modalInformacoesContato .btn-secondary:hover {
    background-color: #5a6268;
}

@media (max-width: 768px) {
		.steps li {
			display: block;
			width: 100%;
			text-align: center;
			margin-bottom: 10px;
		}

		.steps li a,
		.steps li p {
			padding: 10px;
			font-size: 16px;
		}

		.steps li a:before,
		.steps li p:before,
		.steps li a:after,
		.steps li p:after {
			display: none;
		}

		.steps li.first a,
		.steps li.first p,
		.steps li.last a,
		.steps li.last p {
			border-radius: 10px;
		}
	}

	.steps {
		list-style-type: none;
		padding: 0;
	}

	.steps li {
		display: inline-block;
		margin-bottom: 3px;
	}

	.steps li a,
	.steps li p {
		background: #e5f4fd;
		padding: 8px 20px;
		color: #0077bf;
		display: block;
		font-size: 14px;
		font-weight: bold;
		position: relative;
		text-indent: 12px;
	}

	.steps li.first a,
	.steps li.first p {
		border-top-left-radius: 10px;
		/* Adicionado */
		border-bottom-left-radius: 10px;
		/* Adicionado */
	}

	.steps li.last a,
	.steps li.last p {
		border-top-right-radius: 10px;
		/* Adicionado */
		border-bottom-right-radius: 10px;
		/* Adicionado */
	}

	.steps li a:hover,
	.steps li p:hover {
		text-decoration: none;
	}

	.steps li a:before,
	.steps li p:before {
		border-bottom: 18px solid transparent;
		border-left: 12px solid #fff;
		border-top: 18px solid transparent;
		content: "";
		height: 0;
		position: absolute;
		left: 0;
		top: 50%;
		width: 0;
		margin-top: -18px;
	}

	.steps li a:after,
	.steps li p:after {
		border-bottom: 18px solid transparent;
		border-left: 12px solid #eee;
		border-top: 18px solid transparent;
		content: "";
		height: 0;
		position: absolute;
		left: 100%;
		top: 50%;
		width: 0;
		margin-top: -18px;
		z-index: 1;
	}

	.steps li.first a:before,
	.steps li.first p:before {
		display: none;
		/* Adicionado */
	}

	.steps li.last a:after,
	.steps li.last p:after {
		display: none;
		/* Adicionado */
	}

	.steps li.active a,
	.steps li.active p {
		background: #0077bf;
		color: #fff;
	}

	.steps li.active a:after,
	.steps li.active p:after {
		border-left: 12px solid var(--active-color);
	}

	.steps li.undone a,
	.steps li.undone p {
		background: #eee;
		color: #333;
	}

	.steps li.done a,
	.steps li.done p {
	    background: var(--active-color) !important;
	    color: #eee !important;
	}
	.steps li.done a:after,
	.steps li.done p:after {
	    border-left: 12px solid var(--active-color);
	}

	.steps li.undone p {
		color: #aaa;
	}

	#proximaInteracao {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
</style>

<div class="content-wrapper bg-light text-start">
	<div class="container-full ">

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box">
						<div id="filtros" class="box-header with-border p-3 pb-0" style="animation-duration: 0.05s; border: none;">
							<div class="row p-0 mb-2">
								<!--h4 class="box-title">Últimas Conversas</h4-->
								<div class="col-lg-3">
									<div class="form-group">
										<label for="cadastroFiltro" class="mb-2 fw-bold text-purple"><i class="far fa-calendar"></i> Data Cadastro:</label>
										<div class="input-group">
											<div class="input-group-addon bg-purple py-0 d-flex align-items-center">
												<i class="fa fa-calendar" style="font-size: 14px !important;"></i>
											</div>
											<input type="text" class="form-control border-0 bg-manager-gray form-control-sm pull-right" id="cadastroFiltro" placeholder="Data Cadastro" autocomplete="off">
										</div>
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<label class="form-label fw-bold text-purple"><i class="fa-solid fa-user"></i> Nome / Número:</label>
										<input type="text" class="form-control bg-manager-gray border-0 form-control-sm pull-right" placeholder="Nome/Número contato" id="filtroNomeContato" autocomplete="off">
									</div>
								</div>

								<div class="col-lg-3">
									<div class="form-group">
										<label for="filtroGrupo" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-people-group"></i> Grupo</label>
										<select id="filtroGrupo" class="selectpicker col-12 form-control form-control-sm" title="Filtrar grupo" data-live-search="true" autocomplete="off" multiple>
											<option value="-1" class="" style="letter-spacing: 1px !important;">Sem Grupo</option>
											{%for g in grupos%}
												{% if g.getStatus() == 'ATIVO' %}
												<option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>
												{% endif %}
											{%endfor%}
										</select>
									</div>
								</div>

								<div class="col-xl-2 col-lg-2">
											<h6 for="canaisFiltro" class="text-purple" style="font-weight: 500;"><i class="fa fa-comments"></i> Canais</h6>
											<select id="canaisFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar canal" data-selected-text-format="count > 2" data-count-selected-text="{0} canais selecionados" data-actions-box="true" data-select-all-text="Todos" data-deselect-all-text="Desmarcar" multiple>
												<option value="whatsapp" class="" style="letter-spacing: 1px !important;">Whatsapp</option>
												<option value="instagram" class="" style="letter-spacing: 1px !important;">Instagram</option>
												<option value="facebook" class="" style="letter-spacing: 1px !important;">Facebook</option>
											</select>
								</div>

								<div class="col-lg-1 mb-3 d-flex mt-md-0 mt-2">
									<a id="buscarContatos" class="btn btn-circle btn-green-manager2 btn-xs mt-auto"><i class="fa fa-search"></i></a>
								</div>

								<div id="filtrosAdicionais" style="display: block;">
									<div class="row p-0 mb-2">
										<div class="col-lg-3">
											<div class="form-group">
												<label for="tagsFiltro" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-tags"></i> Tags</label>
												<select id="tagsFiltro" class="selectpicker col-12 form-control form-control-sm"
													title="Filtrar tags" data-live-search="true"
													data-selected-text-format="count > 2"
													data-count-selected-text= "{0} tags selecionadas" 
													data-actions-box="true" data-select-all-text="Marcar Todas"
													data-deselect-all-text="Desmarcar" autocomplete="off" multiple>
													{% for t in tags %}
													<option value="{{t.getIdTags}}" class="" style="letter-spacing: 1px !important;" data-content="<i class='fa-solid fa-tag' style='color: {{t.getCor}}'></i> {{t.getNome}}">{{t.getNome}}</option>
													{% endfor %}
												</select>
											</div>
										</div>

										<div class="col-lg-5">
											<label for="filtroInfoAdicional" class="mb-1 mt-1 fw-bold text-purple"><i class="fa fa-id-card"></i> Informação Adicional</label>
											<div class="d-flex">
												<div class="form-group w-p50">
													<select id="filtroInfoAdicionalCampo" class="selectpicker col-12 form-control form-control-sm" title="Selecionar campo" data-live-search="true" autocomplete="off">
														{%for c in camposAdicionais|json_decode%}
														<option value="{{c.id}}" data-tipo="{{c.tipo}}" class="" style="letter-spacing: 1px !important;">{{c.nome}}</option>
														{%endfor%}
													</select>
												</div>

												<div class="form-group ms-1 w-p50 position-relative">
													<input type="text" class="form-control form-control-sm border-0 bg-manager-gray position-relative pe-4" placeholder="Valor" id="filtroInfoAdicionalValor" autocomplete="off" disabled />
													<a id="removeFiltroInfoAdicional" href="javascript:void(0)" style="position:absolute;top:18%;right:5px;display:none;">
														<i class="fa fa-close text-danger"></i>
													</a>
												</div>
											</div>
										</div>

										<div class="col-lg-4 row mt-0 g-1">
											<label for="funilFiltro" class="fw-bold text-purple"><i class="fa fa-filter"></i> Funil/Estágio</label>
											<div class="col-6">
												<div class="form-group">
													<select id="funilFiltro" class="selectpicker col-12 form-control form-control-sm"
														title="Selecionar funil"
														data-live-search="true"
														data-selected-text-format="count > 2"
														data-count-selected-text= "{0} estagios selecionados" 
														data-actions-box="true"
														data-deselect-all-text="Desmarcar" autocomplete="off">
														<option value="-1" class="" style="letter-spacing: 1px !important;">Nenhum</option>
														{% for fc in funilClientes %}
														<option value="{{fc.getIdFunilClientes}}" class="" style="letter-spacing: 1px !important;">{{fc.getNome}}</option>
														{% endfor %}
													</select>
												</div>
											</div>
											<div class="col-6">
												<div class="form-group">
													<select id="estagiosFiltro" class="selectpicker col-12 form-control form-control-sm"
														title="Estágio funil ativo"
														data-live-search="true"
														data-selected-text-format="count > 2"
														data-count-selected-text= "{0} estagios selecionados" 
														data-actions-box="true" data-select-all-text="Marcar Todos"
														data-deselect-all-text="Desmarcar" autocomplete="off" multiple>
														{% for fc in funilClientes %}
														{% for e in fc.getFunilEstagios %}
														<option value="{{e.getIdFunilEstagios}}" class="" style="letter-spacing: 1px !important;" data-cor="{{e.getCor}}" data-funil="{{fc.getIdFunilClientes}}" data-content="<i class='fa fa-circle' style='color: {{e.getCor}}'></i> {{e.getNome}}">{{e.getNome}}</option>
														{%endfor%}
														{%endfor%}


													</select>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="col-lg-3 mb-2">
								<a id="toggleFiltrosBtn" class="btn btn-purple-manager fw-bold btn-sm" onclick="toggleFiltros()"><i class="fa-solid fa-filter me-1"></i>Filtros Detalhados</a>
								</div>
							</div>
						</div>

						<div id="acaoSelecionados" class="box-header with-border p-3 pb-0 d-none" style="animation-duration: 0.05s;">
							<label class="mb-2 fw-bold text-purple"><i class="fa fa-square-check"></i> <b><span id="nSelecionados"></span> Selecionados:</b></label><br>
							<div class="d-flex flex-wrap">
								<div class="me-1">
									<div class="form-group">
										<a id="incluiSelecionadosGrupo" class="btn btn-primary btn-sm"><i class="fa fa-user-plus"></i> Incluir em um grupo</a>
									</div>
								</div>

								<div class="me-1">
									<div class="form-group">
										<a id="removeSelecionadosGrupo" class="btn btn-danger btn-sm"><i class="fa fa-user-xmark"></i> Remover de um grupo</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="d-flex justify-content-end mb-3">
						<div class="">
							<a id="infoAdicional" class="btn btn-purple-manager fw-bold btn-sm pull-right me-2"><i class="fa fa-id-card me-1"></i>Informações adicionais</a>
						</div>
						<div class="">
							<a id="novoContato" class="btn btn-green-manager2 fw-bold btn-sm pull-right"><i class="fa-solid fa-user-plus me-1"></i>Adicionar Contato</a>
						</div>
					</div>

					<div class="box">
						<div class="box-body no-padding">
								<div class="table-responsive" style="max-height: 66vh; overflow: auto; border-radius: 15px 15px 0 0;">
									<table id="tabelaContatos" 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 me-1"></i>Nome</th>
												<th><i class="fa-solid fa-user-pen me-1"></i>Nome Exibição</th>
												<th><i class="fa-solid fa-mobile-screen me-1"></i>Número / ID</th>
												<th><i class="fa-solid fa-calendar-check me-1"></i>Cadastro</th>
												<th class="text-center"><i class="fa fa-filter" data-bs-toggle="tooltip" data-bs-original-title="Estágio Funil Ativo"></i></th>
												<th></th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
</div>

<!-- Modal Informações Contato -->
<div id="modalInformacoesContato" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-purple text-white d-flex justify-content-between align-items-center">
                <h5 class="modal-title">Informações do Contato</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group mb-3">
                            <label for="contatoNome" class="mb-2 fw-bold text-purple"><i class="fa-solid fa-user"></i> Nome:</label>
                            <div class="input-group">
                                <div class="input-group-addon bg-purple py-0 d-flex align-items-center px-2">
                                    <i class="fa-solid fa-user text-white" style="font-size: 14px !important;"></i>
                                </div>
                                <input type="text" class="form-control border-0 bg-manager-gray form-control-sm" id="contatoNomeInput" placeholder="Nome" autocomplete="off" readonly>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="contatoNumero" class="mb-2 fw-bold text-purple"><i class="fa-solid fa-mobile-screen"></i> Número:</label>
                            <div class="input-group">
                                <div class="input-group-addon bg-purple py-0 d-flex align-items-center px-2">
                                    <i class="fa-solid fa-mobile-screen text-white" style="font-size: 14px !important;"></i>
                                </div>
                                <input type="text" class="form-control border-0 bg-manager-gray form-control-sm" id="contatoNumeroInput" placeholder="Número" autocomplete="off" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="contatoDataCadastro" class="mb-2 fw-bold text-purple"><i class="far fa-calendar"></i> Data de Cadastro:</label>
                            <div class="input-group">
                                <div class="input-group-addon bg-purple py-0 d-flex align-items-center px-2">
                                    <i class="fa fa-calendar text-white" style="font-size: 14px !important;"></i>
                                </div>
                                <input type="text" class="form-control border-0 bg-manager-gray form-control-sm" id="contatoDataCadastroInput" placeholder="Data de Cadastro" autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div id="proximaInteracao" class="p-3 rounded-3 shadow-sm border bg-white mt-2">
                            <div class="fw-bold text-purple mb-2">
                                <i class="fa fa-calendar-check me-2 text-purple"></i>
                                Próxima Interação
                            </div>
                            <span id="dataProximaInteracao" class="badge bg-green-manager text-white fw-bold fs-6 px-3 py-2">

                            </span>
                        </div>
                    </div>
                </div>

                <hr>

                <!-- Histórico do contato no funil -->
                <div id="historicoFunil">
                    <h6 class="text-purple">Histórico no Funil</h6>
                    <ul id="funilHistorico" class="list-group">
                        <!-- Histórico será preenchido dinamicamente -->
                    </ul>
                </div>

                <hr>

                <!-- Informações adicionais -->
                <div id="informacoesAdicionais">
                    <h6 class="text-purple fw-bold" style="font-size: 1.2rem;">Informações Adicionais</h6>
                    <div id="infoAdicionalContato">
                        <!-- Informações adicionais serão preenchidas dinamicamente -->
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal Info Adicional -->
<div id="modalInfoAdicional" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-lg">
		<div class="modal-content rounded" style="min-height: 75vh; border-radius: 15px!important;">
			<div class="modal-header bg-purple text-center">
				<h4 class="modal-title fw-bold" id="modalInfoAdicionalTitle">Gerenciar informações adicionais de contatos</h4>
				<button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body p-3">
				<div class="d-block" style="min-height: 70vh;">
					<div class="row">
						<div class="col-lg-5 text-start mt-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-circle-info"></i> Nome Informação Adicional</h6>
							<input id="novaInfoNome" placeholder="Nome. Ex: CEP, Data nascimento..." class="form-control border-0 bg-manager-gray" autocomplete="off" />
							<input id="novaInfoId" type="hidden" class="" autocomplete="off" />
						</div>
						<div class="col-lg-4 text-start mt-2 mb-lg-0 mb-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-arrow-down-a-z"></i> Tipo</h6>
							<select id="novaInfoTipo" class="form-control selectpicker" style="max-height: 33.5px;">
								<option value="text">Texto</option>
								<option value="number">Número</option>
								<option value="date">Data</option>
							</select>
						</div>
						<div class="col-lg-2 text-start mt-2 mb-lg-0 mb-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-asterisk"></i> Obrigatório</h6>
							<select id="novaInfoObrigatorio" class="form-control selectpicker" style="max-height: 33.5px;">
								<option value="nao">Não</option>
								<option value="sim">Sim</option>
							</select>
						</div>
						<div class="col-lg-1 text-start mt-auto">
							<a id="addInfoAdicional" href="javascript:void(0)" class="btn btn-green-manager2 btn-circle btn-xs float-end"><i class="fas fa-plus"></i></a>
						</div>
					</div>
					<hr>
					<div id="showInfoAdicionais" class="row p-2">

					</div>
				</div>
			</div>
			<div class="modal-footer bg-purple border-0 text-end">
				<button type="button" class="btn btn-green-manager2 fw-bold text-start" data-bs-dismiss="modal"><i class="fa-solid fa-check me-1"></i>Ok</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


{% endblock %}
{% block scripts %}
<script>
$('body').addClass('sidebar-collapse');
$(document).ready(function() {
	$('#filtroNumeroContato').mask('9999999999999999');
	$('#tabelaContatos').parent().scrollTop(0) 
	
	moment.locale('pt-br');
	$('#cadastroFiltro').daterangepicker({ 
		autoUpdateInput: false,
		locale: { 
					cancelLabel: 'Limpar',
					applyLabel: 'Aplicar',
					customRangeLabel : 'Escolher período',
				},
		ranges: {
			'Hoje': [moment(), moment()],
			'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
			'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
			'Esse Mês': [moment().startOf('month'), moment().endOf('month')],
			'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
		},
		"maxSpan": {
			"months": 3
		}
	});
	
	$('#cadastroFiltro').on('apply.daterangepicker', function (ev, picker) {
		$(this).val(picker.startDate.format('L') + ' - ' + picker.endDate.format('L'));
	});

	$('#cadastroFiltro').on('cancel.daterangepicker', function (ev, picker) {
		$(this).val('');
	});
	
	
	$('#funilFiltro').on('change', function(){
		$('#estagiosFiltro').selectpicker('val', '');
		if($('#funilFiltro').selectpicker('val') == -1){
			$('#funilFiltro').selectpicker('val', '')
		}else{
			$('#estagiosFiltro option').hide()
			$('#estagiosFiltro option[data-funil="'+ $('#funilFiltro').selectpicker('val') +'"]').show()
			$('#estagiosFiltro').selectpicker('destroy')
			$('#estagiosFiltro').selectpicker()
		}
	})
	
	$('#estagiosFiltro option').hide()
	$('#estagiosFiltro').selectpicker();
	$('#estagiosFiltro').on('change', function(){
	})
	
	initilizeTooltips();
	getContatos();
	toggleFiltros();
})

function toggleFiltros() {
		const filtrosAdicionais = document.getElementById('filtrosAdicionais');
		const toggleBtn = document.getElementById('toggleFiltrosBtn');

		if (filtrosAdicionais.style.display === 'none' || filtrosAdicionais.style.display === '') {
			filtrosAdicionais.style.display = 'block';
		    toggleBtn.innerHTML = '<i class="fa-solid fa-filter-circle-xmark me-1"></i>Filtros Detalhados';
		} else {
			filtrosAdicionais.style.display = 'none';
		    toggleBtn.innerHTML = '<i class="fa-solid fa-filter me-1"></i>Filtros Detalhados';
		}
	}

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

$('#filtroGrupo').on('change', function(){
	if($('#filtroGrupo').selectpicker('val').includes("-1")){
		$('#filtroGrupo').selectpicker('val', "-1");
	}
})

$('#filtroInfoAdicionalCampo').on('change', function(){
	$('#filtroInfoAdicionalValor').prop('disabled', false);
	$('#removeFiltroInfoAdicional').show();
	
	$('#filtroInfoAdicionalValor').val('');
	$('#filtroInfoAdicionalValor').unmask();
	switch($('#filtroInfoAdicionalCampo option:selected').data('tipo')){
		case 'text':
			$('#filtroInfoAdicionalValor').get(0).type = 'text';
			break;
		case 'number':
			$('#filtroInfoAdicionalValor').get(0).type = 'text';
			$('#filtroInfoAdicionalValor').mask('99999999999999999999999999999999999999999999999999');
			break;
		case 'date':
			$('#filtroInfoAdicionalValor').get(0).type = 'date';
			break;
	}
})
$('#removeFiltroInfoAdicional').on('click', function(){
	$('#filtroInfoAdicionalCampo').selectpicker('val', '');
	$('#filtroInfoAdicionalValor').val('');
	$('#filtroInfoAdicionalValor').prop('disabled', true);
	$('#removeFiltroInfoAdicional').hide();
	$('#filtroInfoAdicionalValor').unmask();
	$('#filtroInfoAdicionalValor').get(0).type = 'text';
})


$('#check_contatos').on('change', function(e){
	if($('#check_contatos').is(':checked')){
		$('.check_contato').prop('checked', true);
	}else{
		$('.check_contato').prop('checked', false);
	}
	showAcaoSelecionar();
	
})
$('#tabelaContatos > tbody').on('change', '.check_contato', function(e){
	showAcaoSelecionar();
})

function showAcaoSelecionar(){

	if($('.check_contato').is(':checked')){
		if(!$('#filtros').hasClass('d-none')){
			$('#filtros').addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
				$('#filtros').removeClass('animated fadeOut');
				$('#filtros').toggleClass('d-none');
				
				$('#acaoSelecionados').toggleClass('d-none');
				$('#acaoSelecionados').addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
					$('#acaoSelecionados').removeClass('animated fadeIn');
				});
			});
		}
	}else{
		if($('#filtros').hasClass('d-none')){
			
			$('#acaoSelecionados').addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
				$('#acaoSelecionados').removeClass('animated fadeOut');
				$('#acaoSelecionados').toggleClass('d-none');
				
				$('#filtros').toggleClass('d-none');
				$('#filtros').addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
					$('#filtros').removeClass('animated fadeIn');
				});
			});
		}
	}
	
	if($('.check_contato:checked').length > 0){
		$('#nSelecionados').text($('.check_contato:checked').length);
	}else{
		$('#nSelecionados').text('');
	}
	
}

$('#buscarContatos').on('click', function(){
	getContatos();
})

var buscarMaisContatos = false;
$('#tabelaContatos').parent().scroll(function(e){
	if(buscarMaisContatos){return;}
	if($('#tabelaContatos').parent().scrollTop() + $('#tabelaContatos').parent().height() +1 >= $("#tabelaContatos").parent().get(0).scrollHeight) {
		buscarMaisContatos = true;
		getContatos();
	}
})

let contatosData = {}
var initBuscaContatos = 0;
function getContatos(){
	Swal.fire({title : 'Buscando contatos', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var nomeContato = $('#filtroNomeContato').val()
	
	var infoCampo = $('#filtroInfoAdicionalCampo').selectpicker('val');
	var infoValor = $('#filtroInfoAdicionalValor').val();

	if($('#cadastroFiltro').val() != ''){
		var cadastroInicio = moment($('#cadastroFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
		var cadastroFinal = moment($('#cadastroFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');
	}else{
		var cadastroInicio = '';
		var cadastroFinal = '';
	}
	initBuscaContatos = (!buscarMaisContatos ? 0 : initBuscaContatos)
	fetch('buscarContatos', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nomeContato=' + nomeContato + 
				'&cadastroInicio=' + cadastroInicio +
				'&cadastroFinal=' + cadastroFinal +
				'&grupos=' + JSON.stringify($('#filtroGrupo').selectpicker('val')) +
				'&tags=' + JSON.stringify($('#tagsFiltro').selectpicker('val')) +
				'&estagios=' + JSON.stringify($('#estagiosFiltro').selectpicker('val')) +
				'&infoCampo=' + infoCampo +
				'&infoValor=' + infoValor +
				'&canais=' + JSON.stringify($('#canaisFiltro').val()) +
				'&init=' + initBuscaContatos
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(!buscarMaisContatos){$('#tabelaContatos > tbody').empty();}
			let contatos = res.contatos;
			
			$(contatos).each(function(index,c){
				contatosData[c.idContatos] = c;
				let senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
				switch(c.sender){
					case 'venom':
						senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
						break;
					case 'facebook':
						senderIcon = '<i class="fa-brands fa-facebook-messenger me-2"></i>';
						break;
					case 'instagram':
						senderIcon = '<i class="fa-brands fa-instagram me-2"></i>';
						break;
				}
				
				let estagio = c.funil.length === 0
    			? `<span class="addFunilContato badge b-1 border-dark badge-pill text-dark d-flex align-items-center justify-content-center m-auto" 
    			    data-id="${c.idContatos}" 
    			    data-bs-toggle="tooltip" 
    			    data-bs-original-title="Incluir no Funil de Atendimento" 
    			    style="height: 25px; width: 25px; cursor: pointer;">
    			    <i class="fa fa-plus p-0"></i>
    			   </span>`
    			: `<span id="estagio_${c.idContatos}" 
    			    class="addFunilContato b-1 border-dark badge badge-pill text-dark d-flex align-items-center justify-content-center m-auto" 
    			    data-id="${c.idContatos}" 
    			    data-bs-trigger="hover focus" 
    			    data-bs-toggle="popover" 
    			    style="height: 25px; width: 25px; cursor: pointer;">
    			    ${c.funil.length}
    			   </span>`;

					initBuscaContatos += c.funil.length === 0 ? 1 : c.funil.length;

					$('#tabelaContatos > tbody').append(
		        	'<tr class="text-muted informacoesContato" data-id="' + c.idContatos + '">' +
		        	    '<td class="position-relative">' +
		        	        '<input type="checkbox" id="check_' + c.idContatos + '" class="check_contato">' +
		        	        '<label for="check_' + c.idContatos + '">' + c.idContatos + '</label>' +
		        	    '</td>' +
		        	    '<td>' + senderIcon + (c.nome == null ? c.numero : c.nome) + '</td>' +
		        	    '<td>' +
		        	        '<div class="nomeExibirDiv d-flex align-items-center">' +
		        	            '<text href="javascript:void(0)" id="" style="">' + (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) + '</text>' +
		        	            '<input class="nomeExibirInput form-control form-control-sm d-none w-auto" placeholder="Nome contato" value="' + (c.nomeExibir == null ? '' : c.nomeExibir) + '"></input>' +
		        	            '<a class="ms-2 nomeExibir" data-id="' + c.idContatos + '" style="cursor: pointer;" ><i class="fa fa-pencil fa-sm"></i></a>' +
		        	            '<a class="ms-2 nomeExibirConfirmar d-none" data-id="' + c.idContatos + '" style="cursor: pointer;" ><i class="fa fa-check fa-sm"></i></a>' +
		        	            '<a class="ms-2 nomeExibirCancel d-none" data-id="' + c.idContatos + '" style="cursor: pointer;" ><i class="fa fa-close fa-sm"></i></a>' +
		        	        '</div>' +
		        	    '</td>' +
		        	    '<td>' + c.numero + '</td>' +
		        	    '<td>' + moment(c.dataCadastro.date).format('DD/MM/YYYY') + '</td>' +
		        	    '<td class="text-center">' + estagio + '</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="' + c.idContatos + '" class="dropdown-item editarInformacoes" href="javascript:void(0)"><i class="fa fa-id-card text-purple"></i> Editar informações</a>' +
		        	                '<a data-id="' + c.idContatos + '" data-nome="' + (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) + '" class="dropdown-item excluirContato text-purple" href="javascript:void(0)"><i class="fa fa-close"></i> Excluir contato</a>' +
		        	                '<a data-id="' + c.idContatos + '" data-nome="' + (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) + '" class="dropdown-item excluirConversas text-purple" href="javascript:void(0)"><i class="fa fa-trash-can"></i> Excluir conversas</a>' +
		        	                '<a data-id="' + c.idContatos + '" data-nome="' + (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) + '" class="dropdown-item adicionarGrupo text-purple" href="javascript:void(0)"><i class="fa fa-user-plus"></i> Incluir em um grupo</a>' +
		        	            '</div>' +
		        	        '</div>' +
		        	    '</td>' +
		        	'</tr>'
		    		);
				
				if($('#estagio_' + c.idContatos).length > 0){
					var estagioContent = '';
					var title = '';
					var estagioColor = '';
					var percestagioColor = 100/c.funil.length;
					$(c.funil).each(function(index,f){
						var e = f.idFunilEstagios;
						estagioContent = estagioContent + 
						(index > 0 ? '<br>' : '') + 
						f.idFunilClientes.nome + '<span class="badge badge-pill ms-1 my-1"  style="background-color: '+ e.cor +'">'+ e.nome +'</span>';
					
						//(index > 0 ? estagioColor = estagioColor + ',' : '');
						//estagioColor = estagioColor + e.cor + ' ' + (percestagioColor*index) + '%, ' + e.cor + ' ' + (percestagioColor*(index+1)) + '%';
					})
					
					//estagioColor = 'border-image: linear-gradient(to right, '+ estagioColor +');';
					//$('#estagio_' + c.idContatos).attr('style', $('#estagio_' + c.idContatos).attr('style')  + estagioColor);
					
					$('#estagio_' + c.idContatos).popover({
						html: true, 
						sanitize: false,
						content: estagioContent
					})
				}
			})
			
			initilizeTooltips();
			Swal.close();
			
			buscarMaisContatos = false;
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

let numeros = [];
{% for n in numeros%}numeros.push('{{n.getIdNumeros}}');{%endfor%};
$('#tabelaContatos > tbody').on('click', '.nomeExibir', function(){
	let nomeExibir = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirConfirmar = $(this).parent().find('.nomeExibirConfirmar');
	let nomeExibirCancel = $(this).parent().find('.nomeExibirCancel');

	$(input).removeClass('d-none');
	$(nomeExibirConfirmar).removeClass('d-none');
	$(nomeExibirCancel).removeClass('d-none');
	$(text).addClass('d-none');
	$(nomeExibir).addClass('d-none');
	
	$(input).focus();
})

$('#tabelaContatos > tbody').on('click', 'tr', function(event) {
    const $td = $(event.target).closest('td');
    const $tr = $(this);
    const colIndex = $td.index();
    const totalCols = $tr.children('td').length;
    if (colIndex === totalCols - 1 || colIndex === totalCols - 2) {
        return;
    }

    let id = $(this).data('id');

    $('#dataProximaInteracao').text('Carregando...');
    fetch('buscarInfoContato', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'id_contato=' + encodeURIComponent(id)
    })
    .then(res => res.json())
    .then(res => {
        if (res.Success && res.contato) {
            let contato = res.contato;
            console.log(res.contato);
            $('#contatoId').text(contato.idContatos);
            $('#contatoNomeInput').val(contato.nome || contato.numero);
            $('#contatoNumeroInput').val(contato.numero);
            $('#contatoEmail').text(contato.email || 'Não informado');
            $('#contatoDataCadastroInput').val(
                contato.dataCadastro && contato.dataCadastro.date
                    ? moment(contato.dataCadastro.date).format('DD/MM/YYYY')
                    : ''
            );

            let dataProxima = contato.dataProximaInteracao;
            let dataFormatada = 'Não informado';
            if (dataProxima) {
                if (typeof dataProxima === 'object' && dataProxima.date) {
                    dataProxima = dataProxima.date;
                }
                dataFormatada = dataProxima ? moment(dataProxima).format('DD/MM/YYYY HH:mm') : 'Não informado';
            }
            $('#dataProximaInteracao').text(dataFormatada);

            let funisComEstagios = contato.funisComEstagios || [];
            let funilHistorico = contato.funil || [];

            let selectFunilHtml = '';
            if (funisComEstagios.length > 0) {
                selectFunilHtml = `
                    <div id="blocoSelectFunilContato">
                        <div class="form-group mb-2">
                            <label class="fw-bold text-purple">Funil:</label>
                            <select id="selectFunilContato" class="form-control form-control-sm selectpicker">
                                ${funisComEstagios.map(f => `<option value="${f.id}">${f.nome}</option>`).join('')}
                            </select>
                        </div>
                        <div id="estagiosDoFunil"></div>
                    </div>
                `;
            } else {
                selectFunilHtml = `
                    <div id="blocoSelectFunilContato">
                        <div class="form-group mb-2">
                            <label class="fw-bold text-purple">Funil:</label>
                            <div class="text-muted">Nenhum funil atribuído.</div>
                        </div>
                    </div>
                `;
            }
            $('#blocoSelectFunilContato').remove();
            $('#funilHistorico').before(selectFunilHtml);

            if ($('#selectFunilContato').length > 0) {
                $('#selectFunilContato').selectpicker();
            }

            function renderEstagiosDoFunil(idFunilSelecionado) {
                let funilObj = funisComEstagios.find(f => f.id == idFunilSelecionado);
                let estagios = funilObj ? funilObj.estagios : [];
                let estagioAtualId = '';
                let historico = funilHistorico.filter(f =>
                    (f.idFunilClientes?.idFunilClientes || f.idFunilClientes?.id || f.idFunilClientes) == idFunilSelecionado
                );
                if (historico.length > 0) {
                    let ultimo = historico[historico.length - 1];
                    estagioAtualId = ultimo.idFunilEstagios?.idFunilEstagios || ultimo.idFunilEstagios?.id || ultimo.idFunilEstagios || '';
                }
                let idxAtual = estagios.findIndex(e => e.id == estagioAtualId);

                let html = '';
                if (estagios.length > 0) {
                    html += '<div class="form-group mb-2"><label class="fw-bold text-purple">Estágios:</label><ul class="steps d-flex gap-1 m-0 flex-wrap">';
                    estagios.forEach((e, idx) => {
                        let isAtingido = idx <= idxAtual && idxAtual !== -1;
                        let activeClass = idx === idxAtual ? 'active' : (isAtingido ? 'done' : 'undone');
                        let firstClass = idx === 0 ? 'first' : '';
                        let lastClass = idx === estagios.length - 1 ? 'last' : '';
                        let colorStyle = isAtingido
                            ? `style="background:${e.cor}; color: #fff; --active-color:${e.cor};"`
                            : `style="background:#eee; color: #333; --active-color:${e.cor};"`;
                        html += `<li class="${activeClass} ${firstClass} ${lastClass}" data-color="${e.cor}" data-estagio="${e.nome}">
                            <a href="#" ${colorStyle}>${e.nome}</a>
                        </li>`;
                    });
                    html += '</ul></div>';
                }
                $('#estagiosDoFunil').html(html);
            }

            if (funisComEstagios.length > 0) {
                renderEstagiosDoFunil(funisComEstagios[0].id);
                $('#selectFunilContato').on('change', function() {
                    renderEstagiosDoFunil($(this).val());
                });
            }

            let infoAdicionalHtml = '';
            let infoAdicional = contato.infoAdicional;
            if (Array.isArray(infoAdicional) && infoAdicional.length > 0) {
                infoAdicional.forEach(info => {
                    infoAdicionalHtml += `
                        <div class="form-group mb-2">
                            <label class="fw-bold text-purple">${info.nome}:</label>
                            <input type="text" class="form-control form-control-sm bg-manager-gray border-0" value="${info.valor || 'Não informado'}" readonly>
                        </div>
                    `;
                });
            }
            else if (infoAdicional && typeof infoAdicional === 'object' && Object.keys(infoAdicional).length > 0) {
                Object.keys(infoAdicional).forEach(key => {
                    infoAdicionalHtml += `
                        <div class="form-group mb-2">
                            <label class="fw-bold text-purple">${key}:</label>
                            <input type="text" class="form-control form-control-sm bg-manager-gray border-0" value="${infoAdicional[key] || 'Não informado'}" readonly>
                        </div>
                    `;
                });
            } else {
                infoAdicionalHtml = '<div class="text-muted">Nenhuma informação adicional.</div>';
            }
            $('#infoAdicionalContato').html(infoAdicionalHtml);

            $('#modalInformacoesContato').modal('show');
        } else {
            $('#dataProximaInteracao').text('Não informado');
            $('#modalInformacoesContato').modal('show');
        }
    })
    .catch(() => {
        $('#dataProximaInteracao').text('Não informado');
        $('#modalInformacoesContato').modal('show');
    });
});

$('#tabelaContatos > tbody').on('click', '.nomeExibirCancel', function(){
	let nomeExibirCancel = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirConfirmar = $(this).parent().find('.nomeExibirConfirmar');
	let nomeExibir = $(this).parent().find('.nomeExibir');

	$(input).addClass('d-none');
	$(nomeExibirConfirmar).addClass('d-none');
	$(nomeExibirCancel).addClass('d-none');
	$(text).removeClass('d-none');
	$(nomeExibir).removeClass('d-none');
})

$('#tabelaContatos > tbody').on('click', '.nomeExibirConfirmar', function(){
	let nomeExibirConfirmar = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirCancel = $(this).parent().find('.nomeExibirCancel');
	let nomeExibir = $(this).parent().find('.nomeExibir');
	
	/*if($(input).val() == ''){
		Swal.fire({
			title: 'Atenção',
			text: 'Nome contato não pode ser vazio',
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		return;
	}*/
	
	Swal.fire({title : 'Alterando nome...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('alterarNomeContato', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id='+ id + '&nomeContato=' + $(input).val()
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$(text).text(($(input).val() == '' ? 'Não informado' : $(input).val()));
			$(input).addClass('d-none');
			$(nomeExibirConfirmar).addClass('d-none');
			$(nomeExibirCancel).addClass('d-none');
			$(text).removeClass('d-none');
			$(nomeExibir).removeClass('d-none');
			
			
			Swal.close();
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.excluirContato', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Contato ?</span>',
	  html: '<span class="fw-bold">Deseja excluir o contato: <strong class="text-purple">' + nome + '</strong> ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo contato...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirContatos', {
				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){
					getContatos();
					Swal.fire({
						title: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.excluirConversas', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Conversas ?</span>',
	  html: '<span class="fw-bold">Antes de excluir verifique se o contato não possui algum chamado em aberto.</span><br><br><b><i class="fa-solid fa-triangle-exclamation text-purple me-1"></i>ATENÇÃO</b>: Após a exclusão não será possível recuperar os dados.',
	  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 conversas...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirConversas', {
				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(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.adicionarGrupo', function(){
    let id = $(this).data('id');
    let nome = $(this).data('nome');
    
    Swal.fire({
      title: '<span class="text-purple">Selecione um grupo</span>',
      html: `<div class="container mt-2 mb-2">
                <h6 class="mb-1">Adicionar <strong class="text-purple">${nome}</strong> ao grupo: </h6>
                <select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">
                    {% for g in grupos %}
                        {% if g.getStatus() == "ATIVO" %}
                            <option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>`,
      showCloseButton: true,
      showCancelButton: true,
      focusConfirm: false,
      confirmButtonText: 'Adicionar',
      cancelButtonText: 'Cancelar',
      scrollbarPadding: false,
      allowOutsideClick: false,
      confirmButtonColor: '#60b86c',
      scrollbarPadding: false,
      willOpen: () => {
      },
      didOpen: () => {
            $('.swal2-close').blur();
            $('#novoGrupoIncluir').selectpicker();
            $('#novoGrupoIncluir').on('show.bs.select', function () {
                $('.swal2-actions').css('z-index', '0');
            });
            $('#novoGrupoIncluir').on('hidden.bs.select', function () {
                $('.swal2-actions').css('z-index', '');
            });
      },
      preConfirm: (value) => {
        let novoGrupoIncluir = $('#novoGrupoIncluir').val();
        
        switch(true){
            case novoGrupoIncluir == '':
                Swal.showValidationMessage('Selecione um Grupo')
                break;
        }
      }
      
    }).then((result) => {
        if(result.isConfirmed){
            let novoGrupoIncluir = $('#novoGrupoIncluir').val();
            
            Swal.fire({title : 'Incluindo contato ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
            Swal.showLoading();
            
            fetch('adicionarContatoAoGrupo', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: 'id_contatos=' + id + '&id_grupos=' + novoGrupoIncluir
            })
            .then(function(res){ return res.json(); })
            .then(function(res){
                if(res.Success){
                    Swal.fire({
                        title: 'Contato adicionado',
                        text: res.Success,
                        scrollbarPadding: false,
                        icon: 'success',
                        confirmButtonColor: 'var(--bs-info)',
                        scrollbarPadding: false
                    }).then(() =>{
                        //location.reload();
                    })
                }else{
                    Swal.fire({
                        title: 'Erro',
                        text: res.Erro,
                        scrollbarPadding: false,
                        icon: 'error',
                        confirmButtonColor: 'var(--bs-info)',
                        scrollbarPadding: false
                    }).then(() =>{
                        //location.reload();
                    })
                }
            })
        }
    })
})


$('#incluiSelecionadosGrupo').on('click', function(){
	let ids = [];
	$.each($('.check_contato:checked').parent().find('label') , function(index, val){
		ids.push($(val).text());
	})
	let nome = $(this).data('nome');
	
	Swal.fire({
		title: '<span class="text-purple">Selecione um grupo</span>',
		html: `<div class="container mt-2 mb-2">
            	<h6 class="mb-1 fw-bold">Adicionar selecionados ao grupo: </h6>
            	<select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">
            	    {% for g in grupos %}
            	        {% if g.getStatus() == "ATIVO" %}
            	            <option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>
            	        {% endif %}
            	    {% endfor %}
            	</select>
        	</div>`,
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('.swal2-close').blur();
			$('#novoGrupoIncluir').selectpicker();
			$('#novoGrupoIncluir').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
			$('#novoGrupoIncluir').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoGrupoIncluir = $('#novoGrupoIncluir').val();
		
		switch(true){
			case novoGrupoIncluir == '':
				Swal.showValidationMessage('Selecione um Grupo')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoIncluir = $('#novoGrupoIncluir').val();
			
			Swal.fire({title : 'Incluindo contatos ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('adicionarSelecionadosAoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id_contatos=' + JSON.stringify(ids) + '&id_grupos=' + novoGrupoIncluir
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						//title: 'Contato adicionado',
						html: '<span class="text-purple fw-bold">'+res.Success+'</span>',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: '#60b86c',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
						$('.check_contato').prop('checked',false);
						showAcaoSelecionar();
						getContatos();
					})
				}else{
					Swal.fire({
						title: 'Erro',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: '#60b86c',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#removeSelecionadosGrupo').on('click', function(){
	let ids = [];
	$.each($('.check_contato:checked').parent().find('label') , function(index, val){
		ids.push($(val).text());
	})
	let nome = $(this).data('nome');
	
	Swal.fire({
		title: '<span class="text-purple">Selecione um grupo</span>',
		html: `<div class="container mt-2 mb-2">
		            <h6 class="mb-1 fw-bold">Remover selecionados do grupo: </h6>
		            <select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">
		                {% for g in grupos %}
		                    {% if g.getStatus() == "ATIVO" %}
		                        <option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>
		                    {% endif %}
		                {% endfor %}
		            </select>
		        </div>`,
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('.swal2-close').blur();
			$('#novoGrupoIncluir').selectpicker();
			$('#novoGrupoIncluir').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
			$('#novoGrupoIncluir').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoGrupoIncluir = $('#novoGrupoIncluir').val();
		
		switch(true){
			case novoGrupoIncluir == '':
				Swal.showValidationMessage('Selecione um Grupo')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoIncluir = $('#novoGrupoIncluir').val();
			
			Swal.fire({title : 'Incluindo contatos ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('removerSelecionadosDoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id_contatos=' + JSON.stringify(ids) + '&id_grupos=' + novoGrupoIncluir
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						//title: 'Contato adicionado',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
						$('.check_contato').prop('checked',false);
						showAcaoSelecionar();
						getContatos();
					})
				}else{
					Swal.fire({
						title: 'Erro',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})




$('#novoContato').on('click', function(){
	Swal.fire({
	  title: '<span class="fw-bold text-purple">Novo Contato</span>',
	  html:
		'<h5 class="text-purple">Informe o número para adicionar um novo contato</h5>' +
		'<div class="container row">' +
			'<div class="col-3 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-earth-americas me-1"></i>País</h6>' +
				'<input id="novoContatoPais" placeholder="País" class="form-control border-0 bg-manager-gray" value="55" autocomplete="off"/>' +
			'</div>' +
			
			'<div class="col-9 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-mobile-screen-button me-1"></i>Número</h6>' +
				'<input id="novoContatoNumero" placeholder="DDD + Telefone" class="form-control border-0 bg-manager-gray" />' +
			'</div>' +
			'<div class="col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Nome</h6>' +
				'<input id="novoContatoNome" placeholder="Nome" class="form-control border-0 bg-manager-gray" />' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
		  $('.swal2-close').blur();
		  $('#novoContatoNumero').focus();
		  $('#novoContatoNumero').mask('000000000000000000000');
		  
		  $('#novoContatoPais').mask('0000');
		  
	  },
	  preConfirm: (value) => {
		let novoContatoPais = $('#novoContatoPais').val();
		let novoContatoNumero = $('#novoContatoNumero').val();
		let novoContatoNome = $('#novoContatoNome').val();
		
		switch(true){
			case novoContatoPais == '':
				Swal.showValidationMessage('País não pode ser vazio')
				break;
			case !/^\d+$/.test(novoContatoPais):
				Swal.showValidationMessage('País deve conter apenas números')
				break;
			case novoContatoNumero == '':
				Swal.showValidationMessage('Número não pode ser vazio')
				break;
			case novoContatoNome == '':
				Swal.showValidationMessage('Nome não pode ser vazio')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoContatoPais = $('#novoContatoPais').val();
			let novoContatoNumero = $('#novoContatoNumero').val();
			let novoContatoNome = $('#novoContatoNome').val();
		
			
			Swal.fire({title : 'Adicionando contato...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatNovoContato', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'pais=' + novoContatoPais + '&numero=' + novoContatoNumero + '&nome=' + novoContatoNome +
						'&sourceNumber=' + numeros[0]
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					getContatos();
				}else{
					Swal.fire({
						title: 'Contato não adicionado',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


$('#infoAdicional').on('click', function(){
	$('#novaInfoNome').val('');
	$('#novaInfoId').val('');
	$('#novaInfoTipo').selectpicker('val', 'text');
	$('#novaInfoObrigatorio').selectpicker('val', 'nao');
	$('#showInfoAdicionais').empty();
	
	$(contatoInfoAdicional).each(function(index,info){
		var tipo = info.tipo;
		switch(tipo){
			case 'text':
				tipo = 'Texto';
				break;
			case 'number':
				tipo = 'Número';
				break;
			case 'date':
				tipo = 'Data';
				break;
		}
		var obrigatorio = (info.obrigatorio ? info.obrigatorio : 'nao');
		
		$('#showInfoAdicionais').append(
			'<div class="text-start border-0 bg-manager-gray p-2 box b-1 mb-3" data-nome="'+ info.nome +'" data-id="'+ info.id +'" data-tipo="'+ info.tipo +'">' +
				'<div class="d-flex">' +
					'<h5 class="m-0 text-purple w-p100">'+ info.nome +' ('+ tipo +')</h5>' +
					
					'<div class="ms-auto w-100 fw-bold text-purple text-end">' +
						(obrigatorio == 'sim' ? '*Obrigatório' : '')+
					'</div>' +
					'<div class="ms-auto w-50 text-end">' +
						'<a href="javascript:void(0)" class="deletaInfo p-1" data-nome="'+ info.nome +'" data-id="'+ info.id +'" data-tipo="'+ info.tipo +'">' +
							'<i class="fas fa-close text-danger"></i>' +
						'</a>' +
					'</div>' +
				'</div>' +
			'</div>'
		);
	})
	
	
	$('#modalInfoAdicional').modal('toggle');
	$('#novaInfoTipo').parent().find('button').css('max-height', '33.5px');
	$('#novaInfoObrigatorio').parent().find('button').css('max-height', '33.5px');
})

nomeInfoMask = {
	translation: {
	  'Z': {
		pattern: /[a-z A-Z0-9_-]/, optional: true
	  }
	}
};
$('#novaInfoNome').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', nomeInfoMask);

replaceSpaceByUnderscore = {
  onKeyPress: function(val, e, field, options) {
	  $('#novaInfoId').val(val.replace(' ', '_').toLowerCase());
	},
	translation: {
	  'Z': {
		pattern: /[a-z0-9_ ]/, optional: true
	  }
	}
};
$('#novaInfoId').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
$('#novaInfoNome').on('keyup', function(){
	$('#novaInfoId').val($('#novaInfoNome').val().toLowerCase().replaceAll(' ', '_'))
})

var contatoInfoAdicional = {%if camposAdicionais is not empty %}JSON.parse('{{camposAdicionais|raw}}'){%else%}[]{%endif%};
$('#addInfoAdicional').on('click', function(){
	
	var err = '';
	switch(true){
		case $('#novaInfoNome').val() == '':
			err = 'Nome informação adicional não pode ser vazio.'
			break;
		case $('#novaInfoTipo').val() == '':
			err = 'Tipo informação adicional não pode ser vazio.'
			break;
	}
	
	var nomeInfo = $('#novaInfoNome').val();
	var idInfo = $('#novaInfoId').val();
	var tipoInfo = $('#novaInfoTipo').val();
	var nomeTipoInfo = $('#novaInfoTipo > option:selected').text();
	var obrigatorio = $('#novaInfoObrigatorio').val();
	
	if(err == ''){
		$(contatoInfoAdicional).each(function(index,info){
			if(idInfo == info.id){
				err = 'Já existe uma informação com nome: \''+ nomeInfo +'\'.<br>Escolha um outro nome.';
			}
		})
	}
	
	if(err != ''){
		Swal.fire({
			title: 'Atenção',
			html: err,
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	
	
	fetch('adicionarInfoAdicional', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'idInfo=' + idInfo + '&nomeInfo=' + nomeInfo + '&tipoInfo=' + tipoInfo + '&obrigatorio=' + obrigatorio
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#novaInfoNome').val('');
			$('#novaInfoId').val('');
			$('#novaInfoTipo').selectpicker('val', 'text');
			$('#novaInfoObrigatorio').selectpicker('val', 'nao');
			
			contatoInfoAdicional.push({id:idInfo, nome:nomeInfo, tipo:tipoInfo, obrigatorio:obrigatorio});

			$('#showInfoAdicionais').append(
				'<div class="text-start p-2 box b-1 mb-1" data-nome="'+ nomeInfo +'" data-id="'+ idInfo +'" data-tipo="'+ tipoInfo +'">' +
					'<div class="d-flex">' +
						'<h5 class="m-0 w-p100">'+ nomeInfo +' ('+ nomeTipoInfo +')</h5>' +
						'<div class="ms-auto w-100 text-end">' +
							(obrigatorio == 'sim' ? '*Obrigatório' : '')+
						'</div>' +
						'<div class="ms-auto w-50 text-end">' +
							'<a href="javascript:void(0)" class="deletaInfo p-1" data-nome="'+ nomeInfo +'" data-id="'+ idInfo +'" data-tipo="'+ tipoInfo +'">' +
								'<i class="fas fa-close text-danger"></i>' +
							'</a>' +
						'</div>' +
					'</div>' +
				'</div>'
			);
		}else{
			Swal.fire({
				title: 'Não foi possível incluir nova informação',
				text: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
})

$('#showInfoAdicionais').on('click', '.deletaInfo', function(){
	var nomeInfo = $(this).data('nome');
	var idInfo = $(this).data('id');
	var tipoInfo = $(this).data('tipo');
	
	Swal.fire({
	  title: 'Excluir Informação ?',
	  html: 'Deseja a informação: ' + nomeInfo + ' ? <br><br><i class="fa fa-triangle-exclamation text-danger"></i> Após excluir não será possível recuperar essa informação dos contatos!',
	  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 informação...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirInfoAdicional', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idInfo=' + idInfo + '&nomeInfo=' + nomeInfo + '&tipoInfo=' + tipoInfo
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					contatoInfoAdicional.splice(res.index, 1);
					$('#showInfoAdicionais .box')[res.index].remove();
					
					Swal.fire({
						title: 'Informação excluída',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.editarInformacoes', async function(){
	var id = $(this).data('id');
	
	if(contatoInfoAdicional.length == 0){
		Swal.fire({
			title: 'Atenção',
			text: 'Antes de editar as informações adicionais, é necessário incluí-las no botão \'Informações Adicionais\' no topo da página.',
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	Swal.fire({title : 'Buscando informação...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var infoContato = null;
	await fetch('infoAdicionalContato', {
		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){
			infoContato = res.info;
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
			return;
		}
	})
	
	
	var campos = '';
	$(contatoInfoAdicional).each(function(index,info){
		campos +=  '<div class="'+ (info.tipo == 'text' ? 'col-12' : 'col-lg-6 col-12') +' text-start mt-2">' +
						'<h6 class="mb-1 fw-bold text-purple">'+ info.nome +'</h6>' +
						'<input type="'+ (info.tipo == 'number' ? 'text' : info.tipo) +'" id="'+ info.id +'" placeholder="'+ info.nome +'" class="form-control border-0 bg-manager-gray" maxlength="100"/>' +
					'</div>';
	})
	
	let width = '100vw';
	if($(window).width() > 990){width = ($(window).width()/2.5);}
	
	Swal.fire({
		width: width,
		title: '<span class="text-purple">Editar informações adicionais</span>',
		html:
			'<div id="editarInfoContato" class="container row" style="max-height:75vh; overflow-y: auto;">' +
				campos +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Salvar',
		cancelButtonText: 'Cancelar',
		allowOutsideClick: false,
		confirmButtonColor: '#60b86c',
		scrollbarPadding: false,
		willOpen: () => {
			$(contatoInfoAdicional).each(function(index,info){
				if(info.tipo == 'number'){
					$('#' + info.id).mask('99999999999999999999999999999999999999999999999999');
				}
			})
			
			if(infoContato != null){
				$(contatoInfoAdicional).each(function(index,info){
					if(infoContato[info.id]){
						$('#' + info.id).val(infoContato[info.id]);
					}
				})
			}
		},
		didOpen: () => {
			$('.swal2-close').blur();
			$('#novoContatoNumero').focus();
			$('#novoContatoNumero').mask('000000000000000000000');
		  
		},
		preConfirm: (value) => {
		
		}
	  
	}).then((result) => {
		if(result.isConfirmed){
			var infoSalvar = {};
			$($('#editarInfoContato input')).each(function(index,info){
				var key = $(info).attr('id');
				var value = $(info).val();
				infoSalvar[key] = value;
			})
			
			fetch('salvarInfoAdicionalContato', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&info=' + JSON.stringify(infoSalvar)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Informações alteradas',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})


$('#tabelaContatos > tbody').on('click', '.addFunilContato', function(){
	$(this).blur();
	var idContato = $(this).data('id');
	
	Swal.fire({
		title: '<span class="text-purple">Incluir contato no Funil</span>',
		html:
			'<div class="container row">' +
				'<div class="col-12">' +
					'<h6 class="text-start text-purple fw-bold">Funil</h6>' +
					'<select id="incluirFunilCliente" class="selectpicker bg-light-gray col-12" title="Selecionar funil" data-container="body">' +
					{% for fc in funilClientes %}
						'<option class="m-0" value="{{fc.getIdFunilClientes}}" data-cor="{{e.getCor}}" style="letter-spacing: 1px !important;">' +
							'{{fc.getNome}}' +
						'</option>' +
					{%endfor%}
					'</select>' +
				'<div class="col-12 mt-3">' +
					'<h6 class="text-start fw-bold text-purple">Estágio</h6>' +
					'<select id="incluirFunilEstagio" class="selectpicker bg-light-gray col-12" title="Selecionar estágio" data-container="body">' +
					{% for fc in funilClientes %}
						{% for e in fc.getFunilEstagios %}
							'<option class="m-0" value="{{e.getIdFunilEstagios}}" data-funil="{{fc.getIdFunilClientes}}" data-cor="{{e.getCor}}" style="letter-spacing: 1px !important;"'+ 
									' data-content=\'<span class="p-0"> {{e.getNome}}</span>\'> {{e.getNome}} ' +
							'</option>' +
						{%endfor%}
					{%endfor%}
					'</select>' +
				'</div>' +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Incluir',
		cancelButtonText: 'Cancelar',
		allowOutsideClick: false,
		confirmButtonColor: '#60b86c',
		scrollbarPadding: false,
		willOpen: () => {
			
		},
		didOpen: () => {
			$('.swal2-close').blur();
			
			$('#incluirFunilCliente').selectpicker();
			$('#incluirFunilCliente').on('change', function(){
				$('#incluirFunilEstagio option').hide()
				$('#incluirFunilEstagio option[data-funil="'+ $('#incluirFunilCliente').selectpicker('val') +'"]').show()
				$('#incluirFunilEstagio').selectpicker('destroy')
				$('#incluirFunilEstagio').selectpicker()
			})
			
			$('#incluirFunilEstagio option').hide()
			$('#incluirFunilEstagio').selectpicker();
			$('#incluirFunilEstagio').on('change', function(){
				$('#incluirFunilEstagio').parent().find('button').css('color', 'white');
				$('#incluirFunilEstagio').parent().find('button').removeClass('btn-light');
				
				$('#incluirFunilEstagio').parent().find('button').css('background', $('#incluirFunilEstagio option:selected').data('cor'));
				$('#incluirFunilEstagio').parent().find('button').blur();
			})
		},
		preConfirm: (value) => {
			let idFunil = $('#incluirFunilCliente').val();
			let idEstagio = $('#incluirFunilEstagio').val();
		
			switch(true){
				case idFunil == '':
					Swal.showValidationMessage('Selecione um funil')
					break;
				case idEstagio == '':
					Swal.showValidationMessage('Selecione um estágio')
					break;
			}
		}
	}).then((result) => {
		if(result.isConfirmed){
			let idFunil = $('#incluirFunilCliente').val();
			let idEstagio = $('#incluirFunilEstagio').val();
			
			Swal.fire({title : 'Adicionando contato ao funil...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('adicionarContatoEstagio', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idContato=' + idContato + '&idFunilClientes=' + idFunil + '&idEstagio=' + idEstagio
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Contato adicionado ao funil',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})
</script>
{% endblock %}