@extends('layouts.app')
@section('content')
<main class="conteudo-home">
    <section class="noticias-home">
        <div class="centraliza">
            <div class="topo-noticias-home">
                <h1 class="titulo-noticias-home">
                    <span>Últimas notícias</span> de Turismo
                </h1>
                <a href="{{ url('/noticias') }}" class="btn-mais-noticias"> + Notícias</a>
            </div>

            <section id="carrosel-noticias" class="carrosel-noticias owl-carousel owl-theme">
                <!-- Notícias serão carregadas aqui via JS -->
            </section>

        </div>
    </section>
</main>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    const container = document.querySelector('#carrosel-noticias');

    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 imagemUrl = noticia.imagem.startsWith('http') ? noticia.imagem : 'https://cnm.org.br' + noticia.imagem;

            const item = `
                <div class="item">
                    <a href="${noticia.link}" class="box-link-item" target="_blank">
                        <figure class="img-carrosel-noticias">
                            <img src="${imagemUrl}" alt="${noticia.titulo}">
                        </figure>
                        <div class="txt-carrosel-noticias">
                            <span class="data-carrosel-noticias">${noticia.datetime}</span>
                            <p class="chamada-carrosel-noticias">${noticia.titulo.substring(0, 50)}</p>
                        </div>
                    </a>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', item);
        });

        setTimeout(() => {
            if ($('.owl-carousel').hasClass('owl-loaded')) {
                $('.owl-carousel').trigger('destroy.owl.carousel');
                $('.owl-carousel').html(container.innerHTML);
            }

            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                responsive: {
                    0: { items: 1 },
                    600: { items: 2 },
                    1000: { items: 3 }
                }
            });
        }, 100); 

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

@endsection