1#@!#!123s

: / home / markniuj / bazmeasar.com / admin /
Filename : view_event.php
back
<?php include "../config.php"; ?>

<!DOCTYPE html>
<html>
<head>
    <title>View Event</title>
        <!-- responsive meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- For IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Module css -->
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        h2 {
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }

        p {
            text-align: center;
            margin: 10px 0;
        }

        #countdown {
            font-size: 18px;
            font-weight: bold;
        }

        a {
            display: block;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Event Details</h1>
<?php
    // Get the event ID from the URL
    $event_id = $_GET['id'];

    // SQL to fetch the event details
    $sql = "SELECT * FROM events WHERE id = $event_id";
    $result = $conn->query($sql);

    if ($result->num_rows == 1) {
        $row = $result->fetch_assoc();
        echo "<h2>" . $row['event_name'] . "</h2>";
        echo "<p>Event Date: " . $row['event_date'] . "</p>";
        echo "<p>Event Time: " . $row['event_time'] . "</p>";
        
        // Display the location inside the iframe
        echo '<iframe src="' . $row['location'] . '" width="350" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>';
        
        // Calculate the countdown timer using JavaScript
        echo '<p>Countdown Timer: <span id="countdown"></span></p>';

        // JavaScript countdown timer script
        echo '<script>
            var eventDate = new Date("' . $row['event_date'] . ' ' . $row['event_time'] . '").getTime();
            var countdownDisplay = document.getElementById("countdown");

            var countdownFunction = setInterval(function() {
                var now = new Date().getTime();
                var timeRemaining = eventDate - now;

                var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
                var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

                countdownDisplay.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

                if (timeRemaining < 0) {
                    clearInterval(countdownFunction);
                    countdownDisplay.innerHTML = "Event has ended.";
                }
            }, 1000);
        </script>';
    } else {
        echo "Event not found.";
    }

    // Close the database connection
    $conn->close();
?>


    <a href="index.php">Go back to all events</a>

    <script>
        // JavaScript code for countdown timer
        var eventDate = new Date("<?php echo $row['event_date'] ?> <?php echo $row['event_time'] ?>").getTime();

        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = eventDate - now;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown").innerHTML = "Event has ended";
            }
        }, 1000);
    </script>
</body>
</html>