@if(!empty($continueWatching))
<script async="async" data-cfasync="false" src="https://confessinvaluable.com/a8548d9431b129aca6682d1f99b3985a/invoke.js"></script>
<div id="container-a8548d9431b129aca6682d1f99b3985a"></div>

<div class="px-6 lg:px-8 mb-8">
    <h2 class="text-white text-xl mb-4 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M8 5v10l7-5z"/>
        </svg>
        Continue Watching
    </h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        @foreach($continueWatching as $item)
            <div class="relative group">
                <a href="{{ $item['episode_url'] }}" class="block relative">
                    <!-- Drama Cover with Progress -->
                    <div class="relative">
                        <img src="{{ $item['book_cover'] ?? asset('og.png') }}"
                             alt="{{ $item['book_name'] }}"
                             class="w-full h-48 sm:h-56 object-cover rounded-lg bg-gray-800 transition-transform duration-200 group-hover:scale-105">

                        <!-- Progress Bar -->
                        @if($item['progress_percentage'] > 0)
                            <div class="absolute bottom-0 left-0 right-0 bg-gray-900/80 px-2 py-1 rounded-b-lg">
                                <div class="w-full bg-gray-700 rounded-full h-1.5">
                                    <div class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
                                         style="width: {{ min($item['progress_percentage'], 100) }}%"></div>
                                </div>
                                <div class="text-xs text-gray-300 mt-1">
                                    Episode {{ $item['last_episode_index'] }}
                                    @if($item['total_episodes'])
                                        / {{ $item['total_episodes'] }}
                                    @endif
                                </div>
                            </div>
                        @endif

                        <!-- Continue Icon -->
                        <div class="absolute top-2 right-2 bg-blue-600 text-white p-1.5 rounded-full opacity-90">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M8 5v10l7-5z"/>
                            </svg>
                        </div>
                    </div>

                    <!-- Drama Info -->
                    <div class="mt-2">
                        <h3 class="text-white text-sm font-medium line-clamp-2 group-hover:text-blue-300 transition-colors">
                            {{ $item['book_name'] }}
                        </h3>

                        @if($item['last_episode_title'])
                            <p class="text-gray-400 text-xs mt-1 line-clamp-1">
                                {{ $item['last_episode_title'] }}
                            </p>
                        @endif

                        <p class="text-gray-500 text-xs mt-1">
                            {{ $item['last_watched_human'] }}
                        </p>
                    </div>
                </a>

                <!-- Quick Actions on Hover -->
                <div class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div class="flex space-x-1">
                        <!-- Drama Detail Link -->
                        <a href="{{ route('drama.detail', ['lang' => app()->getLocale(), 'bookId' => $item['book_id']]) }}"
                           class="bg-gray-800/90 text-white p-1.5 rounded-full hover:bg-gray-700 transition-colors"
                           title="Drama Details">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endif