<?php 

    $station_id = (string)$station->id;
    $station_name = (string)$station->name;
    $station_slogan = (string)$station->slogan;
    $station_logo = (string)$station->logo;
    $station_stream = (string)$station->stream;
    $station_streamhls = (string)$station->streamhls;
    $station_contentplayer = (string)$station->contentplayer;
    $station_apiradio = (string)$station->apiradio;

?>

<div class="radio-player-container" style="background-color: #ffffff;height: calc(100% - <?php if($is_mobile){ echo "232px"; }else{ echo "217px"; } ?>);position: absolute;left: calc(50%);display: flex;flex-direction: column;max-width: 750px;transform: translateX(-50%);width: 100%;">

    <div class="radio-header" style="padding: 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
        <div class="left-controls" style="display: flex; align-items: center;">
            <a href="<?php echo $base_path; ?>/radio" data-page="radio" class="linkBox" style="color: #333; display: flex; align-items: center; text-decoration: none;">
                <span class="material-icons" style="font-size: 28px;">arrow_back</span>
            </a>
            <span style="font-size: 18px; font-weight: 600; color: #333; margin-left: 15px;"><?php echo $station_name; ?></span>
        </div>
        
        <?php if(!empty($station_logo)): ?>
        <div class="right-controls">
            <img src="<?php echo $station_logo; ?>" alt="Logo" style="height: 30px; width: auto;">
        </div>
        <?php endif; ?>
    </div>

    <?php
        if($station->contentplayer == ""){
            ?>
                <style>
                    .staticpage{
                        background: linear-gradient(45deg, #3849a8, #f7b835);
                        padding: 22px 35px 10px 35px;
                        display: block;
                        z-index: 1;
                        height: calc(100vh - 393px);
                        color: white;
                        text-align: center;
                        width: 100%;
                        max-width: 750px;
                    }
                    .staticpage > .logo{
                        width: 200px;
                        border-radius: 15px;
                        margin-bottom: 20px;
                    }
                    .staticpage > p{
                        margin: 0;
                    }
                    .staticpage > p.titleRadio{
                        font-weight: 600;
                    }
                </style>
                <div class="staticpage">
                    <img src="<?php echo $station->logo; ?>" class="logo" alt="logo radio">
                    <p class="titleRadio"><?php echo $station->name; ?></p>
                    <p class="subtitleRadio"><?php echo $station->slogan; ?></p>
                </div>
            <?php
        }else{
            ?>
                <iframe src="<?=$station_contentplayer?>" class="contentplayer" frameborder="0"></iframe>
            <?php
        }
    ?>

    <div class="footer_player">
        <div class="row align-items-center">
            <div class="col-2" style="width: 70px;">
                <img id="albumsong" src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;height: 60px;">
            </div>
            <div class="col">
                <div id="songs" style="font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;"><?php echo $station->name; ?></div>
                <div id="artist" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical ;overflow: hidden;"><?php echo $station->slogan; ?></div>
            </div>
            <div class="col-auto" style="text-align: center; margin-top: 1px; padding-right: 0;">
                <button id="formatToggleBtn" title="Cambia formato audio">
                    <span id="formatLabel" style="font-size: 12px;font-weight: 600;border-radius: 6px;border: 2px solid #ffffff;padding: 4px 6px;background: rgba(247, 184, 53, 0.3);color: #2a377e;">HLS</span>
                </button>
            </div>
            <div class="col-2" style="text-align: center; margin-top: 1px; margin-right: 5px; width: 67px;">
                <button id="playPauseBtn" 
                        data-stream-hls="<?php echo $station->streamhls; ?>" 
                        data-stream-fallback="<?php echo $station->stream; ?>" 
                        data-station-name="<?php echo htmlspecialchars($station->name); ?>" 
                        data-station-logo="<?php echo $station->logo; ?>" 
                        data-station-slogan="<?php echo htmlspecialchars($station->slogan); ?>"
                        data-api-url="<?php echo $station_apiradio; ?>">
                    <i class="material-icons play-icon" id="play-pause" style="font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">play_arrow</i>
                    <i class="material-icons pause-icon" id="play-pause" style="display:none; font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">pause</i>
                </button>
            </div>
        </div>
    </div>

</div>

<audio id="hlsAudioPlayer" preload="none"></audio>