@extends('layouts._site.main')
@section('title', 'Ecofemenino - Juventude e Liderança')
@section('content')

    @php
        $show = $section ?? 'tecnologia';
    @endphp

    @if ($show === 'tecnologia')
        <!--================= Tecnologia Section =================-->
        <div class="rts-updates-section section-gap-2 wow fadeIn" data-wow-duration="1.5s" id="tecnologia"
            style="background: #e9ecec;">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Tecnologia</h2>
                    </div>
                </div>

                <div id="tecnologia-list" class="row">
                    @foreach ($newsTech as $new)
                        <div class="col-lg-4 col-md-6 col-sm-12 d-flex">
                            <div class="rts-post-2 flex-fill mb--15" style="border: 1px solid #ff1856">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit image-m" href="{{ url('img/news/' . $new->image) }}">
                                        <img src="{{ url('img/news/' . $new->image) }}" style="height: 20rem"
                                            alt="main-post-image">
                                    </a>
                                </div>
                                <div class="contents" style="text-align: center !important; align-items:center !important;">
                                    <a href="#0" class="news-catagory-tag-2">Tecnologia</a>
                                    <div class="post-title">
                                        <a
                                            href="{{ route('site.news.show', $new->slug) }}">{{ Str::limit($new->title, 54) }}</a>
                                    </div>
                                    <div class="post-bottom-info">
                                        <a href="#" class="post-author item">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon">
                                            {{ $new->user->name ?? 'EcoFeminino' }}
                                        </a>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $new->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>
                                    <a href="{{ route('site.news.show', $new->slug) }}" class="read-more-btn">Ler Mais</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="tecnologia-pagination" class="d-flex justify-content-center mt-4">
                    {{ $newsTech->links() }}
                </div>
            </div>
        </div>
    @endif

    @if ($show === 'educacao')
        <!--================= Educação Section =================-->
        <div class="rts-updates-section section-gap-2 wow fadeIn" data-wow-duration="1.5s" id="educacao"
            style="background: #e9ecec;">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Educação</h2>
                    </div>
                </div>
                <div id="educacao-list" class="row">
                    @foreach ($newsEducation as $new)
                        <div class="col-lg-4 col-md-6 col-sm-12 d-flex">
                            <div class="rts-post-2 flex-fill mb--15" style="border: 1px solid #ff1856">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit image-m"
                                        href="{{ url('img/news/' . $new->image) }}">
                                        <img src="{{ url('img/news/' . $new->image) }}" style="height: 20rem"
                                            alt="main-post-image">
                                    </a>
                                </div>
                                <div class="contents" style="text-align: center !important; align-items:center !important;">
                                    <a href="#0" class="news-catagory-tag-2">Educação</a>
                                    <div class="post-title">
                                        <a
                                            href="{{ route('site.news.show', $new->slug) }}">{{ Str::limit($new->title, 54) }}</a>
                                    </div>
                                    <div class="post-bottom-info">
                                        <a href="#" class="post-author item">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon">
                                            {{ $new->user->name ?? 'EcoFeminino' }}
                                        </a>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $new->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>
                                    <a href="{{ route('site.news.show', $new->slug) }}" class="read-more-btn">Ler Mais</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="educacao-pagination" class="d-flex justify-content-center mt-4">
                    {{ $newsEducation->links() }}
                </div>
            </div>
        </div>
    @endif

    @if ($show === 'empreendedorismo')
        <!--================= Empreendedorismo Section =================-->
        <div class="rts-updates-section section-gap-2 wow fadeIn" data-wow-duration="1.5s" id="empreendedorismo"
            style="background: #e9ecec;">
            <div class="container">
                <div class="heading-content banner-submenu">
                    <div class="contents">
                        <h2 class="content-title">Empreendedorismo Jovem</h2>
                    </div>
                </div>
                <div id="empreendedorismo-list" class="row">
                    @foreach ($newsBusiness as $new)
                        <div class="col-lg-4 col-md-6 col-sm-12 d-flex">
                            <div class="rts-post-2 flex-fill mb--15" style="border: 1px solid #ff1856">
                                <div class="post-picture">
                                    <a class="image-popup-vertical-fit image-m"
                                        href="{{ url('img/news/' . $new->image) }}">
                                        <img src="{{ url('img/news/' . $new->image) }}" style="height: 20rem"
                                            alt="main-post-image">
                                    </a>
                                </div>
                                <div class="contents" style="text-align: center !important; align-items:center !important;">
                                    <a href="#0" class="news-catagory-tag-2">Empreendedorismo</a>
                                    <div class="post-title">
                                        <a
                                            href="{{ route('site.news.show', $new->slug) }}">{{ Str::limit($new->title, 54) }}</a>
                                    </div>
                                    <div class="post-bottom-info">
                                        <a href="#" class="post-author item">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="user-icon">
                                            {{ $new->user->name ?? 'EcoFeminino' }}
                                        </a>
                                        <span class="post-date item">
                                            <img src="{{ url('assets/user/images/date.svg') }}"
                                                alt="date-icon">{{ $new->created_at->format('d \d\e F, Y') }}
                                        </span>
                                    </div>
                                    <a href="{{ route('site.news.show', $new->slug) }}" class="read-more-btn">Ler Mais</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div> {{-- row --}}
                <div id="empreendedorismo-pagination" class="d-flex justify-content-center mt-4">
                    {{ $newsBusiness->links() }}
                </div>
            </div>
        </div>
    @endif

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

        /* CARD */
        .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%;
            /* importante para funcionar no grid */
            max-height: 500px;
            margin-bottom: 30px;
        }

        .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: 0.8rem;
            text-align: center !important;
            align-items: center !important;
        }

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

        .read-more-btn {
            padding: 5px 12px;
            font-size: 0.85rem;
        }

        /* GRID */
        .row {
            justify-content: flex-start;
            margin-top: 3rem;
            /* ✔ deixa as 3 colunas alinhadas */
            margin-right: -5px;
            margin-left: -5px;
        }

        .row>[class*='col-'] {
            padding-right: 5px;
            padding-left: 5px;
            display: flex;
            justify-content: center;
        }

        /* TITULOS */
        .news-topbar-2 {
            text-align: center;
            margin-bottom: 2rem;
        }

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

        /* SUAVIZA O SCROLL */
        html {
            scroll-behavior: smooth;
        }

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

        /* RESPONSIVO */
        @media (max-width: 992px) {

            /* tablet */
            .row>[class*='col-'] {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media (max-width: 768px) {

            /* mobile */
            .row>[class*='col-'] {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
    </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: '#tecnologia-list',
                        pagination: '#tecnologia-pagination'
                    },
                    {
                        list: '#educacao-list',
                        pagination: '#educacao-pagination'
                    },
                    {
                        list: '#empreendedorismo-list',
                        pagination: '#empreendedorismo-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