{% 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-bottom: none!important;
}

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

.fixed .content-wrapper {
    margin-top: 0px;
}
</style>

<div class="content-wrapper bg-light text-start">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="fw-bold text-dark">
				<h4 class="page-title d-flex align-items-center pe-0">
					<div class="col fw-bold text-purple">Tags</div>
					<div class="">
						<a id="novaTag" class="btn btn-green-manager fw-bold btn-sm pull-right"><i class="fa-solid fa-plus me-1"></i>Nova Tag</a>
					</div>
				</h4>
				<i class="fa-solid fa-user-tag me-1 text-purple"></i>Crie tags para classificar conversas
			</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 fw-bold text-purple"><i class="fa-solid fa-tag me-1"></i>Nome:</label>
										<input type="text" class="form-control pull-right border-0 bg-light-gray" placeholder="Nome tag" id="filtroNomeTag">
									</div>
								</div>
								

								<div class="col-lg-2 mb-sm-15 mb-xs-15">
									<h6 for="">&nbsp;</h6>
									<button id="buscarTags" type="button" class="waves-effect waves-circle btn btn-circle btn-green-manager2 btn-sm mb-5"><i class="fa fa-search"></i></button>
								</div>
							</div>
						</div>
						<div class="box-body no-padding">
							<div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaTags" class="table table-hover" >
									<thead class="bg-purple sticky-top" style="z-index: 99;">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-tag me-1"></i>Nome</th>
											<th><i class="fa-solid fa-fill-drip me-1"></i>Cor</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
								</table>
							</div>
						</div>
					</div>

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


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

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

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

$('#buscarTags').on('click', function(){
	getTags();
})

function getTags(){
	Swal.fire({title : 'Buscando grupos', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	let nomeTag = $('#filtroNomeTag').val()
	
	fetch('buscarTags', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nomeTag=' + nomeTag
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#tabelaTags > tbody').empty();
			let tags = res.tags;
			
			$(tags).each(function(index,t){
				$('#tabelaTags > tbody').append(
					'<tr class="text-muted">' +
						'<td>'+ t.idTags +'</td>' +
						'<td>'+ t.nome +'</td>' +
						'<td> <i class="fa fa-square" style="color: '+t.cor+'; font-size: 18px;"></i> '+ t.cor +'</td>' +
						'<td>' +
							'<div class="dropdown pull-right">' +
								'<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="'+ t.idTags +'" data-nome="'+ t.nome +'" data-cor="'+ t.cor +'" class="dropdown-item editarTag text-purple" href="javascript:void(0)"><i class="mdi mdi-pencil"></i> Editar tag</a>' +
									'<a data-id="'+ t.idTags +'" data-nome="'+ t.nome +'" data-cor="'+ t.cor +'" class="dropdown-item excluirTag text-purple" href="javascript:void(0)"><i class="mdi mdi-close"></i> Excluir tag</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();
			})
		}
	})
}

$('#tabelaTags > tbody').on('click', '.editarTag', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	let nome = ($(this).data('nome') ? $(this).data('nome') : '');
	let cor = ($(this).data('cor') ? $(this).data('cor') : '');

	criarEditarTag(id, nome, cor);
})
$('#novaTag').on('click', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	let nome = ($(this).data('nome') ? $(this).data('nome') : '');
	let cor = ($(this).data('cor') ? $(this).data('cor') : '');

	criarEditarTag(id, nome, cor);
})

function criarEditarTag(id, nome, cor){
	Swal.fire({
	  title: '<span class="text-purple">'+(id == '' ? 'Nova Tag' : 'Editar Tag')+'</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-tag me-1"></i>Nome Tag</h6>' +
				'<input id="novaTagNome" placeholder="Nome" class="form-control bg-light-gray border-0" value="'+nome+'"/>' +
			'</div>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-fill-drip me-1"></i>Cor</h6>' +
				'<input id="novaTagCor" type="text" class="form-control bg-light-gray border-0" value="'+ cor +'"/>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
			
	  },
	  didOpen: () => {
		  $('#novaTagNome').focus();
		  $("#novaTagCor").spectrum({
				preferredFormat: "hex",
				allowEmpty: true,
				showPalette: true,
				cancelText: 'Cancelar',
				chooseText: 'Selecionar',
			});
	  },
	  preConfirm: (value) => {
		let novaTagNome = $('#novaTagNome').val();
		let novaTagCor = $('#novaTagCor').val();
		
		switch(true){
			case novaTagNome == '':
				Swal.showValidationMessage('Nome Tag não pode ser vazio');
				break;
			case novaTagCor == '':
				Swal.showValidationMessage('Cor não pode ser vazia');
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novaTagNome = $('#novaTagNome').val();
			let novaTagCor = $('#novaTagCor').val();
			
			Swal.fire({title : 'Salvando Tag...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('novaTag', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&nome=' + novaTagNome + '&cor=' + novaTagCor
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: (id == '' ? 'Nova Tag' : 'Editar Tag'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getTags();
					})
				}else{
					Swal.fire({
						title: (id == '' ? 'Tag não cadastrada' : 'Erro ao editar Tag'),
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
}

$('#tabelaTags > tbody').on('click', '.excluirTag', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Tag ?</span>',
	  html: 'Deseja excluir a Tag: <strong class="text-purple">' + nome + '</strong> ?',
	  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 Tag...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirTag', {
				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(() =>{
						getTags();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

</script>
{% endblock %}