@extends('layouts.app')

@section('title', $episode->title . ' - ' . $content->title)

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="aspect-video bg-black rounded-xl overflow-hidden">
        <video id="player" controls crossorigin playsinline>
            <source src="{{ $source->url }}" type="{{ $source->type == 'mp4' ? 'video/mp4' : ($source->type == 'm3u8' ? 'application/x-mpegURL' : 'video/mp4') }}">
            @if($source->subtitle_url)
                <track kind="subtitles" src="{{ $source->subtitle_url }}" srclang="en" label="English">
            @endif
        </video>
    </div>

    <div class="mt-4 flex justify-between items-center flex-wrap gap-4">
        <div>
            <h1 class="text-2xl font-bold">{{ $episode->title }}</h1>
            <p class="text-gray-400">Season {{ $season->season_number }} Episode {{ $episode->episode_number }}</p>
        </div>
        <div class="flex gap-2">
            @if($prevEpisode)
                <a href="{{ route('watch', ['content' => $content->slug, 'episode' => $prevEpisode->id]) }}" class="bg-gray-800 px-4 py-2 rounded hover:bg-gray-700">Previous</a>
            @endif
            @if($nextEpisode)
                <a href="{{ route('watch', ['content' => $content->slug, 'episode' => $nextEpisode->id]) }}" class="bg-red-600 px-4 py-2 rounded hover:bg-red-700">Next</a>
            @endif
        </div>
    </div>

    <div class="mt-4">
        <label class="mr-2">Quality:</label>
        <select id="quality-selector" class="bg-gray-800 rounded p-1">
            @foreach($episode->sources as $src)
                <option value="{{ $src->url }}" data-type="{{ $src->type }}" {{ $src->is_default ? 'selected' : '' }}>{{ $src->quality }} @if($src->language != 'original') - {{ $src->language }} @endif</option>
            @endforeach
        </select>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
@endpush

@push('scripts')
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
    const player = new Plyr('#player', {
        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'fullscreen'],
        settings: ['captions', 'quality', 'speed'],
        speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
    });

    document.getElementById('quality-selector').addEventListener('change', function(e) {
        const url = e.target.value;
        const type = e.target.options[e.target.selectedIndex].dataset.type;
        player.source = {
            type: 'video',
            sources: [{ src: url, type: type == 'mp4' ? 'video/mp4' : 'application/x-mpegURL' }]
        };
    });

    let saveTimeout;
    player.on('timeupdate', () => {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(() => {
            fetch('{{ route("watch.progress") }}', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                body: JSON.stringify({episode_id: {{ $episode->id }}, time: Math.floor(player.currentTime)})
            });
        }, 3000);
    });

    @if(auth()->check() && $history = auth()->user()->watchHistories()->where('episode_id', $episode->id)->first())
        player.on('loadedmetadata', () => {
            player.currentTime = {{ $history->last_watched_time }};
        });
    @endif
</script>
@endpush
@endsection