@extends('layouts.frontend')

@section('meta_seo')
    <meta name="description" content="Read our latest articles on web development, mobile apps, SEO, and digital growth.">
    <meta name="keywords" content="blog, web development, mobile apps, SEO, digital marketing">
@endsection

@section('title', 'Blogs | Webiancy')

@section('content')
    <!-- ===== Breadcrumb Start ===== -->
    <section class="relative z-10 pt-36 pb-20 lg:pt-44 lg:pb-24">
        <div class="px-4 xl:container">
            <div class="text-center">
                <h1 class="font-heading text-dark mb-4 text-3xl font-bold sm:text-4xl md:text-[50px] md:leading-[60px] dark:text-white">
                    Our Blog
                </h1>
                <ul class="flex items-center justify-center gap-2">
                    <li>
                        <a href="{{ route('home') }}" class="font-heading text-dark-text hover:text-primary text-base dark:hover:text-white">
                            Home
                        </a>
                    </li>
                    <li class="text-dark-text">/</li>
                    <li>
                        <span class="font-heading text-primary text-base">Blog</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ===== Breadcrumb End ===== -->

    <!-- ===== Blog List Start ===== -->
    <section class="pb-14 sm:pb-20 lg:pb-[130px]">
        <div class="px-4 xl:container">

            <!-- Category Filter -->
            <div class="mb-12 flex flex-wrap items-center justify-center gap-3">
                <a href="{{ route('frontend.blogs.index') }}"
                   class="font-heading rounded-sm px-5 py-2 text-sm font-medium transition {{ !$activeCategory ? 'bg-primary text-white' : 'bg-gray-100 text-dark-text hover:bg-primary hover:text-white dark:bg-gray-800 dark:text-gray-300' }}">
                    All
                </a>
                @foreach($categories as $category)
                    <a href="{{ route('frontend.blogs.index', ['category' => $category->slug]) }}"
                       class="font-heading rounded-sm px-5 py-2 text-sm font-medium transition {{ $activeCategory === $category->slug ? 'bg-primary text-white' : 'bg-gray-100 text-dark-text hover:bg-primary hover:text-white dark:bg-gray-800 dark:text-gray-300' }}">
                        {{ $category->name }} ({{ $category->blogs_count }})
                    </a>
                @endforeach
            </div>

            @if($blogs->count() > 0)
                <div class="-mx-4 flex flex-wrap">
                    @foreach($blogs as $index => $blog)
                        <div class="w-full px-4 md:w-1/2 lg:w-1/3">
                            <div class="wow fadeInUp mb-10" data-wow-delay=".{{ ($index % 3) + 2 }}s">
                                <div class="relative mb-8 overflow-hidden rounded-sm">
                                    <a href="{{ route('frontend.blogs.show', $blog->slug) }}" class="block">
                                        @if($blog->image)
                                            <img src="{{ asset('storage/' . $blog->image) }}" alt="{{ $blog->title }}" class="w-full h-[250px] object-cover" />
                                        @else
                                            <img src="{{ asset('images/blog/image-1.jpg') }}" alt="{{ $blog->title }}" class="w-full h-[250px] object-cover" />
                                        @endif
                                    </a>
                                    @if($blog->category)
                                        <span class="bg-primary font-heading absolute top-5 left-5 rounded-sm px-4 py-[6px] text-sm font-medium text-white">
                                            {{ $blog->category->name }}
                                        </span>
                                    @endif
                                </div>
                                <div>
                                    <div class="mb-4 flex items-center">
                                        @if($blog->author)
                                            <p class="font-heading text-dark-text flex items-center pr-5 text-base">
                                                <span class="pr-2">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                                        <path d="M15 16.5H13.5V15C13.5 14.4033 13.2629 13.831 12.841 13.409C12.419 12.9871 11.8467 12.75 11.25 12.75H6.75C6.15326 12.75 5.58097 12.9871 5.15901 13.409C4.73705 13.831 4.5 14.4033 4.5 15V16.5H3V15C3 14.0054 3.39509 13.0516 4.09835 12.3484C4.80161 11.6451 5.75544 11.25 6.75 11.25H11.25C12.2446 11.25 13.1984 11.6451 13.9016 12.3484C14.6049 13.0516 15 14.0054 15 15V16.5ZM9 9.75C8.40905 9.75 7.82389 9.63361 7.27792 9.40746C6.73196 9.18131 6.23588 8.84984 5.81802 8.43198C5.40015 8.01412 5.06869 7.51804 4.84254 6.97208C4.6164 6.42611 4.5 5.84095 4.5 5.25C4.5 4.65905 4.6164 4.07389 4.84254 3.52793C5.06869 2.98196 5.40015 2.48588 5.81802 2.06802C6.23588 1.65016 6.73196 1.31869 7.27792 1.09254C7.82389 0.866396 8.40905 0.75 9 0.75C10.1935 0.75 11.3381 1.22411 12.182 2.06802C13.0259 2.91193 13.5 4.05653 13.5 5.25C13.5 6.44348 13.0259 7.58807 12.182 8.43198C11.3381 9.2759 10.1935 9.75 9 9.75ZM9 8.25C9.79565 8.25 10.5587 7.93393 11.1213 7.37132C11.6839 6.80871 12 6.04565 12 5.25C12 4.45435 11.6839 3.69129 11.1213 3.12868C10.5587 2.56607 9.79565 2.25 9 2.25C8.20435 2.25 7.44129 2.56607 6.87868 3.12868C6.31607 3.69129 6 4.45435 6 5.25C6 6.04565 6.31607 6.80871 6.87868 7.37132C7.44129 7.93393 8.20435 8.25 9 8.25Z" />
                                                    </svg>
                                                </span>
                                                {{ $blog->author }}
                                            </p>
                                        @endif
                                        <p class="font-heading text-dark-text flex items-center text-base">
                                            <span class="pr-2">
                                                <svg width="18" height="18" viewBox="0 0 18 18" class="fill-current">
                                                    <path d="M12.75 2.25H15.75C15.9489 2.25 16.1397 2.32902 16.2803 2.46967C16.421 2.61032 16.5 2.80109 16.5 3V15C16.5 15.1989 16.421 15.3897 16.2803 15.5303C16.1397 15.671 15.9489 15.75 15.75 15.75H2.25C2.05109 15.75 1.86032 15.671 1.71967 15.5303C1.57902 15.3897 1.5 15.1989 1.5 15V3C1.5 2.80109 1.57902 2.61032 1.71967 2.46967C1.86032 2.32902 2.05109 2.25 2.25 2.25H5.25V0.75H6.75V2.25H11.25V0.75H12.75V2.25ZM11.25 3.75H6.75V5.25H5.25V3.75H3V6.75H15V3.75H12.75V5.25H11.25V3.75ZM15 8.25H3V14.25H15V8.25Z" />
                                                </svg>
                                            </span>
                                            {{ $blog->created_at->format('d M, Y') }}
                                        </p>
                                    </div>
                                    <h3>
                                        <a href="{{ route('frontend.blogs.show', $blog->slug) }}"
                                           class="font-heading text-dark hover:text-primary dark:hover:text-primary text-xl font-medium md:text-2xl lg:text-xl xl:text-2xl dark:text-white">
                                            {{ $blog->title }}
                                        </a>
                                    </h3>
                                    @if($blog->excerpt)
                                        <p class="text-dark-text mt-3 text-base line-clamp-2">
                                            {{ $blog->excerpt }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if($blogs->hasPages())
                    <div class="mt-10 flex justify-center">
                        <nav class="flex items-center gap-2">
                            {{-- Previous --}}
                            @if($blogs->onFirstPage())
                                <span class="font-heading rounded-sm px-4 py-2 text-sm text-gray-400 dark:text-gray-600">
                                    &laquo; Previous
                                </span>
                            @else
                                <a href="{{ $blogs->previousPageUrl() }}"
                                   class="font-heading rounded-sm px-4 py-2 text-sm text-dark-text hover:bg-primary hover:text-white transition dark:text-gray-300">
                                    &laquo; Previous
                                </a>
                            @endif

                            {{-- Pages --}}
                            @foreach($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                                @if($page == $blogs->currentPage())
                                    <span class="font-heading bg-primary rounded-sm px-4 py-2 text-sm text-white">
                                        {{ $page }}
                                    </span>
                                @else
                                    <a href="{{ $url }}"
                                       class="font-heading rounded-sm px-4 py-2 text-sm text-dark-text hover:bg-primary hover:text-white transition dark:text-gray-300">
                                        {{ $page }}
                                    </a>
                                @endif
                            @endforeach

                            {{-- Next --}}
                            @if($blogs->hasMorePages())
                                <a href="{{ $blogs->nextPageUrl() }}"
                                   class="font-heading rounded-sm px-4 py-2 text-sm text-dark-text hover:bg-primary hover:text-white transition dark:text-gray-300">
                                    Next &raquo;
                                </a>
                            @else
                                <span class="font-heading rounded-sm px-4 py-2 text-sm text-gray-400 dark:text-gray-600">
                                    Next &raquo;
                                </span>
                            @endif
                        </nav>
                    </div>
                @endif
            @else
                <div class="text-center py-20">
                    <h3 class="font-heading text-dark text-2xl font-medium dark:text-white mb-4">
                        No blogs found
                    </h3>
                    <p class="text-dark-text text-base">
                        @if($activeCategory)
                            No published blogs in this category yet. Try a different category.
                        @else
                            Check back later for new content.
                        @endif
                    </p>
                </div>
            @endif
        </div>
    </section>
    <!-- ===== Blog List End ===== -->
@endsection