<?php

$dia = $pagina[1];

$queryPregunta = mysqli_query($connect, "SELECT * FROM Desafio_Preguntas WHERE dia = '" . $dia . "' ORDER BY orden ASC   ");
$dataPregunta = mysqli_fetch_array($queryPregunta);

$queryRespuestas = mysqli_query($connect, "SELECT * FROM Desafio_Respuestas WHERE id_asistente = '" . $_SESSION['id_user'] . "' AND dia = '" . $dia . "'  ");
//$dataValidate = mysqli_fetch_array($queryRespuestas);
?>


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

<div class="col-md-12">

    <div class="container">

        <?php echo $rersp; ?>

        <div class="row">

            <!-- PRESENTACION -->
            <div class="col-md-12 paginas" align="center" id="home">

                <div class="card">
                    <div class="card-body">
                        <h2 style="margin-top: 3%; color: #a62b4e;">TRIVIA</h2>
                        <div align="left">

                            <p>
                                <b>Instrucciones:</b><br>
                                1. De clic en el boton Realizar Juego<br>
                                2. A continuación encontrara una serie de preguntas con múltiples opciones de respuesta; de clic sobre la opción de respuesta que considere correcta. <br>
                                3. Recuerde que deberá contestar las preguntas antes que el contador de tiempo pare. <br>
                                4. Tiene un máximo de 1 minuto para contestar cada una de las preguntas presentadas.<br>
                                5. Cuando responda cada pregunta, el sistema lo pasará automáticamente a la siguiente.<br>
                                6. Cuando haya terminado, el sistema le mostrará su puntaje, y le permitirá ver el ranking de los jugadores con mayor puntaje en el juego. <br><br>
                                <h3>¡Muchos Éxitos!</h3>
                            </p>

                            
                                <button type="button" onClick="Jugar()" class="btn btn-dark btn-block btn_item_menu" style="margin-bottom: 15px">
                                    Iniciar juego
                                </button>



                                <button type="button" onClick="RankingGeneral()" class="btn btn-warning btn-block " style="margin-top: 20px">
                                    Ver Ranking
                                </button>

                        </div>

                    </div>
                </div>

                <!-- <img src="<?php echo $url; ?>/img/desafio/logo_desafio.png" style="width: 100%; max-width: 400px; margin-top: 3%" ><br> -->


               <!--  <img src="<?php echo $url; ?>/img/desafio/bt_jugar.png" width="200" style="padding: 10px" onClick="Jugar()" class="bt_interface">

                <img src="<?php echo $url; ?>/img/desafio/bt_general.png" width="200" style="padding: 10px" onClick="RankingGeneral()" class="bt_interface"> -->
                <!-- <img src="<?php echo $url; ?>/img/desafio/bt_equipo.png" width="200" style="padding: 10px" onClick="RankingPorEquipos()" class="bt_interface"> -->

            </div>

            <!-- JUEGO -->
            <div class="col-md-12 paginas" align="center" id="juego" style="display: none">

                <div class="row" style="color: #ffffff; margin-top: 25px" id="contenedor_preguntas">
                    Cargando...
                </div>

            </div>


            <!-- RANKING -->
            <div class="col-md-12 paginas" align="center" id="ranking" style="display: none; ">

                <h3 style=" color: #ffffff; margin-top: 20px;">RANKING GENERAL</h3>

                <div align="center">
                    <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="130" style="padding: 10px" onClick="Home()" class="bt_interface">
                </div>

                <div id="cont_ranking" style="background-color: #fff; border-radius: 12px; overflow: hidden; max-width: 800px; padding: 5px 30px;">
                </div>


            </div>


            <!-- RANKING -->
            <div class="col-md-12 paginas" align="center" id="ranking_equipos" style="display: none">

                <h3 style=" color: #ffffff; margin-top: 20px;">RANKING POR EQUIPOS</h3>

                <div id="cont_ranking_equipos" style="background-color: #fff; border-radius: 12px; overflow: hidden; max-width: 800px; padding: 5px 30px;">
                </div>

                <div align="center">
                    <img src="<?php echo $url; ?>/img/desafio/bt_volver.png" width="200" style="padding: 10px" onClick="Home()" class="bt_interface">
                </div>

            </div>


        </div>

    </div>

</div>

<script>
    var api = '<?php echo $api; ?>';


    function CargarPregunta() {

        data = {
            id_user: <?php echo $_SESSION['id_user']; ?>,
            dia: <?php echo $dia; ?>
        };

        jQuery.ajax({
                url: api + "cargar_pregunta_desafio.php",
                type: 'post',
                data: data,
            }).done(function(resp) {
                $("#contenedor_preguntas").html(resp);


            })
            .fail(function(resp) {
                console.log(resp);
            })
            .always(function(resp) {});
    }


    function GuardarRespuesta(val, elem) {
        cr = $("#cr").val();
        $(".opciones").attr("style", "pointer-events:none");
        if (cr == val) {
            $("#opt_" + cr).addClass("opciones_correcta");
        } else {
            $(elem).addClass("opciones_incorrecta");
            $("#opt_" + cr).addClass("opciones_correcta");
        }


        parar();

        setTimeout(function() {

            data = {
                id_user: <?php echo $_SESSION['id_user']; ?>,
                pregunta: $("#pregunta").val(),
                respuesta: val,
                total_segundos: total_segundos,
                dia: <?php echo $dia; ?>
            };

            jQuery.ajax({
                    url: api + "guardar_respuesta_desafio.php",
                    type: 'post',
                    data: data,
                }).done(function(resp) {
                    $("#contenedor_preguntas").html(resp);
                })
                .fail(function(resp) {
                    console.log(resp);
                })
                .always(function(resp) {});

        }, 1500);

    }

    function Home() {
        $(".paginas").hide();
        $("#home").show();
    }

    function Jugar() {
        $(".paginas").hide();
        $("#juego").show();
        CargarPregunta();


    }

    function RankingGeneral() {
        $(".paginas").hide();
        $("#ranking").show();

        jQuery.ajax({
                url: api + "ranking_desafio.php",
                type: 'post',
                data: {
                    id: 0
                },
            }).done(function(resp) {
                $("#cont_ranking").html(resp);
            })
            .fail(function(resp) {
                console.log(resp);
            })
            .always(function(resp) {});
    }

    function RankingPorEquipos() {
        $(".paginas").hide();
        $("#ranking_equipos").show();

        jQuery.ajax({
                url: api + "ranking_desafio_equipos.php",
                type: 'post',
                data: {
                    id: 0
                },
            }).done(function(resp) {
                $("#cont_ranking_equipos").html(resp);
            })
            .fail(function(resp) {
                console.log(resp);
            })
            .always(function(resp) {});
    }
</script>

<style>
    .opciones {
        background-color: #ffffff;
        color: #006db7;
        margin-bottom: 20px;
        width: 97%;
        cursor: pointer;
    }

    .opciones:hover {
        background-color: #fff498;
        color: #006db7;
        margin-bottom: 20px;
        width: 97%;
    }

    .opciones_correcta {
        background-color: #c6ff84 !important;
    }

    .opciones_incorrecta {
        background-color: #ffb6b1;
    }

    .bt_interface {
        cursor: pointer;
        transition: 0.5s all;
    }

    .bt_interface:hover {
        transform: scale(1.1);
    }
</style>

<script>
    $(document).ready(function() {
        $("#bt_desafio").addClass("btn_item_menu_active");
    });
</script>




















<script>
    var total_segundos = 0;
    h = 0;
    m = 0;
    s = 0;


    window.onload = init;

    function init() {
        h = 0;
        m = 0;
        s = 0;
    }

    function cronometrar() {
        total_segundos = 0;
        escribir();
        id = setInterval(escribir, 1000);
    }

    function escribir() {
        var hAux, mAux, sAux;
        s++;
        if (s > 59) {
            m++;
            s = 0;
        }
        if (m > 59) {
            h++;
            m = 0;
        }
        if (h > 24) {
            h = 0;
        }

        if (s < 10) {
            sAux = "0" + s;
        } else {
            sAux = s;
        }
        if (m < 10) {
            mAux = "0" + m;
        } else {
            mAux = m;
        }
        if (h < 10) {
            hAux = "0" + h;
        } else {
            hAux = h;
        }

        document.getElementById("hms").innerHTML = hAux + ":" + mAux + ":" + sAux;
        total_segundos++;

        if (total_segundos > 120) {
            GuardarRespuesta(0, 0, 0);
            total_segundos = 0;
        }
    }

    function parar() {
        clearInterval(id);
    }

    function reiniciar() {
        clearInterval(id);
        document.getElementById("hms").innerHTML = "00:00:00";
        h = 0;
        m = 0;
        s = 0;
    }

    $(document).ready(function() {

    });
</script>