<?php
$hoy = date("Y-m-d H:i:s");
$query = mysqli_query($connect, "SELECT * FROM Eventos WHERE estado = 1 AND id = 1 ");
$data = mysqli_fetch_array($query);
$inicio = $data["fecha_inicio"];

$registro_solicitud = new DateTime($inicio); //fecha inicial
$fecha_actual = new DateTime($hoy); //fecha de cierre
$intervalo = $registro_solicitud->diff($fecha_actual);

$dias = $intervalo->format('%d');
$horas = $intervalo->format('%H');
$minutos = $intervalo->format('%m');
$segundos = $intervalo->format('%s');
?>

<?php
/* if($pagina[1] == 'exito'){
    echo '
    <div class="alert alert-success" role="alert" style="margin-bottom: 0px;width: 100%;text-align: center; z-index: 10;">
      ¡Felicitaciones!, el registro ha sido completado. Lo invitamos a navegar por la plataforma a través de los botones superiores.
    </div>
    ';
} */

/* if($pagina[1] == 'iniciado'){
    echo '
    <div class="alert alert-background" role="alert" style="margin-bottom: 0px;width: 100%;text-align: center; z-index: 10;">
      Ha ingresado correctamente. Lo invitamos a navegar por la plataforma a través de los botones superiores.
    </div>
    ';
} */
?>


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

<!-- BANNER -->
<div class="col-md-12" style="padding-left: 0px; padding-right: 0px; ">

    <div style=" bottom: 120px; z-index: 3; width: 100%; margin-top: 20px;" align="center" id="cronometro">

        <?php if ($_SESSION['id_user'] != "") { ?>
            <div style="display: none;" id="button_lobby">
                <!-- <a href="/auditorio">
                    <img src="/img/img_wd/bt_estrellas.png" width="400px" alt="">
                </a> <br> <br> <br> <br>
                <a href="<?php echo $url; ?>/muestra">
                    <button type="button" class="btn btn-danger" style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i> Ir a stands
                    </button>
                </a>
                <a href="<?php echo $url; ?>/auditorio">
                    <button type="button" class="btn btn-danger" style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">
                        <i class="fa fa-arrow-up" aria-hidden="true"></i> Ir a auditorios <i class="fa fa-arrow-up" aria-hidden="true"></i>
                    </button>
                </a>
                <a href="<?php echo $url; ?>/salones">
                    <button type="button" class="btn btn-danger" style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">
                        Ir a salones <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </button>
                </a> -->
            </div>

        <?php } ?>

        <video autoplay muted id="myVideo">

            <!-- reducido -->
            <source src="https://firebasestorage.googleapis.com/v0/b/beegoup-160ea.appspot.com/o/Lobby_cp.mp4?alt=media&token=da584c55-bc2f-47ef-9a18-1b42543165a2" type="video/mp4">
            <!-- <source src="https://firebasestorage.googleapis.com/v0/b/beegoup-160ea.appspot.com/o/Lobby.mp4?alt=media&token=1f42e192-39f0-43b1-9299-0dec9ade51b9" type="video/mp4"> -->


        </video>
        <!-- <img id="myVideo" src="/img/bg_home.jpeg" alt=""> -->



        <style>
            #myVideo {
                position: fixed;
                right: 0;
                bottom: 0px;
                min-width: 100%;
                min-height: 100%;
                z-index: -1;
                width: 100%;
            }
        </style>

        <a href="<?php echo $url; ?>/live">
            <button type="button" class="btn btn-warning" style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #006db7; font-size: 20px; background-color: #ffea00; border: 0; font-family: S-Core-CoreSansBold; display: none">
                Ir al evento en vivo
            </button>
        </a>



    </div>

</div>
<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended', myHandler, false);

    function myHandler(e) {
        document.getElementById('button_lobby').style.display = 'block'
    }
</script>


<style>
    .base_crono {
        margin-left: 10px;
        margin-right: 10px;
        max-width: 500px;
        background-color: #ffffff;
        padding: 8px 30px;
        padding-top: 15px;
        color: #00b08c;
        line-height: 30px;
    }

    .alert-background {
        background-color: #d91e49;
    }
</style>

<script>
    //===
    // VARIABLES
    //===
    const DATE_TARGET = new Date('01/18/2021 09:00 AM');
    // DOM for render
    const SPAN_DAYS = document.getElementById("dias");
    const SPAN_HOURS = document.getElementById("horas");
    const SPAN_MINUTES = document.getElementById("minutos");
    const SPAN_SECONDS = document.getElementById("segundos");
    // Milliseconds for the calculations
    const MILLISECONDS_OF_A_SECOND = 1000;
    const MILLISECONDS_OF_A_MINUTE = MILLISECONDS_OF_A_SECOND * 60;
    const MILLISECONDS_OF_A_HOUR = MILLISECONDS_OF_A_MINUTE * 60;
    const MILLISECONDS_OF_A_DAY = MILLISECONDS_OF_A_HOUR * 24

    //===
    // FUNCTIONS
    //===

    /**
     * Method that updates the countdown and the sample
     */
    /* function updateCountdown() {
        // Calcs
        const NOW = new Date()
        const DURATION = DATE_TARGET - NOW;
        const REMAINING_DAYS = Math.floor(DURATION / MILLISECONDS_OF_A_DAY);
        const REMAINING_HOURS = Math.floor((DURATION % MILLISECONDS_OF_A_DAY) / MILLISECONDS_OF_A_HOUR);
        const REMAINING_MINUTES = Math.floor((DURATION % MILLISECONDS_OF_A_HOUR) / MILLISECONDS_OF_A_MINUTE);
        const REMAINING_SECONDS = Math.floor((DURATION % MILLISECONDS_OF_A_MINUTE) / MILLISECONDS_OF_A_SECOND);
        // Thanks Pablo Monteserín (https://pablomonteserin.com/cuenta-regresiva/)

        // Render
        SPAN_DAYS.textContent = REMAINING_DAYS;
        SPAN_HOURS.textContent = REMAINING_HOURS;
        SPAN_MINUTES.textContent = REMAINING_MINUTES;
        SPAN_SECONDS.textContent = REMAINING_SECONDS;
    }

    //===
    // INIT
    //===
    updateCountdown();
    // Refresh every second
    setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND); */



    /*
var id;	
var h = 0;
var m = 0;
var s = 0;

function init(){
    h = 0;
    m = 0;
    s = 0;
    document.getElementById("horas").innerHTML="00:00:00";
}         
function cronometrar(){
    escribir();
    id = setInterval(escribir,1000);
    document.querySelector(".start").removeEventListener("click",cronometrar);
}

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("horas").innerHTML = hAux + ":" + mAux + ":" + sAux; 
}
function parar(){
    clearInterval(id);
    document.querySelector(".start").addEventListener("click",cronometrar);

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


    $(document).ready(function() {

        $("#bt_inicio").addClass("btn_item_menu_active");

        if ($(window).width() > 800) {
            $("#cronometro").css("position", "fixed");
        }
        if ($(window).width() < 800) {
            $("#cronometro").css("position", "initial");
        }
        //cronometrar();

    });

    $(window).resize(function() {
        if ($(window).width() > 800) {
            $("#cronometro").css("position", "fixed");
        }
        if ($(window).width() < 800) {
            $("#cronometro").css("position", "initial");
        }
    });
</script>

<style>
    @media (max-width: 1030px) {
        .detalle_banner {
            display: none;
        }
    }
</style>