@extends('layout.b2c')
@section('title', 'Novosti – Krojačeva škola | Online kursevi i inspirativne priče o znanju')
@section('description',
    'Pratite najnovije vesti iz Krojačeve škole – priče o kursevima, predavačima, novim projektima i
    svetu digitalnog učenja. Otkrijte kako rastemo i učimo zajedno')
@section('keywords',
    'krojačeva škola, novosti, vesti, online kursevi, edukacija, e-learning, digitalno učenje, dizajn,
    programiranje, marketing, poslovne veštine, online škola, znanje, inspiracija')

@section('content')
    <!-- Sticky filter bar -->
    <section class="courses-header">

        <!-- Top naslov -->
        <section class="section courses-top-title">
            <div class="container">
                <h1>
                    <span class="text-blue">Novosti</span> – učimo, rastemo i delimo znanje.

                </h1>
                <p>
                    Na ovoj stranici pronaći ćete novosti, priče i obaveštenja iz Krojačeve škole – o novim
                    kursevima, predavačima, idejama i ljudima koji pomeraju granice obrazovanja. Pratite kako se
                    zajednica znanja razvija, inspiriše i menja svet kroz učenje.
                </p>
            </div>
        </section>


    </section>


    <section class="section news-listing">
        <div class="container-custom">

            <div class="row g-4" id="news-wrap">
                @foreach ($posts as $post)
                    <div class="col-xl-3 col-lg-6 news-card-wrapper">
                        <article class="news-card h-100">
                            <a class="news-thumb" href="{{ route('b2c_novosti_detalji', ['post' => $post]) }}">
                                @if ($post->old_id == -1)
                                <img src="{{ asset('/storage/' . $post->img_720x378) }}" alt="{{ $post->slug }}">
                                @else
                                <img src="{{ 'https://stari.krojacevaskola.com/content/'.$post->old_image }}" alt="{{ $post->slug }}">
                                @endif
                            </a>
                            <div class="news-body">
                                <div class="news-meta">
                                    @if ($post->categories->count() > 0)
                                        <span class="news-badge">{{ $post->categories->first()->name }}</span>
                                    @endif
                                    <span class="news-dot">•</span>
                                    <time
                                        datetime="{{ $post->published_at }}">{{ date('d.m.Y.', strtotime($post->published_at)) }}</time>
                                </div>
                                <h3 class="news-title">
                                    <a href="{{ route('b2c_novosti_detalji', ['post' => $post]) }}">{{ $post->title }}</a>
                                </h3>
                                <p class="news-excerpt">
                                    {!! strip_tags(substr($post->content, 0, 150)) !!}...
                                </p>
                                <a href="{{ route('b2c_novosti_detalji', ['post' => $post]) }}" class="btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                        viewBox="0 0 512 512">
                                        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
                                            fill="currentColor" stroke="none">
                                            <path
                                                d="M2950 4382 c-47 -52 -91 -103 -97 -113 -11 -15 89 -107 857 -785 l869 -769 -2289 -3 -2290 -2 0 -150 0 -150 2290 -2 2289 -3 -869 -769 c-768 -678 -868 -770 -857 -785 6 -10 50 -61 97 -113 82 -93 85 -96 105 -80 12 10 481 424 1043 921 l1022 904 0 77 0 77 -1022 904 c-562 497 -1031 911 -1043 921 -20 16 -23 13 -105 -80z" />
                                        </g>
                                    </svg>
                                </a>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>

            <!-- Sentinel za praćenje dna -->
            <div id="sentinel" aria-hidden="true"></div>

            <!-- Load more dugme (prikazuje se kada observer vidi sentinel) -->
            <div class="loadmore-wrap-sj" id="loadmoreWrap" hidden>
                <button id="loadMoreBtn" class="btn-loadmore-sj" disabled>
                    <span class="btn-text">Učitavam...</span>
                    <span id="infiniteLoader" class="btn-loader">
                        <svg class="spinner" viewBox="0 0 50 50" aria-hidden="true">
                            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="2">
                            </circle>
                        </svg>
                    </span>
                </button>
            </div>
        </div>

    </section>
    <!-- News new end -->

    @include('front.partials.index_b2c._footer')
    <!--- page-wrapper end -->

@endsection

@section('modals-and-offcanvas')
@endsection
@section('add-scripts')
    @parent

    <script>
        (() => {
            const menu = document.getElementById('offcanvasGlobalMenu');
            const body = menu.querySelector('.ks-body');
            const panels = menu.querySelectorAll('.ks-panel');
            const backBtn = menu.querySelector('.ks-back');
            const topbar = menu.querySelector('.ks-topbar');
            let historyStack = [];

            function showPanel(id) {
                panels.forEach(p => p.classList.toggle('is-active', ('#' + p.id) === id));
                const isHome = (id === '#ks-home');
                backBtn.hidden = isHome;

                // logo ↔ nazad
                if (isHome) topbar.classList.remove('show-back');
                else topbar.classList.add('show-back');
            }

            // Delegat: reaguj samo na dugmad/elemente sa data-target
            body.addEventListener('click', (e) => {
                // Ako je kliknut običan link <a>, ne diramo ništa – pusti browser da ide dalje
                const a = e.target.closest('a[href]');
                if (a && !a.hasAttribute('data-target')) return;

                // Panel-nav dugmad
                const nextBtn = e.target.closest('[data-target]');
                if (!nextBtn) return;

                // Ovo je interna navigacija panela → spreči default SAMO za nju
                e.preventDefault();

                const nextId = nextBtn.getAttribute('data-target');
                const current = menu.querySelector('.ks-panel.is-active');
                if (current) historyStack.push('#' + current.id);
                showPanel(nextId);
            });

            backBtn.addEventListener('click', (e) => {
                e.preventDefault();
                const prev = historyStack.pop() || '#ks-home';
                showPanel(prev);
            });

            // Reset pri svakom otvaranju
            menu.addEventListener('shown.bs.offcanvas', () => {
                historyStack = [];
                showPanel('#ks-home');
            });
        })();
    </script>
    <!-- / Menu end -->
    <script>
        const sentinelEl = document.getElementById('sentinel');
        const newsWrapEl = document.getElementById("news-wrap");
        const loadMoreWrapEl = document.getElementById("loadmoreWrap")
        let observer = null;
        let isInfiniteActive = @json($posts->total() > 16);
        console.log('isInfiniteActive', isInfiniteActive);
        let currentAbort = null;
        let state = {
            loading: false,
            hasMore: @json($posts->total() > 16),
            infiniteEnabled: @json($posts->total() > 32),
        }
        let params = {
            page: 1
        }

        if (isInfiniteActive) {
            activateInfinite();
        }

        function ensureObserver() {
            if (observer) return;
            observer = new IntersectionObserver(async (entries) => {
                const entry = entries[0];
                if (!entry.isIntersecting) return;
                if (state.loading) return;
                if (!state.hasMore) return;

                // privremeno zaustavi da ne duplira
                deactivateInfinite();

                try {
                    await fetchResult()

                } finally {
                    state.loading = false;
                    refreshInfinite(); // opet uključi ako ima smisla
                }
            }, {
                root: null,
                rootMargin: '200px',
                threshold: 0
            });
        }

        const fetchResult = async () => {
            if (state.loading) return;

            state.loading = true;

            showLoader();
            /*  === PRODUKCIJA (skineš komentar kad povežeš API) === */
            try {
                if (currentAbort) currentAbort.abort();
                currentAbort = new AbortController();

                params.page += 1;

                const url = route('fetch.b2c.posts.get', {
                    ...params
                });

                const res = await fetch(url, {
                    cache: 'no-store',
                    headers: {
                        "X-Requested-With": "XMLHttpRequest",
                        "Accept": "application/json"
                    },
                    signal: currentAbort.signal,
                });

                if (!res.ok) {
                    hideLoader();
                    state.loading = false;
                    return;
                }

                const response = await res.json()
                const data = response.data;
                const html = data.html;

                const count = appendCardsFromHTML(html, data.currentPage == 1 ? 'replace' : 'append');

                state.hasMore = data.currentPage < data.lastPage;

                if (state.hasMore) {
                    state.infiniteEnabled = true;
                    refreshInfinite()
                }

                // const html = (await res.text()).trim();
                if (!state.hasMore) {
                    state.infiniteEnabled = false;
                    deactivateInfinite();
                    return;
                }
            } catch (err) {
                if (err.name === 'AbortError') return;
                // po želji: pokaži grešku ili samo sakrij indikator
                hideLoader();
            } finally {
                currentAbort = null;
                state.loading = false;
                hideLoader();
            }

        };

        const appendCardsFromHTML = (html, mode = 'append') => {
            const tmp = document.createElement('div');

            html.forEach((courseItemHTML) => {
                tmp.innerHTML += courseItemHTML
            });

            const cards = tmp.querySelectorAll('.news-card-wrapper');

            cards.forEach(c => newsWrapEl.appendChild(c));

            return cards.length;
        };

        const showLoader = () => {
            loadMoreWrapEl.hidden = false;
        };

        const hideLoader = () => {
            loadMoreWrapEl.hidden = true;
        };

        function activateInfinite() {
            if (!state.infiniteEnabled) return;
            if (!state.hasMore) return;
            if (!sentinelEl) return;

            ensureObserver();
            observer.observe(sentinelEl);
        }

        function deactivateInfinite() {
            if (observer && sentinelEl) observer.unobserve(sentinelEl);
        }

        function refreshInfinite() {
            deactivateInfinite();
            activateInfinite();
        }
    </script>
@endsection