<?php
// 
$timestamp = time();
$currentYear = date("Y");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Roblox's #1 Hit Music Station!">
    <meta name="keywords" content="RBC Radio, Roblox radio, Hit Music, Streaming, Online Radio, Roblox music station, RBC, Roblox's #1 Radio, Roblox community music">
    <meta name="author" content="RBC Radio">
    <meta property="og:title" content="RBC Radio - Roblox's #1 Hit Music Station">
    <meta property="og:description" content="RBC Radio is Roblox's #1 Hit Music Station">
    <meta property="og:image" content="https://live.typicalcasters.com/rbcradio/assets/img/RBCRadio.webp">
    <meta property="og:url" content="https://live.typicalcasters.com/rbcradio/">
    <title>RBC Radio - Roblox's #1 Hit Music Station</title>
    <link rel="icon" href="assets/img/RBCRadio.webp" type="image/webp">
    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/lightbox.css?v=<?php echo $timestamp; ?>" />
    <link href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css" rel="stylesheet">
</head>

<body>
    <div class="background">
        <div class="overlay"></div>
    </div>

    <div class="content">
        <div class="album-art-container">
            <img id="song-art" src="assets/img/RBCRadio.webp" alt="Album Art" class="album-art">
        </div>

        <p class="station-tagline">Roblox's #1 Hit Music Station!</p>

        <div class="presenter-info">
            <img src="assets/img/RBCRadio.webp" alt="Presenter Poster" class="presenter-poster" id="live-dj-poster">
            <p class="presenter-name" id="live-dj-name"></p>
        </div>

        <div class="song-info">
            <div id="song-title">
                <i class="fas fa-music icons"></i> Loading...
            </div>
            <div id="song-artist">
                <i class="fas fa-user icons"></i> Loading...
            </div>
        </div>

        <div class="audio-controls">
            <i id="play-pause-btn" class="fas fa-play"></i>
        </div>

        <div id="volume-container">
            <i id="volume-icon" class="fas fa-volume-up"></i>
            <!-- Volume notches -->
            <?php for ($i = 1; $i <= 12; $i++): ?>
                <div class="volume-notch" id="notch<?php echo $i; ?>"></div>
            <?php endfor; ?>
        </div>

        <div class="request-btn-container">
            <a href="#" id="open-request-modal" class="request-btn">Request</a>
            <a href="https://forms.gle/evVCTqoQWDyRDd6E8" class="apply-btn" target="_blank">Apply</a>
        </div>

        <div id="request-modal-placeholder"></div>
    </div>

    <div class="social-container">
        <div class="social-box">
            <a href="https://discord.gg/rbctv" target="_blank" class="social-icon discord-icon">
                <i class="fab fa-discord"></i>
            </a>
        </div>
        <div class="social-box">
            <a href="https://www.tiktok.com/@rbc_radio" target="_blank" class="social-icon tiktok-icon">
                <i class="fab fa-tiktok"></i>
            </a>
        </div>
        <div class="social-box">
            <a href="https://www.youtube.com/channel/UCCf-YUxdMFbVlkp5eF_5-tg" target="_blank" class="social-icon youtube-icon">
                <i class="fab fa-youtube"></i>
            </a>
        </div>
    </div>

    <footer>
        <p>©️ 2019-<?php echo $currentYear; ?> Roblox Broadcasting Corporation</p>
        <p>DRBC-FM, 98.4 ... <br> Facility ID: 876543</p>
    </footer>

    <script src="assets/css/main.js?v=<?php echo $timestamp; ?>"></script>
    <script src="assets/js/main.js?v=<?php echo $timestamp; ?>"></script>
    <script src="assets/js/lightbox.js?v=<?php echo $timestamp; ?>"></script>
</body>
</html>
