@extends('layouts.app')

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

@section('content')
<div class="relative">
    <div class="h-[60vh] bg-cover bg-center" style="background-image: url('{{ Storage::url($content->banner) }}');">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent"></div>
    </div>

    <div class="container mx-auto px-4 relative -mt-32 z-10">
        <div class="flex flex-col md:flex-row gap-8">
            <div class="w-64 flex-shrink-0">
                <img src="{{ Storage::url($content->poster) }}" class="rounded-xl shadow-2xl w-full" alt="{{ $content->title }}">
            </div>
            <div class="flex-1">
                <h1 class="text-4xl font-bold">{{ $content->title }}</h1>
                <div class="flex flex-wrap gap-2 mt-2">
                    @if($content->type == 'series' || $content->type == 'anime')
                        <span class="bg-red-600 px-2 py-1 rounded text-sm">{{ $content->status == 'ongoing' ? 'Ongoing' : 'Completed' }}</span>
                    @endif
                    <span class="bg-gray-700 px-2 py-1 rounded text-sm">{{ $content->release_year }}</span>
                    <span class="bg-gray-700 px-2 py-1 rounded text-sm">{{ $content->language }}</span>
                    @if(str_contains(strtolower($content->language), 'dub'))
                        <span class="bg-blue-600 px-2 py-1 rounded text-sm">DUB</span>
                    @endif
                    @if(str_contains(strtolower($content->language), 'sub'))
                        <span class="bg-green-600 px-2 py-1 rounded text-sm">SUB</span>
                    @endif
                </div>
                <p class="mt-4 text-gray-300">{{ $content->description }}</p>
                <div class="mt-4">
                    <strong>Genres:</strong>
                    @foreach($content->genres as $genre)
                        <a href="{{ route('search', ['genre' => $genre->slug]) }}" class="text-red-400 hover:underline">{{ $genre->name }}</a>@if(!$loop->last), @endif
                    @endforeach
                </div>
                <div class="mt-6 flex flex-wrap gap-4">
                    <a href="{{ route('watch', $content->slug) }}" class="bg-red-600 hover:bg-red-700 px-8 py-3 rounded-lg font-bold">Watch Now</a>
                    <button onclick="toggleWatchlist({{ $content->id }})" class="bg-gray-800 hover:bg-gray-700 px-8 py-3 rounded-lg">
                        @if(auth()->check() && auth()->user()->watchlist()->where('content_id', $content->id)->exists())
                            Remove from Watchlist
                        @else
                            + Watchlist
                        @endif
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if($content->type != 'movie')
    <div class="container mx-auto px-4 mt-12">
        <h2 class="text-2xl font-bold mb-4">Episodes</h2>
        @foreach($content->seasons as $season)
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-2">Season {{ $season->season_number }} @if($season->title) - {{ $season->title }} @endif</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    @foreach($season->episodes as $episode)
                        <a href="{{ route('watch', ['content' => $content->slug, 'episode' => $episode->id]) }}" class="group">
                            <div class="relative rounded-lg overflow-hidden">
                                <img src="{{ Storage::url($episode->thumbnail) }}" class="w-full aspect-video object-cover group-hover:scale-105 transition">
                                <div class="absolute bottom-0 left-0 bg-black/70 px-2 py-1 text-sm">Ep {{ $episode->episode_number }}</div>
                            </div>
                            <p class="mt-1 text-sm truncate">{{ $episode->title }}</p>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
    @endif

    <div class="container mx-auto px-4 mt-12">
        <h3 class="text-2xl font-bold mb-4">Comments</h3>
        @auth
            <form action="{{ route('comment.store', $content) }}" method="POST" class="mb-6">
                @csrf
                <textarea name="body" rows="3" class="w-full bg-gray-800 rounded-lg p-3" placeholder="Add a comment..."></textarea>
                <button type="submit" class="mt-2 bg-red-600 px-4 py-2 rounded">Post Comment</button>
            </form>
        @endauth
        @foreach($content->comments()->with('user')->latest()->get() as $comment)
            <div class="bg-gray-800 rounded-lg p-4 mb-3">
                <div class="flex items-center space-x-2">
                    <strong>{{ $comment->user->name }}</strong>
                    <span class="text-gray-400 text-sm">{{ $comment->created_at->diffForHumans() }}</span>
                </div>
                <p class="mt-1">{{ $comment->body }}</p>
            </div>
        @endforeach
    </div>
</div>

@push('scripts')
<script>
    function toggleWatchlist(contentId) {
        fetch(`/watchlist/${contentId}/toggle`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({})
        }).then(response => response.json()).then(data => {
            location.reload();
        });
    }
</script>
@endpush
@endsection