@extends('layouts.app')

@section('title', 'Truyện Mới Cập Nhật - Truyện Hay')
@section('description', 'Danh sách truyện vừa cập nhật chương mới nhất. Theo dõi và đọc ngay những chương mới nhất của các bộ truyện yêu thích.')

@section('content')
{{-- Hero Header with Animation --}}
<div class="relative bg-gradient-to-br from-green-500/10 via-emerald-500/5 to-background-dark border-b border-gray-800 overflow-hidden">
    {{-- Animated Background --}}
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-1/4 w-72 h-72 bg-green-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
        <div class="absolute top-0 right-1/4 w-72 h-72 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
        <div class="absolute bottom-0 left-1/3 w-72 h-72 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl py-12 relative z-10">
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/20 mb-4 animate-pulse">
                <span class="material-symbols-outlined text-4xl text-green-500">update</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">
                Truyện Mới Cập Nhật
            </h1>
            <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                Cập nhật liên tục 24/7 - Đọc ngay những chương mới nhất
            </p>
        </div>

        {{-- Stats Cards --}}
        @if(isset($stats))
        <div class="grid grid-cols-3 gap-4 max-w-4xl mx-auto">
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-xl p-4 border border-green-500/20 text-center hover:border-green-500/50 transition-all group">
                <div class="text-2xl md:text-3xl font-bold text-green-500 mb-1 group-hover:scale-110 transition-transform">
                    {{ number_format($stats['total_updated_today']) }}
                </div>
                <div class="text-xs md:text-sm text-gray-400">Cập nhật hôm nay</div>
            </div>
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-xl p-4 border border-emerald-500/20 text-center hover:border-emerald-500/50 transition-all group">
                <div class="text-2xl md:text-3xl font-bold text-emerald-500 mb-1 group-hover:scale-110 transition-transform">
                    {{ number_format($stats['total_updated_this_week']) }}
                </div>
                <div class="text-xs md:text-sm text-gray-400">Tuần này</div>
            </div>
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-xl p-4 border border-cyan-500/20 text-center hover:border-cyan-500/50 transition-all group">
                <div class="text-2xl md:text-3xl font-bold text-cyan-500 mb-1 group-hover:scale-110 transition-transform">
                    {{ number_format($stats['total_chapters_today']) }}
                </div>
                <div class="text-xs md:text-sm text-gray-400">Chương mới</div>
            </div>
        </div>
        @endif
    </div>
</div>

<div class="container mx-auto px-4 lg:px-8 max-w-7xl py-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {{-- Main Content --}}
        <div class="lg:col-span-9">
            {{-- Filter Bar --}}
            <div class="bg-gradient-to-r from-surface-dark to-surface-dark/50 rounded-2xl p-6 border border-gray-800 mb-8 backdrop-blur-sm">
                <div class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-outlined text-green-500 text-2xl">filter_list</span>
                        <h2 class="text-white font-bold text-lg">Bộ lọc</h2>
                    </div>

                    <div class="flex flex-wrap gap-3 w-full md:w-auto">
                        {{-- Status Filter --}}
                        <div class="flex gap-2">
                            <a href="{{ route('recently.updated', array_merge(request()->except('status'), ['status' => ''])) }}"
                               class="px-4 py-2 rounded-lg text-sm font-semibold transition-all {{ !$status ? 'bg-green-500 text-white shadow-lg shadow-green-500/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                                Tất cả
                            </a>
                            <a href="{{ route('recently.updated', array_merge(request()->except('status'), ['status' => 'ongoing'])) }}"
                               class="px-4 py-2 rounded-lg text-sm font-semibold transition-all {{ $status === 'ongoing' ? 'bg-green-500 text-white shadow-lg shadow-green-500/30' : 'bg-gray-800 text-gray-300 hover:bg-gray-700' }}">
                                Đang phát hành
                            </a>
                        </div>

                        {{-- Category Dropdown --}}
                        <div class="relative group">
                            <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 transition-all flex items-center gap-2">
                                <span class="material-symbols-outlined text-base">category</span>
                                {{ $selectedCategory ? $selectedCategory->name : 'Thể loại' }}
                                <span class="material-symbols-outlined text-base">expand_more</span>
                            </button>
                            <div class="absolute top-full right-0 mt-2 bg-surface-dark rounded-xl border border-gray-800 shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 min-w-[200px] max-h-[400px] overflow-y-auto custom-scrollbar">
                                <div class="p-2">
                                    <a href="{{ route('recently.updated', request()->except('category')) }}"
                                       class="block px-4 py-2 rounded-lg text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-all {{ !$categorySlug ? 'bg-gray-800 text-white' : '' }}">
                                        Tất cả thể loại
                                    </a>
                                    @foreach($categories as $category)
                                    <a href="{{ route('recently.updated', array_merge(request()->except('category'), ['category' => $category->slug])) }}"
                                       class="block px-4 py-2 rounded-lg text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-all {{ $categorySlug === $category->slug ? 'bg-gray-800 text-white' : '' }}">
                                        {{ $category->name }}
                                    </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Comics List --}}
            @if($comics->count() > 0)
                <div class="space-y-4 mb-8">
                    @foreach($comics as $comic)
                    <div class="group bg-gradient-to-r from-surface-dark to-surface-dark/50 rounded-2xl overflow-hidden border border-gray-800 hover:border-green-500/50 transition-all duration-300 hover:shadow-xl hover:shadow-green-500/10">
                        <div class="flex gap-4 p-4">
                            {{-- Thumbnail --}}
                            <a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}"
                               class="flex-shrink-0 relative overflow-hidden rounded-xl group/thumb">
                                <img src="https://img.otruyenapi.com/uploads/comics/{{ $comic->thumb_url }}"
                                     alt="{{ $comic->title }}"
                                     class="w-24 h-32 md:w-32 md:h-40 object-cover group-hover/thumb:scale-110 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover/thumb:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-2">
                                    <span class="text-white text-xs font-bold">Xem chi tiết</span>
                                </div>
                                {{-- New Badge --}}
                                @if($comic->latest_chapter_at && \Carbon\Carbon::parse($comic->latest_chapter_at)->diffInHours(now()) < 24)
                                <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-pulse">
                                    NEW
                                </div>
                                @endif
                            </a>

                            {{-- Content --}}
                            <div class="flex-1 min-w-0 flex flex-col">
                                {{-- Title & Categories --}}
                                <div class="mb-3">
                                    <a href="{{ route('comics.detail', ['slug' => $comic->slug]) }}"
                                       class="text-white font-bold text-lg md:text-xl hover:text-green-500 transition-colors line-clamp-2 mb-2 block">
                                        {{ $comic->title }}
                                    </a>
                                    <div class="flex flex-wrap items-center gap-2 text-sm">
                                        <a href="{{ route('authors.detail', ['slug' => $comic->author->slug]) }}"
                                           class="text-gray-400 hover:text-green-500 transition-colors flex items-center gap-1">
                                            <span class="material-symbols-outlined text-base">person</span>
                                            {{ $comic->author->bio ?? $comic->author->name }}
                                        </a>
                                        <span class="text-gray-600">•</span>
                                        @foreach($comic->categories->take(3) as $category)
                                        <a href="{{ route('recently.updated', ['category' => $category->slug]) }}"
                                           class="px-2 py-1 bg-gray-800 hover:bg-green-500 text-gray-300 hover:text-white text-xs rounded-md transition-all">
                                            {{ $category->name }}
                                        </a>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- Description --}}
                                <p class="text-gray-400 text-sm line-clamp-2 mb-3 hidden md:block">
                                    {{ $comic->description }}
                                </p>

                                {{-- Latest Chapters --}}
                                <div class="mt-auto">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="material-symbols-outlined text-green-500 text-sm">schedule</span>
                                        <span class="text-gray-500 text-xs font-semibold uppercase">Chương mới nhất</span>
                                    </div>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($comic->chapters->take(3) as $chapter)
                                        {{-- {{ dd($chapter) }}  --}}
                                        <a href="{{ route('comics.reading', ['slug' => $chapter->slug]) }}"
                                           class="group/chapter flex items-center gap-2 px-3 py-2 bg-gray-800/50 hover:bg-green-500 rounded-lg border border-gray-700 hover:border-green-500 transition-all">
                                            <span class="text-white text-sm font-semibold">C.{{ $chapter->chapter_number }}</span>
                                            <span class="text-xs text-gray-400 group-hover/chapter:text-white">
                                                {{ \Carbon\Carbon::parse($chapter->created_at)->diffForHumans() }}
                                            </span>
                                        </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Stats --}}
                            <div class="hidden xl:flex flex-col items-end justify-between text-right">
                                <div class="space-y-2">
                                    <div class="flex items-center gap-2 text-yellow-500">
                                        <span class="material-symbols-outlined text-base">star</span>
                                        <span class="text-sm font-bold">{{ number_format($comic->rating ?? 0, 1) }}</span>
                                    </div>
                                    <div class="flex items-center gap-2 text-blue-500">
                                        <span class="material-symbols-outlined text-base">visibility</span>
                                        <span class="text-sm font-bold">{{ number_format($comic->view_count) }}</span>
                                    </div>
                                    <div class="flex items-center gap-2 text-purple-500">
                                        <span class="material-symbols-outlined text-base">favorite</span>
                                        <span class="text-sm font-bold">{{ number_format($comic->follow_count ?? 0) }}</span>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <span class="px-3 py-1 rounded-full text-xs font-bold {{ $comic->status === 'completed' ? 'bg-cyan-500/20 text-cyan-500' : 'bg-green-500/20 text-green-500' }}">
                                        {{ $comic->status === 'completed' ? 'Hoàn thành' : 'Đang phát hành' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="mt-8">
                    {{ $comics->links('pagination::tailwind') }}
                </div>
            @else
                {{-- Empty State --}}
                <div class="text-center py-20">
                    <div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-gray-800 mb-6">
                        <span class="material-symbols-outlined text-6xl text-gray-600">search_off</span>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-2">Không tìm thấy truyện</h3>
                    <p class="text-gray-400 mb-6">Thử thay đổi bộ lọc hoặc quay lại sau</p>
                    <a href="{{ route('recently.updated') }}"
                       class="inline-flex items-center gap-2 px-6 py-3 bg-green-500 hover:bg-green-600 text-white font-bold rounded-lg transition-all">
                        <span class="material-symbols-outlined">refresh</span>
                        Xem tất cả
                    </a>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <aside class="lg:col-span-3 space-y-6">
            {{-- Quick Categories --}}
            <div class="bg-surface-dark rounded-2xl p-5 border border-gray-800 sticky top-4">
                <h3 class="text-white font-bold text-lg mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-green-500">category</span>
                    Thể Loại Hot
                </h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($categories->take(12) as $category)
                    <a href="{{ route('recently.updated', ['category' => $category->slug]) }}"
                       class="px-3 py-2 bg-gray-800 hover:bg-green-500 text-gray-300 hover:text-white text-sm rounded-lg transition-all {{ $categorySlug === $category->slug ? 'bg-green-500 text-white' : '' }}">
                        {{ $category->name }}
                    </a>
                    @endforeach
                </div>
                <a href="{{ route('comics.list') }}"
                   class="mt-4 block text-center text-sm text-green-500 hover:text-green-400 font-semibold">
                    Xem tất cả thể loại →
                </a>
            </div>

            {{-- Tips Box --}}
            <div class="bg-gradient-to-br from-green-500/10 to-emerald-500/5 rounded-2xl p-5 border border-green-500/20">
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-green-500 text-2xl">lightbulb</span>
                    <div>
                        <h4 class="text-white font-bold mb-2">Mẹo nhỏ</h4>
                        <p class="text-gray-400 text-sm leading-relaxed">
                            Đăng nhập và thêm truyện vào mục yêu thích để nhận thông báo khi có chương mới!
                        </p>
                    </div>
                </div>
            </div>
        </aside>
    </div>
</div>

<style>
    @keyframes blob {
        0% { transform: translate(0px, 0px) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }

    .animate-blob {
        animation: blob 7s infinite;
    }

    .animation-delay-2000 {
        animation-delay: 2s;
    }

    .animation-delay-4000 {
        animation-delay: 4s;
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(34, 197, 94, 0.3);
        border-radius: 3px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(34, 197, 94, 0.5);
    }
</style>
@endsection