@extends('Frontend.index')
@section('content')

<style>
    /* 1. Banner Full Width & Anti-Potong */
    .breadcrumb__full-width {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        line-height: 0;
        background-color: #fff;
    }

    .breadcrumb__full-width img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 2. Thumbnail Blog Anti-Potong (Contain) */
    .postbox__thumb-container {
        flex: 0 0 260px; 
        background-color: #f0f0f0; /* Background netral jika gambar beda rasio */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .postbox__thumb-container img.blog-thumb {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Menggunakan contain agar gambar UTUH tidak kepotong */
        transition: 0.6s transform ease;
        background-color: #fff;
    }

    /* 3. Hover Effect */
    .postbox__item:hover {
        border-color: #dc354544 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    }
    
    .postbox__item:hover img.blog-thumb {
        transform: scale(1.08);
    }

    /* 4. Responsive Mobile */
    @media (max-width: 768px) {
        .postbox__item { 
            flex-direction: column !important; 
        }
        .postbox__thumb-container { 
            flex: 0 0 auto !important; 
            width: 100%;
            height: 200px; 
        }
    }

    .read-more-link:hover {
        gap: 12px !important;
        color: #bb2d3b !important;
    }
</style>

<main>
    <div class="breadcrumb__full-width">
        <img src="/Frontend/img/breadcrum/BLOG.png" alt="Blog Banner">
    </div>

    <div class="postbox__area pt-60 pb-80" style="background-color: #f8f9fa;">
        <div class="container">
            <div class="row">
                <div class="col-xxl-8 col-xl-8 col-lg-8">
                    <div class="postbox__wrapper pr-10">
                        @foreach($blogPagination as $data)   
                        <article class="postbox__item mb-30 transition-3 shadow-sm rounded-3" 
                                 style="background: #fff; overflow: hidden; border: 1px solid #eee; display: flex; flex-direction: row; align-items: stretch; min-height: 200px;">
                            
                            <div class="postbox__thumb-container">
                                <a href="{{ route('fe-blog-details',$data->slug_judul) }}" style="width: 100%; height: 100%; display: block;">
                                    <img src="{{ url('Frontend/img/blog/'.$data->image) }}" alt="{{ $data->judul }}" class="blog-thumb">
                                </a>
                                <div style="position: absolute; top: 10px; left: 10px; z-index: 2;">
                                    <span style="background: #dc3545; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;">
                                       {{ $data->kategori }}
                                    </span>
                                </div>
                            </div>

                            <div class="postbox__content p-4" style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
                                <div class="postbox__meta mb-10" style="font-size: 12px; color: #888;">
                                    <span class="mr-15"><i class="fal fa-user-circle" style="color: #dc3545;"></i> {{ $data->author }}</span>
                                    <span><i class="fal fa-clock" style="color: #dc3545;"></i> {{ date('d M Y', strtotime($data->created_at))}}</span>
                                </div>
                                <h3 class="postbox__title mb-10" style="font-size: 18px; font-weight: 700; line-height: 1.4; margin-top: 0;">
                                    <a href="{{ route('fe-blog-details',$data->slug_judul) }}" style="color: #222; text-decoration: none; transition: 0.3s;">
                                        {{ Str::limit($data->judul, 65) }}
                                    </a>
                                </h3>
                                <div class="postbox__text mb-15">
                                    <p style="color: #666; font-size: 13px; line-height: 1.5; margin-bottom: 0;">
                                        {{ Str::limit($data->desc, 100) }}
                                    </p>
                                </div>
                                <div class="post__button">
                                    <a href="{{ route('fe-blog-details',$data->slug_judul) }}" class="read-more-link"
                                       style="color: #dc3545; font-size: 12px; font-weight: 800; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: 0.3s;">
                                       Read More <i class="far fa-long-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                        @endforeach

                        <div class="basic-pagination mt-40">
                            {{ $blogPagination->links() }}
                        </div>
                    </div>
                </div>

                <div class="col-xxl-4 col-xl-4 col-lg-4">
                    <div class="sidebar__wrapper" style="position: sticky; top: 100px;">
                        <div class="sidebar__widget mb-30 p-4 rounded-3 shadow-sm" style="background: #fff; border-top: 3px solid #dc3545;">
                            <h3 class="sidebar__widget-title mb-20" style="font-size: 17px; font-weight: 700;">Cari Artikel</h3>
                            <div class="sidebar__search">
                                <form action="{{route('fe-blog-search')}}" method="GET">
                                    <div class="sidebar__search-input-2 p-relative">
                                        <input type="search" name="q" placeholder="Cari..." 
                                               style="width: 100%; padding: 10px 15px; border: 1px solid #eee; border-radius: 6px; background: #f9f9f9; font-size: 14px;">
                                        <button type="submit" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #dc3545; background: none; border: none;">
                                            <i class="far fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="sidebar__widget mb-30 p-4 rounded-3 shadow-sm" style="background: #fff; border-top: 3px solid #dc3545;">
                            <h3 class="sidebar__widget-title mb-20" style="font-size: 17px; font-weight: 700;">Kategori</h3>
                            <ul class="category-list" style="padding: 0; margin: 0;">
                                @foreach($kategori as $x)
                                <li style="list-style: none; margin-bottom: 8px;">
                                    <a href="{{route('fe-kategori-details',$x->slug_kategori)}}" 
                                       style="display: flex; justify-content: space-between; font-size: 13.5px; padding: 10px 12px; background: #f9f9f9; border-radius: 6px; color: #444; transition: 0.2s; text-decoration: none;">
                                        {{$x->kategori}}
                                        <i class="fal fa-angle-right" style="color: #dc3545;"></i>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection