@extends('page.layouts.main')

@section('content')
<section class="py-16 sm:py-24">
    @if(isset($banners) && count($banners) > 0)
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative w-full bg-white overflow-hidden" x-data="{ current: 0, banners: {{ $banners->count() }} }">
                <button
                    class="absolute left-2 top-1/2 transform -translate-y-1/2 z-20 p-2 rounded-full bg-white/80 hover:bg-white shadow ring-1 ring-gray-200 focus:outline-none"
                    @click="current = current === 0 ? banners - 1 : current - 1"
                    x-show="banners > 1"
                    aria-label="Previous banner"
                    type="button"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button
                    class="absolute right-2 top-1/2 transform -translate-y-1/2 z-20 p-2 rounded-full bg-white/80 hover:bg-white shadow ring-1 ring-gray-200 focus:outline-none"
                    @click="current = current === banners - 1 ? 0 : current + 1"
                    x-show="banners > 1"
                    aria-label="Next banner"
                    type="button"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
                <div class="relative" style="height: 384px;"> {{-- fixed height for smooth transition --}}
                    @foreach($banners as $idx => $banner)
                        @php
                            $bannerTitle = $banner->translate[$locale]['title'] ?? '';
                            $bannerDesc = $banner->translate[$locale]['description'] ?? '';
                            $bannerImg = asset('media/banner/'.$banner->image);
                            $bannerLink = $banner->link ?? '#';
                        @endphp
                        <div
                            x-show="current === {{ $idx }}"
                            x-transition:enter="transition-opacity duration-500"
                            x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100"
                            x-transition:leave="transition-opacity duration-400"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            style="display: none"
                            class="absolute inset-0 w-full h-full flex items-center justify-center"
                        >
                            <div class="w-full flex-shrink-0 relative group rounded-xl overflow-hidden bg-gray-100 ring-1 ring-gray-200 shadow hover:shadow-lg transition duration-300">
                                <a href="{{ $bannerLink }}" target="_blank" rel="noopener" class="block focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <img src="{{ $bannerImg }}"
                                        alt="{{ $bannerTitle }}"
                                        class="w-full h-64 sm:h-80 md:h-96 object-cover group-hover:scale-105 transition duration-500">
                                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-gray-900/20 to-transparent pointer-events-none"></div>
                                    <div class="absolute bottom-0 left-0 right-0 p-4 text-white z-10">
                                        <h3 class="text-lg sm:text-xl font-bold truncate">{{ $bannerTitle }}</h3>
                                        @if($bannerDesc)
                                            <div class="text-xs sm:text-sm mt-0.5 line-clamp-2">
                                                {{ $bannerDesc }}
                                            </div>
                                        @endif
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{-- Indicators --}}
                <div class="flex justify-center mt-3 space-x-2">
                    @foreach($banners as $idx => $banner)
                        <button
                            type="button"
                            class="h-2.5 w-2.5 rounded-full transition-all duration-200 border border-gray-400"
                            :class="{ 'bg-blue-500 border-blue-400': current === {{ $idx }}, 'bg-gray-200': current !== {{ $idx }} }"
                            @click="current = {{ $idx }}"
                            aria-label="Go to banner {{ $idx + 1 }}"
                        ></button>
                    @endforeach
                </div>
            </div>
        </div>
        {{-- Alpine.js for interactivity --}}
        @push('scripts')
            <script src="//unpkg.com/alpinejs" defer></script>
        @endpush
    @endif
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-2" id="blogs">
        <div class="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-0 mb-8 border-b border-gray-100 pb-6">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight">
                <span class="inline-block bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
                    Blog
                </span>
            </h1>
            {{-- Blog Search Component --}}
            <form action="{{ route('blogs') }}#blogs" method="GET" class="w-full max-w-md sm:w-auto">
                <div class="flex items-center bg-white border border-gray-200 rounded-lg shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-100 transition">
                    <input
                        type="text"
                        id="search"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search blog posts…"
                        class="flex-1 bg-transparent border-none outline-none px-4 py-2.5 text-gray-800 placeholder-gray-400 text-base"
                        autocomplete="off"
                        aria-label="Search blog posts"
                    >
                    <button type="submit" class="inline-flex items-center justify-center h-10 px-4 bg-blue-600 hover:bg-blue-700 transition-colors text-white font-bold rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <title>Search</title>
                            <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/>
                            <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        <span class="sr-only">Search</span>
                    </button>
                </div>
            </form>
        </div>
        {{-- End Search --}}

        @if($blogs->count() === 0)
            <div class="text-center py-16">
                <p class="text-lg font-medium text-gray-600">No posts available right now.</p>
                <p class="mt-2 text-sm text-gray-400">Please check back later!</p>
            </div>
        @else
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($blogs as $post)
                    @php
                        $title = $post->translate[$locale]['title'];
                        $desc = $post->translate[$locale]['description'] ?? null;
                        $img = asset('media/blog/' . $post->image);
                        $tags = $post->tags ?? [];

                        // Prepare category info
                        $category = $post->blogCategory;
                        $categoryName = null;
                        if ($category && is_array($category->translate)) {
                            $categoryName = $category->translate[$locale]['name']
                                ?? $category->translate['en']['name']
                                ?? $category->translate[array_key_first($category->translate)]['name']
                                ?? null;
                        }
                    @endphp

                    <article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 ring-1 ring-gray-900/5 overflow-hidden flex flex-col">
                        <a href="{{ route('blogs.show', $post->slug) }}" class="block overflow-hidden">
                            <img src="{{ $img }}" alt="{{ $title }}" class="h-48 w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105">
                        </a>

                        <div class="p-6 flex-1 flex flex-col">
                            {{-- CATEGORY --}}
                            @if($categoryName)
                                <span class="inline-block mb-2 bg-green-50 text-green-700 text-xs font-semibold px-2.5 py-1 rounded-full border border-green-100 truncate max-w-[140px]" title="{{ $categoryName }}">
                                    {{ $categoryName }}
                                </span>
                            @endif

                            <h2 class="text-lg font-semibold text-gray-800">
                                <a href="{{ route('blogs.show', $post->slug) }}" class="hover:text-blue-600 transition-colors">{{ $title }}</a>
                            </h2>

                            @if($desc)
                                <p class="mt-3 text-sm text-gray-500 line-clamp-3">{{ $desc }}</p>
                            @endif

                            {{-- TAGS --}}
                            @if(!empty($tags) && count($tags) > 0)
                                <div class="mt-4 flex flex-wrap gap-2">
                                    @foreach($tags as $tag)
                                        @php
                                            // Use locale translation with fallback
                                            $tagName = $tag->translate[$locale]['name']
                                                ?? $tag->translate['en']['name']
                                                ?? $tag->translate[array_key_first($tag->translate)]['name']
                                                ?? null;
                                        @endphp
                                        @if($tagName)
                                            <span class="inline-block bg-blue-50 text-blue-700 text-xs font-medium px-3 py-1 rounded-full shadow-sm border border-blue-100 truncate max-w-[160px]" title="{{ $tagName }}">
                                                {{ $tagName }}
                                            </span>
                                        @endif
                                    @endforeach
                                </div>
                            @endif

                            <div class="mt-auto pt-5">
                                <a href="{{ route('blogs.show', $post->slug) }}" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors">
                                    Read more
                                    <span class="ml-1.5 transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
                                </a>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-16">
                {{ $blogs->appends(request()->all())->links('pagination.tailwind') }}
            </div>
        @endif
    </div>

</section>
@endsection