<?php
require_once "config/config.php";

date_default_timezone_set("Europe/Berlin");

$now = time();

$stmt = $pdo->prepare("
    (
        SELECT *, 1 AS is_live
        FROM termine
        WHERE status = 1
          AND startzeit <= UNIX_TIMESTAMP()
          AND endzeit >= UNIX_TIMESTAMP()
        ORDER BY startzeit DESC
        LIMIT 1
    )
    UNION ALL
    (
        SELECT *, 0 AS is_live
        FROM termine
        WHERE status = 1
          AND startzeit > UNIX_TIMESTAMP()
        ORDER BY startzeit ASC
        LIMIT 1
    )
    LIMIT 1
");

$stmt->execute();
$event = $stmt->fetch();

$isLive = false;

if ($event) {
    $now = time();

    if ($event['startzeit'] <= $now && $event['endzeit'] >= $now) {
        $isLive = true;
    }
}

?>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ANJUMA Overlay</title>

<style>
body {
    margin: 0;
    overflow: hidden;
    background: transparent;
    font-family: Arial, sans-serif;
}

.overlay {
    position: absolute;
    bottom: 60px;
    left: 60px;
    right: 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: transparent;
}

/* LEFT */
.left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0,245,255,0.6));
}

/* RIGHT */
.right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: white;
}

/* TEXT */
.event {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,245,255,0.35);
}

.location {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

.date {
    font-size: 14px;
    color: #00ff66;
    text-shadow: 0 0 8px rgba(0,255,102,0.6);
}

.live {
    color: #ff2b2b;
    text-shadow: 0 0 10px rgba(255,0,0,0.6);
    font-weight: 900;
}

.next {
    color: #00f5ff;
    text-shadow: 0 0 10px rgba(0,245,255,0.4);
    font-weight: 900;
}
</style>


</head>

<body>

<div class="overlay">

    <!-- LEFT -->
    <div class="left">
        <img src="assets/logo.png" class="logo">
    </div>

    <!-- RIGHT -->
    <div class="right">

        <?php if ($event): ?>

            <div class="event <?= $isLive ? 'live' : '' ?>">
                <?= $isLive ? '🔴 LIVE' : '' ?>
            </div>

            <div class="location">
                📍 <?= htmlspecialchars($event['location']) ?>
            </div>

            <div class="date">
                🕒 <?= date("d.m.Y H:i", $event['startzeit']) ?>
            </div>

        <?php else: ?>

            <div class="event">NO EVENTS</div>

        <?php endif; ?>

    </div>

</div>

</body>
</html>

<script>
setInterval(() => {
    location.reload();
}, 10000);
</script>
