<!-- ********************************************************************* -->
<!-- **************** Obrigatório para o painel funcionar **************** -->
<!-- ********************************************************************* -->
<?php
    require_once('../../pp1.php');
?>
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->
<!-- ********************************************************************* -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel de chamada do profissional</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f4f6f8;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        .main-content {
            flex-grow: 1;
        }
        .container {
            background-color: #ffffff;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            margin: 0 auto;
            max-width: 95%;
        }
        .bg-primary {
            background-color: #007bff !important;
        }
        .large-text {
            font-size: 2.5em;
        }
        .qr-code {
            width: 200px;
            height: 200px;
        }
        .footer {
            margin-top: auto;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .rounded-borders, .square-borders {
            border-radius: 15px;
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px;
        }
        .piscar-texto {
            animation: piscar 1s infinite;
            color: green;
        }
        @keyframes piscar {
            0% {opacity: 1;}
            50% {opacity: 0;}
            100% {opacity: 1;}
        }
        .container > .row {
            margin: 0;
        }
        .container > .row > .col-md-3, .container > .row > .col-md-8 {
            padding: 0;
        }
        .no-wrap {
            white-space: nowrap;
        }
        .rounded-borders, .square-borders {
            width: 100%;
            padding: 1%;
        }
        .footer {
            margin-top: auto; /* Empurrar o rodapé para baixo automaticamente */
        }
        .ultimos-chamados {
            font-size: 1.2em; /* Aumentar o tamanho do texto */
        }

    </style>
</head>
<body>
    <header class="bg-primary text-white text-center p-4">
        <h4><?php echo $linha_cab;?></h4>
    </header>

    <div class="container mt-4 flex-container">
        <div id="chamando" class="rounded-borders" style="flex: 3;">
        </div>

        <div class="square-borders" style="flex: 1;">
            <section>
                <table class="table">
                    <thead>
                        <tr>
                            <td><h4 class="mb-200000">Acompanhe pelo Celular</h4></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>

                                <!-- ********************************************************************* -->
                                <!-- **************** Obrigatório para o painel funcionar **************** -->
                                <!-- ********************************************************************* -->
                                <?php
                                    if ($qrcode == 1){
                                        echo $img_qrcode;
                                    }
                                ?>
                                <!-- ********************************************************************* -->
                                <!-- ********************************************************************* -->
                                <!-- ********************************************************************* -->

                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
    </div>
    <div class="container mt-3">
    <div class="row">
        <div class="col-md-3 square-borders-0 galeria-imagem">
            <section>
                <h2 class="mb-2">Galeria de imagem</h2>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <!-- Indicadores serão inseridos aqui pelo JavaScript -->
                    </ol>
                    <div class="carousel-inner">
                        <!-- Imagens serão inseridas aqui pelo JavaScript -->
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Próximo</span>
                    </a>
                </div>
            </section>
        </div>

        <div id="chamados" class="col-md-8 rounded-borders" style="max-height: 600px; overflow-y: auto;">
        </div>
    </div>
</div>
<br><br>
<footer class="bg-primary text-white text-center p-4">
        <p>&copy; 2023 - Todos os direitos reservados</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
    var images = ['1.png', '2.png', '3.png']; // Adicione o caminho correto das imagens aqui
    var carouselInner = document.querySelector('.carousel-inner');
    var carouselIndicators = document.querySelector('.carousel-indicators');

    for (var i = 0; i < images.length; i++) {
        var imageSrc = 'assets/img/' + images[i]; // Caminho da imagem
        var image = document.createElement('img');
        image.src = imageSrc;
        image.className = 'd-block w-100'; // Removido a classe qr-code

        var carouselItem = document.createElement('div');
        carouselItem.className = 'carousel-item';
        if (i === 0) {
            carouselItem.className += ' active'; // Defina o primeiro item como ativo
        }
        carouselItem.appendChild(image);
        carouselInner.appendChild(carouselItem);

        // Adicionar indicadores
        var indicator = document.createElement('li');
        indicator.setAttribute('data-target', '#carouselExampleIndicators');
        indicator.setAttribute('data-slide-to', i);
        if (i === 0) {
            indicator.className = 'active';
        }
        carouselIndicators.appendChild(indicator);
    }
</script>
</body>
</html>