@extends('layouts.public')

@section('content')

    <br/>
    <div class="container mb-5">

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#avisos" role="tab" aria-controls="aviso" aria-selected="true">Aviso</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="false">Posts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#galerias" role="tab" aria-controls="galerias" aria-selected="false">Galerias</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#colaboradores" role="tab" aria-controls="colaboradores" aria-selected="false">Colaboradores</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">

            <div class="tab-pane fade show active p-3" id="avisos" role="tabpanel" aria-labelledby="home-tab">
                <section id="lista-noticias">
                    <div id="aviso" class="container">
                        @include('site.pesquisa._avisos')
                    </div>
                </section>

                <a onclick="chamarAtualizar('aviso')" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3" >Ver mais</a>
            </div>

            <div class="tab-pane fade p-3" id="posts" role="tabpanel" aria-labelledby="profile-tab">
                <section id="lista-noticias">
                    <div id="post" class="container">
                        @include('site.pesquisa._posts')
                    </div>
                </section>

                <a onclick="chamarAtualizar('post')" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3">Ver mais</a>
            </div>

            <div class="tab-pane fade p-3" id="galerias" role="tabpanel" aria-labelledby="contact-tab">
                <section id="galeria">
                    <div class="container">
                        <div id="galeria" class="box-galeria">
                            @include('site.pesquisa._galerias')
                        </div>
                    </div>
                </section>

                <a onclick="chamarAtualizar('galeria')" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3" >Ver mais</a>
            </div>

            <div class="tab-pane fade p-3" id="colaboradores" role="tabpanel" aria-labelledby="contact-tab">
                <div class="box-colaboradores">
                <div class="galeria">
                <div id="colaborador" class="box-galeria">
                    @include('site.pesquisa._colaboradores')
                </div>
                </div>
                </div>
                <a onclick="chamarAtualizar('colaborador')" style="margin-top: 35px; max-width: 400px; margin: auto;" class="btn-ver-todos text-center mt-3" >Ver mais</a>
            </div>

        </div>

        <div style="align-items: center; justify-content: space-around; display: flex;">
            <img id="loading" width="200px" height="200px" src="{{asset('images/icones/loading.gif')}}" style="display:none;">
        </div>
    </div>

@endsection

@push('scripts')
    <script>

        var skipeAvisos = 0;
        var skipePosts = 0;
        var skipeGalerias = 0;
        var skipeColaboradores = 0;

        function chamarAtualizar(tipo)
        {
            var skipe = 0;

            if(tipo == 'aviso') {skipeAvisos += 20; skipe = skipeAvisos;}
            if(tipo == 'post') {skipePosts += 20; skipe = skipePosts;}
            if(tipo == 'galeria') {skipeGalerias += 20; skipe = skipeGalerias;}
            if(tipo == 'colaborador') {skipeColaboradores += 20; skipe = skipeColaboradores;}

            atualizar(tipo, skipe);
        }

        function atualizar(tipo, skipe)
        {
            $.ajax({
                type: 'GET',
                url: '/verMais/'+tipo+'/'+skipe+'/{{$filtro}}',
                beforeSend:function(){
                    //ATIVA GIF LOADER
                    $('#loading').css('display', 'block');
                },
                success: function(data){
                    $('#'+tipo).append(data);
                    $('#loading').css('display', 'none');
                },
                error: function(){
                    alert("Algo deu errado!");
                    $('#loading').css('display', 'none');
                }
            });

            return false;
        }

    </script>
@endpush