{% extends 'main_base.html.twig' %}
{% block title %}Schulvorbereitung{% endblock %}
{% block description %}Schulvorbereitung{% endblock %}
{% block content %}
    <script type="text/javascript" src="{{ asset('assets/main/js/modernizr.2.5.3.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/main/js/hash.js') }}"></script>
    <div ignore="1" class="close-btn close_btn">
        <img src="{{ asset('assets/main/img/icons/remove.png') }}" alt="remove__icon">
    </div>
    <div class="product__section">

        <div class="wrapper_revert__for__mobile">
            <div class="book__and__basket__section book__and__basket__section__mobile">
                <div class="loader-container">
                    <div class="pulsing-circle"></div>
                </div>
                <div class="book-wrapper">
                    <div class="flip-inner">

                        <div id="flipbook2" class="animated">
                            <div ignore="1" id="nextBtn2" class="next-btn next-button swiper-button-next__customized">
                                <div class="swiper-button-next__customized-line"></div>
                                <div class="swiper-button-next__customized-line"></div>
                            </div>
                            <!-- Previous button -->
                            <div ignore="1" id="prevBtn2"
                                 class="previous-btn previous-button swiper-button-prev__customized">
                                <div class="swiper-button-prev__customized-line"></div>
                                <div class="swiper-button-prev__customized-line"></div>
                            </div>
                            <div ignore="1" class="close-btn">
                                <img src="{{ asset('assets/main/img/icons/remove.png') }}" alt="remove__icon">
                            </div>

                        </div>
                    </div>
                    <div ignore="1" class="swiper-button-full__screen">
                        <button>
                            <i class="fa-solid fa-expand"></i>
                        </button>
                    </div>

                </div>
            </div>
            <div class="product__information__wrapper product__information__wrapper__mobile">
                <div class="product__information">
                    <div class="circle d-flex justify-content-center align-items-center ">
                        <p>
                            {{ shop3AktionButton.text }}
                        </p>
                    </div>
                    <h1>{{ themaUno.name }}</h1>
                    <p>{{ themaUno.text|striptags }}</p>
                    <div class="product__information-products__completed__btns d-flex justify-content-between align-items-center ">
                        <div class="product__information">
                            <div class="product__information-products__completed__btns-price">
                                <div class="product__information-options">
                                    {% if app.user %}
                                        {% if app.user.userTyped.id == 3 %}
                                            {% set priceType = getUserTypeThemaPrices(app.user.id, themaUno.id) %}
                                            <div class="product__information-option d-flex justify-content-between align-items-center active"
                                                 data-id="{{ themaUno.id }}" data-price="{{ priceType }}"
                                                 data-type="thema"
                                                 data-name="dataSt">
                                                <h4 class="product__information-option-title">Schülerexemplar </h4>
                                                <div class="ps-shop-price2 product__information-option-price"
                                                     data-price="{{ priceType }}">CHF <span
                                                            class="value">{{ priceType|number_format(2)|default }}</span>
                                                </div>
                                            </div>
                                            <div class="product__information-option d-flex justify-content-between align-items-center"
                                                 data-id="{{ themaUno.id }}" data-price="{{ themaUno.priceC }}"
                                                 data-type="thema"
                                                 data-name="dataPt">
                                                <h4 class="product__information-option-title">Lehrerexemplar</h4>
                                                <div class="ps-shop-price product__information-option-price"
                                                     data-price="{{ themaUno.priceC }}">CHF <span
                                                            class="value">{{ themaUno.priceC|number_format(2)|default }}</span>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            <div class="product__information-products__completed__btns d-flex align-items-center ">
                                {% if app.user %}
                                    {% if app.user.userTyped.id == 1 %}
                                        {% if  themaUno.priceA2 %}
                                            <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ themaUno.priceA2 }}">CHF <span
                                                        class="value" data-price="{{ themaUno.priceA2 }}"
                                                        data-name="typeSt"
                                                        data-id="{{ themaUno.id }}"
                                                        data-type="thema">{{ themaUno.priceA2|number_format(2)|default }}</span>
                                            </div>
                                        {% else %}
                                            <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                                 data-price="{{ themaUno.price }}">CHF <span
                                                        class="value" data-price="{{ themaUno.price }}"
                                                        data-name="typeSt"
                                                        data-id="{{ themaUno.id }}"
                                                        data-type="thema">{{ themaUno.price|number_format(2)|default }}</span>
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                    {% if app.user.userTyped.id == 2 %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ themaUno.priceB }}">CHF <span
                                                    class="value" data-price="{{ themaUno.priceB }}" data-name="typeSt"
                                                    data-id="{{ themaUno.id }}"
                                                    data-type="thema">{{ themaUno.priceB|number_format(2)|default }}</span>
                                        </div>
                                    {% endif %}
                                    {% if app.user.userTyped.id == 3 %}
                                        <input class="ps-shop-item-qty" type="number" value="1" min="1" max="99">
                                    {% endif %}
                                {% else %}
                                    {% if themaUno.priceA2 %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ themaUno.priceA2 }}">CHF <span
                                                    class="value" data-price="{{ themaUno.priceA2 }}" data-name="typeSt"
                                                    data-id="{{ themaUno.id }}"
                                                    data-type="thema">{{ themaUno.priceA2|number_format(2)|default }}</span>
                                        </div>
                                    {% else %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ themaUno.price }}">CHF <span
                                                    class="value" data-price="{{ themaUno.price }}" data-name="typeSt"
                                                    data-id="{{ themaUno.id }}"
                                                    data-type="thema">{{ themaUno.price|number_format(2)|default }}</span>
                                        </div>
                                    {% endif %}
                                {% endif %}
                                <button id="addProductMobile" class="ms-3">in den Warenkorb <span></span></button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# !!!!  #}

        <div class="products__fast__access">
            <div class="products__fast__access-modules__and__prices">
                <ul class="products__fast__access-modules ps-0">
                    {% set themas = getThemaBereichAll(bereichId) %}
                    {% set firstBTagDisplayed = false %}
                    {% for item in themas %}
                        {% if not firstBTagDisplayed %}
                            {% set firstBTagDisplayed = true %}
                            <div class="products__fast__access-modules-language"><b>{{ item.bereich.lektion.name }}</b>
                                - {{ item.bereich.name }}</div>
                            <li class=" {% if themaId == item.id %}active{% endif %}">
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_schulvorbereitung_index', {'thema': item.id}) }}">{{ item.name }}</a>
                                </div>
                                <div class="input__sections primary__input__section-dropdown"></div>
                            </li>
                        {% else %}
                            <li class=" {% if themaId == item.id %}active{% endif %}">
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_schulvorbereitung_index', {'thema': item.id}) }}">{{ item.name }}</a>
                                </div>
                                <div class="input__sections primary__input__section-dropdown"></div>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="book__and__basket__section book__and__basket__desktop">

            <div class="loader-container">
                <div class="pulsing-circle"></div>
            </div>
            <div class="book-wrapper">
                <div class="flip-inner">

                    <div id="flipbook" class="animated">
                        <div ignore="1" id="nextBtn" class="next-btn next-button swiper-button-next__customized">
                            <div class="swiper-button-next__customized-line"></div>
                            <div class="swiper-button-next__customized-line"></div>
                        </div>
                        <!-- Previous button -->
                        <div ignore="1" id="prevBtn"
                             class="previous-btn previous-button swiper-button-prev__customized">
                            <div class="swiper-button-prev__customized-line"></div>
                            <div class="swiper-button-prev__customized-line"></div>
                        </div>
                        <div ignore="1" class="close-btn">
                            <img src="{{ asset('assets/main/img/icons/remove.png') }}" alt="remove__icon">
                        </div>

                    </div>
                </div>
                <div ignore="1" class="swiper-button-full__screen">
                    <button>
                        <i class="fa-solid fa-expand"></i>
                    </button>
                </div>

            </div>
        </div>
        <div class="product__information__wrapper product__information__wrapper__desktop">
            <div class="product__information">
                <div class="circle d-flex justify-content-center align-items-center ">
                    <p>
                        {{ shop3AktionButton.text }}
                    </p>
                </div>
                <h1>{{ themaUno.name }}</h1>
                <p>{{ themaUno.text|striptags }}</p>
                <div class="product__information-products__completed__btns d-flex justify-content-between align-items-center ">
                    <div class="product__information">
                        <div class="product__information-products__completed__btns-price">
                            <div class="product__information-options">
                                {% if app.user %}
                                    {% if app.user.userTyped.id == 3 %}
                                        {% set priceType = getUserTypeThemaPrices(app.user.id, themaUno.id) %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ themaUno.id }}" data-price="{{ priceType }}" data-type="thema"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">Schülerexemplar </h4>
                                            <div class="ps-shop-price2 product__information-option-price"
                                                 data-price="{{ priceType }}">CHF <span
                                                        class="value">{{ priceType|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                        <div class="product__information-option d-flex justify-content-between align-items-center"
                                             data-id="{{ themaUno.id }}" data-price="{{ themaUno.priceC }}"
                                             data-type="thema"
                                             data-name="dataPt">
                                            <h4 class="product__information-option-title">Lehrerexemplar</h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ themaUno.priceC }}">CHF <span
                                                        class="value">{{ themaUno.priceC|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="product__information-products__completed__btns d-flex align-items-center ">
                            {% if app.user %}
                                {% if app.user.userTyped.id == 1 %}
                                    {% if themaUno.priceA2 %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ themaUno.priceA2 }}">CHF <span
                                                    class="value" data-price="{{ themaUno.priceA2 }}" data-name="typeSt"
                                                    data-id="{{ themaUno.id }}"
                                                    data-type="thema">{{ themaUno.priceA2|number_format(2)|default }}</span>
                                        </div>
                                    {% else %}
                                        <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                             data-price="{{ themaUno.price }}">CHF <span
                                                    class="value" data-price="{{ themaUno.price }}" data-name="typeSt"
                                                    data-id="{{ themaUno.id }}"
                                                    data-type="thema">{{ themaUno.price|number_format(2)|default }}</span>
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% if app.user.userTyped.id == 2 %}
                                    <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                         data-price="{{ themaUno.priceB }}">CHF <span
                                                class="value" data-price="{{ themaUno.priceB }}" data-name="typeSt"
                                                data-id="{{ themaUno.id }}"
                                                data-type="thema">{{ themaUno.priceB|number_format(2)|default }}</span>
                                    </div>
                                {% endif %}
                                {% if app.user.userTyped.id == 3 %}
                                    <input class="ps-shop-item-qty" type="number" value="1" min="1" max="99">
                                {% endif %}
                            {% else %}
                                {% if themaUno.priceA2 %}
                                    <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                         data-price="{{ themaUno.priceA2 }}">CHF <span
                                                class="value" data-price="{{ themaUno.priceA2 }}" data-name="typeSt"
                                                data-id="{{ themaUno.id }}"
                                                data-type="thema">{{ themaUno.priceA2|number_format(2)|default }}</span>
                                    </div>
                                {% else %}
                                    <div class="ps-shop-price product__information-option-price product__information-option-price__forpricedata d-flex align-items-center"
                                         data-price="{{ themaUno.price }}">CHF <span
                                                class="value" data-price="{{ themaUno.price }}" data-name="typeSt"
                                                data-id="{{ themaUno.id }}"
                                                data-type="thema">{{ themaUno.price|number_format(2)|default }}</span>
                                    </div>
                                {% endif %}
                            {% endif %}

                            <button id="addProductDesk" class="ms-3">in den Warenkorb <span></span></button>
                        </div>

                    </div>
                </div>
            </div>


        </div>
    </div>


    </div>
{% endblock %}
{% block pageScript %}
    <script src="{{ asset('assets/main/js/pdf.js') }}"></script>
    <script src="{{ asset('assets/main/js/jquery-3.6.3.min.js') }}"></script>
    <script src="{{ asset('assets/main/js/typed.js') }}"></script>
    <script src="{{ asset('assets/main/js/turn.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let productInformationWrapper = $(".product__information__wrapper__mobile").height();
            var windowWidth = $(window).width();
            if (windowWidth < 1050) {
                $(".book__and__basket__section__mobile").css("height", "calc(100% - " + productInformationWrapper + "px - 60px)");

            }

            $(document).ready(function () {
                $("#addProductDesk").click(function () {

                    $(this).prop('disabled', true);

                    let $activeSlide = $(this).closest(".product__information").find(".product__information-option.active");
                    let $activePrice = $(this).closest(".product__information-products__completed__btns").find(".product__information-option-price__forpricedata span");
                    let price;
                    let qty = 1;
                    let ids;
                    let addShop;
                    let buttonName;

                    const userType = {{ app.user.userTyped.id|default(0) }};

                    if (userType === 1 || userType === 2) {
                        price = $activePrice.data("price");
                        ids = $activePrice.data("id");
                        addShop = $activePrice.data("type");
                        buttonName = $activePrice.data("name");
                    } else if (userType === 3) {
                        price = $activeSlide.data("price");
                        qty = $(".ps-shop-item-qty").val();
                        ids = $activeSlide.data("id");
                        addShop = $activeSlide.data("type");
                        buttonName = $activeSlide.data("name");


                    } else {
                        price = $activePrice.data("price");
                        ids = $activePrice.data("id");
                        addShop = $activePrice.data("type");
                        buttonName = $activePrice.data("name");
                    }


                    if (parseInt(qty) < 1) {
                        addNotification('info', 'Bitte geben Sie die Anzahl der Produkte ein');
                        return false;
                    }

                    let data = {
                        items: [{
                            type: addShop,
                            buttonName: buttonName,
                            id: ids,
                            lehrerLatexCode: buttonName,
                            qty: qty
                        }]
                    };

                    if (price !== undefined) {
                        data.items[0].price = price;
                    }

                    $.ajax({
                        method: 'POST',
                        type: 'POST',
                        url: '{{ path('main_ajax_add_korb') }}',
                        data: data,
                        success: function (data) {
                            if (data.status === 'success') {
                                korbAnzahl();
                            }
                            addNotification('success', data.message);
                        }
                    });

                    $(this).prop('disabled', false);
                    return false;
                });

                $("#addProductMobile").click(function () {

                    $(this).prop('disabled', true);

                    let $activeSlide = $(this).closest(".product__information").find(".product__information-option.active");
                    let $activePrice = $(this).closest(".product__information-products__completed__btns").find(".product__information-option-price__forpricedata span");

                    let price;
                    let qty = 1;
                    let ids;
                    let addShop;
                    let buttonName;

                    const userType = {{ app.user.userTyped.id|default(0) }};

                    if (userType === 1 || userType === 2) {
                        price = $activePrice.data("price");
                        ids = $activePrice.data("id");
                        addShop = $activePrice.data("type");
                        buttonName = $activePrice.data("name");
                    } else if (userType === 3) {
                        price = $activeSlide.data("price");
                        qty = $(".ps-shop-item-qty").val();
                        ids = $activeSlide.data("id");
                        addShop = $activeSlide.data("type");
                        buttonName = $activeSlide.data("name");

                    } else {
                        price = $activePrice.data("price");
                        ids = $activePrice.data("id");
                        addShop = $activePrice.data("type");
                        buttonName = $activePrice.data("name");
                    }


                    if (parseInt(qty) < 1) {
                        addNotification('info', 'Bitte geben Sie die Anzahl der Produkte ein');
                        return false;
                    }

                    let data = {
                        items: [{
                            type: addShop,
                            buttonName: buttonName,
                            id: ids,
                            lehrerLatexCode: buttonName,
                            qty: qty
                        }]
                    };

                    if (price !== undefined) {
                        data.items[0].price = price;
                    }

                    $.ajax({
                        method: 'POST',
                        type: 'POST',
                        url: '{{ path('main_ajax_add_korb') }}',
                        data: data,
                        success: function (data) {
                            if (data.status === 'success') {
                                korbAnzahl();
                            }
                            addNotification('success', data.message);
                        }
                    });

                    $(this).prop('disabled', false);
                    return false;
                });
            });
        });

        // Tüm Değişkenler
        const fullScreenBtn = $(".swiper-button-full__screen button");
        const fullScreenWrap = $(".swiper-button-full__screen");
        const productsSetSection = $(".products-set__section");
        const bookAndBasketSection = $(".book__and__basket__section");
        const bookAndBasketSectionMobile = $(".book__and__basket__section__mobile");
        const productSection = $(".product__section");
        const book = $(".sets__view__section");
        const footer = $(".footer");
        const header = $(".header");
        const yellowBallon = $(".animation__yellow__balloon");
        const productInformation = $(".product__information__wrapper");
        const productFastAccess = $(".products__fast__access");
        const warningModals = $(".warning__modals");
        const closeBtn = $("body > .close-btn");
        const flipbookWrap = $(".flip-inner");

        const setsViewVertical = $(".sets__view__section__mobile .sets__view__section-img__wrapper");
        const setsViewDesktop = $(".flip-inner");
        const setsViewHorizontal = $(".sets__view__section__mobile__fullscreen");
        const setsViewDesk = $(".sets__view__section__desktop");
        const setsViewMobileWrap = $(".wrapper_revert__for__mobile");

        const bookWrapper = $(".book-wrapper");

        const bookCloseBtn = $(".book-wrapper .close-btn");
        const prevBtn = $("#prevBtn");
        const nextBtn = $("#nextBtn");

        // Dropdown menu
        const clickedProducts = document.querySelectorAll(".products__fast__access-modules li");

        clickedProducts.forEach(item => {
            item.addEventListener('click', () => {
                item.classList.add("active");

                clickedProducts.forEach(buttons => {
                    if (item != buttons) {
                        buttons.classList.remove("active");
                    }
                });
            });
        });

        // Book Full Screen
        fullScreenBtn.on("click", () => {
            book.addClass("active");
            fullScreenBtn.css({
                "opacity": "0",
                "pointerEvents": "none"
            });

            gsap.set(yellowBallon, {
                transformOrigin: 'left'
            });
            gsap.to(yellowBallon, {
                scale: 2
            });

            header.css({
                "opacity": "0",
                "pointerEvents": "none"
            });

            productInformation.css({
                "opacity": "0",
                "pointerEvents": "none"
            });

            productFastAccess.css({
                "opacity": "0",
                "pointerEvents": "none"
            });

            bookCloseBtn.css({
                "opacity": "0",
                "pointerEvents": "none"
            });


            bookWrapper.addClass("zoom");
            bookAndBasketSection.addClass("zoom");
            flipbookWrap.addClass("zoom");

            setTimeout(function () {
                fullScreenWrap.css({
                    "display": "none",
                });

                productsSetSection.css({
                    "position": "absolute",
                    "height": "100vh",
                    "width": "100%",
                    "padding": "0",
                    "justify-content": "center",
                });


                header.css({
                    "display": "none",
                });

                footer.css({
                    "display": "none",
                });

                productSection.css({
                    "height": "100vh",
                    "margin": "0 auto",
                    "justify-content": "center",
                });

                bookAndBasketSectionMobile.css({
                    "height": "auto",
                    "margin": "0"
                });

                setsViewMobileWrap.css({
                    "height": "100vh",
                });

            }, 300);

            setsViewDesktop.css({
                "opacity": "0",
            });

            setTimeout(function () {
                setsViewDesktop.css({
                    "opacity": "1",
                });
            }, 500);

            setTimeout(() => {
                closeBtn.css({
                    "opacity": "1",
                    "pointerEvents": "auto"
                });
            }, 600);

            scrollToTop();
        });

        closeBtn.on("click", () => {
            book.removeClass("active");

            fullScreenBtn.css({
                "opacity": "1",
                "pointerEvents": "auto"
            });

            gsap.set(yellowBallon, {
                transformOrigin: 'top left'
            });
            gsap.to(yellowBallon, {
                scale: 1
            });

            header.css({
                "opacity": "1",
                "pointerEvents": "auto"
            });

            closeBtn.css({
                "opacity": "0",
                "pointerEvents": "flex"
            });

            productFastAccess.css({
                "opacity": "1",
                "pointerEvents": "auto"
            });

            bookCloseBtn.css({
                "opacity": "1",
                "pointerEvents": "auto"
            });

            setsViewDesktop.css({
                "opacity": "0",
            });

            header.css({
                "display": "",
            });

            $(productSection).css({
                "height": "",
                "margin": "",
                "justify-content": ""
            });

            bookAndBasketSectionMobile.css({
                "height": "",
                "margin": ""
            });

            setsViewMobileWrap.css({
                "height": "",
            });

            setTimeout(function () {
                setsViewDesktop.css({
                    "opacity": "1",
                });
            }, 500);

            bookWrapper.removeClass("zoom");
            bookAndBasketSection.removeClass("zoom");
            flipbookWrap.removeClass("zoom");

            setTimeout(function () {
                fullScreenWrap.css({
                    "display": "",
                });

                $(productsSetSection).css({
                    "position": "",
                    "height": "",
                    "width": "",
                    "margin": "",
                    "padding": "",
                    "justify-content": "",
                });


                footer.css({
                    "display": "",
                });

                fullScreenWrap.css({
                    "display": "flex",
                });

                productInformation.css({
                    "opacity": "1",
                    "pointerEvents": "auto"
                });
            }, 300);


            $("html").css({
                "overflow": "visible",
                "overflowX": "hidden"
            });
        });


        $(document).ready(function () {
            const funcPdfConvertToFlipbook = (flipbookId, pdfUrl) => {
                const flipbook = $(flipbookId);

                if (flipbook.length === 0) {
                    console.error("Flipbook element not found.");
                    return;
                }

                //? Book Close Btn
                bookCloseBtn.on("click", () => {
                    flipbook.turn('page', 1);
                    flipbook.bind('start', function (event, pageObject, corner) {
                        if (corner == 'tl' || corner == 'bl') {
                            event.preventDefault();
                        }
                    });
                });


                let {pdfjsLib} = globalThis;
                pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ asset('assets/main/js/pdf.worker.js') }}';

                var loadingTask = pdfjsLib.getDocument(pdfUrl);
                $(".loader-container").css({"display": "block"});
                $(".book-wrapper").css({"opacity": "0"});

                loadingTask.promise.then(function (pdf) {
                    var pagePromises = [];
                    for (var i = 1; i <= pdf.numPages; i++) {
                        pagePromises.push(pdf.getPage(i));
                    }

                    Promise.all(pagePromises).then(function (pages) {
                        var renderPromises = [];
                        pages.forEach(function (page, index) {
                            var scale = 2;
                            var viewport = page.getViewport({scale: scale});
                            var div = $('<div class="page"></div>').attr('data-page-number', index + 1);
                            var canvas = $('<canvas></canvas>').attr('height', viewport.height).attr('width', viewport.width);
                            var context = canvas.get(0).getContext('2d');
                            var renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };

                            var renderTask = page.render(renderContext).promise.then(function () {
                                div.append(canvas);
                                var gradientDiv = $('<div class="gradient"></div>');
                                div.append(gradientDiv);
                                return div;
                            });
                            renderPromises.push(renderTask);
                        });

                        Promise.all(renderPromises).then(function (divs) {
                            divs.forEach(function (div) {
                                flipbook.append(div);
                            });


                            const flipbookOptions = {
                                elevation: 50,
                                acceleration: true,
                                autoCenter: true,
                                duration: 1000,
                                gradients: true,
                                page: 1,
                                acceleration: !isChrome(),
                                when: {
                                    turning: function (event, page, view) {
                                        if (page > 1) {
                                            $(bookCloseBtn).css("display", "block");
                                            $(bookAndBasketSection).css("z-index", "20");
                                            $(prevBtn).css("display", "flex");
                                            $(fullScreenWrap).css("transform", "translate(50%, 50%)");
                                            $(productFastAccess).css("display", "none");
                                            $(productInformation).css("display", "none");
                                            $(flipbookWrap).addClass("zoomout");
                                        } else {
                                            $(bookCloseBtn).css("display", "none");
                                            $(bookAndBasketSection).css("z-index", "9");
                                            $(prevBtn).css("display", "none");
                                            $(fullScreenWrap).css("transform", "translate(75%, 50%)");
                                            $(productFastAccess).css("display", "");
                                            $(productInformation).css("display", "flex");
                                            $(flipbookWrap).removeClass("zoomout");
                                            $('#flipbook').bind('start', function (event, pageObject, corner) {
                                                if (corner == 'tl' || corner == 'bl') {
                                                    event.preventDefault();
                                                }
                                            });
                                        }
                                    },
                                    turned: function (event, page, view) {
                                        var totalPages = $(this).turn('pages');
                                        if (totalPages === page) {
                                            $(fullScreenWrap).css("transform", "translate(25%, 50%)");
                                            $(bookCloseBtn).css("right", "50%");
                                            $(nextBtn).css("display", "none");
                                        } else {
                                            $(bookCloseBtn).css("right", "0");
                                            $(nextBtn).css("display", "flex");
                                        }
                                        $(this).turn('center');
                                    },
                                }
                            };

                            flipbook.turn(flipbookOptions);

                            $(".loader-container").css({"display": "none"}); // Hide the loading overlay
                            $(".book-wrapper").css({"opacity": "1"}); // Show the flipbook
                            $(".swiper-button-full__screen").css({"opacity": "1"}); // Show the full screen button
                            $("html").css({"overflow-y": "auto"}); // Enable page scroll

                        }).catch(error => console.error(error));
                    });
                });
            };

            /*let dir = '/yondy/public/assets/main/img/';
            let pdf = 'test.pdf';*/
            let dir = 'https://system.yondy.ch/public/media/product2/';
            let pdf = '{{ themaUno.pdfFile }}';
            let dirx = dir + pdf;

            funcPdfConvertToFlipbook('#flipbook', dirx);
            funcPdfConvertToFlipbook('#flipbook2', dirx);

            function isChrome() {
                return navigator.userAgent.indexOf('Chrome') != -1;
            }

            $("#nextBtn").click(() => {
                $("#flipbook").turn("next");
            });

            $("#prevBtn").click(() => {
                $("#flipbook").turn("previous");
            });

            $("#nextBtn2").click(() => {
                $("#flipbook2").turn("next");
            });

            $("#prevBtn2").click(() => {
                $("#flipbook2").turn("previous");
            });
        });
    </script>
{% endblock %}