@extends('layouts._site.main')
@section('title', 'Ecofemenino - Artigos de Notícias')
@section('content')

    @if ($section === 'editorial')
        <!--================= Editorial Section Start Here =================-->
        <div class="rts-author-profile-area section-gap-2" style="background: #e9ecef !important;" id="editorial">
            @foreach ($articleEditorial as $article)
                <div class="container">
                    <div class="heading-content banner-submenu">
                        <div class="contents">
                            <h2 class="content-title">Editorial</h2>
                            {{-- <div class="wide-border" style="background: #ff1859 !important;width: 65rem !important"></div> --}}
                        </div>
                    </div>

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

                        <div class="author-information" style="margin-top: -9rem !important;">
                            <h2 class="author-name mb--20" style="text-align:left !important;">
                                {{ $article->subtitle }}
                            </h2>

                            <p class="mb--50">{!! nl2br(e($article->description)) !!}</p>
                            <div class="author-achives">
                                <div class="author-follow">
                                    <span class="follow-title">Siga:</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-pinterest-p"></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-vimeo-v"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endForeach
        </div>
        <!--================= Editorial Section End Here =================-->
    @endif

    @if ($section === 'debate')
        <!--================= Debate Feminino Section Start Here =================-->
        <div class="rts-featured_video-section section-gap-2 wow fadeIn" id="debate-femenino" data-wow-duration="1.5s">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Debate Feminino</h2>
                        {{-- <div class="wide-border" style="background: #a09797 !important;"></div> --}}
                    </div>
                </div>

                <div id="debate-list" class="row">
                    @foreach ($articleDebate as $article)
                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <div class="rts-post-2">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit" href="{{ url('img/news/' . $article->image) }}"
                                        title="<h5>{{ $article->subtitle }}</h5><p>{{ strip_tags($article->description) }}</p>">
                                        <img src="{{ url('img/news/' . $article->image) }}" alt="image" />
                                    </a>
                                </div>
                                <div class="contents">
                                    <h5 class="post-title">{{ Str::limit($article->title, 40) }}</h5>
                                    <p class="post-subtitle">{{ Str::limit($article->subtitle, 100) }}</p>

                                    <div class="post-bottom-info mt-2">
                                        <span class="post-author item" style="font-size: 0.9rem; color:#444;">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon"
                                                style="width:15px; margin-right:4px;">
                                            {{ $article->user->name ?? 'EcoFeminino' }}
                                        </span>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $article->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>

                                    <a href="{{ route('site.news.show', $article->slug) }}" class="read-more-btn">
                                        Ler Mais
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="debate-pagination" class="d-flex justify-content-center mt-4">
                    {{ $articleDebate->links() }}
                </div>
            </div>
        </div>
        </div>
        <!--================= Debate Feminino Section End Here =================-->
    @endif

    @if ($section === 'direitos')
        <!--================= Direitos Humanos Section Start Here =================-->
        <div class="rts-featured_video-section section-gap-2 wow fadeIn" style="background: #e9ecef !important;"
            id="direitos-humanos" data-wow-duration="1.5s">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Direitos Humanos</h2>
                        {{-- <div class="wide-border" style="background: #a09797 !important;"></div> --}}
                    </div>
                </div>

                <div id="direitos-list" class="row">
                    @foreach ($articleRules as $article)
                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <div class="rts-post-2">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit" href="{{ url('img/news/' . $article->image) }}"
                                        title="<h5>{{ $article->subtitle }}</h5><p>{{ strip_tags($article->description) }}</p>">
                                        <img src="{{ url('img/news/' . $article->image) }}" alt="image" />
                                    </a>
                                </div>
                                <div class="contents">
                                    <h5 class="post-title">{{ Str::limit($article->title, 40) }}</h5>
                                    <p class="post-subtitle">{{ Str::limit($article->subtitle, 100) }}</p>

                                    <div class="post-bottom-info mt-2">
                                        <span class="post-author item" style="font-size: 0.9rem; color:#444;">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon"
                                                style="width:15px; margin-right:4px;">
                                            {{ $article->user->name ?? 'EcoFeminino' }}
                                        </span>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $article->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>
                                    <a href="{{ route('site.news.show', $article->slug) }}" class="read-more-btn">
                                        Ler Mais
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="direitos-pagination" class="d-flex justify-content-center mt-4">
                    {{ $articleRules->links() }}
                </div>
            </div>
        </div>
        </div>
        <!--================= Direitos Humanos Section End Here =================-->
    @endif

    @if ($section === 'internacional')
        <!--================= Coluna Internacional Section Start Here =================-->
        <div class="rts-featured_video-section section-gap-2 wow fadeIn" id="coluna-internacional" data-wow-duration="1.5s">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Coluna Internacional</h2>
                        {{-- <div class="wide-border" style="background: #a09797 !important;"></div> --}}
                    </div>
                </div>

                <div id="internacional-list" class="row">
                    @foreach ($articleInternacional as $article)
                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <div class="rts-post-2">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit" href="{{ url('img/news/' . $article->image) }}"
                                        title="<h5>{{ $article->subtitle }}</h5><p>{{ strip_tags($article->description) }}</p>">
                                        <img src="{{ url('img/news/' . $article->image) }}" alt="image" />
                                    </a>
                                </div>
                                <div class="contents">
                                    <h5 class="post-title">{{ Str::limit($article->title, 40) }}</h5>
                                    <p class="post-subtitle">{{ Str::limit($article->subtitle, 100) }}</p>

                                    <div class="post-bottom-info mt-2">
                                        <span class="post-author item" style="font-size: 0.9rem; color:#444;">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon"
                                                style="width:15px; margin-right:4px;">
                                            {{ $article->user->name ?? 'EcoFeminino' }}
                                        </span>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $article->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>
                                    <a href="{{ route('site.news.show', $article->slug) }}" class="read-more-btn">
                                        Ler Mais
                                    </a>
                                </div>

                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="internacional-pagination" class="d-flex justify-content-center mt-4">
                    {{ $articleInternacional->links() }}
                </div>
            </div>
        </div>
        </div>
        <!--================= Coluna Internacional Section End Here =================-->
    @endif

    <style>
        .content-title {
            font-family: "Playfair Display", serif;
            font-size: 34px !important;
        }

        /* 🔧 Ajuste geral dos cards */
        .rts-post-2 {
            border: 1px solid #ff1856;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            max-width: 100%;
            /* permite que a coluna defina a largura */
            max-height: 500px;
            margin-bottom: 30px;
            /* espaçamento vertical */
        }

        .rts-post-2:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        .rts-post-2 .post-picture img {
            height: 16rem !important;
            object-fit: cover;
            width: 100%;
        }

        .rts-post-2 .contents {
            padding: 1rem;
            text-align: center !important;
            align-items: center !important;
        }

        .rts-post-2 .post-title {
            font-size: 1rem;
            line-height: 1.4;
        }

        .read-more-btn {
            padding: 6px 14px;
            font-size: 0.9rem;
        }

        /* 🔽 Ajuste da row para grid 3x3 */
        .row {
            justify-content: flex-start;
            margin-top: 3rem;
            /* alinha à esquerda para manter o grid */
            margin-right: -5px;
            margin-left: -5px;
        }

        .row>[class*='col-'] {
            padding-right: 5px;
            padding-left: 5px;
            display: flex;
            /* garante alinhamento correto */
            justify-content: center;
            /* centra o conteúdo do card na coluna */
        }

        /* 🔹 Centraliza os subtítulos e títulos das seções */
        .news-topbar-2 {
            text-align: center;
            margin-bottom: 2rem;
        }

        .content-title {
            text-align: center;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        html {
            scroll-behavior: smooth;
        }

        .rts-updates-section {
            scroll-margin-top: 100px;
        }

        #editorial .author-profile-picture img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 10px;
        }

        #editorial .author-information {
            margin-top: 1rem !important;
        }

        /* Em telas pequenas: comportamento perfeito */
        @media (max-width: 992px) {

            /* tablet */
            .row>[class*='col-'] {
                flex: 0 0 48%;
                /* duas colunas por linha */
                max-width: 48%;
            }
        }

        @media (max-width: 768px) {

            /* mobile */
            .row>[class*='col-'] {
                flex: 0 0 100%;
                /* uma coluna por linha */
                max-width: 100%;
            }

            #editorial .author-profile-picture img {
                max-height: 20rem;
            }
        }
    </style>

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

            document.addEventListener('click', function(e) {
                const link = e.target.closest('a');
                if (!link) return;

                // Verifica se clicou em paginação de qualquer secção
                const targets = [{
                        list: '#debate-list',
                        pagination: '#debate-pagination'
                    },
                    {
                        list: '#direitos-list',
                        pagination: '#direitos-pagination'
                    },
                    {
                        list: '#internacional-list',
                        pagination: '#internacional-pagination'
                    },
                ];

                for (let t of targets) {
                    if (link.closest(t.pagination)) {
                        e.preventDefault();
                        let url = link.getAttribute('href');

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

                                let parser = new DOMParser();
                                let doc = parser.parseFromString(html, 'text/html');

                                // Atualiza lista
                                document.querySelector(t.list).innerHTML =
                                    doc.querySelector(t.list).innerHTML;

                                // Atualiza paginação
                                document.querySelector(t.pagination).innerHTML =
                                    doc.querySelector(t.pagination).innerHTML;

                                // Animação nos cards
                                document.querySelectorAll(t.list + " .rts-post-2").forEach(el => {
                                    el.style.opacity = "0";
                                    el.style.transform = "translateY(20px)";
                                    setTimeout(() => {
                                        el.style.transition = "0.5s ease";
                                        el.style.opacity = "1";
                                        el.style.transform = "translateY(0)";
                                    }, 50);
                                });

                                // Scroll suave
                                document.querySelector(t.list).scrollIntoView({
                                    behavior: "smooth"
                                });
                            });

                        break;
                    }
                }

            });

        });
    </script>
@endsection