@extends('layouts.site')

@section('headerData')
    <link rel="stylesheet" href="{{ asset('css/modules/style_index.css') }}">
@endsection

@section('titlepage', 'UDFE')
@section('meta-title', 'Página Inicial')
@section('meta-description', 'Entre e acesse o site da UDFE!')

@section('content')
    {{-- @if ('/?q=1' != $_SERVER['REQUEST_URI'])
        <meta http-equiv="Refresh" content="0; url=https://udfe.org.br/construcao" />
    @endif --}}

    <!-- Banner -->
    <div class="banner">
        <div class="splide">
            <div class="splide__track">
                <ul class="splide__list center">
                    <li class="splide__slide">
                        <div>
                            <img src="{{ 'img/site/banner1.jpg' }}" class="banner_img" alt="banner">
                        </div>
                        <div class="banner_conteudo">
                            <h1>GARANTA SEUS DIREITOS</h1>
                            <img src="{{ 'img/site/icone5.png' }}">
                            <p>DE ESTUDANTE E DESFRUTE DE DIVERSOS BENEFÍCIOS ATRAVÉS DA SUA ENTIDADE.</p>
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div>
                            <img src="{{ 'img/site/banner2.jpg' }}" class="banner_img" alt="banner">
                        </div>
                        <div class="banner_conteudo">
                            <h1>VOCÊ SABIA ?</h1>
                            <img src="{{ 'img/site/icone5.png' }}">
                            <p>OS ESTUDANTES TÊM DIREITO A PLANOS DE SAÚDE MAIS BARATO.</p>
                        </div>
                    </li>
                    <li class="splide__slide">
                        <div>
                            <img src="{{ 'img/site/banner3.jpg' }}" class="banner_img" alt="banner">
                        </div>
                        <div class="banner_conteudo">
                            <h1>FAÇA SEU CARTÃO ESTUDANTIL</h1>
                            <img src="{{ 'img/site/icone5.png' }}">
                            <p>GARANTA JÁ 50% DE DESCONTO EM CINEMAS, TEATRO ESTÁDIO DE FUTEBOL, SHOWS.</p>
                        </div>
                    </li>

                    <li class="splide__slide">
                        <div>
                            <img src="{{ 'img/site/banner4.jpg' }}" class="banner_img" alt="banner">
                        </div>
                        <div class="banner_conteudo">
                            <h1>GARANTA SEUS DIREITOS</h1>
                            <img src="{{ 'img/site/icone5.png' }}">
                            <p>DENÚNCIAS, DÚVIDAS, CONSULTA JURÍDICA E OUTROS, FALE CONOSCO.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Inscreva-se -->
    <div class="inscrevase">
        <div class="center">
            <img class="inscrevase_img" src="{{ 'img/site/inscreva.png' }}" alt="">
        </div>
        <div class="inscrevase_conteudo">
            <img src="{{ 'img/site/icone4.png' }}">
            <h1>Associe-se</h1>
            <p>agora</p> <br>
            <a href="{{ route('inscrevase') }}">
                <button>Clique aqui!</button>
            </a>
        </div>
    </div>

    <!-- Noticias -->
    <div class="noticias">
        <div class="noticias_titulo">
            <h3>Fique por dentro!</h3>
        </div>

        @if (count($posts) == 0)
            <div class="item text-center">
                <h3 class="py-2 mb-0 titulo">Não há notícias cadastradas.</h3>
            </div>
        @else
            <div class="noticias_display">
                @foreach ($posts as $p)
                    <div class="noticias_conteudo">
                        <a href="{{ route('noticias_view', $p->id) }}">
                            <div>
                                <img class="noticias_img" src="{{ $p->image }}">
                            </div>
                            <div class="noticias_conteudo_bg">
                                <h5>{{ $p->title }}</h5>
                                <p>{{ $p->description }}</p>
                                <img src="{{ 'img/site/entrar.png' }}" class="noticias_entrar">
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <!-- udef -->
    <div class="udef">
        <div class="udef_historia">
            <div>
                <img src="{{ 'img/site/cartao-estudante.png' }}">
                <h4>CARTÃO ESTUDANTE</h4>
                <div class="uedf_texto">
                    <p>Faça já o seu cartão e tenha muitos benefícios.</p>
                </div>
                <a href="https://brasil.estudantesdobrasil.org.br/">
                    <img src="{{ 'img/site/entrar.png' }}">
                </a>
            </div>
            <div>
                <img src="{{ 'img/site/plano-de-saude.png' }}" height="105px">
                <h4>PLANOS DE SAÚDE</h4>
                <div class="uedf_texto">
                    <p>Para você estudante tem preços exclusivos saiba mais.</p>
                </div>
                <a
                    href="https://api.whatsapp.com/send?phone=5511985157089&text=Gostaria%20de%20saber%20mais%20sobre%20o%20plano%20de%20saude">
                    <img src="{{ 'img/site/entrar.png' }}">
                </a>
            </div>
            <div>
                <img src="{{ 'img/site/garanta-seus-direitos.png' }}" height="105px">
                <h4>GARANTA SEUS DIREITOS</h4>
                <div class="uedf_texto">
                    <p>Desfrute de diversos benefícios através da sua entidade.</p>
                </div>
                <a href="https://api.whatsapp.com/send?phone=5511985157089&text=Gostaria%20de%20saber%20mais%20sobre%20">
                    <img src="{{ 'img/site/entrar.png' }}">
                </a>
            </div>
        </div>
    </div>




    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new Splide('.splide', {
                // heightRatio: 0.4,
                autoplay: true,
                direction: 'ttb',
                height: '30rem',
            }).mount();
        });
    </script>
@endsection