@extends('layouts.app')

@section('title', 'Blog - Kdot Web Tech')

@section('header-class', 'header-transparent has-border-bottom has-sticky-bg')

@section('content')

<!-- breadcrumb area start -->
<section class="rs-breadcrumb-area rs-breadcrumb-one p-relative">
    <div class="breadcrumb-bg-thumb" data-background="{{ asset('assets/images/bg/breadcrumb-bg-thumb-05.png') }}"></div>
    <div class="breadcrumb-btn">
        <div class="rs-rotate-btn">
            <a class="rs-circle-btn" href="{{ route('home') }}#contact">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <path d="M26.29,20.29,18,28.59V0H16V28.59L7.71,20.29,6.29,21.71l10,10a1,1,0,0,0,1.41,0l10-10Z"></path>
                </svg>
            </a>
            <div class="gsap-rotate rs-text-circle-wrapper">
                <div class="rs-text-circle is-text-white" data-rotate-degree="12.545">Leading Digital Agency 2001.</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xxl-12">
                <div class="breadcrumb-wrapper">
                    <div class="breadcrumb-title-wrapper">
                        <h1 class="breadcrumb-title">Latest<br>
                            <span class="breadcrumb-text-wrap">
                                <span class="breadcrumb-more-btn">
                                    <a class="rs-btn has-icon hover-white" href="{{ route('home') }}">Back to home
                                        <span class="icon-box">
                                            <i class="fa-light fa-arrow-right-long icon-first"></i>
                                            <i class="fa-light fa-arrow-right-long icon-second"></i>
                                        </span>
                                    </a>
                                </span>
                                news
                            </span>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb area end -->

<!-- text slider area start -->
<div class="rs-text-slide-area rs-text-slide-one">
    <div class="text-slide-wrapper">
        <div class="gsap-marquee right speed-20 move-to-1000">
            <div class="text-slide-inner">
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Software Programming</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">UI/UX Design</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Development Agency</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Web Development</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Innovative Ideas</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">Programming</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
                <div class="text-slide-item">
                    <h5 class="text-slide-title">App Development</h5>
                    <div class="text-slide-thumb">
                        <img src="{{ asset('assets/images/shape/multi-line-shape.png') }}" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- text slider area end -->

<!-- postbox area start -->
<section class="rs-postbox-area section-space">
    <div class="container">
        <div class="row g-5">
            <div class="col-xl-8 col-lg-8">
                <div class="rs-postbox-wrapper">
                    @forelse($blogPosts as $post)
                    <article class="rs-postbox-item">
                        <div class="rs-postbox-thumb">
                            <a href="{{ route('blog.show', $post->slug) }}">
                                @if($post->featured_image)
                                    <img src="{{ asset($post->featured_image) }}" alt="image">
                                @else
                                    <img src="{{ asset('assets/images/blog/post/blog-post-0' . ($loop->index + 1) . '.png') }}" alt="image">
                                @endif
                            </a>
                            <div class="rs-postbox-tag">
                                <a href="{{ route('blog.show', $post->slug) }}">{{ $post->category ?? 'Creative Agency' }}</a>
                            </div>
                        </div>
                        <div class="rs-postbox-content">
                            <div class="rs-postbox-meta-list">
                                <div class="rs-postbox-meta-item">
                                    <span class="rs-meta-text">By<a class="meta-author" href="{{ route('blog.show', $post->slug) }}"> Kdot Web Tech</a></span>
                                </div>
                                <div class="rs-postbox-meta-item">
                                    <span class="rs-postbox-meta-text"><a href="{{ route('blog.show', $post->slug) }}">{{ $post->published_at ? $post->published_at->format('F d, Y') : 'Recent' }}</a></span>
                                </div>
                            </div>
                            <h4 class="rs-postbox-title">
                                <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                            </h4>
                            <div class="rs-postbox-text">
                                <p>{{ $post->excerpt ?? substr(strip_tags($post->content), 0, 200) . '...' }}</p>
                            </div>
                            <div class="rs-postbox-btn">
                                <a class="rs-btn has-icon" href="{{ route('blog.show', $post->slug) }}">Continue Reading
                                    <span class="icon-box">
                                        <i class="ri-arrow-right-line icon-first"></i>
                                        <i class="ri-arrow-right-line icon-second"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </article>
                    @empty
                    <p>No blog posts available at this time.</p>
                    @endforelse
                    
                    <!-- Pagination -->
                    @if($blogPosts->hasPages())
                    <div class="rs-pagination-wrapper mt-50">
                        <nav class="rs-pagination">
                            <ul class="pagination justify-content-center">
                                {{-- Previous Page Link --}}
                                @if ($blogPosts->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="ri-arrow-left-line"></i></span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $blogPosts->previousPageUrl() }}" rel="prev"><i class="ri-arrow-left-line"></i></a>
                                    </li>
                                @endif

                                {{-- Pagination Elements --}}
                                @foreach(range(1, $blogPosts->lastPage()) as $page)
                                    @if ($page == $blogPosts->currentPage())
                                        <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                                    @else
                                        <li class="page-item"><a class="page-link" href="{{ $blogPosts->url($page) }}">{{ $page }}</a></li>
                                    @endif
                                @endforeach

                                {{-- Next Page Link --}}
                                @if ($blogPosts->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $blogPosts->nextPageUrl() }}" rel="next"><i class="ri-arrow-right-line"></i></a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="ri-arrow-right-line"></i></span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                    @endif
                </div>
            </div>
            <div class="col-xl-4 col-lg-4">
                <div class="rs-sidebar-wrapper rs-sidebar-sticky">
                    <!-- Search Widget -->
                    <div class="sidebar-widget mb-30">
                        <div class="sidebar-search">
                            <form action="{{ route('blog.index') }}" method="GET">
                                <div class="sidebar-search-input">
                                    <input type="text" name="search" placeholder="Searching...">
                                    <button type="submit">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.11111 15.2222C12.0385 15.2222 15.2222 12.0385 15.2222 8.11111C15.2222 4.18375 12.0385 1 8.11111 1C4.18375 1 1 4.18375 1 8.11111C1 12.0385 4.18375 15.2222 8.11111 15.2222Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M16.9995 17L13.1328 13.1333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Categories Widget -->
                    <div class="sidebar-widget widget-categories-two mb-30">
                        <h5 class="sidebar-widget-title">Popular Categories</h5>
                        <div class="sidebar-widget-content">
                            <div class="list">
                                <ul>
                                    <li>
                                        <a href="{{ route('blog.index') }}">
                                            Creative Agency
                                            <i class="ri-arrow-right-line"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ route('blog.index') }}">
                                            Digital Agency
                                            <i class="ri-arrow-right-line"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ route('blog.index') }}">
                                            Digital Marketing
                                            <i class="ri-arrow-right-line"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ route('blog.index') }}">
                                            Startup Agency
                                            <i class="ri-arrow-right-line"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Posts Widget -->
                    <div class="sidebar-widget mb-30">
                        <h5 class="sidebar-widget-title">Recent Posts</h5>
                        <div class="sidebar-widget-content">
                            <div class="sidebar-blog-item-wrapper">
                                @foreach($blogPosts->take(3) as $recentPost)
                                <div class="sidebar-blog-item">
                                    <div class="sidebar-blog-thumb">
                                        <a href="{{ route('blog.show', $recentPost->slug) }}">
                                            @if($recentPost->featured_image)
                                                <img src="{{ asset($recentPost->featured_image) }}" alt="image">
                                            @else
                                                <img src="{{ asset('assets/images/blog/sidebar/blog-sm-0' . ($loop->index + 1) . '.png') }}" alt="image">
                                            @endif
                                        </a>
                                    </div>
                                    <div class="sidebar-blog-content">
                                        <h6 class="sidebar-blog-title">
                                            <a href="{{ route('blog.show', $recentPost->slug) }}">{{ $recentPost->title }}</a>
                                        </h6>
                                        <div class="sidebar-blog-meta">
                                            <i class="ri-calendar-line"></i>
                                            <span>{{ $recentPost->published_at ? $recentPost->published_at->format('M d, Y') : 'Recent' }}</span>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Tags Widget -->
                    <div class="sidebar-widget mb-30">
                        <h5 class="sidebar-widget-title">Popular Tags</h5>
                        <div class="sidebar-widget-content tagcloud">
                            <a href="{{ route('blog.index') }}">Agency</a>
                            <a href="{{ route('blog.index') }}">Creative</a>
                            <a href="{{ route('blog.index') }}">Digital</a>
                            <a href="{{ route('blog.index') }}">Marketing</a>
                            <a href="{{ route('blog.index') }}">Startup</a>
                        </div>
                    </div>

                    <!-- Social Widget -->
                    <div class="sidebar-widget">
                        <h5 class="sidebar-widget-title">Social</h5>
                        <div class="sidebar-social">
                            <div class="theme-social is-white is-radius">
                                <a href="#"><i class="ri-twitter-x-line"></i></a>
                                <a href="#"><i class="ri-facebook-fill"></i></a>
                                <a href="#"><i class="ri-linkedin-fill"></i></a>
                                <a href="#"><i class="ri-instagram-line"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- postbox area end -->

<style>
.rs-pagination-wrapper {
    margin-top: 50px;
}

.rs-pagination .pagination {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.rs-pagination .page-item .page-link {
    display: inline-block;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.rs-pagination .page-item.active .page-link {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.rs-pagination .page-item .page-link:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.rs-pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.rs-pagination .page-item.disabled .page-link:hover {
    background: transparent;
    border-color: #e5e7eb;
    color: #111827;
}
</style>

@endsection