@push('styles')
<style>
    .video-preview-wrapper {
        position: relative;
        width: 100%;
        height: 350px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
    }
    .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    background: #b7b7b791;
    padding: 20px;
    border-radius: 999px;
    padding-left: 30px;
}
</style>
 @endpush   
</style>
<div class="video-container mb-4">
    @foreach($exercise->content as $key => $content)
        {{-- Thumbnail Preview --}}
        <div id="videoPreview-{{ $key }}"
            class="video-preview-wrapper"
            style="background-image: url('{{ asset('storage/' . ($content->thumbnail ?? 'thumbnail_file/default.jpg')) }}');"
            onclick="loadPlayerJS('{{ asset('storage/' . $content->video_url) }}', {{ $key }})">
            <i class="fa fa-play play-icon"></i>
        </div>

        {{-- PlayerJS container --}}
        <div id="playerWrapper-{{ $key }}" style="display: none;">
            <div id="player-{{ $key }}"></div>
        </div>

        {{-- Description --}}
        <div class="exercise-description">
            {!! $content->description !!}
        </div>
    @endforeach
</div>


@push('scripts')
<script src="{{asset('front_assets/js/playerjs.js')}}" type="text/javascript"></script>
<script>
    function loadPlayerJS(videoUrl, index) {
        const preview = document.getElementById('videoPreview-' + index);
        const playerWrapper = document.getElementById('playerWrapper-' + index);
        const playerDivId = 'player-' + index;

        // Hide preview and show player container
        preview.style.display = 'none';
        playerWrapper.style.display = 'block';

        // Initialize PlayerJS
        new Playerjs({
            id: playerDivId,
            file: videoUrl
        });
    }
</script>

@endpush