@extends('pages_landing.index')

@section('content')
    
    <!-- === 1. HERO SECTION: Title & Lead (bg-soft-primary) === -->
    <section class="section-frame overflow-hidden">
        <div class="wrapper bg-soft-primary">
            <div class="container py-12 py-md-16 text-center">
                <div class="row">
                    <div class="col-md-7 col-lg-6 col-xl-5 mx-auto">
                        <h1 class="display-1 mb-3">LIMS Insights & News</h1>
                        <p class="lead px-lg-5 px-xxl-8 mb-1">Stay up-to-date with the latest company announcements and expert articles on lab management, compliance, and calibration technology.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- === 2. BLOG CONTENT & SIDEBAR (bg-light) === -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12">

                <!-- MAIN CONTENT COLUMN (8/12) -->
                <div class="col-lg-8">
                    <div class="blog classic-view"> 

                        {{-- Loop through blog posts: Using the requested compact, horizontal list view --}}
                        @foreach ($blogs as $blog)
                            <article class="post mb-6">
                                <div class="card">
                                    <div class="row g-0">
                                        <div class="col-md-5 col-lg-4">
                                            <figure class="rounded-t-3 rounded-b-0 rounded-l-3 h-100 overflow-hidden">
                                                <a href="{{ route('blog-details', $blog['slug']) }}">
                                                    <img class="h-100 w-100 object-fit-cover" src="{{ asset($blog['image']['src']) }}" alt="{{ $blog['image']['alt'] }}"
                                                        style="{{ $blog['image']['style'] }}; object-fit: cover; height: 100%;">
                                                </a>
                                                <figcaption class="overlay overlay-1 hover-scale">
                                                    <h5 class="from-top mb-0">Read Article</h5>
                                                </figcaption>
                                            </figure>
                                        </div>
                                        
                                        <!-- Content Column (approx 60% width on desktop) -->
                                        <div class="col-md-7 col-lg-8 d-flex flex-column">
                                            <div class="card-body pb-3">
                                                <div class="post-header">
                                                    <div class="post-category text-line">
                                                        <a href="{{ url('blogs/' . $blog['slug']) }}" class="hover" rel="category">{{ $blog['category'] }}</a>
                                                    </div>
                                                    <h2 class="post-title mt-1 mb-2 fs-14">
                                                        <a class="link-dark"
                                                            href="{{ url('blogs/' . $blog['slug']) }}">{{ $blog['title'] }}</a>
                                                    </h2>
                                                </div>
                                                <div class="post-content">
                                                    <p class="mb-0">{{ Str::limit($blog['description'], 150) }}</p> 
                                                </div>
                                            </div>
                                            
                                            {{-- Post Footer (Meta Data) - pushed to bottom with flex-column --}}
                                            <div class="card-footer mt-auto pt-2">
                                                <ul class="post-meta d-flex mb-0">
                                                    <li class="post-date me-4">
                                                        <i class="fa fa-calendar-alt me-1"></i>
                                                        <span>{{ $blog['date'] }}</span>
                                                    </li>
                                                    <li class="post-author" style="display: flex; align-items: center;">
                                                        <a href="{{ url('blogs/' . $blog['slug']) }}"><i class="fa fa-user me-1"></i>
                                                            <span>By {{ $blog['author'] }}</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                        
                        {{-- PAGINATION BLOCK --}}
                        <nav class="d-flex" aria-label="pagination">
                            <ul class="pagination">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                {{-- <li class="page-item"><a class="page-link" href="#">2</a></li> --}}
                                {{-- <li class="page-item"><a class="page-link" href="#">3</a></li> --}}
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true"><i class="fa fa-angle-right"></i></span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                
                <!-- SIDEBAR COLUMN (4/12) -->
                <aside class="col-lg-4 sidebar mt-8 mt-lg-0"> 
                    {{-- SEARCH WIDGET --}}
                    <div class="widget">
                        <form class="search-form">
                            <div class="form-floating mb-0">
                                <input id="search-form" type="text" class="form-control" placeholder="Search blog...">
                                <label for="search-form">Search blog...</label>
                            </div>
                        </form>
                    </div>
                    
                    {{-- ABOUT US WIDGET --}}
                    <div class="widget">
                        <h4 class="widget-title mb-3">About QuantumCals</h4>
                        <p>QuantumCals is a next-generation Laboratory Information Management System (LIMS) designed to
                            simplify operations in engineering, calibration, and testing labs. Our blog shares expert
                            insights, best practices, and practical tips to help labs improve accuracy, ensure compliance,
                            and embrace digital transformation. Whether you're a technician, lab manager, or quality
                            officer, we’re here to empower your lab with smarter solutions.</p>
                        <nav class="nav social">
                            {{-- <a href="#"><i class="fab fa-twitter"></i></a> --}}
                            <a href="https://www.facebook.com/people/Quantum-Cals/61576026851786/" target="_blank"><i
                                    class="fab fa-facebook"></i></a>
                            <a href="https://www.linkedin.com/company/quantumcals?trk=public_post_feed-actor-name"
                                target="_blank"><i class="fab fa-linkedin"></i></a>
                            <a href="https://www.instagram.com/quantumcals/" target="_blank"><i class="fab fa-instagram"></i></a>
                        </nav>
                    </div>

                    {{-- CATEGORIES WIDGET --}}
                    <div class="widget">
                        <h4 class="widget-title mb-3">Categories</h4>
                        <ul class="unordered-list bullet-primary text-reset">
                            <li><a href="#">LIMS Automation (21)</a></li>
                            <li><a href="#">Compliance & ISO (19)</a></li>
                            <li><a href="#">Calibration Tips (16)</a></li>
                            <li><a href="#">Product News (7)</a></li>
                            <li><a href="#">Digital Transformation (12)</a></li>
                        </ul>
                    </div>

                    {{-- TAGS WIDGET --}}
                    <div class="widget">
                        <h4 class="widget-title mb-3">Popular Tags</h4>
                        <ul class="list-unstyled tag-list">
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">NABL</a></li>
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">ISO 17025</a></li>
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">Metrology</a></li>
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">SaaS</a></li>
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">Digital Lab</a></li>
                            <li><a href="#" class="btn btn-soft-ash btn-sm rounded-pill">AI in LIMS</a></li>
                        </ul>
                    </div>
                </aside>
            </div>
        </div>
    </section>
@endsection