@extends('layouts.main')

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

@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">
                        <h5 class="news-title mb-0 text-break text-start">{{ $post->title }}</h5>
                    </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 $post)
        <div class="col-12 col-md-6 col-lg-4 card">
            <a href="{{ route('novidades.show', $post->slug) }}" class="btn-blog">
                <div class="card-img-wrapper">
                    <img src="{{ asset('img/uploads/' . $post->capa) }}" alt="{{ $post->title }}"
                        class="card-img-top">
                </div>
                <div class="card-body d-flex flex-column px-4">
                    <h5 class="card-title my-4">{{ $post->title }}</h5>
                    <p class="card-text">
                        {!! \Illuminate\Support\Str::limit(strip_tags($post->description), 150, '...') !!}
                    </p>
                </div>
                <div class="card-footer px-4">
                    <small class="text-data">{{ $post->created_at->format('d/m/Y') }}</small>
                </div>
            </a>
        </div>
        @endforeach

        {{-- Última notícia, visível apenas em telas maiores --}}
        @if($latestPosts->count() > 2)
        <div class="d-none d-lg-block col-lg-4 card">
            <a href="{{ route('novidades.show', $post->slug) }}" class="btn-blog">
                @php $post = $latestPosts->last(); @endphp
                <div class="card-img-wrapper">
                    <img src="{{ asset('img/uploads/' . $post->capa) }}" alt="{{ $post->title }}" class="card-img-top">
                </div>
                <div class="card-body d-flex flex-column px-4">
                    <h5 class="card-title my-4">{{ $post->title }}</h5>
                    <p class="card-text">
                        {!! \Illuminate\Support\Str::limit(strip_tags($post->description), 150, '...') !!}
                    </p>
                </div>
                <div class="card-footer px-4">
                    <small class="text-data">{{ $post->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