@extends('layout.b2c')
@section('title', 'Krojačeva škola – Online kursevi za lični i profesionalni razvoj')
@section('description', 'Krojačeva škola nudi više od 200 online kurseva iz različitih oblasti – od komunikacije, IT-a i
    AI-ja, do marketinga, menadžmenta, jezika i psihološke ravnoteže. Uči sopstvenim tempom uz stručne predavače i praktične
    treninge.')
@section('keywords', 'krojačeva škola, online kursevi, e-learning, edukacija, komunikacija, programiranje, AI,
    marketing, jezici, menadžment, prodaja, psihološka ravnoteža, motivacija, soft skills, digitalne veštine, online obuka,
    poslovne veštine, produktivnost')

@section('og-meta-tags')
    <meta name="author" content="Krojačeva škola">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.krojacevaskola.com">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Krojačeva škola – Online kursevi za lični i profesionalni razvoj">
    <meta property="og:description"
        content="Uči kad želiš i gde želiš. Krojačeva škola nudi preko 200 online kurseva iz oblasti IT-a, marketinga, jezika, menadžmenta, psihologije i još mnogo toga.">
    <meta property="og:url" content="https://www.krojacevaskola.com">
    <meta property="og:image" content="https://www.krojacevaskola.com/assets/images/og-home.jpg">
    <meta property="og:site_name" content="Krojačeva škola">
    <!-- Twitter -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Krojačeva škola – Online kursevi za lični i profesionalni razvoj">
    <meta name="twitter:description"
        content="Uči sopstvenim tempom uz vrhunske mentore. Krojačeva škola nudi preko 200 kurseva za razvoj profesionalnih i životnih veština.">
    <meta name="twitter:image" content="https://www.krojacevaskola.com/assets/images/og-home.jpg">
@endsection

@section('content')
    @include('front.partials.index_b2c._section-slider')

    @include('front.partials.index_b2c._courses-listing-section', [
        'categoryPathMap' => $categoryPathMap,
        'courses' => $latestCourses,
        'title' => 'Novi kursevi',
        'subtitle' => 'Aktuelne teme, iskusni predavači, novi kursevi svakog meseca',
    ])

    <section class="section courses-listing">
        <div class="container-fluid px-0"> <!-- SJ -->
            <div class="row gx-0"> <!-- SJ -->
                @include('front.partials.index_b2c._featured-instructors-section')
            </div>
        </div>
    </section>

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

    @include('front.partials.index_b2c._courses-listing-section', [
        'categoryPathMap' => $categoryPathMap,
        'courses' => $popularCourses,
        'title' => 'Popularno',
        'subtitle' => 'Kursevi koje učenici najviše gledaju i preporučuju',
    ])

    @include('front.partials.index_b2c._courses-listing-section', [
        'categoryPathMap' => $categoryPathMap,
        'courses' => $requiresCertificateCourses,
        'title' => 'Traženi sertifikati',
        'subtitle' => 'Prikaz liste kurseva najtraženijih sertifikata',
    ])

    <!-- NOVOSTI -->
    <section class="section news-listing"> <!-- IVAN sekcija novosti imamo ih na b2b -->
        <div class="container-custom">
            <header class="main-title">
                <h2>Novosti</h2>
                <p class="text-light">Aktuelne teme, najave i obaveštenja iz Krojačeve škole</p>
            </header>

            <div class="row g-4">
                <!-- VEST 1 -->
                @foreach ($posts as $post)
                <div class="col-xl-3 col-lg-6">
                    <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>
        </div>
    </section>
    <!-- NOVOSTI -->
    <!-- News new end -->

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

@endsection

@section('modals-and-offcanvas')
    {{-- @include('front.courses.partials._offcanvas-categories-mobile')
    @include('front.courses.partials._offcanvas-search-mobile')
    @include('front.courses.partials._offcanvas-courses-filter') --}}
@endsection

@section('add-scripts')
    @parent
    <script>
        (() => {
            const band = document.getElementById('heroBand');
            const track = document.getElementById('heroTrack');
            const slides = [...track.children];
            const dotsWrap = document.getElementById('heroDots');
            let i = 0;

            // Kreiraj tačkice
            slides.forEach((_, idx) => {
                const dot = document.createElement('div');
                dot.className = 'hs-dot' + (idx === 0 ? ' is-active' : '');
                dot.addEventListener('click', () => go(idx));
                dotsWrap.appendChild(dot);
            });
            const dots = [...dotsWrap.children];

            // Init
            slides.forEach((s, idx) => {
                s.style.opacity = idx === 0 ? 1 : 0;
                s.classList.toggle('is-active', idx === 0);
                s.style.position = 'absolute';
                s.style.inset = 0;
                s.style.transition = 'opacity 1.5s ease-in-out';
                s.style.pointerEvents = idx === 0 ? 'auto' : 'none';
                s.style.zIndex = idx === 0 ? 1 : 0;
            });

            function applyBg() {
                band.style.background = slides[i].dataset.bg || '#111';
            }

            function go(n) {
                const prev = i;
                i = (n + slides.length) % slides.length;

                slides[prev].style.opacity = 0;
                slides[prev].style.pointerEvents = 'none';
                slides[prev].style.zIndex = 0;
                slides[prev].classList.remove('is-active');

                void slides[i].offsetWidth; // reset animacija

                slides[i].style.opacity = 1;
                slides[i].style.pointerEvents = 'auto';
                slides[i].style.zIndex = 1;
                slides[i].classList.add('is-active');

                // ažuriraj tačkice
                dots.forEach((d, idx) => d.classList.toggle('is-active', idx === i));

                applyBg();
            }

            const interval = 6000;
            let timer = setInterval(() => go(i + 1), interval);

            band.addEventListener('mouseenter', () => clearInterval(timer));
            band.addEventListener('mouseleave', () => timer = setInterval(() => go(i + 1), interval));

            applyBg();
        })();
    </script>
    <!-- slider -->
@endsection