<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
      // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyAGJFWXPoNPQOGkiLfa3SRRhEELa9Uum-E", 
            authDomain: "fora2020-b6f9b.firebaseapp.com",
            databaseURL: "https://fora2020-b6f9b.firebaseio.com",
            projectId: "fora2020-b6f9b",
            storageBucket: "fora2020-b6f9b.appspot.com",
            messagingSenderId: "815817232619",
            appId: "1:815817232619:web:dbfa340a0936936f876eae"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        var database = firebase.database();
        
        //2. ESCUCHAMOS SI UN USUARIO SE CONECTA 
        var tb_live = database.ref('participants');
        tb_live.on('value', EnVivo);
        
        var activar_tabla = true;
        function EnVivo(data){

        	traza = data.val() ;

        	var keyCount  = Object.keys(traza).length;
            $("#en_vivo").html( keyCount );

        	
        	count = 1;
			if(activar_tabla == true ){
        		jQuery.each(traza, function(i, val) {
        		
	        		traza = '<tr><td>'+count+'</td><td>'+val.nombre+'</td></tr>';
	        		$("#tabla_lista").append( traza );
	        		count++;
        		
				});
			}

        	activar_tabla = false;
        }
  
 </script>









<div align="left" style="padding: 10px 0px;">
	<table width="100%">
    	<tr>
        	<td><h5 style="margin-top: 8px;"><i class="fas fa-chevron-right"></i> En vivo ahora</h5></td>
            <td align="right" width="200">
            	
            </td>
        </tr>
    </table>
</div>


<!-- FICHA -->
<!-- FICHA -->
<!-- FICHA -->
<div style="width: 100%; margin-bottom: 15px">
              <table width="100%" style="background-color: #ff5a23; color: #ffffff;">
              <tr>
                <td width="100" style="padding: 15px; background-color: rgba(0,0,0,0.2);">
                  <i class="fa fa-user btn-left" style=" font-size: 60px "></i>
                </td>
                <td align="center" style="font-size: 20px; line-height: 35px;">
                  <div style="line-height: 20px; margin-top: 15px;">
                    En vivo Ahora<br>
                    <span style="font-size: 12px">(Solo registra usuarios únicos)</span>
                  </div>
                  <b style="font-size: 50px;" id="en_vivo"></b>
                </td>
              </tr>
            </table>
</div>



<table class="table table-bordered">
	<thead class="thead-dark">
	<tr>
		<th scope="col" width="15">#</th>
		<th scope="col" width="150">Nombre</th>
	</tr>
	</thead>
    
	<tbody id="tabla_lista" >
	
	</tbody>
</table>

<script>

$(document).ready(function(){
	$("#buscador").on("keyup", function() {
		var value = $(this).val().toLowerCase();
		$("#tabla_lista tr").filter(function() {
		  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
		});
	});	  
});

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

var activar = false;
function Eliminar(id){
	if(activar == false){
		$("#modal_body").html('Estas a punto de eliminar un expositor, esta acción es irreversible ¿Estás seguro?<br><br>');
		$("#modal_body").append('<button type="button" class="btn btn-danger" style="margin-right: 10px;" onclick="activar = true; Eliminar('+id+')">Eliminar</button>');
		$("#modal_general").modal('show');
	}
	else{
	
		jQuery.ajax({
			url: api+"eliminar_speaker.php",
			type:'post',
			data: {id: id, url:"?pg=speakers"},
			}).done(function (resp){
				$("#xscript").html(resp);
			})
			.fail(function(resp) {
				console.log(resp);
			})
			.always(function(resp){
			}
		);
		
	}
}

function Del_Imagen(elem,tipo){
	$( elem).parent().html('<input type="file" class="form-control" name="image" required>');
}

</script>

<script src="js/functions.js"></script>