<?php

require 'function.php';
require 'config.php';

$active_event_id = $_GET['event_id'] ?? get_active_event_id();
$event_res = mysqli_query($koneksi, "SELECT * FROM event_id WHERE id = '$active_event_id'");
$event_data = mysqli_fetch_assoc($event_res);

if (!$event_data) {
    die("Event not found or not active.");
}

$acara = $event_data['acara'] ?? '';
$jam = $event_data['jam'] ?? '';
$tanggal = $event_data['tanggal'] ?? '';

$cover = $event_data['cover'] ?? 0;
$timer = $event_data['timer'] ?? 5000;
$image = $event_data['image'];
$video = $event_data['iframe']; 
$bg = $event_data['bg'] ?? 0;
$color = $event_data['color'] ?? '#000000';
$font_color = $event_data['font_color'] ?? '#ffffff';
$opacity = $event_data['opacity'] ?? 0.8;
$text = $event_data['text'] ?? '';
$font = $event_data['font'] ?? 'Poppins';
$size_welcome = $event_data['size_welcome'] ?? 24;
$size_tamu = $event_data['size_tamu'] ?? 18;

$bgview = $image;

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=<?php echo $font; ?>">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <!-- Font Google -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <title>Selamat Datang</title>
    <style>/* Set a background image by replacing the URL below */
    <?php if($bg == 1) {
    ?>
    body {
        background: url('/<?php echo $bgview; ?>') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        display: block;
    }
    <?php
    } ?>
    .modalx {
        position: fixed;
    	width: 100vw;
    	height: 100vh;
    	z-index: 999999;
        top: 0;
        left: 0;
        display: none;
    }
    
    .modalx-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: <?php echo $color;?>;
        opacity: <?php echo $opacity;?>;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 2000;
    }

    .content-modalx {
        background-color: transparent;
        width: 100%;
        height: 100%;
        z-index: 2002;
        color: <?php echo $font_color;?>;
    }
    
    .info_modalx {
        width: 100%;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center;
    }

    .info_modalx>div {
        width: 100%;
        text-align: center;
        height: auto;
    }

    .info_modalx h1, 
    .info_modalx p, 
    .info_modalx div, 
    .info_modalx span {
        color: <?php echo $font_color;?> !important;
        font-family: "<?php echo $font;?>", serif;
    }

    .info_modalx p {
        font-size: <?php echo $size_tamu;?>px;
        font-weight: 700;
    }
    .info_modalx span {
        font-size: 20px;
        font-weight: 500;
    }
    
    .info_modalx h1 {
        font-size: 40px;
        font-weight: 800;
    }

    .wdp-text {
        color: #fff;
        font-size: 18px;
        text-align: center
    }
    #myVideo {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%; 
      min-height: 100%;
    }
	iframe {
		transition: opacity 500ms ease-in-out;
		transition-delay: 250ms;
	}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.min.js"></script>
</head>

<body>

<?php if($bg == false) {
    ?>
    <div data-vbg="<?php echo $video; ?>"></div>
    <?php
} ?>


<?php 
$data = query("SELECT * FROM comment_id WHERE event_id = '$active_event_id' ORDER BY no_id DESC");
?>

<div class="modalx"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<script>

    const guests = <?= json_encode($data) ?>;
    let currentIndex = 0;
    const timer = <?= $timer ?>;
    
    const acara = <?= json_encode($acara ?? '') ?>;
    const textMsg = <?= json_encode($text ?? '') ?>;
    const tanggal = <?= json_encode($tanggal ?? '') ?>;
    const jam = <?= json_encode($jam ?? '') ?>;
    const size_welcome = <?= $size_welcome ?>;

    const showNextGuest = () => {
        if (!guests || guests.length === 0) return;
        
        const tamu = guests[currentIndex];
        $(".modalx").empty().append(`
            <div class="modalx-bg"></div>
            <div class="content-modalx">
                <div class="info_modalx">
                    <div class="wdp-txt-the-wedding" style="width:auto !important">
                        <h1>${acara}</h1>
                        <h1 style='font-size:${size_welcome}px;'>${textMsg}</h1>
                        <p>${tamu.nama}</p>
                        <div style="font-size: 23px">${tamu.tamu ? tamu.tamu : ''}</div> 
                        <br>
                        <div>${tanggal}</div> 
                        <div>${jam}</div>
                    </div>
                </div>
            </div>
        `).fadeIn(500);

        setTimeout(() => {
            $(".modalx").fadeOut(500, () => {
                currentIndex = (currentIndex + 1) % guests.length;
                showNextGuest();
            });
        }, timer);
    };

    $(document).ready(function() {
        showNextGuest();
    });

</script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('[data-vbg]').youtube_background();
    });
</script>

</body>

</html>