<html>
<head>
    <meta charset="UTF-8">
    <title>Agiliza</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" href="assets/jquery-ui/jquery-ui.css">
    <link rel="stylesheet" href="assets/jquery-ui/jquery-ui.theme.css">
	
	<script language="javascript" src="assets/js/jquery-1.11.2.min.js"></script>
    <script language="javascript" src="assets/bootstrap/js/bootstrap.js"></script>
    <script language="javascript" src="assets/jquery-ui/jquery-ui.js"></script>
    <script language="javascript" src="assets/js/html5shiv.js"></script>

	<link href="assets/videojs/videojs.css" rel="stylesheet">
    <script src="assets/videojs/ie8.js"></script>


    <style>
        .navbar-fixed-top{
            border-color: <?= TELEVISAO_COR_TOPO ?> !important;
            box-shadow: none;
        }

        .navbar-fixed-bottom{
            border-color: <?= TELEVISAO_COR_RODAPE ?> !important;
            box-shadow: none;
        }

        #exibicao img {
            position: absolute;
            z-index: 1
        }

        #exibicao img.active {
            z-index: 3
        }
		
		th {
		  padding-bottom: 5px;
		}
		
		td {
			padding-top: 2px;
			padding-bottom: 2px;
		}
		
		.corpoSenhas tr:nth-child(odd) {
		  background:#0941b5;
		}
		
    </style>

</head>
<body style="color: <?= TELEVISAO_COR_FONTE ?>; background-color: <?= TELEVISAO_COR_FUNDO_BODY ?>">

<nav class="navbar navbar-default navbar-fixed-top" style="height:175px;color: <?= TELEVISAO_COR_FONTE_TOPO ?>; background-color: <?= TELEVISAO_COR_TOPO ?>; background-image: none ">
    <div class="row">
        <div class="col-lg-3" align="left">
            <img  alt="Clínica" src="assets/img/logo-clinica.png" height="175px">
        </div>
        <div class="col-lg-9" style="font-size: 60px; padding-top: 25px; line-height: 60px" align="center">
			<p>Ao ser chamado, tenha em mãos:<br>
			Pedido médico, RG e cartão do convênio</p>
            <!--?= TELEVISAO_NOME_CLINICA ?-->
        </div>
    </div>
</nav>

<div class="row" id="exibicao" style="margin-top: 175px; width:100%; margin-left: 0px; margin-right: 0px;">
	<div class="col-lg-7"  >
		<?php
		switch (TELEVISAO_TIPO_EXIBICAO) {
			case 'I':
				foreach ($imagens as $index => $imagem) {
					echo "<img " . ($index == 0 ? "class='active'" : "") . " src=\"assets/gktv/imagens/$imagem\" style=\" width:100%; margin-left:-15px \"/> \n";
				}
				break;
			case 'V':
				echo "<video id=\"exibicaoVideo\" width=\"100%\" height=\"98%\" autoplay  style=\"background:transparent\">";
				foreach ($videos as $index => $video) {
					echo "<source " . ($index == 0 ? "class='active'" : "") . " src=\"assets/gktv/videos/$video\" type=\"video/mp4\">";
				}
				echo "</video>";
				break;
			case 'S':
				echo "<video  id='exibicaoStream' autoplay preload=\"auto\"  class=\"video-js vjs-default-skin\"  data-setup='{\"controls\": false, \"autoplay\": true, \"preload\": \"auto\" }'>
						<source src=\"". TELEVISAO_STREAM_LINK ."\" type='rtmp/sdp'>
						</video>";
				break;
		}
		?>
	</div>
	
	<div class="col-lg-5" id="exibicao" style="background-color: #073187; height: 83%">
		<h1 style="height: 55px; color: white; font-size: 50px; text-decoration: underline; text-align: center;">ÚLTIMAS CHAMADAS</h1>
		
		<table class="tabelaSenhas" id="tabelaSenhas">
			<thead class="cabecalhoSenhas" id="cabecalhoSenhas" style="color: white; font-size: 40px;">
				<tr>
					<th class="col-lg-4">Senha</th>
					<th class="col-lg-1">Guichê</th>
				</tr>
			</thead>
			
			<tbody class="corpoSenhas" id="corpoSenhas" style="color: white; font-size: 30px;">
				<tr>
					<td class="col-lg-4" id="senha1"><?php echo $_SESSION["senha1"] ?></td>
					<td class="col-lg-1" id="guiche1"><?php echo utf8_encode($_SESSION["guiche1"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha2"><?php echo $_SESSION["senha2"]; ?></td>
					<td class="col-lg-1" id="guiche2"><?php echo utf8_encode($_SESSION["guiche2"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha3"><?php echo $_SESSION["senha3"]; ?></td>
					<td class="col-lg-1" id="guiche3"><?php echo utf8_encode($_SESSION["guiche3"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha4"><?php echo $_SESSION["senha4"] ?></td>
					<td class="col-lg-1" id="guiche4"><?php echo utf8_encode($_SESSION["guiche4"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha5"><?php echo $_SESSION["senha5"]; ?></td>
					<td class="col-lg-1" id="guiche5"><?php echo utf8_encode($_SESSION["guiche5"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha6"><?php echo $_SESSION["senha6"]; ?></td>
					<td class="col-lg-1" id="guiche6"><?php echo utf8_encode($_SESSION["guiche6"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha7"><?php echo $_SESSION["senha7"]; ?></td>
					<td class="col-lg-1" id="guiche7"><?php echo utf8_encode($_SESSION["guiche7"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha8"><?php echo $_SESSION["senha8"]; ?></td>
					<td class="col-lg-1" id="guiche8"><?php echo utf8_encode($_SESSION["guiche8"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha9"><?php echo $_SESSION["senha9"]; ?></td>
					<td class="col-lg-1" id="guiche9"><?php echo utf8_encode($_SESSION["guiche9"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha10"><?php echo $_SESSION["senha10"]; ?></td>
					<td class="col-lg-1" id="guiche10"><?php echo utf8_encode($_SESSION["guiche10"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha11"><?php echo $_SESSION["senha11"]; ?></td>
					<td class="col-lg-1" id="guiche11"><?php echo utf8_encode($_SESSION["guiche11"]); ?></td>
				</tr>
				<tr>
					<td class="col-lg-4" id="senha12"><?php echo $_SESSION["senha12"]; ?></td>
					<td class="col-lg-1" id="guiche12"><?php echo utf8_encode($_SESSION["guiche12"]); ?></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


<div class="row hidden" id="divShowPaciente" style="margin-top: 10%; width:100%; height: 35%; text-transform: uppercase;">
    <div class="row">
        <div class="col-lg-12" style="font-size: 80px" id="nomePaciente" align="center"></div>
    </div>
</div>

<nav class="navbar navbar-default hidden" id="divShowGuiche" style="color: <?= TELEVISAO_COR_FONTE ?>;background-color: <?= TELEVISAO_COR_FUNDO_BODY ?>;background-image: none ">
    <div class="col-lg-12" style="font-size: 100px; font-weight: bold;" id="guiche" align="center"></div>
</nav>

<nav class="navbar navbar-default navbar-fixed-bottom" style="color: <?= TELEVISAO_COR_FONTE_RODAPE ?>;background-color: <?= TELEVISAO_COR_RODAPE ?>;background-image: none ">
    <div id="relogio-rodape" class="container" align="center" style="font-size: 70px"></div>
</nav>

<script language="javascript" src="assets/js/televisao/televisao.js"></script>
<script src="assets/videojs/videojs.js"></script>
</body>
</html>