<?php 
require ("lib/connection.php");
define ("FACEBOOK_SITE", "https://www.facebook.com/MVIQUERETARO/videos/");
define ("YOUTUBE_SITE", "https://www.youtube.com/watch?v=");


if ($resultado = $enlace->query("SELECT * FROM session WHERE id_token='".$_GET['s']."'")) {
    if ($resultado->num_rows != 1) {
        $resultado = $enlace->query("SELECT * FROM session ORDER BY id_session desc limit 1;");
    }
}

$obj = $resultado->fetch_object();
$session = $obj->id_session;
$strTitle = $obj->title;
$strSite  = "https://altares.mviglobal.org";
$strUrl   = "https://altares.mviglobal.org/comparte/";
$strUrlImg= $obj->imagen;
$idFb = $obj->id_facebook;
$idYt = $obj->id_youtube;
$strUrlFb = FACEBOOK_SITE.$idFb;
$strUrlYt = YOUTUBE_SITE.$idYt;

$strTypeImage = "image/png";
$strWidthImg  = "1200";
$strHeightImg = "700";

$strVerseText_1 = utf8_encode($obj->descVerse_1);
$strVerse_1     = $obj->verse_1;
$strVerseText_2 = $obj->descVerse_2;
$strVerse_2     = $obj->verse_2;
$strContent_1= "<i>'".$strVerseText_1."'</i><br><b>".$strVerse_1."</b>";
?>
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
    <head>
        <title><?= $strTitle ?></title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="<?= $strVerse_1 ?>" />
        <meta property="og:type" content="article" />
        <meta property="og:url" content="<?= $strUrl ?>" />
        <meta property="og:description" content="<?= $strVerseText_1?>" />
        <meta property="og:image" content="<?php echo $strSite.$strUrlImg; ?>" />
        <meta property="og:image:type" content="<?= $strTypeImage?>" />
        <meta property="og:image:width" content="<?= $strWidthImg?>" />
        <meta property="og:image:height" content="<?= $strHeightImg?>" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script src="https://kit.fontawesome.com/1e4203a92c.js" crossorigin="anonymous"></script>
        <style>
            body {
                background-color: #e1d271;
                font-family: "Monaco";
                color: black;
            }
            #block_container { text-align:center; }
            #bloc1, #bloc2 { display:inline; } 
            /*.btn {
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 32px;
                border-radius: 8px;
            }*/
            .btn {
                 color: white;
                padding: 10px;
                font-size: 20px;
            }
            .btnFb {
                background-color: #008CBA;
            }
            .btnYt {
                background-color: red;
            }
            .responsive {
                max-width: 80%;
                height: auto;
            }
            .margin20 {
                margin: 20px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="block_container">
            <img src="images/logoAltaresYellow.png"><br>
            <h1>&iexcl;Bienvenido!</h1>
            <div>Presiona el botón para entrar al Altar (#<?=$session?>) en la red de tu preferencia</div><br>
            <div>
                <div id="bloc1">
                    <!--<button class="btn btnFb"><i class="fab fa-facebook"></i></button>-->
                    <button type="button" class="btn btnFb"><i class="fab fa-facebook"></i> Ver en Facebook</button>
                </div>  
                <div id="bloc2">
                    <button type="button" class="btn btnYt btn-sm"><i class="fab fa-youtube"></i> Ver en YouTube</button>
                    <!-- <button class="btn btnYt"><i class="fab fa-youtube-square"></i></button>-->
                </div>
            </div>
            <img src="<?= $strUrlImg ?>" class="responsive margin20">
            <h3 class="margin20"><i><?= $strVerseText_1 ?></i></h3>
            <h2><?= $strVerse_1?></h2>
            <?php if ($strVerse_2 != ""):?>
            <hr>
            <h3 class="margin20"><i><?= $strVerseText_2 ?></i></h3>
            <h2><?= $strVerse_2?></h2>
            <?php endif; ?>
            <hr>
            <script src="https://apis.google.com/js/platform.js"></script>
            Suscr&iacute;bete a nuestro canal de Youtube
            <div class="g-ytsubscribe" data-channelid="UCBNaLp2ktjmWv3BsGNhE79w" data-layout="full" data-count="default"></div>
        </div>
        <script>
            $('.btnFb').click(function() {
                window.location = "<?= $strUrlFb ?>"; 
            });
        
            $('.btnYt').click(function() {
                window.location = "<?= $strUrlYt ?>"; 
            });
        </script>
    </body>
</html>