@extends('layouts.app')

@section('title', 'Danh Sách Truyện - Truyện Hay')
@section('description', 'Khám phá kho tàng truyện phong phú với đầy đủ các thể loại: Tiên Hiệp, Kiếm Hiệp, Ngôn Tình, Đam Mỹ và nhiều hơn nữa.')

@section('content')
    {{-- Breadcrumb --}}
    <div class="bg-surface-dark border-b border-gray-800">
        <div class="container mx-auto px-4 lg:px-8 max-w-7xl py-4">
            <nav class="flex items-center gap-2 text-sm">
                <a class="text-gray-400 hover:text-primary transition-colors" href="{{ route('home') }}">
                    <span class="material-symbols-outlined text-[18px]">home</span>
                </a>
                <span class="material-symbols-outlined text-gray-600 text-[16px]">chevron_right</span>
                <span class="text-white font-medium">Danh Sách Truyện</span>
            </nav>
        </div>
    </div>

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl py-8">
        {{-- Featured Comics Slider --}}
        @if($featuredComics->isNotEmpty())
        <section class="mb-12">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">stars</span> Truyện Nổi Bật
                </h2>
                <div class="flex gap-2">
                    <button class="featured-prev p-2 rounded-full bg-gray-800 hover:bg-primary text-gray-400 hover:text-white transition-colors flex items-center justify-center">
                        <span class="material-symbols-outlined">chevron_left</span>
                    </button>
                    <button class="featured-next p-2 rounded-full bg-gray-800 hover:bg-primary text-gray-400 hover:text-white transition-colors flex items-center justify-center">
                        <span class="material-symbols-outlined">chevron_right</span>
                    </button>
                </div>
            </div>

            <div class="relative overflow-hidden">
                <div class="featured-slider flex gap-6 transition-transform duration-500 ease-out">
                    @foreach($featuredComics as $comic)
                        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3">
                            <x-comic-card-horizontal :comic="$comic" />
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif

        {{-- Category Sliders --}}
        @foreach($categories as $category)
        @if($category->comics->isNotEmpty())
        <section class="mb-12">
            <div class="flex items-center justify-between mb-6 px-2 border-b border-gray-800 pb-2">
                <h3 class="text-white text-xl font-bold flex items-center gap-2">
                    <span class="w-1 h-6 bg-primary rounded-full"></span>
                    {{ $category->name }}
                    <span class="text-sm text-gray-500 font-normal">({{ $category->comics->count() }})</span>
                </h3>
                <div class="flex items-center gap-3">
                    <a class="text-sm text-gray-400 hover:text-primary transition-colors flex items-center gap-1"
                       href="#">
                        Xem tất cả <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
                    </a>
                    <div class="flex gap-2">
                        <button class="category-prev-{{ $category->id }} p-1.5 rounded-full bg-gray-800 hover:bg-primary text-gray-400 hover:text-white transition-colors flex items-center justify-center">
                            <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                        </button>
                        <button class="category-next-{{ $category->id }} p-1.5 rounded-full bg-gray-800 hover:bg-primary text-gray-400 hover:text-white transition-colors flex items-center justify-center">
                            <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="relative overflow-hidden">
                <div class="category-slider-{{ $category->id }} flex gap-4 transition-transform duration-500 ease-out">
                    @foreach($category->comics as $comic)
                        <div class="flex-shrink-0 w-[180px]">
                            <x-comic-card-grid :comic="$comic" />
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif
        @endforeach
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Featured Comics Slider
    const featuredSlider = document.querySelector('.featured-slider');
    if (featuredSlider) {
        const featuredPrev = document.querySelector('.featured-prev');
        const featuredNext = document.querySelector('.featured-next');
        let featuredIndex = 0;
        const featuredItems = featuredSlider.children.length;

        const updateFeaturedSlider = () => {
            const itemWidth = featuredSlider.children[0].offsetWidth + 24; // width + gap
            featuredSlider.style.transform = `translateX(-${featuredIndex * itemWidth}px)`;
        };

        featuredNext.addEventListener('click', () => {
            if (featuredIndex < featuredItems - 1) {
                featuredIndex++;
                updateFeaturedSlider();
            }
        });

        featuredPrev.addEventListener('click', () => {
            if (featuredIndex > 0) {
                featuredIndex--;
                updateFeaturedSlider();
            }
        });

        // Handle window resize
        window.addEventListener('resize', updateFeaturedSlider);
    }

    // Category Sliders
    @foreach($categories as $category)
    @if($category->comics->isNotEmpty())
    (function() {
        const slider = document.querySelector('.category-slider-{{ $category->id }}');
        const prevBtn = document.querySelector('.category-prev-{{ $category->id }}');
        const nextBtn = document.querySelector('.category-next-{{ $category->id }}');

        if (slider && prevBtn && nextBtn) {
            let index = 0;

            const updateSlider = () => {
                const firstChild = slider.children[0];
                if (!firstChild) return;

                const itemWidth = firstChild.offsetWidth;
                const gap = 16; // gap-4 = 16px
                const totalItemWidth = itemWidth + gap;
                const containerWidth = slider.parentElement.offsetWidth;
                const visibleItems = Math.floor(containerWidth / totalItemWidth);
                const maxIndex = Math.max(0, slider.children.length - visibleItems);

                // Update transform
                slider.style.transform = `translateX(-${index * totalItemWidth}px)`;

                // Update button states
                prevBtn.disabled = index === 0;
                nextBtn.disabled = index >= maxIndex;

                if (index === 0) {
                    prevBtn.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }

                if (index >= maxIndex) {
                    nextBtn.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            };

            nextBtn.addEventListener('click', () => {
                const firstChild = slider.children[0];
                if (!firstChild) return;

                const itemWidth = firstChild.offsetWidth + 16;
                const containerWidth = slider.parentElement.offsetWidth;
                const visibleItems = Math.floor(containerWidth / itemWidth);
                const maxIndex = Math.max(0, slider.children.length - visibleItems);

                if (index < maxIndex) {
                    index++;
                    updateSlider();
                }
            });

            prevBtn.addEventListener('click', () => {
                if (index > 0) {
                    index--;
                    updateSlider();
                }
            });

            // Initialize slider state
            updateSlider();

            // Handle window resize
            window.addEventListener('resize', () => {
                index = 0; // Reset to first position on resize
                updateSlider();
            });
        }
    })();
    @endif
    @endforeach
});
</script>
@endpush