@extends('layout.b2c')
@section('title', $course->title .' - Krojačeva škola | Online kursevi dizajna, programiranja i marketinga')
@section('description', $course->courseDetails ? $course->courseDetails->seo_meta_opis : 'Detalji kursa ' .
    $course->title)
@section('keywords', $course->courseDetails ? $course->courseDetails->seo_kljucne_reci : 'kurs, ' . $course->title)

@section('add-head-tags')
<link rel="canonical" href="https://krojacevaskola.com/kurs/{{ $course->slug }}/">
@endsection

@section('content')
    @include('front.courses.partials.show._mobile-buy-bar')

    @include('front.courses.partials.show._course-section')

    @include('front.courses.partials.show._lessons-section')

    @include('front.courses.partials.show._faq-section')

    @include('front.courses.partials.show._lecturer-section')

    @if ($reviews->isNotEmpty())
        @include('front.courses.partials.show._testemonial-section')
    @endif

    @include('front.courses.partials.show._featured-course-section')

    @include('front.courses.partials.show._related-courses-section')

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

@endsection

@section('modals-and-offcanvas')
    @include('front.courses.partials.show._vimeo-modal')
@endsection

@section('add-scripts')
    @parent
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Uhvatiti klik na dugme show more lessons 
            const btnShowMoreLessons = document.querySelector('#btn-show-more-lessons');
            if (btnShowMoreLessons) {
                btnShowMoreLessons.addEventListener('click', (e) => {
                    e.preventDefault();
                    // Dohvatiti sve sakrivene lesson item-e
                    const hiddenLessons = document.querySelectorAll('.lesson-list-item.d-none');
                    if (hiddenLessons.length > 0) {
                        hiddenLessons.forEach((hiddenLessonItem) => {
                            hiddenLessonItem.classList.remove('d-none');
                        });
                    }

                    // Dohvatanje ikonica za povezanu lekciju kako bi se i oni saktili
                    const connectedPracticeSvgs = document.querySelectorAll(
                        '.connected-practice-svg.d-none');
                    if (connectedPracticeSvgs.length > 0) {
                        connectedPracticeSvgs.forEach((connectedPracticeSvgItem) => {
                            connectedPracticeSvgItem.classList.remove('d-none');
                        });
                    }

                    // Sakrivanje dugmeta nakon prikaza svih lekcija
                    e.currentTarget.classList.add('d-none');
                })
            }


            const btnShowMoreInstructorBio = document.querySelector('#btn-show-full-instructor-bio');
            if (btnShowMoreInstructorBio) {
                btnShowMoreInstructorBio.addEventListener('click', (e) => {
                    e.currentTarget.classList.add('d-none');
                    const bioElement = document.querySelector("#instructor-bio");
                    if (bioElement) {
                        bioElement.classList.remove('bio-preview');
                    }
                })
            }

        });

        const container = document.querySelector('.testimonials-holder');
        const btn = document.getElementById('btn-show-more-testemonials');
        const batch = parseInt(btn?.dataset.batch || '3', 10);

        function revealNextBatch() {
            const hidden = container.querySelectorAll('.testimonial-item.d-none');
            if (hidden.length === 0) {
                btn.classList.add('d-none'); // nema više – sakrij dugme
                return;
            }

            // uzmi prva N
            Array.from(hidden).slice(0, batch).forEach(el => {
                el.classList.remove('d-none');
            });

            // proveri da li je ostalo skrivenih
            if (container.querySelectorAll('.testimonial-item.d-none').length === 0) {
                btn.classList.add('d-none');
            }
        }
        
        // inicijalno: ako nema skrivenih, sakrij dugme
        if (container && container.querySelectorAll('.testimonial-item.d-none').length === 0) {
            if(btn) {
                btn.classList.add('d-none');
            }
        }

        if(btn) {
            btn.addEventListener('click', revealNextBatch);
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('videoModal');
            if (!modal) return; // nema modala, nema dalje

            const frameEl = modal.querySelector('.vm-frame');

            function openVimeo(id) {
                console.log("🚀 ~ openVimeo ~ id:", id)
                frameEl.innerHTML = '';
                const ifr = document.createElement('iframe');
                ifr.src = `https://player.vimeo.com/video/${id}?autoplay=1&title=0&byline=0&portrait=0`;
                ifr.allow = 'autoplay; fullscreen; picture-in-picture';
                ifr.setAttribute('allowfullscreen', '');
                frameEl.appendChild(ifr);

                modal.classList.add('is-open');
                modal.setAttribute('aria-hidden', 'false');
                document.body.classList.add('vm-locked');
            }

            function closeModal() {
                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                document.body.classList.remove('vm-locked');
                frameEl.innerHTML = '';
            }

            // Klik SAMO na <a class="item-link" data-vimeo="...">
            document.addEventListener('click', function(e) {
                const a = e.target.closest('a.item-link[data-vimeo]');
                if (!a) return;
                e.preventDefault();
                const id = a.dataset.vimeo;
                if (id) openVimeo(id);
            });

            // Zatvaranje: backdrop ili X dugme
            modal.addEventListener('click', function(e) {
                if (e.target.hasAttribute('data-close')) closeModal();
            });

            // Escape
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
            });
        });
    </script>
    <!-- Vimeo modal end -->


    @include('front.courses.partials._mobile-buybar-scripts')

    <script>
        let currentAbort = null;

        const storeRateApplicability = async (review_id, source) => {
            try {
                if (currentAbort) currentAbort.abort();
                currentAbort = new AbortController();
                
                const url = route('fetch.review_applicabillity.store');
                const res = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Accept": "application/json",
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.head.querySelector("meta[name='csrf-token']")
                            .content,
                    },
                    signal: currentAbort.signal,
                    body: JSON.stringify({
                        review_id,
                        source
                    })
                });
                

                const response = await res.json()
                
                if(response.status) {
                    showToast('success', "Uspešno ste označili utisak kao koristan.");
                    
                    if(response.applicabilityCount) {
                        document.querySelector(`#applicability-count-${source}-${review_id}`).innerHTML = response.applicabilityCount;
                    }
                }

                if(!response.status) {
                    showToast('danger', "Već ste označili ovaj utisak kao koristan.");
                }
                
            } catch (err) {
                if (err.name === 'AbortError') return;
                // po želji: pokaži grešku ili samo sakrij indikator
                
            } finally {
            }

        };

        document.querySelectorAll('.btn-review-applicable').forEach(btn => btn.addEventListener('click', async (e) => {
            e.preventDefault();
            const reviewId = e.currentTarget.dataset.reviewId;
            const reviewSource = e.currentTarget.dataset.reviewSource;

            await storeRateApplicability(reviewId, reviewSource);
        }));
    </script>
@endsection