@extends('layouts.app')

@section('title', $video->title . ' - Educational Videos')

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <div class="mb-3">
                <a href="{{ route('videos.index') }}" class="btn btn-secondary">← Back to Videos</a>
            </div>

            <h1 class="mb-3">{{ $video->title }}</h1>

            @if($video->classModel || $video->subject || $video->topic)
                <div class="mb-3">
                    @if($video->classModel)
                        <span class="badge bg-primary">{{ $video->classModel->name }}</span>
                    @endif
                    @if($video->subject)
                        <span class="badge bg-secondary">{{ $video->subject->name }}</span>
                    @endif
                    @if($video->topic)
                        <span class="badge bg-info">{{ $video->topic }}</span>
                    @endif
                    <span class="badge bg-warning">{{ $video->type }}</span>
                    @if($video->genre)
                        <span class="badge bg-success">{{ $video->genre }}</span>
                    @endif
                    @if($video->rating > 0)
                        <span class="badge bg-danger">⭐ {{ number_format($video->rating, 1) }}</span>
                    @endif
                    @if($video->is_premium)
                        <span class="badge bg-danger">🔒 Premium</span>
                    @endif
                </div>
            @endif

            <!-- Video Player -->
            <div class="card mb-4">
                <div class="card-body p-0">
                    @if($video->player_code)
                        <!-- Custom Player Code (Highest Priority) -->
                        <!-- Videosuite Script - load in body before content (exactly like test file) -->
                        <script type="text/javascript" src="https://videosuite-player-wrapper.vercel.app/assets"></script>
                        <div class="player-code-container" style="width: 100%;">
                            {!! trim($video->player_code) !!}
                        </div>
                    @elseif($video->video_hash)
                        <!-- Interactive Video Player (Hash-based) -->
                        <x-interactive-video-player 
                            :hash="$video->video_hash" 
                            :thumbnailUrl="$video->thumbnail_url" />
                    @else
                        <!-- Standard Video Player (URL or File) -->
                        <div class="position-relative" style="padding-top: 56.25%; background: #000; border-radius: 8px 8px 0 0; overflow: hidden;">
                            <!-- For uploaded video files -->
                            <video id="videoPlayerSingle" class="position-absolute top-0 start-0 w-100 h-100" controls style="display: none; border-radius: 8px 8px 0 0;">
                                Your browser does not support the video tag.
                            </video>
                            <!-- For external URLs (YouTube, Vimeo, etc.) -->
                            <iframe id="videoPlayerSingleIframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="position-absolute top-0 start-0 w-100 h-100" style="border-radius: 8px 8px 0 0;"></iframe>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Video Description -->
            @if($video->description)
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Description</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">{{ $video->description }}</p>
                    </div>
                </div>
            @endif

            <!-- Video Details -->
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">Video Details</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if($video->duration)
                            <div class="col-md-6 mb-3">
                                <strong>Duration:</strong> {{ $video->duration }}
                                @if($video->duration_seconds)
                                    <span class="text-muted">({{ gmdate('H:i:s', $video->duration_seconds) }})</span>
                                @endif
                            </div>
                        @endif
                        @if($video->age_group)
                            <div class="col-md-6 mb-3">
                                <strong>Age Group:</strong> {{ $video->age_group }}
                            </div>
                        @endif
                        @if($video->view_count > 0)
                            <div class="col-md-6 mb-3">
                                <strong>Views:</strong> {{ number_format($video->view_count) }}
                            </div>
                        @endif
                        @if($video->rating > 0)
                            <div class="col-md-6 mb-3">
                                <strong>Rating:</strong> ⭐ {{ number_format($video->rating, 1) }} / 5.0
                                @if($video->rating_count > 0)
                                    <span class="text-muted">({{ $video->rating_count }} {{ Str::plural('rating', $video->rating_count) }})</span>
                                @endif
                            </div>
                        @endif
                        <div class="col-md-6 mb-3">
                            <strong>Published:</strong> {{ $video->created_at->format('F d, Y') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Related Videos -->
            @if($relatedVideos->count() > 0)
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Related Videos</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            @foreach($relatedVideos as $relatedVideo)
                                <a href="{{ route('videos.show', $relatedVideo) }}" class="list-group-item list-group-item-action">
                                    <div class="d-flex gap-3">
                                        <div class="position-relative" style="width: 120px; height: 68px; flex-shrink: 0; background: #000; border-radius: 4px; overflow: hidden;">
                                            @if($relatedVideo->thumbnail_url)
                                                <img src="{{ $relatedVideo->thumbnail_url }}" alt="{{ $relatedVideo->title }}" 
                                                     class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;">
                                            @else
                                                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-white" 
                                                     style="font-size: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                                    📹
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1" style="font-size: 0.9rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;">{{ $relatedVideo->title }}</h6>
                                            <small class="text-muted">
                                                @if($relatedVideo->classModel){{ $relatedVideo->classModel->name }}@endif
                                                @if($relatedVideo->subject) • {{ $relatedVideo->subject->name }}@endif
                                                @if($relatedVideo->duration)<br>{{ $relatedVideo->duration }}@endif
                                            </small>
                                            @if($relatedVideo->is_premium)
                                                <br><span class="badge bg-danger" style="font-size: 0.7rem;">🔒 Premium</span>
                                            @endif
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
@if(!$video->player_code && !$video->video_hash)
<script>
// Initialize video player on page load (only for non-interactive videos)
document.addEventListener('DOMContentLoaded', function() {
    const videoUrl = @json($video->video_url);
    const iframeElement = document.getElementById('videoPlayerSingleIframe');
    const videoElement = document.getElementById('videoPlayerSingle');
    
    if (!videoUrl) return;
    
    // Check if it's an uploaded file (contains /storage/) or external URL
    const isUploadedFile = videoUrl.includes('/storage/') || videoUrl.includes('storage/videos/');
    
    if (isUploadedFile) {
        // Use video tag for uploaded files
        if (iframeElement) {
            iframeElement.style.display = 'none';
        }
        if (videoElement) {
            videoElement.style.display = 'block';
            videoElement.src = videoUrl;
            videoElement.load();
        }
    } else {
        // Use iframe for external URLs (YouTube, Vimeo, etc.)
        if (videoElement) {
            videoElement.style.display = 'none';
        }
        if (iframeElement) {
            iframeElement.style.display = 'block';
            
            // Convert video URL to embed URL (support YouTube and Vimeo)
            let embedUrl = videoUrl;
            if (videoUrl.includes('youtube.com/watch') || videoUrl.includes('youtu.be/')) {
                const videoIdMatch = videoUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/);
                if (videoIdMatch && videoIdMatch[1]) {
                    embedUrl = `https://www.youtube.com/embed/${videoIdMatch[1]}`;
                }
            } else if (videoUrl.includes('vimeo.com/')) {
                const videoIdMatch = videoUrl.match(/vimeo\.com\/(\d+)/);
                if (videoIdMatch && videoIdMatch[1]) {
                    embedUrl = `https://player.vimeo.com/video/${videoIdMatch[1]}`;
                }
            }
            
            // Set iframe source
            iframeElement.src = embedUrl + (embedUrl.includes('?') ? '&' : '?') + 'autoplay=1';
        }
    }
});
</script>
@endif
@endpush
@endsection