@extends('layouts.app')

@section('title', 'Audio Player | ' . $audioFile->title)

@section('styles')
<style>
    .audio-player-container {
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 30px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .audio-player {
        width: 100%;
    }
    
    .audio-title {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    .audio-description {
        color: #6c757d;
        margin-bottom: 20px;
    }
    
    .player-controls {
        margin-top: 20px;
    }
    
    .duration-text {
        font-size: 0.9rem;
        color: #6c757d;
    }
</style>
@endsection

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="audio-player-container">
                <div class="text-center mb-4">
                    <h1 class="audio-title">{{ $audioFile->title }}</h1>
                    @if ($audioFile->description)
                        <p class="audio-description">{{ $audioFile->description }}</p>
                    @endif
                </div>
                
                <div class="audio-player-wrapper">
                    <audio id="audioPlayer" class="audio-player" controls>
                        <source src="{{ url('/api/stream/' . $session->session_token) }}" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                </div>
                
                <div class="player-controls">
                    <div class="d-flex justify-content-between">
                        <span id="currentTime" class="duration-text">0:00</span>
                        <span id="duration" class="duration-text">0:00</span>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <a href="{{ route('access.form') }}" class="btn btn-outline-secondary">Back to Access Code</a>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const audioPlayer = document.getElementById('audioPlayer');
        const currentTimeElement = document.getElementById('currentTime');
        const durationElement = document.getElementById('duration');
        const sessionToken = '{{ $session->session_token }}';
        
        // Format time to MM:SS
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
        }
        
        // Update current time display
        audioPlayer.addEventListener('timeupdate', function() {
            currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
        });
        
        // Set duration when metadata is loaded
        audioPlayer.addEventListener('loadedmetadata', function() {
            durationElement.textContent = formatTime(audioPlayer.duration);
        });
        
        // Event listeners for tracking playback
        audioPlayer.addEventListener('play', function() {
            sendPlaybackStats('play', audioPlayer.currentTime);
        });
        
        audioPlayer.addEventListener('pause', function() {
            sendPlaybackStats('pause', audioPlayer.currentTime);
        });
        
        audioPlayer.addEventListener('seeking', function() {
            sendPlaybackStats('seek', audioPlayer.currentTime);
        });
        
        audioPlayer.addEventListener('ended', function() {
            sendPlaybackStats('end', audioPlayer.currentTime);
        });
        
        // Send playback statistics to server
        function sendPlaybackStats(eventType, position) {
            fetch('/api/stream/stats', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    token: sessionToken,
                    position: Math.round(position),
                    event_type: eventType
                })
            }).catch(error => console.error('Error sending playback stats:', error));
        }
        
        // Prevent right-click on player if configured
        if ({{ config('audio_player.allow_right_click') ? 'false' : 'true' }}) {
            audioPlayer.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                return false;
            });
        }
    });
</script>
@endsection
@endsection