@extends('layouts.main')

@section('title', $post->title . ' - Febratex Summit')
@section('description', \Illuminate\Support\Str::limit(strip_tags($post->description), 160, '...'))

@section('og_type', 'article')
@section('og_title', $post->title)
@section('og_description', \Illuminate\Support\Str::limit(strip_tags($post->description), 300, '...'))
@section('og_url', route('novidades.show', $post->slug))
@section('og_image', asset('img/uploads/' . $post->capa))
@section('og_image_alt', 'Imagem do artigo: ' . $post->title)

@section('twitter_title', $post->title)
@section('twitter_description', \Illuminate\Support\Str::limit(strip_tags($post->description), 200, '...'))
@section('twitter_image', asset('img/uploads/' . $post->capa))
@section('twitter_image_alt', 'Imagem do artigo: ' . $post->title)

@section('canonical', route('novidades.show', $post->slug))

@push('head')
<meta property="article:published_time" content="{{ $post->created_at->toISOString() }}" />
<meta property="article:modified_time" content="{{ $post->updated_at->toISOString() }}" />
<meta property="article:section" content="Indústria Têxtil" />
<meta property="article:tag" content="Febratex, Indústria Têxtil, Confecção, Inovação" />

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "{{ $post->title }}",
  "description": "{{ \Illuminate\Support\Str::limit(strip_tags($post->description), 300, '...') }}",
  "image": "{{ asset('img/uploads/' . $post->capa) }}",
  "datePublished": "{{ $post->created_at->toISOString() }}",
  "dateModified": "{{ $post->updated_at->toISOString() }}",
  "author": {
    "@type": "Organization",
    "name": "Febratex Summit"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Febratex Summit",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ asset('img/logo-febratex.png') }}"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{ route('novidades.show', $post->slug) }}"
  }
}
</script>
@endpush

@section('content')
<div class="container news-open">
    <div class="news-open card pt-0 pt-md-2 pt-lg-4 mt-4">

        <div class="blog-img">
            <div class="image-wrapper">
                <div class="blur-background"
                    style="background-image: url('{{ asset('img/uploads/' . $post->capa) }}');"></div>
                <img src="{{ asset('img/uploads/' . $post->capa) }}" class="main-img" alt="{{ $post->title }}">
            </div>
        </div>

        <div class="p-0 p-md-3 p-lg-5">
            <div class="w-100 d-flex flex-md-row flex-column justify-content-center align-items-center text-center mt-2 mt-md-3 mt-lg-4">
                <div class="d-flex align-items-center flex-md-row flex-column justify-content-center">
                    <div class="me-md-3">
                        <p class="news-date mb-0">{{ $post->created_at->format('d/m/Y') }}</p>
                    </div>
                    <div class="ms-md-3">
                        <h1 class="news-title mb-0 text-break text-start">{{ $post->title }}</h1>
                    </div>
                </div>
            </div>

            <div class="card-body mt-4">
                <div id="description" class="news-corpo">{!! $post->description !!}</div>
            </div>
        </div>
    </div>

    <div class="col-12 d-flex justify-content-center">
        <h3 class="mb-4 text-leia-mais">LEIA MAIS</h3>
    </div>
    <div class="col-12 d-flex flex-column flex-md-row mt-4 mb-5 gap-2 blog">
        @foreach ($latestPosts->take(2) as $relatedPost)
        <div class="col-12 col-md-6 col-lg-4 card">
            <a href="{{ route('novidades.show', $relatedPost->slug) }}" class="btn-blog">
                <div class="card-img-wrapper">
                    <img src="{{ asset('img/uploads/' . $relatedPost->capa) }}" alt="{{ $relatedPost->title }}"
                        class="card-img-top">
                </div>
                <div class="card-body d-flex flex-column px-4">
                    <h5 class="card-title my-4">{{ $relatedPost->title }}</h5>
                    <p class="card-text">
                        {!! \Illuminate\Support\Str::limit(strip_tags($relatedPost->description), 150, '...') !!}
                    </p>
                </div>
                <div class="card-footer px-4">
                    <small class="text-data">{{ $relatedPost->created_at->format('d/m/Y') }}</small>
                </div>
            </a>
        </div>
        @endforeach

        @if($latestPosts->count() > 2)
        @php $lastPost = $latestPosts->last(); @endphp
        <div class="d-none d-lg-block col-lg-4 card">
            <a href="{{ route('novidades.show', $lastPost->slug) }}" class="btn-blog">
                <div class="card-img-wrapper">
                    <img src="{{ asset('img/uploads/' . $lastPost->capa) }}" alt="{{ $lastPost->title }}" class="card-img-top">
                </div>
                <div class="card-body d-flex flex-column px-4">
                    <h5 class="card-title my-4">{{ $lastPost->title }}</h5>
                    <p class="card-text">
                        {!! \Illuminate\Support\Str::limit(strip_tags($lastPost->description), 150, '...') !!}
                    </p>
                </div>
                <div class="card-footer px-4">
                    <small class="text-data">{{ $lastPost->created_at->format('d/m/Y') }}</small>
                </div>
            </a>
        </div>
        @endif
    </div>
</div>

<script>
    const paragraphs = document.querySelectorAll('#description p');
    paragraphs.forEach(paragraph => {
        paragraph.removeAttribute('style');
    });
</script>
@endsection