<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 FROM respuesta_map WHERE equipo='1'");
$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 = 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'];
            echo "<script>alert('".$_POST['fin']."');</script>";
            $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);
            if ($insertar) {

                echo "<script>alert('El archivo se subió 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 la imagen a subir.')</script>";
        }
    }
}



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


    <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="">
                <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 type="file" name="image" class="form-control-file" id="Subirimagen" required>
                    </div>

                    <button 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: 700px;  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() {
        alert(document.getElementById('fin').value);
            document.getElementById('fin').value = "<?php echo date('H:i:s', time()); ?>";
            alert(document.getElementById('fin').value);
        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
        }
        ?>
    }
</script>