@extends('layouts.site')

@section('content')

    <section id="noticias">
        <div class="container">
            <h1 class="titulo-internas" style="text-align: center;">Últimas Notícias</h1>

            <!-- Container para os cards -->
            <div id="noticias-container" class="row"></div>

            <!-- Paginação -->
            <div class="d-flex justify-content-center mt-4">
                <button id="carregar-mais" class="btn btn-outline-primary">Carregar Mais</button>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('noticias-container');
            const botaoMais = document.getElementById('carregar-mais');
            let page = 1;
            const limit = 12;
            const baseUrl = 'https://cnm.org.br/api/noticias';

            async function carregarNoticias() {
                try {
                    const response = await fetch(`${baseUrl}?search=seminário&limit=${limit}&page=${page}&offset=${(page - 1) * limit}&sort=created_at&order=desc`, {
                        headers: {
                            'User-Agent': navigator.userAgent,
                            '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) {
                        botaoMais.disabled = true;
                        botaoMais.innerText = "Sem mais notícias";
                        return;
                    }

                    noticias.forEach(noticia => {
                        const imagemUrl = noticia.imagem?.startsWith('http') ? noticia.imagem : 'https://cnm.org.br' + noticia.imagem;
                        const titulo = decodeHTMLEntities(noticia.titulo ?? '');
                        const resumo = truncate(decodeHTMLEntities(noticia.conteudo ?? ''), 400);
                        const link = noticia.link ?? '#';

                        const card = document.createElement('div');
                        card.className = 'col-12 col-sm-6 col-md-4 col-lg-3 d-flex align-items-stretch';
                        card.style.marginBottom = '10px';
                        card.innerHTML = `
          <article class="card-noticia" style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border: 1px solid #ddd; height: 100%;">
            <a href="${link}" style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
              <div>
                <figure>
                  <img src="${imagemUrl}" alt="" class="img-fluid" style="width: 100%; height: 120px; object-fit: cover;">
                </figure>
                <h2 class="data-noticia">${noticia.datetime ?? ''}</h2>
                <h1>${titulo}</h1>
                <p style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  max-height: 5em;
                  line-height: 1.5em;
                  height: 60px;
                ">${resumo}</p>
              </div>
              <span style="align-self: flex-end; margin-top: auto; width: 100%;">
                <svg class="svg-article-dims"><use xlink:href="sprite-svg/sprite.svg#article"></use></svg>
                Leia Mais
                <svg class="svg-arrow-dims"><use xlink:href="sprite-svg/sprite.svg#arrow"></use></svg>
              </span>
            </a>
          </article>
        `;
                        container.appendChild(card);
                    });

                    page++; // próxima página ao clicar
                } catch (err) {
                    console.error(err);
                    container.innerHTML = `<p>Erro ao carregar notícias: ${err.message}</p>`;
                    botaoMais.style.display = 'none';
                }
            }

            function decodeHTMLEntities(text) {
                const el = document.createElement('textarea');
                el.innerHTML = text;
                return el.value;
            }

            function truncate(text, limit) {
                const stripped = text.replace(/(<([^>]+)>)/gi, '');
                return stripped.length > limit ? stripped.slice(0, limit) + '...' : stripped;
            }

            // Primeiro carregamento
            carregarNoticias();

            // Clique no botão "Carregar Mais"
            botaoMais.addEventListener('click', carregarNoticias);
        });
    </script>

@endsection