<?php

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

$nama = $_GET["nama"] ?? null;
$ref = $_GET["ref"] ?? null;

if ($nama) {
  $data = query("SELECT * FROM comment_id WHERE nama='$nama'");
  $guest = empty($data) ? null : $data[0];
}
$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']; // Use event iframe for video background
$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;

$max_id_res = mysqli_query($koneksi, "SELECT MAX(no_id) as max_id FROM comment_id WHERE event_id = '$active_event_id'");
$max_id_row = mysqli_fetch_assoc($max_id_res);
$initial_id = $max_id_row['max_id'] ?? 0;

?>

<!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.10.0/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/modern.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;
    }

    .overlayy {
        background-color: #000;
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 2001;
        top: 0;
        opacity: .10;
        left: 0;
    }

    .content-modalx {
        background-color: transparent;
        width: 100%;
        height: 100%;
        z-index: 2002;
        color: <?php echo $font_color;?>;
    }
    .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 span {
        font-size: 20px;
        font-weight: 500;
    }

    .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 p {
        font-size: <?php echo $size_tamu;?>px;
        font-weight: 700;
        font-family: "<?php echo $font;?>", serif;
    
    }
    
    .info_modalx h1 {
        font-size: 40px;
        font-weight: 800;
        font-family: "<?php echo $font;?>", serif;
    }

    .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;
	}
	#video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
    }
    </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>

<!-- Page Content -->
<?php if($bg == 0) {
    ?>
    <div id="video-container">
    <div data-vbg="<?php echo $video; ?>"></div>
    </div>
    <?php
} ?>

<div class="modalx">
</div>
<!-- Bootstrap -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    let c = <?= $initial_id ?>;
    let isShowing = false;
    let queue = [];
    
    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 showGuest = (tamu) => {
        isShowing = true;
        $(".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, () => {
                isShowing = false;
                if (queue.length > 0) {
                    showGuest(queue.shift());
                }
            });
        }, <?= $timer ?>);
    };

    const updateModal = async () => {
        try {
            const response = await $.ajax({
                url: `get-data.php?id=${c}&event_id=<?= $active_event_id ?>`,
                cache: false,
                dataType: 'json'
            });
            if (response.status && response.data.length > 0) {
                response.data.forEach((tamu) => {
                    c = tamu.no_id;
                    if (isShowing) {
                        queue.push(tamu);
                    } else {
                        showGuest(tamu);
                    }
                });
            }
        } catch (e) {
            console.error("Polling error", e);
        } finally {
            setTimeout(updateModal, 500); // Wait 500ms before polling again, prevents overlap
        }
    };
    $(document).ready(function(){
    <?php if(!isset($guest)): ?>
      setTimeout(updateModal, 100);
    <?php endif; ?>
    })
</script>

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

</body>

</html>