@extends('layouts.app')

@section('title', 'Educational Videos - Primary Learning Tutor')

@section('content')
<div class="container py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4 fw-bold mb-3">📺 Educational Videos</h1>
            <p class="lead text-muted">Watch interactive videos, stories, and lessons to enhance your learning experience!</p>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">🔍 Filter Videos</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('videos.index') }}" class="row g-3">
                <div class="col-12 col-md-6 col-lg-3">
                    <label for="class_id" class="form-label">Class/Level</label>
                    <select class="form-select" id="class_id" name="class_id" onchange="this.form.submit()">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                {{ $class->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <label for="subject_id" class="form-label">Subject</label>
                    <select class="form-select" id="subject_id" name="subject_id" onchange="this.form.submit()">
                        <option value="">All Subjects</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" {{ request('subject_id') == $subject->id ? 'selected' : '' }}>
                                {{ $subject->classModel->name }} - {{ $subject->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <label for="type" class="form-label">Type</label>
                    <select class="form-select" id="type" name="type" onchange="this.form.submit()">
                        <option value="">All Types</option>
                        <option value="Cartoon Style" {{ request('type') == 'Cartoon Style' ? 'selected' : '' }}>Cartoon Style</option>
                        <option value="Documentary" {{ request('type') == 'Documentary' ? 'selected' : '' }}>Documentary</option>
                        <option value="Short Story" {{ request('type') == 'Short Story' ? 'selected' : '' }}>Short Story</option>
                    </select>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <label for="genre" class="form-label">Genre</label>
                    <input type="text" class="form-control" id="genre" name="genre" 
                           value="{{ request('genre') }}" placeholder="e.g., Lesson">
                </div>
                <div class="col-12 col-md-4 col-lg-2">
                    <label for="topic" class="form-label">Topic</label>
                    <input type="text" class="form-control" id="topic" name="topic" 
                           value="{{ request('topic') }}" placeholder="e.g., Addition">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary me-2 mb-2">Apply Filters</button>
                    <a href="{{ route('videos.index') }}" class="btn btn-secondary mb-2">Clear Filters</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Featured Videos Section -->
    @if($featuredVideos->count() > 0)
        <div class="mb-5">
            <h3 class="mb-3">⭐ Featured Videos</h3>
            <div class="row g-4">
                @foreach($featuredVideos as $video)
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="video-card-landing bg-white rounded shadow-sm overflow-hidden h-100" 
                             @if($video->player_code || $video->video_hash)
                                 onclick="window.location.href='{{ route('videos.show', $video) }}'"
                             @else
                                 onclick="openVideoModalPublic('{{ addslashes($video->title) }}', '{{ $video->video_url }}', '{{ $video->description ?? '' }}', {{ $video->is_premium && !auth()->check() ? 'true' : 'false' }})"
                             @endif 
                             style="cursor: pointer;">
                            <div class="position-relative" style="padding-top: 56.25%; background: #000; overflow: hidden;">
                                @if($video->thumbnail_url)
                                    <img src="{{ $video->thumbnail_url }}" alt="{{ $video->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: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        📹
                                    </div>
                                @endif
                                <div class="position-absolute top-50 start-50 translate-middle opacity-0 video-card-landing-hover" style="transition: opacity 0.2s;">
                                    <span class="bg-white bg-opacity-75 rounded-circle p-3 d-inline-flex align-items-center justify-content-center" 
                                          style="width: 60px; height: 60px; font-size: 1.5rem;">▶</span>
                                </div>
                                @if($video->duration)
                                    <span class="position-absolute bottom-0 end-0 m-2 bg-dark bg-opacity-75 text-white px-2 py-1 rounded" 
                                          style="font-size: 0.75rem;">{{ $video->duration }}</span>
                                @endif
                                @if($video->is_premium)
                                    <span class="position-absolute top-0 start-0 m-2 bg-danger text-white px-2 py-1 rounded fw-bold" 
                                          style="font-size: 0.75rem;">🔒 Premium</span>
                                @endif
                                <span class="position-absolute top-0 end-0 m-2 bg-warning text-dark px-2 py-1 rounded fw-bold" 
                                      style="font-size: 0.75rem;">⭐ Featured</span>
                            </div>
                            <div class="p-3">
                                <h6 class="fw-bold mb-2" style="font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $video->title }}</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2" style="font-size: 0.75rem;">
                                    <span class="badge bg-primary">{{ $video->type }}</span>
                                    @if($video->genre)
                                        <span class="badge bg-secondary">{{ $video->genre }}</span>
                                    @endif
                                    @if($video->rating > 0)
                                        <span class="badge bg-warning text-dark">⭐ {{ number_format($video->rating, 1) }}</span>
                                    @endif
                                </div>
                                @if($video->classModel || $video->subject)
                                    <p class="text-muted mb-0 small">
                                        @if($video->classModel){{ $video->classModel->name }}@endif
                                        @if($video->subject) • {{ $video->subject->name }}@endif
                                        @if($video->topic) • {{ $video->topic }}@endif
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- All Videos Section -->
    <div class="mb-4">
        <h3 class="mb-3">All Videos</h3>
        @if($videos->count() > 0)
            <div class="row g-4">
                @foreach($videos as $video)
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="video-card-landing bg-white rounded shadow-sm overflow-hidden h-100" 
                             @if($video->player_code || $video->video_hash)
                                 onclick="window.location.href='{{ route('videos.show', $video) }}'"
                             @else
                                 onclick="openVideoModalPublic('{{ addslashes($video->title) }}', '{{ $video->video_url }}', '{{ $video->description ?? '' }}', {{ $video->is_premium && !auth()->check() ? 'true' : 'false' }})"
                             @endif 
                             style="cursor: pointer;">
                            <div class="position-relative" style="padding-top: 56.25%; background: #000; overflow: hidden;">
                                @if($video->thumbnail_url)
                                    <img src="{{ $video->thumbnail_url }}" alt="{{ $video->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: 3rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        📹
                                    </div>
                                @endif
                                <div class="position-absolute top-50 start-50 translate-middle opacity-0 video-card-landing-hover" style="transition: opacity 0.2s;">
                                    <span class="bg-white bg-opacity-75 rounded-circle p-3 d-inline-flex align-items-center justify-content-center" 
                                          style="width: 60px; height: 60px; font-size: 1.5rem;">▶</span>
                                </div>
                                @if($video->duration)
                                    <span class="position-absolute bottom-0 end-0 m-2 bg-dark bg-opacity-75 text-white px-2 py-1 rounded" 
                                          style="font-size: 0.75rem;">{{ $video->duration }}</span>
                                @endif
                                @if($video->is_premium)
                                    <span class="position-absolute top-0 start-0 m-2 bg-danger text-white px-2 py-1 rounded fw-bold" 
                                          style="font-size: 0.75rem;">🔒 Premium</span>
                                @endif
                            </div>
                            <div class="p-3">
                                <h6 class="fw-bold mb-2" style="font-size: 0.95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $video->title }}</h6>
                                <div class="d-flex flex-wrap gap-2 mb-2" style="font-size: 0.75rem;">
                                    <span class="badge bg-primary">{{ $video->type }}</span>
                                    @if($video->genre)
                                        <span class="badge bg-secondary">{{ $video->genre }}</span>
                                    @endif
                                    @if($video->rating > 0)
                                        <span class="badge bg-warning text-dark">⭐ {{ number_format($video->rating, 1) }}</span>
                                    @endif
                                </div>
                                @if($video->classModel || $video->subject)
                                    <p class="text-muted mb-0 small">
                                        @if($video->classModel){{ $video->classModel->name }}@endif
                                        @if($video->subject) • {{ $video->subject->name }}@endif
                                        @if($video->topic) • {{ $video->topic }}@endif
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-4">
                {{ $videos->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <div style="font-size: 4rem; margin-bottom: 16px;">📺</div>
                <h4>No videos found</h4>
                <p class="text-muted">Try adjusting your filters or check back later for new videos!</p>
                <a href="{{ route('videos.index') }}" class="btn btn-primary">View All Videos</a>
            </div>
        @endif
    </div>
</div>

<!-- Video Modal for Public Page -->
<div class="modal fade" id="videoModalPublic" tabindex="-1" aria-labelledby="videoModalPublicLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="videoModalPublicTitle">Video Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeVideoModalPublic()"></button>
            </div>
            <div class="modal-body">
                <div class="position-relative" style="padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden;">
                    <!-- For uploaded video files -->
                    <video id="videoPlayerFilePublic" class="position-absolute top-0 start-0 w-100 h-100" controls style="display: none; border-radius: 8px;">
                        Your browser does not support the video tag.
                    </video>
                    <!-- For external URLs (YouTube, Vimeo, etc.) -->
                    <iframe id="videoPlayerPublic" 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;"></iframe>
                </div>
                <div id="videoDescriptionPublic" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.video-card-landing {
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-card-landing:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.video-card-landing:hover .video-card-landing-hover {
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .form-label {
        font-size: 0.9rem;
    }
    
    .form-select,
    .form-control {
        font-size: 0.9rem;
    }
    
    .video-card-landing {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Open video modal for public page
function openVideoModalPublic(title, videoUrl, description, isPremium) {
    // Check if premium and not logged in
    if (isPremium) {
        alert('This video is for premium users only. Please login or upgrade to access.');
        window.location.href = '{{ route("login") }}';
        return;
    }

    const modalElement = document.getElementById('videoModalPublic');
    const titleElement = document.getElementById('videoModalPublicTitle');
    const iframeElement = document.getElementById('videoPlayerPublic');
    const videoElement = document.getElementById('videoPlayerFilePublic');
    const descriptionElement = document.getElementById('videoDescriptionPublic');
    
    if (!modalElement) return;
    
    // Set title
    if (titleElement) {
        titleElement.textContent = title;
    }
    
    // Check if it's an uploaded file (contains /storage/) or external URL
    const isUploadedFile = videoUrl && (videoUrl.includes('/storage/') || videoUrl.includes('storage/videos/'));
    
    if (isUploadedFile) {
        // Use video tag for uploaded files
        if (iframeElement) {
            iframeElement.style.display = 'none';
            iframeElement.src = ''; // Clear iframe
        }
        if (videoElement) {
            videoElement.style.display = 'block';
            videoElement.src = videoUrl;
            videoElement.load(); // Reload video
        }
    } else {
        // Use iframe for external URLs (YouTube, Vimeo, etc.)
        if (videoElement) {
            videoElement.style.display = 'none';
            videoElement.src = ''; // Clear video
        }
        if (iframeElement) {
            iframeElement.style.display = 'block';
            
            // Convert video URL to embed URL (support YouTube and Vimeo)
            let embedUrl = videoUrl;
            if (videoUrl && (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 && 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';
        }
    }
    
    // Set description
    if (descriptionElement) {
        descriptionElement.innerHTML = description ? `<p>${description.replace(/\n/g, '<br>')}</p>` : '';
    }
    
    // Show modal
    if (typeof bootstrap !== 'undefined') {
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
    }
}

// Close video modal for public page
function closeVideoModalPublic() {
    const modalElement = document.getElementById('videoModalPublic');
    const iframeElement = document.getElementById('videoPlayerPublic');
    const videoElement = document.getElementById('videoPlayerFilePublic');
    
    if (iframeElement) {
        // Stop iframe video by clearing src
        iframeElement.src = '';
    }
    
    if (videoElement) {
        // Stop video tag by pausing and clearing src
        videoElement.pause();
        videoElement.src = '';
        videoElement.load();
    }
    
    if (modalElement && typeof bootstrap !== 'undefined') {
        const modal = bootstrap.Modal.getInstance(modalElement);
        if (modal) {
            modal.hide();
        }
    }
}
</script>
@endpush