<?php
    if($_SESSION['id_user'] == "" ){
        echo '
			<script>
				window.location = "/login"
			</script>
        ';
    }

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


    $query = mysqli_query($connect,"SELECT * FROM Live WHERE estado = 1 ");
	$data = mysqli_fetch_array($query);

    $queryTrivia = mysqli_query($connect,"SELECT * FROM Trivias WHERE estado = 1 ");
	$dataTrivia = mysqli_fetch_array($queryTrivia);
    
    $idTrivia = 0;
    $finalizado = true;

    if($queryTrivia->num_rows > 0){
        
        $idTrivia = $dataTrivia["id"];
        $pregunta;
        $opc_1 = '';
        $opc_2 = '';
        $opc_3 = '';
        $opc_4 = '';
        $opc_5 = '';
        $id_pregunta = 0;

        $queryPreguntas = mysqli_query($connect,"SELECT * FROM Trivia_Preguntas WHERE id_trivia = '".$dataTrivia["id"]."' AND estado = 1 ORDER BY orden ASC ");
        while($dataPreguntas = mysqli_fetch_array($queryPreguntas)){

            $queryResp = mysqli_query($connect,"SELECT * FROM Trivias_Respuestas WHERE id_pregunta = '".$dataPreguntas["id"]."' ");

            if( $queryResp->num_rows == 0 ){
                $pregunta = $dataPreguntas["pregunta"];
                $opc_1 = $dataPreguntas["opc_1"];
                $opc_2 = $dataPreguntas["opc_2"];
                $opc_3 = $dataPreguntas["opc_3"];
                $opc_4 = $dataPreguntas["opc_4"];
                $opc_5 = $dataPreguntas["opc_5"];
                $id_pregunta = $dataPreguntas["id"];

                $finalizado = false;
                break;
            }
        }
        
    }
?>



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


<div class="container" >

	<div class="row" style="margin-top: 25px">
        
        
        <!-- PLAYER -->
        <div class="col-md-12" align="center"  id="columna_player">
            <div id="cont_player">
                <?php echo $data["codigo"]; ?>
		    </div>
        </div>
		
        <!-- PLAYER -->
        <div class="col-md-4" align="center" style="margin-top: 20px; display: none">

            <div id="scroll_cont" style="max-height: 390px; overflow: auto; margin-bottom: 10px;">
                <div id="cont_chat" align="left" style="background-color: #f1f1f1; padding: 10px;  ">
                    <?php
                    $queryChat = mysqli_query($connect,"SELECT * FROM Chat ORDER BY created_at ASC ");
                    while($dataChat = mysqli_fetch_array($queryChat)){

                        $queryAsis = mysqli_query($connect,"SELECT * FROM Asistentes WHERE id = '".$dataChat["id_asistente"]."' ");
                        $dataAsis = mysqli_fetch_array($queryAsis);

                        echo '
                        <div class="chat_box">
                            <div class="txt_envia">'.$dataAsis["nombre"].' '.$dataAsis["apellidos"].' - '.$dataChat["created_at"].'</div>
                            '.$dataChat["comentario"].'
                        </div>';
                    }

                    ?>
                </div>
            </div>
            
            <div id="cont_comentarios">
                <div>
                    <button type="submit" class="btn btn-warning bt_enviar" onClick="Registrar_Comentario()">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </button>
                </div>
                <textarea id="comentario" class="form-control" placeholder="Ingresa un comentario..."></textarea>
                
                
            </div>
            
        </div>
		

		
	</div>
	
</div>

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

    $("#scroll_cont").animate({ scrollTop: $("#cont_chat").height() }, 0);

});
</script>


<script>

vista_streaming = true;
var api = '<?php echo $api; ?>';


var activar = false;
function Registrar_Comentario(){
    
    if($("#comentario").val() != "" ){
        
        if(activar == false){
            $("#modal_body").html('Está a punto de registrar un comentario en el chat grupal ¿Estás seguro?<br><br>');
            $("#modal_body").append('<button type="button" class="btn btn-success" style="margin-right: 10px;" onclick="activar = true; Registrar_Comentario(); Ocultar_Modal()">Enviar</button>');
            $("#modal_general").modal('show');
        }
        else{
            activar = false;

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

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

                })
                .fail(function(resp) {
                    console.log(resp);
                })
                .always(function(resp){
                }
            );
            
            if($("#comentario").val() != "" ){
                 hoy = new Date();
                 hora = hoy.getHours() + ':' + hoy.getMinutes() + ':' + hoy.getSeconds();
                
                database.ref( 'chat' ).set({
                    nombre: '<?php echo $_SESSION['name_user'] ?>', 
                    comentario: $("#comentario").val(),
                    fecha : hora
                });
            }
            
    
        }
    }
    
    else{
        $("#modal_body").html('Recuerde ingresar un comentario en la caja de texto.');
        $("#modal_general").modal('show');
    }
    
    
	
}
   
function Ocultar_Modal(){
    $("#modal_general").modal('hide');  
}
    
    
    
    
    
    
    

</script>

<style>
    .chat_box{
        background-color: #fff;
        padding: 8px 20px;
        border-radius: 5px;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
        width: fit-content;
        margin-bottom: 12px;
    }
    .bt_enviar{
        border-radius: 30px;
        margin-bottom: 15px;
        padding: 10px 12px;
        color: #006db7;
        font-size: 20px;
        background-color: #ffea00;
        border: 0;
        font-family: Signika-Bold;
        
        margin-bottom: -50px;
        position: relative;
        float: right;
        margin-top: 10px;
        margin-right: 10px;
    }
    .txt_envia{
        font-size: 12px;
        color: #a9a9a9;
    }
</style>