@extends('layouts.site')

@section('content')
    <main>
        <!-- Eventos destaques -->
        <section id="eventos-destaque">
            <div class="container-fluid">
                <div class="row" style="margin-left: 0px; margin-right: 0px;">
                    <div class="col-md-5">
                        <article class="chamada-principal" style="margin-bottom: 24px;">
                            <h1 class="titulo-chamada"><span class="destaque-texto-amarelo">Todas as terças e quintas,</span> <br>ao vivo e em formato virtual</h1>
                            <p class="texto-chamada">
                                Gratuito para Municípios filiados à CNM Eventos com duração de 1 dia, sobre temas
                                atuais e relevantes.
                            </p>
                            <h2 style="color: #FFCB05; font-weight: bold; font-size: 42px;">Vagas limitadas. Garanta a sua!</h2>
                        </article>
                    </div>
                    <div class="col-md-7">
                        <figure class="logo-seminarios-tecnicos">
                            <img src="assets/img/logo-seminarios-tecnicos.png" alt="" class="img-fluid" width="667px">
                        </figure>
                    </div>
                </div>
            </div>
        </section>
        <!-- Fim Eventos destaques -->

        <!-- Cards de seminários -->
        <section id="box-seminarios">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 64px;">
                    @if (!empty($eventos) && count($eventos) > 0)
                        @foreach ($eventos as $evento)
                            <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                <div class="card-seminario">
                                    <figure>
                                        <img src="{{ $evento['image'] }}" alt="">
                                    </figure>
                                    <h2 class="data-seminario">Dia {{ \Carbon\Carbon::parse($evento['startdate'])->format('d/m') }}</h2>
                                    <div class="box-titulo">
                                        <h1 class="titulo-seminario">{{ $evento['title'] }}</h1>
                                    </div>
                                    <div class="box-btn-acao">
                                        <a class="{{ $evento['textBtnInscricao'] == 'Certificado'
                                    ? 'btn-certificado'
                                    : (in_array($evento['textBtnInscricao'], ['Inscrições encerradas', 'Evento Encerrado'])
                                        ? 'btn-inscricoes-encerradas'
                                        : 'btn-acesse') }}" target="_blank"
                                           href="{{ $evento['linkBtnInscricao'] ?? '#' }}">
                                            {{ $evento['textBtnInscricao'] }}
                                        </a>
                                        <a class="btn-programacao" href="/evento/{{ $evento['alias'] }}/programacao">Programação</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p></p>
                    @endif
                </div>
            </div>
        </section>
        <!-- Fim Cards de seminários -->

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

                <!--Botão para ver mais Notícias-->
                <div style="display: flex; justify-content: center;">
                    <a class="btn-padrao" href="/noticias" style="margin-top: 64px; color: #004fca; border-color: #004fca;">
                        <svg style="background: #004fca; fill: #fff;" class="svg-add-dims">
                            <use xlink:href="sprite-svg/sprite.svg#add"></use>
                        </svg>Mais Notícias
                    </a>
                </div>
                <!--Fim Botão para ver mais Notícias-->
            </div>
        </section>

        <script>
            document.addEventListener('DOMContentLoaded', async () => {
                const container = document.getElementById('noticias-container');
                const defaultImage = 'https://cnm.org.br/url-da-imagem-padrao.jpg';
                const apiUrl = 'https://cnm.org.br/api/noticias?search=seminário&limit=12&page=1&offset=0&sort=created_at&order=desc';

                try {
                    const response = await fetch(apiUrl, {
                        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) {
                        container.innerHTML = '<p>Nenhuma notícia encontrada.</p>';
                        return;
                    }

                    noticias.forEach(noticia => {
                        const imagemUrl = noticia.imagem?.startsWith('http') ? noticia.imagem : 'https://cnm.org.br' + noticia.imagem;
                        const excerpt = noticia.conteudo.replace(/(<([^>]+)>)/gi, '').substring(0, 400) + '...';

                        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="${noticia.link}" style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <figure>
                <img src="${imagemUrl || defaultImage}" alt="" class="img-fluid" style="width: 100%; height: 120px; object-fit: cover;">
              </figure>
              <h2 class="data-noticia">${noticia.datetime}</h2>
              <h1>${decodeHTMLEntities(noticia.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;">
                ${decodeHTMLEntities(excerpt)}
              </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);
                    });

                } catch (err) {
                    console.error(err);
                    container.innerHTML = `<p>Erro ao carregar notícias: ${err.message}</p>`;
                }

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

        <div class="politica" id="police">
            <p>
                Utilizamos cookies e tecnologia para aprimorar sua experiência de navegação de acordo com o <a href="https://old.cnm.org.br/informe/exibe/politicadeprivacidade" target="_blank">política de privacidade</a> e <a href="https://old.cnm.org.br/informe/exibe/politicadecookies" target="_blank">política de cookies</a>.</p>
            <button  class="btn btn-primary" onclick="setPolicy()">ACEITO</button>
        </div>

        <style>
            .politica {
                margin: 30px;
                position: fixed;
                background-color: #fff;
                padding: 30px;
                bottom: 0px;
                box-sizing: border-box;
                border-radius: 8px;
                width: calc(100% - 60px);
                z-index: 9999999999999999;
                box-shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .hide {
                display: none;
            }
        </style>
        <!-- Noticias -->
    </main>
@endsection