@extends('layouts.app')
@section('content')

<section class="conteudo-internas">
    <div class="centraliza">
        <div class="conteudo-esquerda">
            <h1 class="titulo-pagina">
                Notícias
            </h1>

            <div class="box-btn-voltar">
                <a href="javascript:window.history.go(-1)">
                    <svg class="svg-seta-voltar-dims">
                        <use xlink:href="sprite-svg/sprite.svg#seta-voltar"></use>
                    </svg>
                    Voltar
                </a>
            </div>
            <div id="noticias" class="lista">
                <!-- Notícias serão carregadas aqui via JavaScript -->
            </div>
            <!--Fim Lista de Noticias-->

        </div> <!-- final conteudo-esquerda -->

        <aside class="conteudo-direita">
            @include('layouts.conteudo-direita')
        </aside>

    </div> <!-- final centraliza -->
</section>

<script>
    document.addEventListener('DOMContentLoaded', async () => {
        const container = document.getElementById('noticias');
        const defaultImage = "{{ asset('assets/img/ex-img-noticia-carosel.png') }}";

        try {
            const response = await fetch('https://cnm.org.br/api/noticias?categoria=turismo&limit=12&page=1&offset=0&sort=created_at&order=desc', {
                headers: {
                    'User-Agent': 'Mozilla/5.0',
                    'Accept': 'application/json',
                    'Referer': 'https://cnm.org.br'
                }
            });

            if (!response.ok) throw new Error('Erro ao buscar notícias');
            const data = await response.json();
            const noticias = data.noticias?.data ?? [];

            if (noticias.length === 0) {
                container.innerHTML = '<p>Nenhuma notícia disponível no momento.</p>';
                return;
            }

            noticias.forEach(noticia => {
                const article = document.createElement('article');
                article.className = 'box-noticia';

                const imageUrl = noticia.imagem ?
                    (noticia.imagem.startsWith('http') ?
                        noticia.imagem :
                        'https://cnm.org.br' + noticia.imagem) :
                    defaultImage;

                const excerpt = noticia.conteudo
                    .replace(/(<([^>]+)>)/gi, "")
                    .substring(0, 300);

                article.innerHTML = `
                    <a href="${noticia.link}">
                        <figure>
                            <img src="${imageUrl}" alt="${noticia.titulo}">
                        </figure>
                        <div class="texto-lista-noticias">
                            <span class="data-lista-noticia">${noticia.datetime}</span>
                            <h1>${noticia.titulo}</h1>
                            <p>${excerpt}</p>
                        </div>
                    </a>
                `;

                container.appendChild(article);
                container.appendChild(document.createElement('hr'));
            });

        } catch (error) {
            console.error(error);
            container.innerHTML = '<p>Erro ao carregar notícias.</p>';
        }
    });
</script>

@endsection