@extends('layouts.app')
@section('content')
    <!--Fim Cabeçalho-->

    <section class="box-mmm centraliza">
        <article class="sobre-mmm">
            <h1 class="titulo-sobre-mmm">O que é o MMM?</h1>
            <p class="texto-sobre-mmm">O <strong>Movimento Mulheres Municipalistas</strong> é o primeiro movimento
                municipalista feminino apartidário brasileiro. Foi lançado em 2017, na XX Marcha em Defesa dos Municípios, e
                tem como meta principal unir prefeitas, vice-prefeitas, vereadoras e secretárias municipais na luta pela
                pauta municipalista e pela maior inserção das mulheres na política e no poder...</p>
            <div class="botoes-sobre-mmm">
                <a href="{{ url('o-que-e-mmm') }}" class="continue-lendo" title="Continue Lendo">
                    Continue Lendo
                </a>
                <a href="#ancora-receber-informacoes" class="btn-contato ancora" title="Entre em Contato">
                    Receber Informações
                </a>
            </div>
        </article> <!-- final sobre-mmm -->

        <article class="carosel-mmm owl-carousel owl-theme">
            <div class="item">
                <a href="#" data-toggle="modal" data-target="#modal-video">
                    <figure class="imagem-carosel-mmm">
                        <img src="{{ asset('assets/img/video-tania.png') }}" alt="">
                        <span>
                            <svg class="svg-video-dims">
                                <use xlink:href="{{ asset('sprite-svg/sprite.svg#video') }}"></use>
                            </svg>
                        </span>
                    </figure>
                    <div class="descricao-carosel-mmm">
                        <p class="texto-carosel-mmm">
                            “A maior participação de mulheres na política local e no movimento municipalista é essencial
                            para a conquista de Municípios mais desenvolvidos e capazes de acolher a
                            diversidade de seu povo!”
                        </p>
                        <p class="autor-carosel-mmm">
                            <strong>Mensagem MMM</strong> Convocação para mulheres municipalistas
                        </p>
                    </div> <!-- final descricao-carosel-mmm -->

                </a>
            </div> <!-- final item -->

            <div class="item">
                <a href="#" data-toggle="modal" data-target="#modal-video">
                    <figure class="imagem-carosel-mmm">
                        <img src="{{ asset('assets/img/video-tania.png') }}" alt="">
                        <span>
                            <svg class="svg-video-dims">
                                <use xlink:href="{{ asset('sprite-svg/sprite.svg#video') }}"></use>
                            </svg>
                        </span>
                    </figure>
                    <div class="descricao-carosel-mmm">
                        <p class="texto-carosel-mmm">
                            "A maior participação de mulheres na política local e no movimento municipalista é essencial
                            para a conquista de Municípios mais desenvolvidos e capazes de acolher a
                            diversidade de seu povo!"
                        </p>
                        <p class="autor-carosel-mmm">
                            <strong>Mensagem MMM</strong> Convocação para mulheres municipalistas
                        </p>
                    </div> <!-- final descricao-carosel-mmm -->

                </a>
            </div> <!-- final item -->

        </article>
    </section> <!-- final box-mmm -->

    <section class="foto-paralax " class="parallax-window" data-parallax="scroll"
        data-image-src="assets/img/mulheres-municipalistas.jpg">
        <!--<img src="assets/img/mulheres-municipalistas.png" alt="">-->
    </section> <!-- final foto-paralax -->

    <section class="noticias-home">
        <div class="centraliza">
            <h1 class="titulo-home">Últimas <span>Notícias</span></h1>
            <h3 class="subtitulo-home">Fique por dentro de tudo que acontece no Movimento Mulheres Municipalistas</h3>

            <section class="carousel-noticias owl-carousel owl-theme">
                @for ($i = 0; $i < 12; $i++)
                    <div class="item d-none" id="noticia-{{ $i }}">
                        <figure class="foto-carousel-noticia">
                            <img src="" alt="" class="img-fluid">
                        </figure>
                        <div class="texto-carousel-noticia">
                            <p class="data-carousel-noticia"></p>
                            <h4 class="titulo-carousel-noticia"></h4>
                            <p class="resumo-carousel-noticia"></p>
                        </div>
                        <div class="leia-mais">
                            <a href="#" class="btn-leia-mais">Continue Lendo</a>
                        </div>
                    </div>
                @endfor
            </section>

            <a href="{{ url('/noticias') }}" class="link-btn-rosa">VER TODAS AS NOTÍCIAS</a>
        </div>
    </section> <!-- final noticias-home -->

    <section class="parceiros">
        <div class="centraliza">
            <h1 class="titulo-home">Nossos <span>Parceiros</span></h1>

            <section class="carousel-parceiros owl-carousel owl-theme">
                <article class="item">
                    <a href="https://institutobancovermelho.org.br/" target="blank" class="foto-carousel-parceiros">
                        <img class="img-custom" src="{{ asset('assets/img/banco-vermelho.png') }}"
                            alt="Instituto Banco Vermelho" title="Instituto Banco Vermelho">
                    </a>
                </article>
                <article class="item">
                    <a href="http://www.alziras.org.br/" target="blank" class="foto-carousel-parceiros">
                        <img class="img-parceiros" src="{{ asset('assets/img/parceiro-instituto.png') }}"
                            alt="Instituto Alziras" title="Instituto Alziras">
                    </a>
                </article>
                <article class="item">
                    <a href="https://appm.org.br/" target="blank" class="foto-carousel-parceiros">
                        <img class="img-parceiros" src="{{ asset('assets/img/mmm-pi.PNG') }}" alt="MMM PI" title="MMM PI">
                    </a>
                </article>
                <article class="item">
                    <a class="foto-carousel-parceiros">
                        <img class="img-sc" src="{{ asset('assets/img/mmm-SC.png') }}" alt="MMM SC" title="MMM SC">
                    </a>
                </article>
            </section> <!-- final carousel-parceiros -->
        </div> <!-- final centraliza -->
    </section> <!-- final parceiros -->

    <section id="ancora-receber-informacoes" class="receber-informacoes">
        <div class="centraliza">
            <h1 class="titulo-home">Deseja receber informações?</h1>
            <h3 class="subtitulo-home" style="font-size: 25px;">"Deixe seu número e email para contato e mantenha-se
                informado das ações do Movimento Mulheres Municipalistas"</h3>
            <form action="{{ url('contato') }}" method="POST" class="form-receber-informacoes">
                {{ csrf_field() }}

                <label class="label-receber-informacoes">
                    <span>Nome <small>*</small></span>
                    <input type="text" name="nome" placeholder="Digite seu nome" required="required">
                </label>
                <div class="duas-colunas-form">
                    <label class="label-receber-informacoes">
                        <span>E-mail <small>*</small></span>
                        <input type="email" name="email" placeholder="Digite seu e-mail" required="required">
                    </label>

                    <label class="label-receber-informacoes">
                        <span>Número <small>*</small></span>
                        <input type="text" name="telefone" id="txtFone" placeholder="(00) 00000-0000"
                            required="required">
                    </label>
                </div>
                <button type="button" class="link-btn-rosa" name="btn" value="Submit" id="submitBtn"
                    data-toggle="modal" data-target="#confirm-submit" class="btn btn-default"
                    style="background: #FB6FA4; font-size: 16px;">
                    CONFIRMAR
                </button>
                <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog"
                    aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body mx-auto" style="background: #FFF; padding: 10px;">
                                Para enviar esse formulário é necessário confirmar a política de privacidade e proteção de
                                dados.
                                <br><br>
                                <div class="form-check">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        <input class="form-check-input"
                                            onchange="document.getElementById('submit').disabled = !this.checked;"
                                            type="checkbox" value="" id="flexCheckDefault">
                                        Eu li e confirmo toda a <a target="_blank"
                                            href="https://www.cnm.org.br/informe/exibe/politicadeprivacidade">POLÍTICA DE
                                            PRIVACIDADE E PROTEÇÃO DE DADOS</a>
                                    </label>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="link-btn-rosa" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="link-btn-rosa" disabled id="submit"
                                    style="background: #FB6FA4; font-size: 16px;">Enviar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            @if (session('success'))
                <div class="alert alert-success" style="margin-top: 32px;">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>{{ session('success') }}</strong>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger" style="margin-top: 32px;">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>{{ session('error') }}</strong>
                </div>
            @endif

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

    </section> <!-- final receber-informacoes -->

    <section class="estaduais">
        <figure class="centraliza">
            <img src="{{ asset('assets/img/estaduais.png') }}" alt="" class="img-fluid img-estaduais">
        </figure>
    </section> <!-- final estaduais -->

    <!-- Modal -->
    <div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Mensagem MMM | Convocação para mulheres municipalistas
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span style="color: #fff; cursor: pointer;" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="415" src="https://www.youtube.com/embed/jr36BQ6XIUw"
                        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <!--Footer-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#txtFone').mask('(00) 00000-0000');

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

                    noticias.forEach((noticia, index) => {
                        const card = document.querySelector(`#noticia-${index}`);
                        if (!card) return;

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

                        card.querySelector('img').src = imagemUrl;
                        card.querySelector('img').alt = noticia.titulo;
                        card.querySelector('.data-carousel-noticia').textContent = noticia.datetime ??
                            '';
                        card.querySelector('.titulo-carousel-noticia').textContent = noticia.titulo;
                        card.querySelector('.resumo-carousel-noticia').textContent = `${resumo}...`;
                        card.querySelector('.btn-leia-mais').href = noticia.link;

                        card.classList.remove('d-none');
                    });
                })
                .catch(() => {
                    $('.carousel-noticias').before('<h3 class="text-center">Erro ao carregar notícias</h3>');
                });

            // Owl Carousel init (fora da lógica de fetch)
            $('.carousel-noticias').owlCarousel({
                items: 3,
                margin: 20,
                loop: true,
                autoplay: true,
                autoplayTimeout: 5000,
                responsive: {
                    0: {
                        items: 1
                    },
                    768: {
                        items: 2
                    },
                    992: {
                        items: 3
                    }
                }
            });
        });
    </script>
@endsection