{# {% extends 'main_base.html.twig' %}
{% block title %}Yondy{% endblock %}
{% block description %}Yondy{% endblock %}
{% block pageMeta %}{% endblock %}
{% block content %}
    {% block container %} #}
{% extends 'main_base.html.twig' %}
{% block title %}Homepage
{% endblock %}
{% block description %}Homepage
{% endblock %}
{% block content %}
    <div class="home__wrapper">
        <div class="home__wrapper-video__wrapper">
            <video class="video-Box" id="videoBox" muted playsinline></video>
        </div>
        <div class="TextMainContainer">
            <div class="rectangleContainer">
                <div class="text-BoxContainer animate__backInDown">
                    <div class="Text-Box">
                        <p>
                            <span class="textDactilo"></span>
                            <span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span>
                        </p>
                        <p style="display: none;">
                            <span class="textDactilo2"></span>
                            <span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span>
                            {% set exam = getExam() %}
                            {% for item in exam %}
                            {% if loop.first %}
                            {% set buttonAdded = false %}
                            {% set lesson = getLesson(item.id) %}
                            {% for value in lesson %}
                            {% if value.product|length > 0 and loop.first %}
                            {% set firstProductUrl = path('main_prufungsvorbereitung_index', {'examId': item.id, 'lessonId': value.id}) %}
                        <div class="forward__btn__wrapper">
                            <button data-link="{{ firstProductUrl }}" class="d-flex align-items-center" type="button"
                                    style="opacity: 1; pointer-events: auto;">
                                <span>Weiter</span>
                                <span></span>
                            </button>
                        </div>
                        {% set buttonAdded = true %}
                        {% endif %}
                        {% endfor %}
                        {% endif %}
                        {% endfor %}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}
{% block pageScript %}
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>
    <script src="{{ asset('assets/main/js/all.min.js') }}"></script>
    <script src="{{ asset('assets/main/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/main/js/typed.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>

        $(document).ready(function () {
            var userAgent = navigator.userAgent;
            var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
            const videoElement = $('#videoBox');

            if (isSafari) {
                videoElement.append('<source src="  {{ asset('assets/main/videos/sf.mov') }}" type="video/mp4">');
            } else {
                videoElement.append('<source src="  {{ asset('assets/main/videos/ch.webm') }}" type="video/webm">');
            }
            videoElement.preload = 'auto';
            videoElement.controls = false;
            videoElement.muted = true;
            videoElement.playsInline = true;
            videoElement.load();
        });


        const startFirstTime = 9.25;
        const stopFirstTime = 13.3333;
        const startLastTime = 28.125;
        const stopLastTime = 34.625;
        let stopLoop = false;
        let runOnce = true;

        // Video Play
        $(document).ready(function () {
            const video = $(".video-Box")[0];
            video?.play();
            video?.addEventListener('timeupdate', checkTime);

            function checkTime() {
                if (video) {
                    if (stopLoop) {

                        if (video.currentTime >= stopLastTime) {
                            video.currentTime = startLastTime;
                            video.play();
                        }

                        if (runOnce) {
                            $(".home__wrapper .text-BoxContainer").addClass("twovers");

                            setTimeout(function () {
                                new Typed('.textDactilo2', {
                                    strings: ['<strong>In meinen Lernmaterialien bringe ich dir den Lernstoff Schritt für Schritt bei - mit Theorie, Beispielen, vielen Übungen und Lösungen! </strong>Gehe in den Online-Shop und bestelle jetzt deine Unterlagen. Vergiss nicht, bei der Bestellung deinen Namen anzugeben. Die Bücher werden mit deinem Namen bedruckt. Wir sehen uns beim Lernen!'],
                                    typeSpeed: 15,
                                    backSpeed: 0,
                                    fadeOut: true,
                                    onComplete: function () {
                                    }
                                });

                            }, 1000)
                            runOnce = false;


                        }
                    } else {
                        $(".text-BoxContainer p:eq(1)").css({"display": "none"});
                        if (video.currentTime >= stopFirstTime) {
                            video.currentTime = startFirstTime;
                        }
                    }
                } else {
                    if (runOnce) {
                        $(".home__wrapper .text-BoxContainer").addClass("twovers");

                        setTimeout(function () {

                            new Typed('.textDactilo2', {
                                strings: ['<strong>In meinen Lernmaterialien bringe ich dir den Lernstoff Schritt für Schritt bei - mit Theorie, Beispielen, vielen Übungen und Lösungen! </strong>Gehe in den Online-Shop und bestelle jetzt deine Unterlagen. Vergiss nicht, bei der Bestellung deinen Namen anzugeben. Die Bücher werden mit deinem Namen bedruckt. Wir sehen uns beim Lernen!'],
                                typeSpeed: 15,
                                backSpeed: 0,
                                fadeOut: true,
                                onComplete: function () {
                                }
                            });
                        }, 1000);

                        runOnce = false;
                    }
                }
            }

            const videoBtn = $(".Text-Box .forward__btn__wrapper button");

            const handleClick = () => {
                stopLoop = true;
                $(".text-BoxContainer p:eq(0)").css({"display": "none"});
                $(".text-BoxContainer p:eq(1)").css({"display": ""});
                videoBtn.closest(".forward__btn__wrapper").removeClass("visible");
                video || checkTime();

                videoBtn.off("click", handleClick);
            };

            videoBtn.on("click", handleClick);
        });


        // next btn
        /* setTimeout(function () {
                    $(".Next").css({ "opacity": "1", "transition": "1.2s", "pointer-events": "all" });
                }, 4000); */

        // typewriter
        setTimeout(function () {
            $(".text-BoxContainer").css({"display": "block"});


            var typed1 = new Typed('.textDactilo', {
                strings: ['<strong>Hallo, ich bin Yondy, dein Lernbegleiter! </strong>Bereitest du dich auf die Gymi Aufnahmeprüfung 2025 vor oder brauchst du allgemeine Unterstützung um deinen Schulstoff zu beherrschen? Mit meinen Lernunterlagen unterstütze ich dich jederzeit!'],
                typeSpeed: 15,
                backSpeed: 0,
                fadeOut: true,
                onComplete: function () {
                    $(".Text-Box .forward__btn__wrapper").addClass("visible")

                }
            });


            setTimeout(() => {
                $(".home__wrapper + .forward__btn__wrapper button").css({"opacity": "1", "pointer-events": "auto"});
            }, 5500)
        }, 2000);
    </script>
{% endblock %}