@php
    $width = get_player_settings('watermark_width');
    $height = get_player_settings('watermark_height');
    $top = get_player_settings('watermark_top');
    $left = get_player_settings('watermark_left');
    $logo = get_player_settings('watermark_logo');
    $opacity = get_player_settings('watermark_opacity');
@endphp

<div id="watermarkLabelLogo" class="watermark-container" style="width:{{ $width }}px; height:{{ $height }}px; top:{{ $top }}px; left:{{ $left }}px; opacity:.{{ $opacity / 10 }}">
    <img src="{{ get_image($logo) }}" style="width:{{ $width }}px; height:{{ $height }}px;">
</div>
<div id="watermarkStudentInfo" class="watermark-container d-none" style="width:{{ $width }}px; height:{{ $height }}px; top:{{ $top }}px; left:{{ $left }}px; opacity:.{{ $opacity / 10 }}">
    <div class="d-flex">
        <img class="image-30" src="{{ get_image(Auth()->user()->photo) }}" style="width:{{ $width }}px; height:{{ $height }}px;">
        <div class="ps-1">
            <p class="p-0 m-0 text-10px">{{ Auth()->user()->name }}</p>
            <p class="p-0 m-0 text-10px" style="margin-top: -5px !important;">{{ Auth()->user()->email }}</p>
        </div>
    </div>
</div>

<script>
    setInterval(() => {
        if ($('#watermarkLabelLogo').hasClass('d-none')) {
            $('.watermark-container').addClass('d-none');
            $('#watermarkLabelLogo').removeClass('d-none');
        } else {
            $('.watermark-container').addClass('d-none');
            $('#watermarkStudentInfo').removeClass('d-none');
        }
    }, {{ get_player_settings('animation_speed') * 1000}});
</script>


<style>    

    /* Watermark moving animation */
    @keyframes moveWatermark {
        0% {
            top: 20px;
            left: 20px;
        }

        25% {
            top: 20px;
            left: calc(100% - 150px);
            /* Move right */
        }

        50% {
            top: calc(100% - 50px);
            /* Move down */
            left: calc(100% - 150px);
        }

        75% {
            top: calc(100% - 50px);
            left: 20px;
            /* Move left */
        }

        100% {
            top: 20px;
            left: 20px;
            /* Back to the start */
        }
    }

    .watermark-container {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 20;
        font-size: 18px;
        color: white;
        pointer-events: none;
        /* Make sure the watermark doesn't interfere with video controls */
        animation: moveWatermark {{ get_player_settings('animation_speed') }}s linear infinite !important;
    }
</style>