<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/main.css" />
	<link rel="icon" href="favicon.ico" />
	<title>Listas de espera</title>
</head>

<body>
	<div class="container-fluid h-100">
		<div class="row h-100">
			<div class="col-md-5 div-senhas text-center">
				<div class="row">
					<div class="col ">
						<h1 class="display-4">Senha</h1>

						<div class="row mt-5">
							<div class="col">
								<div class="senha">
									A <span id="senha-A">000</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="senha">
									B <span id="senha-B">000</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="senha">
									C <span id="senha-C">000</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="senha">
									D <span id="senha-D">000</span>
								</div>
							</div>
						</div>
					</div>

					<div class="col ">
						<h1 class="display-4">Balc√£o</h1>

						<div class="row mt-5">
							<div class="col">
								<div class="balcao">
									<span id="balcao-A">---</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="balcao">
									<span id="balcao-B">---</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="balcao">
									<span id="balcao-C">---</span>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col">
								<div class="balcao">
									<span id="balcao-D">---</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class=" col-md-7 div-slideshow">
				<div class="row p-3 text-right">
					<div id="data-atual" class="col relogio"></div>
					<div id="tempo-atual" class="col relogio"></div>
				</div>
				<div class="row">
					<div class="col-md-12" id="slideshow">
						<div class="noticia">
							<div class="noticia-img-div">
								<img class="noticia-img img-fluid">
							</div>
							<h1 class="noticia-title"></h1>
							<p class="noticia-desc lead"></p>
						</div>
						<div class="noticia">
							<div class="noticia-img-div">
								<img class="noticia-img img-fluid">
							</div>
							<h1 class="noticia-title"></h1>
							<p class="noticia-desc lead"></p>
						</div>
						<div class="noticia">
							<div class="noticia-img-div">
								<img class="noticia-img img-fluid">
							</div>
							<h1 class="noticia-title"></h1>
							<p class="noticia-desc lead"></p>
						</div>
						<div class="noticia">
							<div class="noticia-img-div">
								<img class="noticia-img img-fluid">
							</div>
							<h1 class="noticia-title"></h1>
							<p class="noticia-desc lead"></p>
						</div>
						<div class="noticia">
							<div class="noticia-img-div">
								<img class="noticia-img img-fluid">
							</div>
							<h1 class="noticia-title"></h1>
							<p class="noticia-desc lead"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<audio src="/audio/audio.wav" type="audio/wav" id="audio-senha">
	</audio>
</body>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
	const socket = io.connect();

	getTime();
	getDate();

	socket.on("painel-senhas", (fila, senha, balcao) => {
		populatePainel(fila, senha, balcao);
	});

	$(document).ready(function () {
		$("#slideshow > div:gt(0)").hide();

		setInterval(function () {
			$("#slideshow > div:first")
				.fadeOut(500)
				.next()
				.fadeIn(500)
				.end()
				.appendTo("#slideshow");
		}, 8000);
	});

	$.ajax({
		url: "/ajax/noticias",
		type: "POST",
		success: function (res) {
			$('.noticia').each(function (i) {
				$(this).find('.noticia-title').text(res.title[i]);
				$(this).find('.noticia-desc').text(res.desc[i]);
				$(this).find('.noticia-img').attr('src', res.img[i]);
			});
		}
	})
</script>

</html>