@extends('layouts._site.main')
@section('title', 'EcoFeminino - Perfil Inspirador')
@section('content')

    <!--================= News Details Section End Here =================-->
    <div class="rts-news-details-section section-gap-2" style="background-color: #e9ecef;">
        <div class="container">
            <div class="rts-post-heading mb--50">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        {{-- <a href="#0" class="news-catagory-tag-3">EcoFeminino</a> --}}
                        <h2 class="content-title mb--10"><a href="news-details.html">Perfil Inspirador</a></h2>
                        {{-- <div class="overview-play-btn">
                            <div class="post-bottom-info">
                                <a href="author.html" class="post-author item"><img
                                        src="{{ url('assets/user/images/user.svg') }}" alt="user-icon">Ashley Graham</a>
                                <span class="post-comment item"><img src="{{ url('assets/user/images/comment.svg') }}"
                                        alt="comment-icon">January
                                    16, 2024</span>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>

            <!--================= Author Profile Section Start Here =================-->
            <div class="rts-author-profile-area section-gap-2 mb--30">
                @foreach ($newsBiggestProfile as $new)
                    <div class="container">
                        {{-- <div class="news-topbar news-topbar-2">
                            <h2 class="section-title">Primeira Dama</h2>
                            <div class="wide-border" style="width: 55rem !important"></div>
                            </div> 
                        --}}

                        <div class="author-profile-box" style="background: #e9ecef; margin-top: -5rem !important">
                            <div class="author-profile-picture"><img src="{{ url('img/news/' . $new->image) }}"
                                    alt="author-profile-picture">
                            </div>

                            <div class="author-information" {{-- style="margin-top: -10rem !important" --}}>
                                {{-- <span class="author-level">Senior Author</span> --}}
                                <h2 class="author-name mb--20">{{ $new->subtitle }}</h2>
                                @if ($new->blocks->isNotEmpty())
                                    @foreach ($new->blocks as $block)
                                        @if (!empty($block->texto))
                                            <p class="mb--50">{!! nl2br(e($block->texto)) !!}</p>
                                        @endif
                                    @endforeach
                                @endif
                                <div class="author-achives">
                                    <div class="author-follow">
                                        <span class="follow-title">Seguir:</span>
                                        <ul class="social-links">
                                            <li> <a href="#" class="platform"><i class="fab fa-facebook-f"></i></a>
                                            </li>
                                            <li> <a href="#" class="platform"><i class="fab fa-twitter"></i></a>
                                            </li>
                                            <li><a href="#" class="platform"><i class="fab fa-linkedin-in"></i></a>
                                            </li>
                                            <li> <a href="#" class="platform"><i class="fab fa-instagram"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!--================= Author Profile Section End Here =================-->

            <!--================= Gallery Section Start Here =================-->
            <div class="rts-gallery-section gallary-page-section pt--40 mb--40">
                <div class="container">
                    <div class="news-topbar news-topbar-2">
                        <h2 class="section-title">Mais Perfis</h2>
                        <div class="wide-border" style="width: 55rem !important"></div>
                    </div>

                    <div id="profiles-list" class="row g-4">
                        @foreach ($newsProfile as $new)
                            <div class="col-lg-4 col-md-6 fade-in">
                                <div class="project-card h-100">

                                    {{-- Imagem --}}
                                    <div class="project-image">
                                        <img src="{{ url('img/news/' . $new->image) }}" alt="Imagem Perfil">
                                    </div>

                                    {{-- Conteúdo --}}
                                    <div class="project-content p-4">
                                        <h5 class="fw-bold mb-2">{{ $new->title }}</h5>
                                        <p class="text-muted small mb-1">{{ $new->subtitle }}</p>

                                        <p class="project-desc mt-3">
                                            {{ Str::limit(strip_tags($new->description), 120, '...') }}
                                        </p>

                                        <div class="mt-auto pt-3">
                                            <a href="{{ route('site.news.show', $new->slug) }}"
                                                class="btn btn-outline-primary w-100">
                                                Ver Perfil
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div id="profiles-pagination" class="d-flex justify-content-center mt-4">
                        {{ $newsProfile->links() }}
                    </div>
                </div>

            </div>
        </div>
        <!--================= Gallery Section End Here =================-->

    </div>
    </div>
    <!--================= News Details Section End Here =================-->

    <style>
        .news-catagory-tag-3 {
            background: #ff1856 !important;
        }

        .project-card {
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .project-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding-bottom: 1.5rem !important;
            /* distancia fixa do fundo */
        }

        .project-content .btn {
            margin-top: auto;
            /* garante que o botão desce sempre */
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
        }

        .project-image img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .btn-outline-primary {
            color: #ff1856;
            border: 2px solid #ff1856;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-outline-primary:hover {
            background-color: #ff1856;
            color: #fff;
        }

        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.6s ease forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>

    <script>
        var swiper = new Swiper(".rts-cmmnSlider", {
            loop: true, // loop infinito
            autoplay: {
                delay: 3000, // tempo entre slides (3s)
                disableOnInteraction: false, // continua mesmo após interação
                reverseDirection: false, // false = esquerda → direita (padrão)
            },
            slidesPerView: 1, // um slide de cada vez
            spaceBetween: 20, // espaço entre slides
            speed: 1000, // velocidade da transição
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // delegação de eventos para links da paginação
            document.addEventListener('click', function(e) {
                if (e.target.closest('#profiles-pagination a')) {
                    e.preventDefault();

                    let url = e.target.closest('a').getAttribute('href');

                    fetch(url, {
                            headers: {
                                "X-Requested-With": "XMLHttpRequest"
                            }
                        })
                        .then(response => response.text())
                        .then(html => {

                            // criar DOM temporário para extrair partes
                            let parser = new DOMParser();
                            let doc = parser.parseFromString(html, "text/html");

                            // pegar novos cards
                            let newList = doc.querySelector('#profiles-list').innerHTML;

                            // pegar nova paginação
                            let newPagination = doc.querySelector('#profiles-pagination').innerHTML;

                            // substituir
                            document.querySelector('#profiles-list').innerHTML = newList;
                            document.querySelector('#profiles-pagination').innerHTML = newPagination;

                            // efeito de fade-in
                            document.querySelectorAll('#profiles-list .fade-in').forEach(el => {
                                el.style.opacity = "0";
                                el.style.transform = "translateY(20px)";

                                setTimeout(() => {
                                    el.style.transition = "0.6s ease";
                                    el.style.opacity = "1";
                                    el.style.transform = "translateY(0)";
                                }, 50);
                            });

                            // rolar suavemente até o topo dos perfis
                            document.querySelector('#profiles-list').scrollIntoView({
                                behavior: "smooth"
                            });

                        });
                }
            });
        });
    </script>


@endsection