<?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-success" 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 id="btn_registro" style="display: none;">
                <a href="<?php echo $url; ?>/login">
                    <button type="button" class="btn btn-danger btn-hover" style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #000; font-size: 20px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold;">
                        Registro <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/home.mp4?alt=media&token=381ce6ea-804d-48f8-9e55-cc7a64f10f54" type="video/mp4">
            <!-- original -->
            <!--  <source src="https://firebasestorage.googleapis.com/v0/b/beegoup-160ea.appspot.com/o/astellas-0001-1100.mp4?alt=media&token=68c74f9d-376b-4506-b583-eced3fec7226" 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>

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

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

        <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 class="base_crono">
            <table width="100%">
                <tr>
                    <td width="25%" align="center">
                        <div class="items_contador" id="dias"><?php echo $dias; ?></div>
                        <div>Días</div>
                    </td>
                    <td width="25%" align="center">
                        <div class="items_contador" id="horas"><?php echo $horas; ?></div>
                        <div>Horas</div>
                    </td>
                    <td width="25%" align="center">
                        <div class="items_contador" id="minutos"><?php echo $minutos; ?></div>
                        <div>Minutos</div>
                    </td>
                    <td width="25%" align="center">
                        <div class="items_contador" id="segundos"><?php echo $segundos; ?></div>
                        <div>Segundos</div>
                    </td>
                </tr>
            </table>
        </div>

    </div>

</div>

<style>
    .base_crono {
        margin-left: 10px;
        margin-right: 10px;
        max-width: 500px;
        background-color: #a62b4e;
        padding: 8px 30px;
        padding-top: 15px;
        color: #fff;
        line-height: 30px;
        border-radius: 20px;
    }
</style>

<script>
    //===
    // VARIABLES
    //===
    const DATE_TARGET = new Date('04/21/2021 07:30 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;
        }
    }

    .btn-hover:hover {
        color: #d91e49 !important;
    }
</style>