<?php

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

$id = $pagina[1];
?>
<!-- <h3 style="position: absolute; bottom: 5%; left: 30%;" class="blanco">La transmisión del evento inicia el 21 de Abril</h3> -->


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

    .blanco {
        color: white !important;
    }

    .left-zero {
        position: absolute !important;
        right: 0px !important;
    }

    .modal.custom .modal-dialog {
        width: 25%;
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
    }

    .modal {
        height: unset !important;
        right: unset !important;
        bottom: unset !important;
    }

    .streaming_auditorio {
        width: 100%;
        height: 500px;
    }

    @media (max-width: 780px) {
        .streaming_auditorio {
            width: 100%;
            height: 300px;
        }
    }

    #modal_chat {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
</style>

<div class="modal custom fade left-zero" id="modal_chat" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Chat</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" align="center">
                <?php
                $chat = "";
                if ($id == 1) {
                    $chat = "https://vimeo.com/event/915791/chat/";
                } else if ($id == 2) {
                    $chat = "https://vimeo.com/event/915799/chat/";
                }
                ?>
                <iframe src="<?php echo $chat; ?>" width="360px" height="380px" frameborder="0"></iframe>

            </div>
        </div>
    </div>
</div>

<img id="myVideo" src="/img/img_wd/rojo.png" alt="">
<div>
    <?php
    $stream = "";
    if ($id == 1) {
        $stream = "https://vimeo.com/event/915791/embed";
    } else if ($id == 2) {
        $stream = "https://vimeo.com/event/915799/embed";
    } else {
        echo '
			<script>
				window.location = "/auditorio";
			</script>
        ';
    } ?>
    <iframe class="streaming_auditorio" src="<?php echo $stream; ?>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="e_web">

    <?php /* echo $bt_iz;  */ ?>
    <?php /* echo $bt_dr; */ ?>

    <a href="<?php echo $url; ?>/auditorio">
        <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" style="width: 130px; position: absolute; bottom: 20px; left: 10%;">
    </a>
    <!-- <img src="<?php echo $base; ?>" width="100%"> -->
    <button type="button" class="btn btn-danger" style=" border-radius: 30px; margin-bottom: 15px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold; width: 130px; position: absolute; bottom: 20px; right: 10%;" data-toggle="modal" data-target="#modal_chat">
        Chat
    </button>

</div>

<div class="e_movil" align="center">
    <!-- <img src="<?php echo $base; ?>" width="100%"> -->
    <?php /* echo $bt_iz_movil; */ ?>
    <?php /* echo $bt_dr_movil;  */ ?>

    <br>
    <a href="<?php echo $url; ?>/auditorio" style="position: absolute; bottom: 20px; left: 10%;">
        <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" width="140">
    </a>

    <!-- <iframe width="350px" height="300px" src="https://vimeo.com/event/913462/embed" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe> -->
    <button type="button" class="btn btn-danger" style=" border-radius: 30px; margin-bottom: 15px; color: #000; font-size: 15px; background-color: #fdd300; border: 0; font-family: S-Core-CoreSansBold; width: 130px; position: absolute; bottom: 20px; right: 10%;" data-toggle="modal" data-target="#modal_chat">
        Chat
    </button>
</div>


<style>
    .botones {
        position: absolute;
        border-radius: 30px;
        font-size: 11px;
        padding: 5px 20px;
        font-weight: bold;
    }

    .parpadea {

        animation-name: parpadeo;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        -webkit-animation-name: parpadeo;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }

    @-moz-keyframes parpadeo {
        0% {
            transform: scale(1);
        }

        15% {
            transform: scale(1.1);
        }

        30% {
            transform: scale(1);
        }

        100% {
            transform: scale(1);
        }
    }

    @-webkit-keyframes parpadeo {
        0% {
            transform: scale(1);
        }

        15% {
            transform: scale(1.1);
        }

        30% {
            transform: scale(1);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes parpadeo {
        0% {
            transform: scale(1);
        }

        15% {
            transform: scale(1.1);
        }

        30% {
            transform: scale(1);
        }

        100% {
            transform: scale(1);
        }
    }
</style>

<script>
    $(document).ready(function() {
        $("#maestro").height($("#img_muestra").height());
    });

    $(window).resize(function() {
        $("#maestro").height($("#img_muestra").height());
    });
    $('#modal_chat').css("margin-left", $(window).width() - $('.modal-content').width());
</script>