@extends('layout.b2c')
@section('title', 'Kursevi i online obuke | Krojačeva škola – Učenje koje pokreće karijeru')
@section('description', 'Pronađite online kurseve iz komunikacije, IT-ja, marketinga, jezika, psihologije, roditeljstva
    i drugih oblasti. Učite sopstvenim tempom uz Krojačevu školu – učenje koje pokreće karijeru.')
@section('keywords', 'kursevi, online kursevi, obuke, Krojačeva škola, komunikacija, marketing, IT, jezici, psihologija,
    roditeljstvo, veštine, edukacija, master pass')
@section('og-meta-tags')
    <meta property="og:title" content="Kursevi i online obuke | Krojačeva škola">

    <meta property="og:description"
        content="Učite sopstvenim tempom uz Krojačevu školu – učenje koje pokreće karijeru. Pronađite kurs koji pokreće promenu.">

    <meta property="og:image" content="https://www.krojacevaskola.com/images/social-share.jpg">

    <meta property="og:url" content="https://www.krojacevaskola.com/kursevi">

    <meta property="og:type" content="website">
@endsection

@section('content')
    @include('front.courses.partials.show._mobile-buy-bar')
    <!-- Sticky filter bar -->
    @include('front.courses.partials._filters')

    <!-- Top naslov -->
    {{-- <section class="section courses-top-title">
        <div class="container">
            <h1>
                <span class="text-blue">Moć</span> učenja u tvojim rukama.

            </h1>
            <p>
                Ubrzo i sigurno obavite plaćanje odabranim metodama. Kupovinom licence dobijate pristup svim
                kursevima na platformi – ukupno 205.
            </p>
        </div>
    </section> --}}

    <!-- Sort iznad kurseva -->
    @include('front.courses.partials._courses-sort')

    <!-- Listing kurseva -->
    <section class="section courses-listing">
        <div class="container-custom">

            <div class="row" id="coursesGrid">
                @foreach ($courses as $course)
                    @include('front.courses.partials._course-item', [
                        'course' => $course,
                        'categoryPathMap' => $categoryPathMap,
                    ])
                @endforeach
            </div>
            <!-- /row -->

            <!-- 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>
    <!-- Footer -->
    
    @include('front.partials.index_b2c._footer')
    <!--- page-wrapper end -->

@endsection

@section('modals-and-offcanvas')
@endsection
@section('add-scripts')
    @parent
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // spreči duplo vezivanje
            if (window.__coursesInfiniteBound) return;
            window.__coursesInfiniteBound = true;
            let currentAbort = null;
            @php
                $categoryPathMap = $filterCategories
                    ->mapWithKeys(function ($element) {
                        return [
                            $element->id => $element->slug,
                        ];
                    })
                    ->toArray();
                if ($category && !isset($categoryPathMap[$category->id])) {
                    $categoryPathMap = [...$categoryPathMap, $category->id => $path];
                }
            @endphp
            const categoriesPathMap = @json($categoryPathMap);
            const EXCLUDE = new Set(['categoryId']); // šta ne ide u query parametre
            const BRACKETED = new Set(['instructorsFilter', 'priceFilter']);
            const isInfiniteActive = @json($courses->total() > 32);
            const grid = document.getElementById('coursesGrid'); // kontejner sa .course-item-box
            const wrap = document.getElementById('loadmoreWrap'); // indikator (spiner + "Učitavam…")
            const textEl = wrap ? wrap.querySelector('.btn-text') : null;
            const searchInput = document.getElementById('searchInput');

            let observer = null;
            let sentinelEl = document.getElementById('sentinel');

            let state = {
                firstRequest: true,
                hasMore: true,
                loading: false,
                infiniteEnabled: @json($courses->total() > 32), // dinamički menjaš
            };

            let params = {
                query: @if (request()->query('query') != null)
                    '{{ request()->query('query') }}'
                @else
                    null
                @endif ,
                categoryId: @json($category ? $category->id : null) ?? null,
                instructorsFilter: @if (request()->query('instructorsFilter') != null)
                    @json(request()->query('instructorsFilter'))
                @else
                    []
                @endif ,
                priceFilter: @if (request()->query('priceFilter') != null)
                    @json(request()->query('priceFilter'))
                @else
                    []
                @endif ,
                page: 1,
                sort: @if (request()->query('sort') != null)
                    @json(request()->query('sort'))
                @else
                    'novo'
                @endif ,
            }

            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(true)
                        // await loadMore(); // tvoj fetch
                        // ovde ažuriraš state.hasMore na osnovu odgovora
                    } finally {
                        state.loading = false;
                        refreshInfinite(); // opet uključi ako ima smisla
                    }
                }, {
                    root: null,
                    rootMargin: '200px',
                    threshold: 0
                });
            }

            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();
            }

            // Pozovi kad se promeni DOM (npr. posle re-rendera liste / filtera)
            function bindSentinel() {
                sentinelEl = document.querySelector('#sentinel');
                refreshInfinite();
            }

            function debounce(fn, delay = 400) {
                let t = null;
                return (...args) => {
                    clearTimeout(t);
                    t = setTimeout(() => fn(...args), delay);
                };
            }

            function paramsToQuery(p) {
                const q = new URLSearchParams();
                for (const [k, v] of Object.entries(p)) {
                    if (EXCLUDE.has(k)) continue;
                    if (v === null || v === undefined || v === '') continue;
                    if (Array.isArray(v)) {
                        if (!v.length) continue;
                        if (BRACKETED.has(k)) {
                            v.forEach((val, i) => q.append(`${k}[${i}]`, String(val)));
                        } else {
                            // default: CSV
                            q.set(k, v.join(','));
                        }
                    } else q.set(k, String(v));
                }
                return q.toString();
            }

            const updateUrl = ({
                replace = false
            }) => {
                const canonical = (params.categoryId != null) ? categoriesPathMap[params.categoryId] : '';

                const query_string = paramsToQuery(params);

                let href = '';
                if (canonical) {
                    href = `/kursevi/kategorije/${canonical}${query_string ? `?${query_string}` : ''}`;
                } else {
                    const base = route('front.courses', {}, false); // relative
                    href = `${base}${query_string ? `?${query_string}` : ''}`;
                }

                if (replace) {
                    history.replaceState({
                        ...params
                    }, '', href);
                    return;
                }

                history.pushState({
                    ...params
                }, '', href);
            }
            // ————— GLAVNA FUNKCIJA
            const fetchResult = async (nextPage = false) => {
                // if (state.loading) return;

                state.loading = true;

                if (nextPage) {
                    params = {
                        ...params,
                        page: params.page + 1
                    }
                }

                showLoader('Učitavam...');
                /*  === PRODUKCIJA (skineš komentar kad povežeš API) === */
                try {
                    if (currentAbort) currentAbort.abort();
                    currentAbort = new AbortController();
                    
                    const url = route('fetch.b2c.courses.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;

                    updateUrl({
                        replace: true
                    });

                    if (data.categoryTopTitleHTML !== null) {
                        // Sakriti podrazumevani tekst
                        document.querySelector("#default-courses-top-title").classList.add('d-none');
                        document.querySelector("#courses-top-title-wrapper").innerHTML = data
                            .categoryTopTitleHTML;
                    }

                    if (data.categoryTopTitleHTML === null) {
                        document.querySelector("#default-courses-top-title").classList.remove('d-none');
                        document.querySelector("#courses-top-title-wrapper").innerHTML = '';
                    }

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

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

                    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 {
                    state.loading = false;
                    hideLoader();
                }

            };

            // ————— helperi
            const showLoader = (label = 'Učitavam...') => {
                if (textEl) textEl.textContent = label;
                wrap.hidden = false;
            };

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

            // ubaci nove kartice iz dobijenog HTML-a
            const appendCardsFromHTML = (html, mode = 'append') => {
                const tmp = document.createElement('div');

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

                const cards = tmp.querySelectorAll('.col-with-hover-item');

                if (mode == 'replace') {
                    grid.replaceChildren(...cards)
                }

                if (mode == 'append') {
                    cards.forEach(c => grid.appendChild(c));
                }

                return cards.length;
            };

            const onSearchChange = debounce((e) => {
                const raw = e.target.value || '';
                const q = raw.trim().replace(/\s+/g, ' '); // normalizuj razmake

                // izbegni “duple” pozive ako se vrednost realno nije promenila
                if (params.query === q) return;

                params.query = q;
                params.page = 1;
                fetchResult();
            }, 400);

            // izbegni trigger tokom IME kompozicije (ako ima korisnika sa npr. CJK unosom)
            searchInput.addEventListener('compositionstart', () => searchInput._composing = true);
            searchInput.addEventListener('compositionend', (e) => {
                searchInput._composing = false;
                onSearchChange(e);
            });

            searchInput.addEventListener('input', (e) => {
                if (searchInput._composing) return;
                onSearchChange(e);
            });

            if (isInfiniteActive) {
                activateInfinite();
            }

            // --- ELEMENTI ---
            const chips = Array.from(document.querySelectorAll('[data-chip]'));
            const countBtn = document.getElementById('activeCount');
            const popover = document.getElementById('activePopover');
            const listBox = document.getElementById('activeList');
            const resetBtn = document.getElementById('resetFilters');

            // svi checkboxevi unutar chip menija
            const checks = Array.from(document.querySelectorAll('.chip-menu-sj input[type="checkbox"]'));

            // --- CHIP open/close ---
            chips.forEach(chip => {
                const btn = chip.querySelector('.chip-btn-sj');
                btn?.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isOpen = chip.dataset.open === 'true';
                    chips.forEach(c => delete c.dataset.open);
                    if (!isOpen) {
                        chip.dataset.open = 'true';
                        btn.setAttribute('aria-expanded', 'true');
                    } else {
                        btn.setAttribute('aria-expanded', 'false');
                    }
                });
            });

            // zatvaranje chipova klikom van/ESC
            document.addEventListener('click', (e) => {
                if (!e.target.closest('[data-chip]')) chips.forEach(c => delete c.dataset.open);
            });

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    chips.forEach(c => delete c.dataset.open);
                    if (!popover.hidden) {
                        popover.hidden = true;
                        countBtn?.setAttribute('aria-expanded', 'false');
                    }
                }
            });

            // --- RENDERCounterAndPopoverList brojača i popover liste ---
            function renderCounterAndPopoverList() {
                const active = checks.filter(ch => ch.checked);
                if (countBtn) countBtn.textContent = active.length;

                listBox.innerHTML = '';
                active.forEach(ch => {
                    const tag = document.createElement('span');
                    tag.className = 'ap-tag-sj';
                    tag.dataset.id = ch.dataset.filterId;
                    tag.dataset.type = ch.dataset.filterType
                    tag.innerHTML = `
                        ${ch.dataset.filterLabel}
                        <button class="ap-remove-sj" aria-label="Ukloni" title="Ukloni">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="11"></circle>
                            <line x1="8" y1="8" x2="16" y2="16"></line>
                            <line x1="16" y1="8" x2="8" y2="16"></line>
                        </svg>
                        </button>
                    `;
                    listBox.appendChild(tag);
                });

                // Popover je UVEK otvoren dok postoji bar jedan aktivan filter
                if (active.length === 0) {
                    popover.hidden = true;
                    countBtn?.setAttribute('aria-expanded', 'false');
                } else {
                    popover.hidden = false;
                    countBtn?.setAttribute('aria-expanded', 'true');
                }

                const prevCategoryId = params.categoryId;

                params = {
                    ...params,
                    categoryId: active.find(activeFilter => activeFilter.dataset.filterType == 'category')
                        ?.dataset
                        .filterId || null,
                    instructorsFilter: active.filter(activeFilter => activeFilter.dataset.filterType ==
                            'instructor')
                        ?.map(element => element.dataset.filterId) || [],
                    priceFilter: active.filter(activeFilter => activeFilter.dataset.filterType ==
                            'price')
                        ?.map(element => element.dataset.filterId) || [],
                    page: 1,
                }


                // ako je promenjena kategorija → resetuj pretragu
                const currentCategoryId = params.categoryId != null ? Number(params.categoryId) : null;
                if (currentCategoryId !== prevCategoryId) {
                    params.query = null;
                    if (searchInput) searchInput.value = '';
                }

                if (state.firstRequest !== true) {
                    fetchResult();
                }

                state.firstRequest = false;
            }



            // uklanjanje pojedinačnog taga iz popovera
            listBox.addEventListener('click', (e) => {
                const btn = e.target.closest('.ap-remove-sj');
                if (!btn) return;
                const tag = btn.closest('.ap-tag-sj');
                const id = tag?.dataset.id;
                const type = tag?.dataset.type;
                const src = checks.find(ch => (ch.dataset.filterId === id) && (ch.dataset.filterType ==
                    type));
                if (src) src.checked = false; // odčekiraj izvor
                renderCounterAndPopoverList(); // nema glow-a pri uklanjanju
            });

            // --- SORT chip (popularno / novo / sertifikati) ---
            const sortChip = document.querySelector('.courses-sort-sj');
            if (!sortChip) return;

            const sortBtns = sortChip.querySelectorAll('.sort-btn-sj');

            const removeSortBtnsIsActiveClass = () => {
                sortBtns.forEach(sortBtn => sortBtn.classList.remove('is-active'))
            }

            sortBtns.forEach(sortBtn => {
                sortBtn.addEventListener('click', (e) => {
                    const currentBtn = e.currentTarget;
                    removeSortBtnsIsActiveClass()

                    currentBtn.classList.add('is-active');
                    params.sort = currentBtn.dataset.sort;
                    params.page = 1;

                    fetchResult();
                })
            });

            // SINGLE-SELECT za chipove označene sa data-single (npr. Kategorije)
            document.querySelectorAll('.chip-sj[data-single] .chip-menu-sj').forEach(menu => {
                menu.addEventListener('change', (e) => {
                    const changed = e.target.closest('input[type="checkbox"]');

                    if (!changed) return;

                    // Ako je čekirano, odčekiraj sve ostale u ISTOM chipu
                    if (changed.checked) {
                        menu.querySelectorAll('input[type="checkbox"]').forEach(cb => {
                            if (cb !== changed) cb.checked = false;
                        });
                    }

                    // osveži brojač + popover tagove
                    renderCounterAndPopoverList();
                });
            });

            // --- Efekat glow samo kada se DODA filter ---
            // 1) ubaci potrebni CSS
            const style = document.createElement('style');
            style.textContent = `
                .active-count-sj{ position:relative; transition:transform .25s ease; }
                .active-count-sj.animate{ transform:scale(1.04); }
                .active-count-sj.animate::after{
                content:""; position:absolute; inset:-2px; border-radius:6px;
                box-shadow:0 0 0 0 rgba(47,85,255,.45);
                animation:ring-glow .7s ease-out forwards;
                }
                @keyframes ring-glow{
                0%   { box-shadow:0 0 0 0   rgba(47,85,255,.45); border-color:#2f55ff; }
                60%  { box-shadow:0 0 0 2px rgba(47,85,255,.20); }
                100% { box-shadow:0 0 0 4px rgba(47,85,255,0); }
                }
                .ap-remove-sj {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                border: none;
                background: transparent;
                cursor: pointer;
                border-radius: 50%;
                padding: 0;
                }
                .ap-remove-sj:hover {
                background: rgba(0,0,0,0.05);
                }
                .active-popover-sj {
                z-index: 10; /* lower than filter bar */
                }
                `;
            document.head.appendChild(style);

            // 2) pratimo prethodno stanje da znamo da li je ADD ili REMOVE
            const prev = new WeakMap();
            checks.forEach(ch => prev.set(ch, ch.checked));

            checks.forEach(ch => ch.addEventListener('change', (e) => {
                const was = prev.get(ch);
                const now = ch.checked;
                prev.set(ch, now);

                renderCounterAndPopoverList();

                // glow samo kad dodajemo (was=false -> now=true)
                if (!was && now && countBtn) {
                    countBtn.classList.add('animate');
                    setTimeout(() => countBtn.classList.remove('animate'), 700);
                }
            }));

            // reset svih filtera – bez animacije
            resetBtn?.addEventListener('click', () => {
                params = {
                    ...params,
                    categoryId: null
                }

                checks.forEach(ch => {
                    ch.checked = false;
                    prev.set(ch, false);
                });
                renderCounterAndPopoverList();
            });

            renderCounterAndPopoverList()
        });
    </script>

    <script>
        (() => {
            // ---- Podesivi podaci
            const SUGGESTIONS = @json($suggestedSubcategories);

            // ---- Selektori (po potrebi prilagodi)
            const chipsWrap = document.getElementById('qsChips');
            const refreshBtn = document.querySelector('.qs-refresh');
            const searchInput = document.querySelector('.search-hs__input'); // input u headeru

            if (!chipsWrap) return;

            // ---- SVG utili (bez eksternih fajlova)
            const sparkleSVG = (size = 12) => `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                width="${size}" height="${size}" fill="currentColor">
                <path d="M12 2c.3 0 .6.2.7.5l2.2 6.2c.2.5.6.9 1.1 1.1l6.2 2.2c.3.1.5.4.5.7s-.2.6-.5.7l-6.2 2.2c-.5.2-.9.6-1.1 1.1l-2.2 6.2c-.1.3-.4.5-.7.5s-.6-.2-.7-.5l-2.2-6.2c-.2-.5-.6-.9-1.1-1.1L2.8 13c-.3-.1-.5-.4-.5-.7s.2-.6.5-.7l6.2-2.2c.5-.2.9-.6 1.1-1.1l2.2-6.2c.1-.3.4-.5.7-.5Z"/>
            </svg>`;

            const refreshSVG = (size = 12) => `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    width="${size}" height="${size}" fill="currentColor">
                    <path d="M12 4a8 8 0 1 1-7.6 10.4 1 1 0 0 1 1.9-.6A6 6 0 1 0 12 6h-1.2a1 1 0 0 1 0-2H12a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0V6.9A7.9 7.9 0 0 1 12 4Z"/>
                </svg>`;

            // Ako želiš da se refresh dugmetu doda ikona (ako nema unutra)
            if (refreshBtn && refreshBtn.children.length === 0) {
                refreshBtn.innerHTML = refreshSVG(16);
            }

            // ---- Helperi
            const pick = (n = 3) => {
                const pool = [...SUGGESTIONS];
                // jednostavno mešanje + slice (dovoljno za UI)
                pool.sort(() => Math.random() - 0.5);
                return pool.slice(0, n);
            };

            const setSearchValue = (value) => {
                if (!searchInput) return;
                searchInput.value = value;
                // ako slušaš na input event
                searchInput.dispatchEvent(new Event('input', {
                    bubbles: true
                }));
                searchInput.focus();
            };

            const renderCounterAndPopoverList = () => {
                const chips = pick().map(v =>
                    `<a class="qs-chip" href="${v.path}" data-value="${v.id}">
                        ${sparkleSVG(14)}<span class="qs-chip-text">${v.name}</span>
                    </a>`
                ).join('');
                chipsWrap.innerHTML = chips;
            };

            // ---- Init + događaji
            renderCounterAndPopoverList();

            refreshBtn?.addEventListener('click', () => {
                // mala animacija rotacije ako imaš CSS (optional)
                refreshBtn.classList.add('is-rotating');
                renderCounterAndPopoverList();
                // skini klasu posle 300ms (uskladi sa CSS animacijom)
                setTimeout(() => refreshBtn.classList.remove('is-rotating'), 300);
            });

            chipsWrap.addEventListener('click', (e) => {
                const btn = e.target.closest('.qs-chip');
                if (!btn) return;
                const value = btn.dataset.value;
                setSearchValue(value);
                // ako ti treba i custom event za druge listenere:
                document.dispatchEvent(new CustomEvent('quick-suggest:set', {
                    detail: {
                        value
                    }
                }));
            });
        })();
    </script>

    <script>
        const setPerPageElement = document.querySelectorAll('.selectShowItems');
        setPerPageElement.forEach((setPerPage) => {
            setPerPage.addEventListener('change', (e) => {
                const perPage = e.target.value;

                const params = route().params;
                params.page = 1;
                params.perPage = perPage;

                window.location = route(route().current(), params);
            });
        });
    </script>
    @include('front.courses.partials._mobile-buybar-scripts')
@endsection