@php use Modules\Core\Helpers\Helper; @endphp
@extends('front::layouts.master')

@section('title','E-SHOP || Blog Page')

@section('content')

    <!-- Breadcrumbs -->
    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bread-inner">
                        <ul class="bread-list">
                           <li><a href="{{route('front.index')}}">Home<i class="ti-arrow-right"></i></a></li>
                            <li><a href="{{route('front.blog')}}">Blog<i class="ti-arrow-right"></i></a></li>
                            
                            @php
                                // Check if we're on a category page
                                $currentUrl = request()->path();
                                $categorySlug = null;
                                if (strpos($currentUrl, 'blog-cat/') !== false) {
                                    $categorySlug = str_replace('blog-cat/', '', $currentUrl);
                                }
                            @endphp
                            
                            @if($categorySlug)
                                @php
                                    $categories = Helper::postCategoryList();
                                    $currentCategory = $categories->where('slug', $categorySlug)->first();
                                @endphp
                                @if($currentCategory)
                                    <li class="active">{{ $currentCategory->name }}</li>
                                @endif
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Category Header -->
    @php
        $currentUrl = request()->path();
        $categorySlug = null;
        if (strpos($currentUrl, 'blog-cat/') !== false) {
            $categorySlug = str_replace('blog-cat/', '', $currentUrl);
        }
        
        $categories = Helper::postCategoryList();
        $currentCategory = $categorySlug ? $categories->where('slug', $categorySlug)->first() : null;
    @endphp

    @if($currentCategory)
    <div class="container-fluid mt-3 mb-4">
        <div class="row" style="padding-left: 5%; padding-right: 5%">
            <div class="col-12">
                <div class="category-header">
                    <h3 class="category-title">
                        Category: <span style="color: #0073aa;">{{ $currentCategory->name }}</span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Main Blog Section -->
    <section class="blog-single shop-blog grid section">
        <div class="container-fluid">
            <div class="row" style="padding-left: 5%; padding-right: 5%">

                <!-- LEFT SIDEBAR -->
                <div class="col-3">
                    <div class="main-sidebar">

                        <!-- Search -->
                        <div class="single-widget search">
                            <form class="form" method="GET" action="{{route('front.blog-search')}}">
                                <input type="text" 
                                    placeholder="Search Here..." 
                                    name="search" 
                                    value="{{ request('search') }}">
                                <button class="button" type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>

                        <!-- Blog Categories with checkbox auto-select -->
                        <div class="single-widget category">
                            <h3 class="title">Blog Categories</h3>
                         
                            @php
                                // Get selected slugs from query parameter or from URL path
                                $selectedSlugs = collect(explode(',', request()->query('category')))->filter();
                                
                                // If we're on a single category page, add that slug to selected slugs
                                if ($categorySlug) {
                                    $selectedSlugs->push($categorySlug);
                                }
                            @endphp

                            <ul>
                                @foreach(Helper::postCategoryList() as $i => $cat)
                                    @php
                                        $id = "cat_".$i;
                                        $checked = $selectedSlugs->contains($cat->slug);
                                    @endphp

                                    <li>
                                        <label style="cursor:pointer;">
                                            <input  type="checkbox"
                                                    class="category-check"
                                                    data-slug="{{ $cat->slug }}"
                                                    @if($checked) checked @endif
                                            >
                                            {{ $cat->name }}
                                        </label>
                                    </li>
                                @endforeach
                            </ul>

                            @if($categorySlug || request()->has('category'))
                                <div class="mt-3">
                                    <a href="{{ route('front.blog') }}" class="btn btn-sm btn-outline-secondary">
                                        <i class="fa fa-times"></i> Clear Filters
                                    </a>
                                </div>
                            @endif
                        </div>

                    </div>
                </div>

                <!-- BLOG LIST -->
                <div class="col-9">
                    <div class="row">
                        @php
                            // Filter posts based on category slug from URL
                           $filteredPosts = $posts;

                            // 🔍 SEARCH FILTER
                            if(request()->has('search') && !empty(request()->search)) {
                                $search = strtolower(request()->search);

                                $filteredPosts = $filteredPosts->filter(function($post) use ($search) {
                                    return str_contains(strtolower($post->title), $search) ||
                                        str_contains(strtolower($post->summary), $search);
                                });
                            }

                            // 📂 CATEGORY FILTER
                           if ($categorySlug && $currentCategory) {
                                $filteredPosts = $filteredPosts->filter(function($post) use ($currentCategory) {
                                    return $post->cat_id == $currentCategory->id;
                                });
                            } elseif (request()->has('category') && !empty(request()->category)) {
                                $categorySlugs = explode(',', request()->category);
                                $categoryIds = $categories->whereIn('slug', $categorySlugs)->pluck('id')->toArray();

                                $filteredPosts = $filteredPosts->filter(function($post) use ($categoryIds) {
                                    return in_array($post->cat_id, $categoryIds);
                                });
                            }

                            // ✅ ADD THIS (STATUS FILTER)
                            $filteredPosts = $filteredPosts->filter(function($post) {
                                return strtolower($post->status ?? '') === 'active';
                            });
                        @endphp

                        @if($filteredPosts->count() > 0)
                            @foreach($filteredPosts as $post)
                                <div class="col-12">
                                    <div class="blog-list-item">
                                        <!-- Image -->
                                        <div class="blog-image">
                                            <img src="{{ $post->imageUrl }}" alt="{{ $post->title }}">
                                        </div>

                                        <!-- Blog Info -->
                                        <div class="blog-info">
                                            <p class="meta">
                                                {{ $post->created_at->format('d M Y') }} |
                                                <span class="category_name">
                                                    @php
                                                        $postCategory = $categories->where('id', $post->cat_id)->first();
                                                    @endphp
                                                    <a href="{{ url('/blog-cat/' . ($postCategory->slug ?? '')) }}" style="color: #0073aa;">
                                                        {{ $postCategory->name ?? 'Uncategorized' }}
                                                    </a>
                                                </span>
                                            </p>

                                            <a href="{{ route('front.blog-detail', $post->slug) }}" class="blog-title">
                                                {{ $post->title }}
                                            </a>
                                            
                                            <p class="summary">{!! html_entity_decode($post->summary) !!}</p>
                                        </div>
                                    </div>

                                </div>
                            @endforeach

                            <!-- Pagination - Note: This will paginate all posts, not filtered ones -->
                            <div class="col-12">
                                {{$posts->appends($_GET)->links('vendor.pagination.bootstrap-4')}}
                            </div>
                        @else
                            <!-- Empty State -->
                            <div class="col-12">
                                <div class="empty-state text-center py-5">
                                    <div class="empty-state-icon mb-4">
                                        <i class="fas fa-newspaper fa-4x text-muted"></i>
                                    </div>
                                    @if(request()->has('search') && request()->search)
                                    <h3 class="empty-state-title mb-3">No Blog Posts Found
                                         <span style="color:#0073aa;">"{{ request('search') }}"</span>
                                    </h3>
                                    @endif
                                    <p class="empty-state-description text-muted mb-4">
                                        @if($currentCategory)
                                            There are currently no posts in the "{{ $currentCategory->name }}" category.
                                        @elseif(request()->has('category'))
                                            No posts match the selected categories.
                                        @else
                                            There are currently no blog posts available. Please check back later for updates and new content.
                                        @endif
                                    </p>
                                    @if($categorySlug || request()->anyFilled(['search', 'category', 'tag']))
                                        <a href="{{ route('front.blog') }}" class="btn btn-primary">
                                            <i class="fas fa-arrow-left me-2"></i>Clear Filters
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <!-- BLOG LIST END -->

            </div>
        </div>
    </section>

@endsection

@push('styles')
<style>
    .blog-list-item {
        display: flex;
        gap: 20px;
        margin-bottom: 40px;
        align-items: flex-start;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 25px;
    }

    .blog-image img {
        width: 180px;
        height: 120px;
        object-fit: cover;
        border-radius: 4px;
    }

    .blog-info .meta {
        font-size: 14px;
        color: #777;
        margin-bottom: 6px;
    }

    .blog-info .blog-title {
        font-size: 18px;
        font-weight: bold;
        color: #0073aa;
        margin-bottom: 6px;
        display: block;
    }

    .blog-info .summary {
        color: #444;
        margin-bottom: 0;
    }

    .pagination {
        display: inline-flex !important;
    }
    
    .category-header {
        padding: 15px 0;
        border-bottom: 2px solid #e5e5e5;
        margin-bottom: 20px;
    }

    .category-header .category-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    
    .btn-sm {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .mt-3 {
        margin-top: 15px;
    }
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('.category-check').forEach(function (cb) {
    cb.addEventListener('change', function () {

        let slugs = [];
        document.querySelectorAll('.category-check').forEach(function (item) {
            if (item.checked) {
                slugs.push(item.dataset.slug);
            }
        });

        if (slugs.length === 0) {
            // No categories selected - go to main blog page
            window.location.href = '/blog';
        } else if (slugs.length === 1) {
            // Single category - use pretty URL with slug
            window.location.href = '/blog-cat/' + slugs[0];
        } else {
            // Multiple categories - use query parameter
            window.location.href = '/blog?category=' + slugs.join(',');
        }
        
    });
});

// Highlight checkboxes based on current URL
document.addEventListener('DOMContentLoaded', function() {
    const path = window.location.pathname;
    
    // Check if we're on a category page
    if (path.includes('/blog-cat/')) {
        const slug = path.split('/blog-cat/')[1];
        document.querySelectorAll('.category-check').forEach(function(cb) {
            if (cb.dataset.slug === slug) {
                cb.checked = true;
            }
        });
    }
    
    // Handle multiple categories from query string
    const urlParams = new URLSearchParams(window.location.search);
    const categoryParam = urlParams.get('category');
    
    if (categoryParam) {
        const selectedSlugs = categoryParam.split(',');
        document.querySelectorAll('.category-check').forEach(function(cb) {
            if (selectedSlugs.includes(cb.dataset.slug)) {
                cb.checked = true;
            }
        });
    }
});
</script>
@endpush