<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 {
        float: right;
        font-size: 10px;
    }

    .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;
    }
</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_horainicio = mysqli_query($connect, "SELECT max(hora_fin) as hora, juego_id 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 subtime(hora_fin,  hora_inicia) as sum, hora_fin, hora_inicia   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 (explode(':', $ahora)[1] == '45') {
    echo '
			<script>
				window.location = "/lobby";
			</script>
			';
} else {
    if($hora_inicio['juego_id'] != null) {
        if ($hora_inicio['juego_id'] != $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'] == '') {
            $image = $_FILES['image']['tmp_name'];
            $imgContenido = addslashes(file_get_contents($image));
        } else {
            $imgContenido = 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, '$imgContenido', '$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 a terminado');</script>";
                echo '
                    <script>
                        window.location = "/lobby";
                    </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 a terminado');</script>";
                echo '
                    <script>
                        window.location = "lobby";
                    </script>
                    ';
            }
        }
        // Sie el usuario no selecciona ninguna imagen
    }
}



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

    <span id="tiempo">

    </span>
    <div class="row" style="padding-top: 10px;">

        <?php
        if (!$moderador) {
        ?>
            <div class="col-3" style="height: 250px; overflow: scroll; overflow-x: hidden;">
                <h2 class="text-center color-p size-16"><?php echo 'Pista: ' . $juego['id']; ?> </h2>
                <span class="size-12"> <?php echo $juego['descripcion']; ?> </span>
                <br>
                <b class="pie text-right color-p">Visita la siguiente latitud y longitud en Google Maps: <br> <?php echo $juego['lugar']; ?></b>
            </div>
            <div class="col-6" style="height: 250px; width: 250px; overflow-x: hidden;">
                <!-- <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-<?php echo $moderador ? 6 : 3; ?>" style="height: 250px; overflow: scroll; overflow-x: hidden;">
            <?php include("chat.php"); ?>
        </div>

        <div class="col-6" style="height: 200px; overflow-x: hidden; padding-left: 40px; padding-top: 10px;">
            <h3 class="color-p text-center size-22">Preguntas</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="iii">
                <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-12">' . $pregunta['pregunta'] . "</b><br><br>";
                        if ($moderador) {
                    ?>

                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 10px;" type="radio" name="check<?php echo $aux; ?>" value="1" />
                                <label class="form-check-label" style="font-size: 10px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_1']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 10px;" type="radio" name="check<?php echo $aux; ?>" value="2" />
                                <label class="form-check-label" style="font-size: 10px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_2']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 10px;" type="radio" name="check<?php echo $aux; ?>" value="3" />
                                <label class="form-check-label" style="font-size: 10px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_3']; ?>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" style="font-size: 10px;" type="radio" name="check<?php echo $aux; ?>" value="4" />
                                <label class="form-check-label" style="font-size: 10px;" for="flexCheckDefault">
                                    <?php echo $pregunta['op_4']; ?>
                                </label>
                            </div>
                            <br>
                            <!-- <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">
                        <label class="color-p" for="Subirimagen">Subir imagen (recuerda que deberán cargar una imagen relacionada con el sitio qeu visitaron)</label>
                        <input id="image" type="file" name="image" class="form-control-file" id="Subirimagen" required>
                    </div>

                    <button id="btn_form" name="btn_form" type="submit" class="btn btn-outline-success">
                        Enviar <i class="fa fa-arrow-right" aria-hidden="true" style=" margin-left: 8px;"></i>
                    </button>
                <?php
                }
                ?>
            </form>
        </div>

        <div class="col-6" style="height: 200px;  overflow-x: hidden; ">
            <iframe width="560" height="180" 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-send">
            Continuar con el viaje
        </button>
        <!-- </a> -->
    </div>
</div>

<script>
    $('#formulario').submit(function() {
        document.getElementById('fin').value = "<?php echo date('H:i:s', time()); ?>";
        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>