@extends('layouts.frontend.master')
@section('title')
    {{ env('APP_NAME') . ' - Blogs' }}
@endsection

@push('css')
{{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
    <style>
        /* Custom wider container */
        .custom-container {
            max-width: 1440px;
            margin: 0 auto;
        }

        .blog-page {
            background: #fff;
        }

        .blogs-cat-box {
            background-color: #F2F3F5;
            padding: 24px;
            border-radius: 6px;
        }

        .blog-fe-image img {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 10px;
        }

        .blogs-fe-search {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }

        .blogs-fe-search input {
            width: 100%;
            padding: 12px 20px;
            border: none;
            border-radius: 6px 0 0 6px;
            outline: none;
            font-size: 16px;
            background: #F2F3F5;
        }

        .blogs-fe-search button {
            border: none;
            background-color: #F2F3F5;
            color: #858585;
            border-radius: 0 6px 6px 0;
            border-left: 1px solid #ddd;
            padding: 8px 16px 0 16px;
            font-size: 22px;
        }

        .blog-card {
            height: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 6px;
            transition: all 0.3s ease;
            overflow: hidden;
            box-shadow: 0 0 5px #ddd;
        }

        .blog-image {
            height: 228px;
            overflow: hidden;
        }

        .blog-image img {
            width: 100%;
        }

        .blog-title {
            font-weight: 600;
            margin-bottom: 4px;
            color: #353535;
            font-size: 18px;
            margin-top: 10px;
        }

        .section-title {
            text-transform: uppercase;
            color: #28866D;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 26px;
        }

        .show-more-blog {
            border: 0;
            padding: 0;
            background: transparent;
            text-decoration: underline;
            font-size: 17px;
            color: #353535;
        }

        .cat-check {
            width: 18px;
            height: 18px;
            border: 2px solid #B9B9B9;
            background-color: transparent;
            box-shadow: none;
            appearance: none;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .cat-check:checked {
            background-color: #245400;
            border-color: #245400;
        }

        .cat-check:checked::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 5px;
            width: 4px;
            height: 9px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .cat-label {
            color: #667085;
        }

        .cat-title {
            font-size: 17px;
            color: #454545;
        }

        .reset-btn {
            border: none;
            width: 100%;
            border-radius: 6px;
            background: #5a5353;
            color: #fff;
        }

        .blog-description-box {
            max-height: 300px;
            overflow: auto;
        }
        .blog-info {
            padding: 24px;
        }
        .blog-user {
            align-items: center;
        }
        .blog-user img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .blog-user h6 {
            margin: 0;
        }
        .blog-date {
            color: #353535;
            font-size: 13px;
            font-weight: 600;
        }
        .blog-readmore {
            margin-top: 10px;
        }
        .blog-readmore a {
            text-decoration: none;
            color: #006A4E;
            font-size: 16px;
            font-weight: 500;
        }
    </style>
@endpush

@section('content')
    <section class="blog-page py-5">
        <div class="custom-container px-3">
            <div class="row g-4">
                <!-- Category Sidebar -->
                <div class="col-md-2">
                    <div class="blogs-cat-box mb-2">
                        <h5 class="mb-3 cat-title">Category</h5>
                        @foreach($categories as $category)
                            <div class="form-check mb-2">
                                <input class="form-check-input cat-check"
                                       type="checkbox"
                                       value="{{ $category->id }}"
                                       name="category_id[]"
                                       id="category{{ $category->id }}">
                                <label class="form-check-label cat-label" for="category{{ $category->id }}">
                                    {{ $category->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    <button class="reset-btn mb-4" style="display: none;">Reset All</button>
                </div>

                <!-- Blog Content -->
                <div class="col-md-10">
                    <!-- Top Image -->
                    <div class="blog-fe-image mb-3">
                        <img src="{{ asset('assets/blogs/blogs-top.jpg') }}" alt="Featured"/>
                    </div>

                    <!-- Search -->
                    <div class="row">
                        <div class="col-md-10">
{{--                        <div class="col-sm-12 {{ auth()->check() ? 'col-md-10' : 'col-md-12' }}">--}}
                            <div class="blogs-fe-search">
                                <input type="text" placeholder="Search Blogs..." id="searchInput"
                                       value="{{ request('search') }}">
                                <button type="button" id="searchInputBtn"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
{{--                        @if(auth()->check())--}}
                        <div class="col-sm-12 col-md-2">
                            <a class="btn btn-primary w-100 text-center" href="{{ route('admin.blogs.index') }}">
                                <i class="fas fa-plus"></i> Add New Blog
                            </a>
                        </div>
{{--                        @endif--}}
                    </div>


                    <!-- Latest Posts -->
                    <div class="latest-posts-section">
                        <div class="section-title">LATEST Blogs</div>
                        <div class="row g-4">
                            @foreach($latestBlogs as $blog)
                                <div class="col-md-4 col-sm-6 my-2">
                                    <div class="blog-card h-100" data-blog-id="{{ $blog->id }}">
                                        <div class="blog-image">
                                            <img src="{{ $blog->thumbnail_image_url }}"
                                                 alt="{{ $blog->name }}">
                                        </div>
                                        <div class="blog-info">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="d-flex blog-user">
                                                        <img src="{{ $blog->createdBy ? $blog->createdBy->profile_pic_url : asset('defaults/noimage/no_image.png') }}" alt="">
                                                        <h6>{{ $blog->createdBy ? $blog->createdBy->name : 'Unknown User' }}</h6>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="blog-date text-end">
                                                        {{ \Carbon\Carbon::parse($blog->created_at)->format('M d, Y') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="blog-title">{{ \Illuminate\Support\Str::limit($blog->name, 30) }}</div>
                                            <div class="blog-description">{!! \Illuminate\Support\Str::limit(strip_tags($blog->description), 110) !!}</div>
                                            <div class="blog-readmore">
                                                @if(!empty($blog->slug))
                                                    <a href="{{ route('blogs.single', ['slug' => $blog->slug]) }}">Read More</a>
{{--                                                @else--}}
{{--                                                    <span class="text-muted">Slug missing</span>--}}
                                                @endif
{{--                                                <a href="{{ route('blogs.single', ['slug' => $blog->slug]) }}">Read More</a>--}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- All Blogs -->
                    <div class="section-title mt-5 pt-4">All Blogs</div>
                    <!-- Blog Cards -->
                    <div class="row g-4" id="blogContainer">
                        @include('frontend.blog.partials.blog_cards')
                    </div>
                    <div class="show-more-box text-center mt-5">
                        <button class="show-more-blog" data-page="2" type="button">Show More</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        let currentPage = 1;


        let lastPage = {{ $pagination['last_page'] ?? 1 }};

        $(document).ready(function () {
            $('.reset-btn').hide();


            console.log('currentPage', currentPage)
            console.log('lastPage', lastPage)
            if (currentPage >= lastPage) {
                $('.show-more-box').hide();
            } else {
                $('.show-more-blog').text('Show More').prop('disabled', false).data('page', currentPage + 1);
            }

            checkFilterOrSearch();

            // Ensure event listeners are only attached if elements exist
            const searchInputBtn = document.getElementById('searchInputBtn');
            if (searchInputBtn) {
                searchInputBtn.addEventListener('click', function () {
                    fetchBlogs(true);
                });
            }

            const catChecks = document.querySelectorAll('.cat-check');
            catChecks.forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    fetchBlogs(true);
                });
            });

            const showMoreBtn = document.querySelector('.show-more-blog');
            if (showMoreBtn) {
                showMoreBtn.addEventListener('click', function () {
                    fetchBlogs(false);
                });
            }

            const resetBtn = document.querySelector('.reset-btn');
            if (resetBtn) {
                resetBtn.addEventListener('click', function () {
                    $('#searchInput').val('');
                    $('.cat-check').prop('checked', false);
                    fetchBlogs(true);
                    $('.latest-posts-section').show();
                    $('.reset-btn').hide();
                });
            }
        });

        function checkFilterOrSearch() {
            const search = $('#searchInput').val();
            const categoryIds = $('.cat-check:checked').length;
            if (search || categoryIds > 0) {
                $('.latest-posts-section').hide();
                $('.reset-btn').show();
            } else {
                $('.latest-posts-section').show();
                $('.reset-btn').hide();
            }
        }

        function fetchBlogs(reset = true) {
            const search = $('#searchInput').val();
            const categoryIds = $('.cat-check:checked').map(function () {
                return $(this).val();
            }).get();

            const page = reset ? 1 : currentPage + 1;

            $.ajax({
                url: `{{ route('blogs') }}`,
                type: 'GET',
                data: {
                    search,
                    category_id: categoryIds,
                    page,
                },
                beforeSend: function () {
                    $('.show-more-blog').text('Loading...').prop('disabled', true);
                },
                success: function (response) {
                    if (reset) {
                        $('#blogContainer').html(response.html || '');
                        currentPage = 1;
                    } else {
                        $('#blogContainer').append(response.html || '');
                        currentPage++;
                    }

                    // Update pagination
                    lastPage = response.pagination ? response.pagination.last_page : lastPage;
                    if (currentPage >= lastPage) {
                        $('.show-more-box').hide();
                    } else {
                        $('.show-more-blog').text('Show More').prop('disabled', false).data('page', currentPage + 1);
                    }

                    checkFilterOrSearch();
                },
                error: function (xhr) {
                    $('.show-more-blog').text('Show More').prop('disabled', false);
                    console.error('AJAX error:', xhr.responseText);
                    // Optionally display a user-friendly message
                    // toastr.error('Failed to load blogs. Please try again.');
                }
            });
        }
    </script>
@endpush