@extends('layouts.app')

@section('title', 'VideoTube - Home')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Featured Videos Section -->
    @if($featuredVideos->count() > 0)
        <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">Featured Videos</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($featuredVideos as $video)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="relative">
                            <a href="{{ route('video.show', $video) }}">
                                @if($video->thumbnail)
                                    <img src="{{ Storage::url($video->thumbnail) }}" alt="{{ $video->title }}" 
                                         class="w-full h-48 object-cover">
                                @else
                                    <div class="w-full h-48 bg-gray-300 flex items-center justify-center">
                                        <i class="fas fa-play-circle text-4xl text-gray-500"></i>
                                    </div>
                                @endif
                                <div class="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-sm">
                                    {{ $video->duration ?? '00:00' }}
                                </div>
                            </a>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-lg mb-2 line-clamp-2">
                                <a href="{{ route('video.show', $video) }}" class="hover:text-red-600">
                                    {{ $video->title }}
                                </a>
                            </h3>
                            <div class="flex items-center justify-between text-sm text-gray-600">
                                <span class="bg-red-100 text-red-800 px-2 py-1 rounded">{{ $video->category->name }}</span>
                                <span><i class="fas fa-eye"></i> {{ number_format($video->views) }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    <!-- Categories Section -->
    <section class="mb-8">
        <h2 class="text-2xl font-bold mb-6">Browse by Category</h2>
        <div class="flex flex-wrap gap-3">
            @foreach($categories as $category)
                <a href="{{ route('category', $category) }}" 
                   class="bg-white px-4 py-2 rounded-full shadow hover:shadow-md transition-shadow">
                    {{ $category->name }} ({{ $category->approved_videos_count }})
                </a>
            @endforeach
        </div>
    </section>

    <!-- Latest Videos Section -->
    <section>
        <h2 class="text-2xl font-bold mb-6">Latest Videos</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($videos as $video)
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <div class="relative">
                        <a href="{{ route('video.show', $video) }}">
                            @if($video->thumbnail)
                                <img src="{{ Storage::url($video->thumbnail) }}" alt="{{ $video->title }}" 
                                     class="w-full h-40 object-cover">
                            @else
                                <div class="w-full h-40 bg-gray-300 flex items-center justify-center">
                                    <i class="fas fa-play-circle text-3xl text-gray-500"></i>
                                </div>
                            @endif
                            <div class="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs">
                                {{ $video->duration ?? '00:00' }}
                            </div>
                        </a>
                    </div>
                    <div class="p-3">
                        <h3 class="font-semibold mb-2 line-clamp-2">
                            <a href="{{ route('video.show', $video) }}" class="hover:text-red-600">
                                {{ $video->title }}
                            </a>
                        </h3>
                        <div class="flex items-center justify-between text-xs text-gray-600">
                            <span class="bg-gray-100 px-2 py-1 rounded">{{ $video->category->name }}</span>
                            <span><i class="fas fa-eye"></i> {{ number_format($video->views) }}</span>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            {{ $video->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $videos->links() }}
        </div>
    </section>
</div>
@endsection