@extends('layouts.user')

@php
    use Illuminate\Support\Str;
    use Carbon\Carbon;

    // 1. Clean Meta Description
    $cleanDesc = !empty($blog->meta_description) 
        ? $blog->meta_description 
        : Str::limit(strip_tags($blog->description), 155);

    // 2. SEO Title & URLs
    $metaTitle = !empty($blog->meta_title) ? $blog->meta_title : $blog->title;
    $canonicalUrl = !empty($blog->canonical_url) ? $blog->canonical_url : url('/blogs/' . $blog->slug);
    $imageUrl = !empty($blog->image) ? asset($blog->image) : asset('images/Logo-1.webp');

    // 3. Safe ISO Dates
    $createdDate = $blog->created_at ? Carbon::parse($blog->created_at)->toIso8601String() : now()->toIso8601String();
    $updatedDate = $blog->updated_at ? Carbon::parse($blog->updated_at)->toIso8601String() : $createdDate;

    // 4. Safe JSON-LD Schema Array
    $schemaData = [
        "@context" => "https://schema.org",
        "@type" => "BlogPosting",
        "mainEntityOfPage" => [
            "@type" => "WebPage",
            "@id" => $canonicalUrl
        ],
        "headline" => $blog->title,
        "description" => $cleanDesc,
        "image" => $imageUrl,
        "author" => [
            "@type" => "Organization",
            "name" => "La Classe Translation Pvt. Ltd.",
            "url" => url('/')
        ],
        "publisher" => [
            "@type" => "Organization",
            "name" => "La Classe Translation Pvt. Ltd.",
            "logo" => [
                "@type" => "ImageObject",
                "url" => asset('images/Logo-1.webp')
            ]
        ],
        "datePublished" => $createdDate,
        "dateModified" => $updatedDate
    ];
@endphp

@section('title', $metaTitle . ' | La Classe Translation')
@section('description', $cleanDesc)
@section('keywords', !empty($blog->meta_keywords) ? $blog->meta_keywords : 'translation company, translation services, certified translation')
@section('canonical', $canonicalUrl)
@section('og_image', $imageUrl)

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

@section('content')
<style>
    .blog-content {
        font-size: 16px;
        line-height: 1.8;
        color: #2c3e50;
    }
    .blog-content img {
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0;
    }
    .blog-content table {
        width: 100%;
        margin-bottom: 1.5rem;
        border-collapse: collapse;
    }
    .blog-content table td, 
    .blog-content table th {
        border: 1px solid #dee2e6;
        padding: 10px;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            {{-- Breadcrumb --}}
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('/blogs') }}">Blogs</a></li>
                    <li class="breadcrumb-item active text-truncate" style="max-width: 300px;" aria-current="page">{{ $blog->title }}</li>
                </ol>
            </nav>

            {{-- Title --}}
            <h1 class="fw-bold mb-3">{{ $blog->title }}</h1>

            {{-- Published Date --}}
            <p class="text-muted mb-4 pb-2 border-bottom">
                <i class="far fa-calendar-alt me-1"></i>
                {{ $blog->created_at ? \Carbon\Carbon::parse($blog->created_at)->format('d M Y') : '' }}
            </p>

            {{-- Featured Image --}}
            @if($blog->image)
                <div class="mb-4 text-center">
                    <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="img-fluid rounded shadow-sm" style="max-height: 450px; width: 100%; object-fit: cover;">
                </div>
            @endif

            {{-- Blog Body --}}
            <div class="blog-content mb-5">
                {!! $blog->description !!}
            </div>

            <hr class="my-4">
            
            <a href="{{ url('/blogs') }}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i> Back to All Blogs
            </a>

        </div>
    </div>
</div>
@endsection