@extends('layouts.app')

@section('content')
<!--conteúdo-->
<section class="conteudo-internas">
    <div class="centraliza" id="lista-noticia">
        <h1 class="titulo-internas">
            Notícias
            <a href="javascript:window.history.go(-1)" class="btn-voltar">
                <svg class="svg-voltar-dims">
                    <use xlink:href="{{ asset('sprite-svg/sprite.svg#voltar') }}"></use>
                </svg>
                <span>Voltar</span>
            </a>
        </h1>

        <div id="noticias-container" class="lista">
            <!-- Notícias serão inseridas aqui via JS -->
        </div>

        <div class="paginacao-ajax text-center mt-4">
            <button id="carregarMais" class="link-btn-rosa">Carregar mais notícias</button>
        </div>
    </div>
</section>
<!-- fim conteúdo -->
@endsection
@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let page = 1;
        const limit = 12;
        const container = document.getElementById('noticias-container');
        const loadMoreBtn = document.getElementById('carregarMais');

        function carregarNoticias() {
            fetch(`https://cnm.org.br/api/noticias?categoria=mulheres&limit=${limit}&page=${page}&sort=created_at&order=desc`, {
                    headers: {
                        'User-Agent': navigator.userAgent,
                        'Accept': 'application/json',
                        'Referer': 'https://cnm.org.br/'
                    }
                })
                .then(res => res.json())
                .then(res => {
                    const noticias = res?.noticias?.data ?? [];

                    if (!noticias.length && page === 1) {
                        container.innerHTML = `<h1 class="text-center">Nenhuma notícia encontrada</h1>`;
                        loadMoreBtn.style.display = 'none';
                        return;
                    }

                    noticias.forEach((noticia, index) => {
                        const imagem = noticia.imagem?.startsWith('http') ? noticia.imagem : `https://cnm.org.br/${noticia.imagem ?? ''}`;
                        const conteudo = (noticia.conteudo ?? '').replace(/(<([^>]+)>)/gi, "").slice(0, 320);

                        const html = `
            ${index > 0 ? '<hr>' : ''}
            <article class="box-noticia">
              <a href="${noticia.link}">
                <figure>
                  <img src="${imagem}" alt="${noticia.titulo}">
                </figure>
                <div class="texto-lista-noticias">
                  <h1>${noticia.titulo}</h1>
                  <span class="data-lista-noticia">${noticia.datetime ?? ''}</span>
                  <p>${conteudo}...</p>
                </div>
              </a>
            </article>
          `;
                        container.insertAdjacentHTML('beforeend', html);
                    });

                    if (!res.noticias?.next_page_url) {
                        loadMoreBtn.style.display = 'none';
                    }

                    page++;
                })
                .catch(err => {
                    container.innerHTML = `<h1 class="text-center">Erro ao buscar notícias</h1>`;
                    console.error('Erro ao buscar:', err);
                    loadMoreBtn.style.display = 'none';
                });
        }

        carregarNoticias();

        loadMoreBtn.addEventListener('click', carregarNoticias);
    });
</script>
@endsection