<?php if (Session::get("tipo_usuario") != "2"){ show_403();} ?>
<?php import_file(DIR_TEMPLATES."header.php", ["title" => "Fale Conosco", "active_page" => "fale-conosco"]); ?>
<?php import_file(DIR_MODELS."Model.class.php"); ?>
<?php $model = new Model(); ?>

<?php if (!isset($_GET["topico"]) or empty($_GET["topico"])): ?>
	<h4 class="mb-3">
		<i class="fa-regular fa-user-headset"></i> Fale Conosco
	</h4>

	<div class="content-box">
		<ul class="list-group">
			<?php

				$result = $model->query("SELECT * FROM topico WHERE status_topico = 'S' ORDER BY titulo_topico ASC");

				$n = 1;

				foreach ($result->fetchAll() as $dados):

			?>
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<a href="<?php echo "?topico=".$dados->slug_topico; ?>"><?php echo ($n++)." - ".$dados->titulo_topico; ?></a>
					<?php 

						$msg = $model->query("
							SELECT 
								COUNT(*) AS total 
							FROM mensagem 
							INNER JOIN caixa_mensagem ON (mensagem.id_caixa_mensagem = caixa_mensagem.id_caixa_mensagem) 
							WHERE 
								id_topico = :id_topico AND 
								mensagem.id_usuario <> :id_usuario AND 
								caixa_mensagem.id_usuario = :id_usuario AND 
								visualizado_mensagem = 'N' AND 
								status_mensagem = 'S'
						", [
							":id_topico" => $dados->id_topico, 
							":id_usuario" => Session::get("id_usuario")
						])->fetch();

					?>
					<span class="badge badge-primary badge-pill">
						<?php echo $msg->total; ?>	
					</span>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
<?php else: ?>
	<style>
		.ck{
			border-radius: 0px !important;
			border-left: 0px !important;
			border-right: 0px !important;
			border-bottom: 0px !important;
		}

		.box-message-right{
			max-width: 600px;
			position: relative;
			left: calc(100% - 640px);
			margin: 20px;
			padding: 15px;
			text-align: left;
		}

		.box-message-left{
			max-width: 600px;
			position: relative;
			margin: 20px;
			padding: 15px;
			text-align: left;
		}

		.caixa-texto > :last-child{
			margin-bottom: 0px !important;
		}

		@media screen and (max-width: 765px) {
			.box-message-right{
				max-width: 80%;
				position: relative;
				left: calc(20% - 40px);
				margin: 20px;
			}

			.box-message-left{
				max-width: 80%;
				position: relative;
				margin: 20px;
			}
		}

		.popover{
			z-index: 100 !important;
		}
	</style>

	<?php 

		$slug_topico = filter_input(INPUT_GET, "topico", FILTER_SANITIZE_STRING);

		$result = $model->query("SELECT * FROM topico WHERE slug_topico = :slug AND status_topico = 'S'", [":slug" => $slug_topico]);

		$topico = $result->fetch();

	?>
	<div class="content-box mb-3">
		<div class="border" style="border-color: #c4c4c4 !important;">
			<nav class="navbar navbar-light bg-light border-bottom" style="border-color: #c4c4c4 !important;">
				<ul class="navbar-nav">
					<li class="nav-item">
						<?php echo "<strong>Tópico:</strong> ".$topico->titulo_topico; ?>
					</li>
				</ul>
			</nav>
			<div id="caixa-mensagem" class="overflow-auto" style="width: 100%; height: 450px;">

				<?php 

					$mensagens = $model->query("
						SELECT 
							mensagem, 
							mensagem.id_usuario, 
							datahora_mensagem, 
							anexo_mensagem, 
							nome_usuario, 
							mensagem.id_caixa_mensagem 
						FROM mensagem 
						INNER JOIN caixa_mensagem ON (caixa_mensagem.id_caixa_mensagem = mensagem.id_caixa_mensagem) 
						INNER JOIN usuario ON (usuario.id_usuario = mensagem.id_usuario) 
						WHERE 
							caixa_mensagem.id_usuario = :id_usuario AND 
							caixa_mensagem.id_topico = :id_topico AND 
							status_mensagem = 'S' 
						ORDER BY datahora_mensagem ASC
					", [
						":id_usuario" => Session::get("id_usuario"), 
						":id_topico" => $topico->id_topico
					]);

					foreach ($mensagens->fetchAll() as $dados):
						$id_caixa_mensagem = $dados->id_caixa_mensagem;

				?>

					<?php if ($dados->id_usuario == Session::get("id_usuario")): ?>
						<div class="popover bs-popover-left box-message-right">
							<div class="arrow"></div>
							<div class="d-flex justify-content-between mb-2">
								<small>Você</small>
								<small><?php echo date("d/m/Y H:i", strtotime($dados->datahora_mensagem)); ?></small>
							</div>
							<div class="caixa-texto">
								<?php echo $dados->mensagem; ?>

								<?php if (!empty($dados->anexo_mensagem)): ?>
									<a href="<?php echo show_link($dados->anexo_mensagem); ?>" download>
										<i class="fa-regular fa-paperclip"></i> Anexo
									</a>
								<?php endif; ?>
							</div>
						</div>
					<?php else: ?>
						<div class="popover bs-popover-right box-message-left">
							<div class="arrow"></div>
							<div class="d-flex justify-content-between mb-2">
								<small><?php echo first_name($dados->nome_usuario); ?></small>
								<small><?php echo date("d/m/Y H:i", strtotime($dados->datahora_mensagem)); ?></small>
							</div>
							<div class="caixa-texto">
								<?php echo $dados->mensagem; ?>

								<?php if (!empty($dados->anexo_mensagem)): ?>
									<a href="<?php echo show_link($dados->anexo_mensagem); ?>" download>
										<i class="fa-regular fa-paperclip"></i> Anexo
									</a>
								<?php endif; ?>
							</div>
						</div>
					<?php endif; ?>
				<?php endforeach; ?>
				<?php 

					$model->query("
						UPDATE 
							mensagem 
						SET 
							visualizado_mensagem = 'S' 
						WHERE 
							id_caixa_mensagem = :id_caixa AND 
							id_usuario <> :id_usuario
					", [
						":id_caixa" => $id_caixa_mensagem, 
						":id_usuario" => Session::get("id_usuario")
					]);

				?>
			</div>
			<form id="form-mensagem" enctype="multipart/form-data">
				<textarea name="mensagem" id="mensagem"></textarea>
				<input type="file" name="arquivo" id="arquivo" accept="image/*, .pdf" style="display: none;">
				<input type="hidden" name="topico" id="topico" value="<?php echo encrypt_encode($topico->id_topico); ?>">
			</form>
		</div>

		<div class="justify-content-center mt-3">
			<button type="button" class="btn btn-primary" onclick="$('#form-mensagem').submit();">
				<i class="fa-regular fa-paper-plane"></i> Enviar
			</button>

			<button type="button" id="btn-anexar" class="btn btn-secondary">
				<i class="fa-regular fa-paperclip"></i> Anexar
			</button>
			
			<small id="info-anexo">Nem um arquivo anexado</small>
		</div>
	</div>

	<a href="<?php echo show_link("/fale-conosco/"); ?>" class="btn btn-secondary">
		<i class="fa-regular fa-arrow-left"></i> Voltar
	</a>

	<script>
		$(function(){
			$("#caixa-mensagem").animate({scrollTop: 9999999}, 0);
		});

		window.editorMensagem = CKEDITOR.replace("mensagem");

		$("#arquivo").change(function(){
			if ($(this).val() != "") {
				$("#info-anexo").text("Um arquivo anexado a mensagem");
			}
			else{
				$("#info-anexo").text("Nem um arquivo anexado");
			}
		});

		$("#btn-anexar").click(function(){
			$('#arquivo').click();
		});

		function firstName(string){
			var aux = string.split(" ");

			return aux[0];
		}

		setInterval(function(){
			$.ajax({
				type: "POST",
				data: "topico="+$("#topico").val(),
				url: "<?php echo show_link("/obter-mensagens/"); ?>",
				async: true
			}).then(function(response){
				var result = $.parseJSON(response);

				if (result.status == true) {
					$.each(result.dados, function(i, data){
						var anexos = (data.anexo_mensagem != null) ? '<a href="<?php echo URL_BASE; ?>'+data.anexo_mensagem+'" download><i class="fa-regular fa-paperclip"></i> Anexo</a>' : '';

						var html =  '<div class="popover bs-popover-right box-message-left">'+
									'<div class="arrow"></div>'+
									'<div class="d-flex justify-content-between mb-2">'+
										'<small>'+firstName(data.nome_usuario)+'</small>'+
										'<small>'+data.datahora_mensagem+'</small>'+
									'</div>'+
									'<div class="caixa-texto">'+
										data.mensagem+
										anexos+
									'</div>'+
								'</div>';

						$("#caixa-mensagem").append(html);
					});
					$("#caixa-mensagem").animate({scrollTop: 9999999}, 2000, "linear");
				}
			}, function(error){
				console.log("Error: "+error);
			});
		}, 3000);

		$("#form-mensagem").submit(function(event){
			event.preventDefault();
			var form = new FormData($("#form-mensagem")[0]);
			form.append("mensagem", window.editorMensagem.getData());

			if (window.editorMensagem.getData() != "" || $("#arquivo").val() != "") {
				$.ajax({
					type: "POST",
					data: form,
					url: "<?php echo show_link("/enviar-mensagem/"); ?>",
					async: true,
					processData: false,
					contentType: false
				}).then(function(response){
					var result = $.parseJSON(response);

					if (result.status == true) {
						window.editorMensagem.setData("");
						$("#arquivo").val("");
						$("#info-anexo").text("Nem um arquivo anexado");

						var dados = result.dados;

						var anexos = (dados.anexo_mensagem != null) ? '<a href="'+dados.anexo_mensagem+'" download><i class="fa-regular fa-paperclip"></i> Anexo</a>' : '';

						var html =  '<div class="popover bs-popover-left box-message-right">'+
									'<div class="arrow"></div>'+
									'<div class="d-flex justify-content-between mb-2">'+
										'<small>Você</small>'+
										'<small>'+dados.datahora_mensagem+'</small>'+
									'</div>'+
									'<div class="caixa-texto">'+
										dados.mensagem+
										anexos+
									'</div>'+
								'</div>';

						$("#caixa-mensagem").append(html);
						$("#caixa-mensagem").animate({scrollTop: 9999999}, 2000, "linear");
					}
					else{
						$.toast({
							heading: "Aviso",
							text: "Ocorreu um erro ao enviar sua mensagem, tente mais tarde!",
							icon: "error",
							loader: true
						});
					}
				}, function(error){
					console.log("Erro: "+error);
				});
			}
			else{
				$.toast({
					heading: "Aviso",
					text: "É necessário escrever ou anexar um arquivo para enviar a mensagem!",
					icon: "warning",
					loader: true
				});
			}
		});
	</script>
<?php endif; ?>

<?php import_file(DIR_TEMPLATES."footer.php", ["loading" => false]); ?>


	
