<style>
    body {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
    }
</style>

<?php
if (!isset($_SESSION['id_user']) || $_SESSION['id_user'] == '') {
    echo '<script> window.location = "' . $url . '/home"; </script>';
}

$id = $pagina[1];
$query = mysqli_query($connect, "SELECT * FROM Asistentes WHERE id = " . $_SESSION['id_user']);
$data = mysqli_fetch_array($query);

$query = mysqli_query($connect, "SELECT * FROM juego_virtual WHERE id = " . $id);
$juego = mysqli_fetch_array($query);

$moderador = true;
if ($data['rol'] == "JUGADOR") {
    $moderador = false;
}

if ($moderador) {
    if (isset($_POST["btn_form"])) {
        $revisar = getimagesize($_FILES["image"]["tmp_name"]);
        if ($revisar !== false) {
            $image = $_FILES['image']['tmp_name'];
            $imgContenido = addslashes(file_get_contents($image));

            $cont = 0;
            $query = mysqli_query($connect, "SELECT * FROM preguntas_google WHERE juego_virtual_id = " . $juego['id']);
            $aux = 0;
            while ($pregunta = mysqli_fetch_array($query)) {
                $aux += 1;
                if ($pregunta['respuesta'] == $_POST['check' . $aux]) {
                    $cont += 1;
                }
            }

            $sh1 = $_POST['check1'];
            $sh2 = $_POST['check2'];
            $sh3 = $_POST['check3'];
            $sh4 = $_POST['check4'];
            $e = $data['equipo'];

            $i = "insert into respuesta_map(res_1, res_2, res_3, res_4, puntaje, equipo, juego_id, imagen) values('$sh1','$sh2','$sh3','$sh4',$cont,'$e',$id, '$imgContenido');";
            //print_r($i);


            $insertar = mysqli_query($connect, $i);
            echo "<script>console.log($insertar);</script>";
            if ($insertar) {

                echo "<script>alert('Archivo Subido Correctamente.')</script>";
            } else {
                print_r($insertar);
                echo "<script>alert('Ha fallado la subida, reintente nuevamente.')</script>";
            }
            // Sie el usuario no selecciona ninguna imagen
        } else {
            echo "<script>alert('Por favor seleccione imagen a subir.')</script>";
        }
    }
}



?>
<div class="container-fluid">


    <div class="row">
        <div class="col-<?php echo $moderador ? 8 : 4; ?>" style="height: 500px;overflow: scroll; overflow-x: hidden;">
            <h2><?php echo $juego['nombre']; ?> </h2>
            <span> <?php echo $juego['descripcion']; ?> </span><br>
            <b>visita a:</b> <?php echo $juego['lugar']; ?>
            <h3>Preguntas</h3>
            <form action="" method="post" enctype="multipart/form-data">
                <div class="row">
                    <?php
                    $query = mysqli_query($connect, "SELECT * FROM preguntas_google WHERE juego_virtual_id = " . $juego['id']);
                    $aux = 0;
                    while ($pregunta = mysqli_fetch_array($query)) {
                        $aux += 1;
                        echo '<div class="col-6 border border-dark">';



                        echo "<b>" . $pregunta['pregunta'] . "</b><br>";
                        if ($moderador) {
                    ?>
                            <div class="form-check">
                                <div class="row">
                                    <div class="col-8">
                                        <label class="form-check-label"><?php echo $pregunta['op_1']; ?></label>
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" class="form-check-input" name="check<?php echo $aux; ?>" value="1" style="font-size: 18px;" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-check">
                                <div class="row">
                                    <div class="col-8">
                                        <label class="form-check-label"><?php echo $pregunta['op_2']; ?></label>
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" class="form-check-input" name="check<?php echo $aux; ?>" value="2" style="font-size: 18px;" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-check">
                                <div class="row">
                                    <div class="col-8">
                                        <label class="form-check-label"><?php echo $pregunta['op_3']; ?></label>
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" class="form-check-input" name="check<?php echo $aux; ?>" value="3" style="font-size: 18px;" required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-check">
                                <div class="row">
                                    <div class="col-8">
                                        <label class="form-check-label"><?php echo $pregunta['op_4']; ?></label>
                                    </div>
                                    <div class="col-4">
                                        <input type="radio" class="form-check-input" name="check<?php echo $aux; ?>" value="4" style="font-size: 18px;" required>
                                    </div>
                                </div>
                            </div>


                    <?php
                        }
                        echo "</div>";
                    }

                    ?>
                </div>
                <?php
                if ($moderador) {
                ?>
                    <div class="form-group border border-dark">
                        <label for="Subirimagen">Subir imagen</label>
                        <input type="file" name="image" class="form-control-file" id="Subirimagen" required>
                    </div>

                    <button name="btn_form" type="submit" class="btn btn-primary btn_ingreso" style=" font-size: 22px; background-color: #fdd300; border: 0; border-radius: 0px; padding: 10px 50px; border-radius: 60px; margin-bottom: 25px; margin-top: 15px">
                        Enviar <i class="fa fa-arrow-right" aria-hidden="true" style=" margin-left: 8px;"></i>
                    </button>
                <?php
                }
                ?>
            </form>
        </div>
        <?php
        if (!$moderador) {
        ?>

            <div class="col-4">
                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
                </iframe> -->

                <?php include("mapa.php"); ?>
            </div>
        <?php
        }
        ?>
        <div class="col-4" style="height: 500px; overflow: scroll; overflow-x: hidden;">
            <?php include("chat.php"); ?>
        </div>

        <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowautoplay allowfullscreen></iframe>
        </div>



    </div>
    <div style="text-align: right; margin-top: 5px;">
        <!-- <a href="<?php echo $url . '/juego/' . ($id + 1); ?>"> -->
        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn btn-warning " style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #d91e49; font-size: 20px; background-color: #ffea00; border: 0; font-family: S-Core-CoreSansBold;">
            Siguiente Juego
        </button>
        <!-- </a> -->
    </div>
</div>

<script>
    function avanzar(id) {
        <?php
        $query = mysqli_query($connect, "SELECT * FROM respuesta_map WHERE equipo = " . $data['equipo'] . " and juego_id = " . $id);
        if ($query->num_rows > 0) {
        ?>
            window.location = "/juego/" + (id + 1);
        <?php
        } else {
        ?>
            alert('No se ha terminado de responder esta seccion');
        <?php
        }
        ?>
    }
</script>