@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.png">
  <!--<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>

    @php
    $client = new \GuzzleHttp\Client();
    try {
    $response = $client->get("https://cnm.org.br/api/noticias", [
    'headers' => [
    'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36',
    'Accept' => 'application/json',
    'Accept-Language' => 'en-US,en;q=0.5',
    'Referer' => 'https://cnm.org.br/'
    ],
    'query' => [
    'categoria' => 'mulheres',
    'limit' => 12,
    'sort' => 'created_at',
    'order' => 'desc'
    ]
    ]);

    $noticias = json_decode($response->getBody(), true)['noticias']['data'] ?? [];
    } catch (\Exception $e) {
    $noticias = [];
    $error = "Erro ao buscar notícias: " . $e->getMessage();
    }
    @endphp

    @if(isset($error))
    <h1 class="text-center">{{ $error }}</h1>
    @elseif(empty($noticias))
    <h1 class="text-center">Nenhum registro encontrado</h1>
    @else
    <section class="carousel-noticias owl-carousel owl-theme">
      @foreach ($noticias as $key => $noticia)
      <article class="item" style="display: flex; flex-direction: column; justify-content: space-between; height: 500px; max-width: 300px;">
        <figure class="foto-carousel-noticia" style="flex: 1;">
          @php
          $imagem = $noticia['imagem'];
          $imagemUrl = filter_var($imagem, FILTER_VALIDATE_URL) ? $imagem : 'https://cnm.org.br/' . $imagem;

          // Verifica se a imagem existe
          $imageHeaders = @get_headers($imagemUrl);
          $imageExists = $imageHeaders && strpos($imageHeaders[0], '200') !== false;
          @endphp
          <img src="{{ $imagemUrl }}" alt="{{ $noticia['titulo'] }}" style="width: 100%; height: auto;">
        </figure>
        <div class="texto-carousel-noticia" style="flex: 1; padding: 10px;">
          <p class="data-carousel-noticia" style="margin: 0; padding-bottom: 10px;">
            {{ $noticia['datetime'] }}
          </p>
          <h4 class="titulo-carousel-noticia" style="margin: 0; padding-bottom: 10px;">{{ $noticia['titulo'] }}</h4>
          <p class="texto-carousel-noticia" style="margin: 10px 0 0 0;">{{ \Illuminate\Support\Str::limit(utf8_encode(strip_tags($noticia['conteudo'])), 100) }}</p>
        </div>
        <div class="leia-mais" style="padding: 10px; text-align: center;">
          <a href="{{ $noticia['link'] }}" class="btn-leia-mais" style="display: inline-block; padding: 10px 20px; background-color: #FB6FA4; color: #fff; text-decoration: none; border-radius: 5px;">Continue Lendo</a>
        </div>
      </article> <!-- final item -->
      @endforeach
    </section> <!-- final carousel-noticias -->

    <a href="{{ url('/noticias') }}" class="link-btn-rosa">VER TODAS AS NOTÍCIAS</a>
    @endif
  </div> <!-- final centraliza -->
</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="http://www.alziras.org.br/" target="blank" class="foto-carousel-parceiros">
          <img src="{{ asset('assets/img/parceiro-instituto.png') }}" alt="Instituto Alziras" title="Instituto Alziras">
        </a>
      </article> <!-- final item -->
    </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 type="text/javascript">
  $(document).ready(function() {
    $('#txtFone').mask('(00) 00000-0000');
  });
</script>
@endsection