@extends('layouts.user')

@php
    $schemaData = [
        "@context" => "https://schema.org",
        "@type" => "Blog",
        "name" => "La Classe Translation Blog",
        "description" => "Explore our blog for helpful tips, resources, and guides related to translation, apostille services, and multilingual document solutions.",
        "url" => url('/blogs'),
        "publisher" => [
            "@type" => "Organization",
            "name" => "La Classe Translation Pvt. Ltd.",
            "url" => url('/'),
            "logo" => [
                "@type" => "ImageObject",
                "url" => asset('images/Logo-1.webp')
            ]
        ],
        "mainEntity" => [
            "@type" => "ItemList",
            "itemListElement" => [
                [
                    "@type" => "ListItem",
                    "position" => 1,
                    "url" => url('/blogs'),
                    "name" => "Latest Blog Posts"
                ]
            ]
        ]
    ];
@endphp

@section('title', 'La Classe Blogs | Translation Insights, Language & Localization')
@section('description', 'Explore La Classe blogs for expert insights on translation, localization, multilingual content, language trends, global communication, and professional translations.')
@section('keywords', 'La Classe blogs, La Classe Translation Services, translation blog, localization blog, language industry insights, multilingual content, translation tips, professional translation articles')
@section('canonical', url('/blogs'))
@section('og_image', asset('images/Logo-1.webp'))

@section('schema')
{!! json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
@endsection

@section('content')
<div class="container py-5">
    <h1 class="mb-2">La Classe Blog</h1>
    <h2 class="mb-5 text-muted fs-4">Latest Updates, News, & Articles</h2>

    <div class="row">
        @forelse($blogs as $blog)
            <div class="col-lg-4 col-md-6 mb-4 d-flex">
                <div class="card flex-fill d-flex flex-column shadow-sm border-0">
                    {{-- Blog Image with Fallback --}}
                    @if($blog->image)
                        <img src="{{ asset($blog->image) }}" class="card-img-top" alt="{{ $blog->title }}" style="height: 220px; object-fit: cover;">
                    @else
                        <img src="{{ asset('images/Logo-1.webp') }}" class="card-img-top p-4 bg-light" alt="{{ $blog->title }}" style="height: 220px; object-fit: contain;">
                    @endif

                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title fw-bold text-dark mb-2">{{ $blog->title }}</h5>
                        
                        {{-- Safe Date Formatting --}}
                        <p class="card-text text-muted mb-2">
                            <small>
                                <i class="far fa-calendar-alt me-1"></i>
                                {{ $blog->created_at ? \Carbon\Carbon::parse($blog->created_at)->format('d M Y') : '' }}
                            </small>
                        </p>

                        {{-- Clean Summary Text --}}
                        <p class="card-text text-secondary flex-grow-1">
                            {{ Str::limit(strip_tags($blog->description), 110) }}
                        </p>

                        {{-- Safe Link --}}
                        <a href="{{ url('/blogs/' . $blog->slug) }}" class="btn btn-primary mt-auto">Read More <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center py-4">
                    Abhi koi blog post uplabdh nahi hai.
                </div>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if(method_exists($blogs, 'links'))
        <div class="d-flex justify-content-center mt-4">
            {{ $blogs->links() }}
        </div>
    @endif
</div>
@endsection