<!-- ********************************************************************* -->
<!-- **************** Obrigatório para o painel funcionar **************** -->
<!-- ********************************************************************* -->
<?php
    require_once('../../pp1.php');
?>
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/w3.css">
    <title>Painel de Chamada</title>
</head>
<body>
<div class="tela">
    <div class="w3-light-gray" style="margin-top: 0px; padding: 0px 00px;" id="testimony">
        <h1 class="w3-container" style="margin-top: 0px !important;"><?php echo $linha_cab;?></h1>
         <div class="Customer-feedback" style="display: flex;justify-content: space-evenly;flex-wrap: wrap;">
            <div class="chamando">
                <div class="customer-feedback-header">
                    <div class="customer-profile">
                        <img src="https://spaces.w3schools.com/images/zHHtOf92CC4.jpg" alt="Photo by Roman Holoschchuk | Unsplash"/>
                    </div>
                    <div>
                        <p class="name">Chamando</p>
                    </div>
                </div>
                <div id="chamando"></div>
            </div>

            <div class="qrcode">
                <div class="customer-feedback-header">
                    <div>
                         <p class="qrcode">QR Code</p>
                    </div>
                </div>
                <div>
                    <p class="w3-small">
                        <!-- ********************************************************************* -->
                        <!-- **************** Obrigatório para o painel funcionar **************** -->
                        <!-- ********************************************************************* -->
                        <?php
                            if ($qrcode == 1){
                                echo $img_qrcode;
                            }
                        ?>
                        <!-- ********************************************************************* -->
                        <!-- ********************************************************************* -->
                        <!-- ********************************************************************* -->
                    </p>
                </div>
            </div>

            <div class="prop">
                <div class="customer-feedback-header">
                    <div class="customer-profile">
                        <img src="https://spaces.w3schools.com/images/zHHtOf92CC4.jpg" alt="Photo by Roman Holoschchuk | Unsplash"/>
                    </div>
                    <div>
                        <p class="name">Imagens</p>
                    </div>
                </div>
                <div>
                    <p class="w3-small">Imagens</p>
                </div>
            </div>

            <div class="chamadas">
                <div class="customer-feedback-header">
                    <div class="customer-profile">
                        <img src="https://spaces.w3schools.com/images/zHHtOf92CC4.jpg" alt="Photo by Roman Holoschchuk | Unsplash"/>
                    </div>
                    <div>
                        <p class="name">Historico de Chamadas</p>
                    </div>
                </div>
                <div id="chamados"></div>
             </div>

             <div class="rodape">
                <div class="customer-feedback-header">
                    <p><?php echo $linha_rod;?></p>
                </div>
                <button onclick="AtivarDesativarFS();">Ativar</button>
            </div>
        </div>
    </div>
</div>

<div class="rodape">
    <div class="customer-feedback-header">
        <p><?php echo $linha_rod;?></p>
    </div>
    <button onclick="AtivarDesativarFS();">Ativar</button>
</div>

<!-- ********************************************************************* -->
<!-- **************** Obrigatório para o painel funcionar **************** -->
<!-- ********************************************************************* -->
<script src="assets/js/jquery.min.js"></script>
<?php
    require_once('../../pp2.php');
?>
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->

<script>
//Criando uma variável global para nos dizer em qual estado a tela atual se encontra.
isFullScreen = false;
var elem = document.documentElement;
function AtivarDesativarFS() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullScreen = false;
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
      isFullScreen = false;
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
      isFullScreen = false;
    }
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
        isFullScreen = true;
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
        isFullScreen = true;
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
        isFullScreen = true;
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
        isFullScreen = true;
    }
}
</script>

<script>
    function myFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
        }
    }
</script>
</body>
</html>