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

    .text-j {
        text-align: justify !important;
    }

    .color-p {
        color: #b2003eff !important;
    }

    .color-s {
        color: #adacb2ff !important;
    }

    .pie {
        font-size: 15px;
    }

    .size-22 {
        font-size: 22px;
    }

    .size-12 {
        font-size: 12px;
    }

    .size-16 {
        font-size: 16px;
    }

    .btn-send {
        border-radius: 25px;
        margin-bottom: 15px;
        padding: 5px 30px;
        color: #fafafa;
        font-size: 15px;
        background-color: #b2003eff;
        border: 0;
        font-family: S-Core-CoreSansBold;
    }

    .btn-send:hover {
        color: #fdd300;
    }

    .header1 {
        background: #b2003eff;
        text-align: center;
        color: #ffffff;
    }
</style>

<?php
function generateRandomString($length = 10)
{
    return substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-"), 0, $length);
}
if (!isset($_SESSION['id_user']) || $_SESSION['id_user'] == '') {
    echo '<script> window.location = "' . $url . '/home"; </script>';
}

$id = $pagina[1];


$cuenta = mysqli_query($connect, "SELECT count(*) as cuenta FROM juego_virtual;");
$cuenta_data = mysqli_fetch_array($cuenta);
if (intval($id) > $cuenta_data['cuenta']) {
    echo '
        <script>
            window.location = "/ranking_trip";
        </script>
        ';
}


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

$count = "SELECT 
CASE
  WHEN (select count(*) from juego_virtual) = (select count(*) from respuesta_map where equipo='" . $data['equipo'] . "') THEN 
      true
  ELSE 
      false
 END as cuenta
";

$query_count = mysqli_query($connect, $count);
$count_res = mysqli_fetch_array($query_count);

if ($count_res['cuenta'] == 1) {
    echo '
        <script>
            window.location = "/ranking_trip";
        </script>
        ';
}


$query_horainicio = mysqli_query($connect, "select hora_fin, juego_id from respuesta_map where equipo='" . $data['equipo'] . "' and hora_fin = (select max(hora_fin) from respuesta_map where equipo= '" . $data['equipo'] . "');");
$hora_inicio = mysqli_fetch_array($query_horainicio);

$inicio = null;
if ($hora_inicio['hora'] == null) {
    $inicio = date('H:i:s', time());
} else {
    $inicio = $hora_inicio['hora'];
}




$query_suma = mysqli_query($connect, "select SEC_TO_TIME(sum(TIME_TO_SEC(subtime(hora_fin,  hora_inicia)))) as sum   from respuesta_map WHERE equipo= '" . $data['equipo'] . "';");
$tiempo = mysqli_fetch_array($query_suma);
$ahora = '00:00:00';
if ($tiempo['sum'] != null) {
    $ahora = $tiempo['sum'];
}





if (intval(explode(':', $ahora)[0]) >= 1 || intval(explode(':', $ahora)[1]) >= 45) {
    echo '
			<script>
				window.location = "/lobby";
			</script>
			';
} else {
    if ($hora_inicio['juego_id'] != null) {

        if (intval($hora_inicio['juego_id']) >= intval($id)) {
            echo '
			<script>
				window.location = "/juego/' . ($hora_inicio['juego_id'] + 1) . '";
			</script>
			';
        }
    }
}




$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"])) {




        if ($_POST['termina'] == '') {
            $dir = $_SERVER["DOCUMENT_ROOT"] . "/img_juego/";
            $dir1 = "/img_juego/";
            $nombreArchivo = $_FILES['image']['name'];

            $imagen = $_FILES['image']['tmp_name'];
            $name = generateRandomString(30) . '.' . explode('.', $nombreArchivo)[1];
            $ubi = $dir . $name;
            $url = $dir1 . $name;
            if (!move_uploaded_file($imagen, $ubi)) {
                echo "error en la subida de la foto";
                exit;
            }
            /* $image = $_FILES['image']['tmp_name'];
            $imgContenido = addslashes(file_get_contents($image)); */
        } else {
            $url = null;
        }
        $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]) {
                if ($aux == 1) {
                    $cont += 5;
                }
                $cont += 5;
            }
        }

        $sh1 = $_POST['check1'];
        $sh2 = $_POST['check2'];
        $sh3 = $_POST['check3'];
        $sh4 = $_POST['check4'];
        $ini = $_POST['inicio'];
        $fin = $_POST['fin'];

        $e = $data['equipo'];

        $i = "insert into respuesta_map(res_1, res_2, res_3, res_4, puntaje, equipo, juego_id, imagen, hora_inicia, hora_fin) values('$sh1','$sh2','$sh3','$sh4',$cont,'$e',$id, '$url', '$ini', '$fin');";



        $insertar = mysqli_query($connect, $i);
        if ($insertar) {
            if ($_POST['termina'] == '') {
                echo "<script>alert('Se subieron los datos correctamente. Continuemos con el viaje.')</script>";
                echo '
                    <script>
                        window.location = "/juego/' . ($id + 1) . '";
                    </script>
                    ';
            } else {
                echo "<script>alert('El viaje ha terminado');</script>";
                echo '
                    <script>
                        window.location = "/ranking_trip";
                    </script>
                    ';
            }
        } else {
            if ($_POST['termina'] == '') {
                echo "<script>alert('No se guardaron los datos. Lena los campos e intentalo de nuevo');</script>";
            } else {
                echo "<script>alert('El viaje ha terminado');</script>";
                echo '
                    <script>
                        window.location = "/ranking_trip";
                    </script>
                    ';
            }
        }
        // Sie el usuario no selecciona ninguna imagen
    }
}



?>
<div class="modal fade" id="modal_instrucciones" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Instrucciones de la dinámica:</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" align="left">
                <ol>
                    <li> Perteneces a un equipo cuyo objetivo es completar la visita de 15 destinos por tres países diferentes. </li>
                    <li> En el viaje que vas a realizar con tu equipo, visitarán una serie de lugares y responderán a preguntas relacionadas con los mismos. </li>
                    <li> En el equipo existen dos tipos de roles: Los jugadores y el moderador. </li>
                    <li> Van a trabajar como individuos que hacen parte de un equipo, recuerden que deben aportar de manera individual para lograr los objetivos del</li>
                    <li> Cuando des clic en el botón ir al viaje, después de conocer el equipo con el cuál vivirás la experiencia, llegaras a un módulo en donde encontraras lo siguiente. </li>
                    <li> Si se te ha asignado el rol de jugador encontraras en tu pantalla:
                        <ul>
                            <li> Una serie de pistas relacionadas con los 15 sitios que deberán encontrar y tres preguntas de cultura general relacionadas con cada uno de los sitios.</li>
                            <li> Un chat que les permitirá comunicarse como equipo, no se podrán comunicar por ningún otro medio de comunicación diferente.</li>
                            <li> Un contador de tiempo que les ira mostrando el tiempo que llevan realizando el juego.</li>
                            <li> Una pantalla de streaming en donde la presentadora les ira contando los sucesos que van pasando en el juego, así como el avance de los demás equipos.</li>
                            <li> Un mapa de google maps en donde podrán buscar unas coordenadas que se les han colocado a las pistas de cada sitio.</li>
                            <li> Un botón de continuar viaje que solo les permitirá continuar, cuando el moderador complete las respuestas y cargue una imagen relacionada con el sitio que visitaron.</li>

                        </ul>
                    </li>
                    <li> Si se te ha asignado el rol de moderador encontraras en tu pantalla:
                        <ul>
                            <li> Las opciones de respuesta que van a responder frente a las pistas y las preguntas de cultura general de los sitios que van a visitar; para responder solo debes dar clic en la casilla que consideren, es la respuesta correcta.</li>
                            <li> Un chat que les permitirá comunicarse como equipo, no se podrán comunicar por ningún otro medio de comunicación diferente.</li>
                            <li> Un contador de tiempo que les ira mostrando el tiempo que llevan realizando el juego.</li>
                            <li> Una pantalla de streaming en donde la presentadora les ira contando los sucesos que van pasando en el juego, así como el avance de los demás equipos.</li>
                            <li> Un botón de cargar archivo en donde deberán cargar una imagen relacionada con el sitio que visitaron y la cuál debe ser concertada con los miembros del equipo a través del chat.</li>
                            <li> Cuando el moderador haya seleccionado el sitio que visitaron, contestado las tres preguntas y cargado la imagen del sitio; deberá dar clic en el botón enviar y esto le permitirá al equipo continuar el viaje y visitar el siguiente sitio.</li>
                        </ul>
                    </li>
                    <li> Para visitar estos quince (15) destinos; tienen un tiempo máximo de 45 minutos. Si logran visitar todos los destinos antes del tiempo establecido, el sistema ya no le mostrará más destinos y habrá terminado la dinámica. </li>
                    <li> El puntaje de resultados, se dará a la totalidad del equipo; cada sitio que encuentren y visiten de manera correcta les dará 10 puntos y cada pista que respondan correctamente les dará 5 puntos, además se tendrá en cuenta el tiempo total que el equipo se demore en visitar los sitios y responder las preguntas. </li>

                </ol>


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

    <div class="row">
        <div class="col-12" align="right">
            <button type="button" class="btn btn_juegos" style="margin-top: 30px;" data-toggle="modal" data-target="#modal_instrucciones">
                Ver Instrucccines
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-12" align="center">
            <h3>
                VIRTUAL TRIP - PLATAFORMA <?php echo $data['rol']; ?> <br> <span id="tiempo"></span>
            </h3>
        </div>
    </div>

    <div class="row" style="padding-top: 10px;">
        <?php
        $stream = "https://vimeo.com/event/919789/embed";
        if (!$moderador) {
        ?>
            <div class="col-8">
                <iframe width="100%" height="100%" class="streaming_auditorio" src="<?php echo $stream; ?>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

            </div>
            <div class="col-4">
                <div class="header1">
                    Chatea con tu equipo
                </div>
                <div class="col-12" style="height: 350px; overflow: scroll; overflow-x: hidden;">
                    <?php include("chat.php"); ?>
                </div>
            </div>
            <div id="qwerty" class="col-4" style="padding-top: 40px;">
                <h2 class="text-center color-p size-22"><?php echo 'Pista: ' . $juego['id']; ?> </h2>
                <p class="size-18 text-justify"> <?php echo $juego['descripcion']; ?> </p>
                <br>
            </div>



            <div class="col-8" style="padding-left: 40px; padding-top: 40px;">
                <h3 class="color-p text-center size-22">Preguntas</h3><br>
                <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 ">';

                        echo '<b class="text-center size-20">' . ($aux == 1 ? '' : ($aux - 1)) . ' - ' . $pregunta['pregunta'] . "</b><br><br>";

                        echo "</div>";
                    }

                    ?>
                </div>


            </div>
            <div class="col-12 text-center" style="padding-bottom: 25px;">
                <b class="pie color-p">Visita la siguiente latitud y longitud en Google Maps: <?php echo $juego['lugar']; ?></b>
            </div>
            <div class="col-12" style="height: 400px; width: 250px; overflow-x: hidden;">
                <?php include("mapa.php"); ?>
            </div>




        <?php } else {  ?>
            <div class="col-8" style="overflow-x: hidden; ">
                <iframe width="100%" height="100%" class="streaming_auditorio" src="<?php echo $stream; ?>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

            </div>
            <div class="col-4">
                <div class="header1">
                    Chatea con tu equipo
                </div>
                <div class="col-12" style="height: 350px; overflow: scroll; overflow-x: hidden;">
                    <?php include("chat.php"); ?>
                </div>
            </div>

            <div class="col-12" style=" padding-left: 40px; padding-top: 10px;">
                <h3 class="color-p text-center size-22">Preguntas - Pista <?php echo $juego['id']; ?> </h3><br>
                <form id="formulario" action="" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="inicio" value="<?php echo $inicio; ?>">
                    <input type="hidden" id="fin" name="fin" value="">
                    <input type="hidden" id="termina" name="termina" value="">
                    <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-3 ">';

                            $item = "";
                            if ($aux == 1) {
                                $item = "Sitio visitado";
                            } else {
                                $item = "Pregunta " . ($aux - 1);
                            }
                            echo '<b class="text-center size-22"> ' . $item . "</b><br><br>";

                        ?>

                            <div class="form-check">
                                <input class="form-check-input " style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="1" />
                                <label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_1']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="2" />
                                <label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_2']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="3" />
                                <label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_3']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 15px; transform: scale(1.5);" type="radio" name="check<?php echo $aux; ?>" value="4" />
                                <label class="form-check-label" style="font-size: 15px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_4']; ?>
                                </label>
                            </div>
                            <br>

                        <?php

                            echo "</div>";
                        }

                        ?>
                    </div>
                    <div class="form-group">
                        <label class="color-p" for="Subirimagen">Subir imagen (recuerda que deberán cargar una imagen relacionada con el sitio que visitaron)</label>
                        <input id="image" type="file" name="image" accept="image/*" class="form-control-file" id="Subirimagen" required>
                    </div>

                    <button id="btn_form" name="btn_form" type="submit" class="btn btn-send btn-block" style="margin-bottom: 70px; ">
                        Enviar Respuestas <i class="fa fa-arrow-right" aria-hidden="true" style="margin-left: 8px;"></i>
                    </button>

                </form>
            </div>


        <?php } ?>

        <div class="col-12">
            <h2 align="center">Tu Equipo</h2>
            <?php
            $query1 = mysqli_query($connect, "select * from Asistentes where equipo = '" . $data['equipo'] . "';");
            $aux = "";
            $col1 = "<ul>";
            $col2 = "<ul>";
            $col3 = "<ul>";
            $col4 = "<ul>";
            $cont = 0;
            while ($data1 = mysqli_fetch_array($query1)) {
                $cont += 1;
                if ($data1['rol'] == 'JUGADOR') {
                    $aux = "<li>".$data1['nombre'] . " " . $data1["apellidos"] . "</li>";
                } else {
                    $aux .= "<li>".$data1['nombre'] . " " . $data1["apellidos"] . " - Moderador </li>";
                }
                if ($cont == 1) {
                    $col1 .= $aux;
                }
                if ($cont == 2) {
                    $col2 .= $aux;
                }
                if ($cont == 3) {
                    $col3 .= $aux;
                }
                if ($cont == 4) {
                    $col4 .= $aux;
                    $cont = 0;
                }
            }
            $col1 .= "</ul>";
            $col2 .= "</ul>";
            $col3 .= "</ul>";
            $col4 .= "</ul>";

            ?>

            <div class="row" style="margin-bottom: 25px;">
                <div class="col-3">
                    <?php echo $col1; ?>
                </div>
                <div class="col-3">
                    <?php echo $col2; ?>
                </div>
                <div class="col-3">
                    <?php echo $col3; ?>
                </div>
                <div class="col-3">
                    <?php echo $col4; ?>
                </div>

            </div>
        </div>






    </div>
    <?php if (!$moderador) { ?>
        <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-send btn-block" style="margin-top: 20px;">
                Continuar con el viaje
            </button>
            <!-- </a> -->
        </div>
    <?php } ?>
</div>

<script>
    $('#formulario').submit(function() {
        var aho = (new Date()).toLocaleTimeString();
        document.getElementById('fin').value = aho;
        return true; // return false to cancel form action
    })

    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 sección');
        <?php
        }
        ?>
    }

    // Milliseconds for the calculations
    const MILLISECONDS_OF_A_SECOND = 1000;

    var ahora = "<?php echo $ahora; ?>".split(':');
    var inicio = "<?php echo $inicio; ?>".split(':');
    const DATE_TARGET = new Date();
    const DATE_INICIO = new Date();
    const DAY_ACTUAL = new Date();
    DATE_TARGET.setHours(Number(ahora[0]), Number(ahora[1]), Number(ahora[2]));
    DATE_INICIO.setHours(Number(inicio[0]), Number(inicio[1]), Number(inicio[2]));
    const dif = Math.floor((DAY_ACTUAL - DATE_INICIO));
    DATE_TARGET.setMilliseconds(DATE_TARGET.getMilliseconds() + dif);

    const SPAN_SECONDS = document.getElementById("tiempo");

    function updateCountdown() {
        // Calcs
        DATE_TARGET.setMilliseconds(MILLISECONDS_OF_A_SECOND);
        SPAN_SECONDS.textContent = DATE_TARGET.toLocaleTimeString();
        if (DATE_TARGET.getHours() > 0 || DATE_TARGET.getMinutes() >= 45) {
            if (document.getElementsByName('check1').value == undefined) {
                document.getElementsByName('check1').value = '*';
            }
            if (document.getElementsByName('check2').value == undefined) {
                document.getElementsByName('check2').value = '*';
            }
            if (document.getElementsByName('check3').value == undefined) {
                document.getElementsByName('check3').value = '*';
            }
            if (document.getElementsByName('check4').value == undefined) {
                document.getElementsByName('check4').value = '*';
            }

            if (document.getElementsByName('image').value == undefined) {
                document.getElementById('image').type = 'text';
                document.getElementById('image').value = '*';
            }
            document.getElementById('termina').value = "termino";

            document.getElementById('btn_form').click();
            clearInterval(inter);
        }
    }

    var inter = setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);
</script>