<?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/BACKGROUND-01.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" >

                <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/desafio/bt_volver.png" width="200" 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>