{% 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 class="product__section justify-SB">
        <div ignore="1" class="close-btn close_btn">
            <img src="{{ asset('assets/main/img/icons/remove.png') }}" alt="remove__icon">
        </div>
        <div class="products__fast__access">
            <div class="products__fast__access-modules__and__prices">
                <ul class="products__fast__access-modules ps-0">
                    {% set lektion = getLektion() %}
                    {% for item in lektion %}
                        {% for value in item.bereich %}
                            <b>{{ item.name }}</b> - {{ value.name }}
                            {% for itemx in value.thema %}
                                <li class="ml-10 {% if themaId == itemx.id %}active{% endif %}">
                                    <div class="products__fast__access-modules-name">
                                        <a href="{{ path('main_schulvorbereitung_index',{'thema':itemx.id}) }}">{{ itemx.name }}</a>
                                    </div>
                                </li>
                            {% endfor %}
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </div> {# eklenen #}
        <div class="book__and__basket__section">
            <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 ignore="1" class="swiper-button-full__screen">
                            <button>
                                <i class="fa-solid fa-expand"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product__information__wrapper">
            <div class="product__information">
                <h1>{{ thema.name }}</h1>
                <p>{{ thema.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 == 1 %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ thema.id }}" data-price="{{ thema.price }}" data-type="thema"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">
                                                Einzelpreis
                                            </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ thema.price }}">CHF <span
                                                        class="value">{{ thema.price|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% elseif app.user.userTyped.id == 2 %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ thema.id }}" data-price="{{ thema.priceB }}" data-type="thema"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">
                                                Einzelpreis
                                            </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ thema.priceB }}">CHF <span
                                                        class="value">{{ thema.priceB|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% elseif app.user.userTyped.id == 3 %}
                                        {% set priceType = getUserTypeThemaPrices(app.user.id, thema.id) %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ thema.id }}" data-price="{{ priceType }}" data-type="thema"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">Einzelpreis </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="{{ thema.id }}" data-price="{{ thema.priceC }}" data-type="thema"
                                             data-name="dataPt">
                                            <h4 class="product__information-option-title">Klassensatz ab 8
                                                Schüler/in </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ thema.priceC }}">CHF <span
                                                        class="value">{{ thema.priceC|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <div class="product__information-option d-flex justify-content-between align-items-center active"
                                         data-name="typeSt" data-id="{{ thema.id }}" data-type="thema"
                                         data-price="{{ thema.price }}">
                                        <h4 class="product__information-option-title">Einzelpreis </h4>
                                        <div class="ps-shop-price product__information-option-price"
                                             data-price="{{ thema.price }}">CHF <span
                                                    class="value">{{ thema.price|number_format(2)|default }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="product__information-products__completed__btns d-flex align-items-center ">
                            <input class="ps-shop-item-qty" type="number" value="1" min="1" max="99">
                            <button id="addProduct" class="ms-3">in den Warenkorb <span></span></button>
                        </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 () {
            $("#addProduct").click(function () {
                let $activeSlide = $(".product__information-option.active");

                let ids = $activeSlide.data("id");
                let qty = $(".ps-shop-item-qty").val();
                let addShop = $activeSlide.data("type");
                let buttonName = $activeSlide.data("name");
                let price = $activeSlide.data("price");

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

                $.ajax({
                    method: 'POST',
                    type: 'POST',
                    url: '{{ path('main_ajax_add_korb') }}',
                    data: {
                        items: [{
                            type: addShop,
                            buttonName: buttonName,
                            price: price,
                            id: ids,
                            qty: qty,
                            lehrerLatexCode: buttonName,
                        }]
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            korbAnzahl();
                        }
                        addNotification('info', data.message);
                    }
                });
                return false;
            });
        });

        //? All Variables
        const fullScreenBtn = document.querySelector(".swiper-button-full__screen button");
        const fullScreenDiv = document.querySelector(".swiper-button-full__screen");
        const book = document.querySelector(".product__section .book__and__basket__section");
        const yellowBallon = document.querySelector(".animation__yellow__balloon")
        const header = document.querySelector(".header")
        const productInformation = document.querySelector(".product__information__wrapper")

        const closeBtn = document.querySelector("body .close_btn")

        const productsFastAccess = document.querySelector(".products__fast__access")
        const bookCloseBtn = document.querySelector(".book-wrapper .close-btn")
        const prevBtn = document.querySelector("#prevBtn")
        const nextBtn = document.querySelector("#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.addEventListener("click", () => {
            book.classList.add("active");
            fullScreenBtn.style.opacity = "0";
            fullScreenBtn.style.pointerEvents = "none";
            gsap.set(yellowBallon, {
                transformOrigin: 'left'
            })
            gsap.to(yellowBallon, {
                scale: 2
            })
            header.style.opacity = "0";
            header.style.pointerEvents = "none";
            productInformation.style.opacity = "0";
            productInformation.style.pointerEvents = "none";
            bookCloseBtn.style.opacity = "0";
            bookCloseBtn.style.pointerEvents = "none";
            setTimeout(() => {
                closeBtn.style.opacity = "1";

                closeBtn.style.pointerEvents = "auto";


            }, 600);
            document.body.style.overflow = "hidden";
            scrollToTop();

        });

        closeBtn.addEventListener("click", () => {
            book.classList.remove("active");

            fullScreenBtn.style.opacity = "1";
            fullScreenBtn.style.pointerEvents = "auto";

            gsap.set(yellowBallon, {
                transformOrigin: 'top left'
            })
            gsap.to(yellowBallon, {
                scale: 1
            })
            header.style.opacity = "1"
            header.style.pointerEvents = "auto"
            productInformation.style.opacity = "1"
            productInformation.style.pointerEvents = "auto"
            closeBtn.style.opacity = "0"
            closeBtn.style.pointerEvents = "none"
            bookCloseBtn.style.opacity = "1";
            bookCloseBtn.style.pointerEvents = "auto";
            document.body.style.overflow = "visible";
            document.body.style.overflowX = "hidden";

        });

        //? Book Close Btn
        bookCloseBtn.addEventListener("click", () => {
            $('#flipbook').turn('page', 1);
        });

        const funcPdfConvertToFlipbook = (pdfUrl) => {
            var pdfUrl = pdfUrl;
            var flipbook = $('#flipbook');

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

            var loadingTask = pdfjsLib.getDocument(pdfUrl);

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

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

                    flipbook.turn({
                        acceleration: true,
                        autoCenter: true,
                        duration: 1000,
                        gradients: true,
                        page: 1,
                        turnCorners: 'bl,br',
                        acceleration: !isChrome(),
                        when: {
                            turning: function (event, page, view) {
                                const productSaleSection = document.querySelector(".product__information__wrapper")
                                const bookAndBasketSec = document.querySelector(".book__and__basket__section");

                                if (page > 1) {
                                    bookCloseBtn.style.display = "block"
                                    bookCloseBtn.style.opacity = "1"
                                    productSaleSection.style.opacity = "0"
                                    bookAndBasketSec.style.zIndex = "20"
                                    prevBtn.style.display = "flex";
                                    fullScreenDiv.style.transform = "translate(50%, 50%)";
                                } else {
                                    bookCloseBtn.style.display = "none"
                                    bookCloseBtn.style.opacity = "0"
                                    productSaleSection.style.opacity = "1"
                                    bookAndBasketSec.style.zIndex = "9"
                                    prevBtn.style.display = "none";
                                    fullScreenDiv.style.transform = "translate(75%, 50%)";
                                }
                            },

                            turned: function (event, page, view) {
                                var totalPages = $(this).turn('pages');
                                if (totalPages === page) {
                                    fullScreenDiv.style.transform = "translate(25%, 50%)";
                                }
                                if (totalPages === page) {
                                    bookCloseBtn.style.right = "50%";
                                    nextBtn.style.display = "none"
                                } else {
                                    bookCloseBtn.style.right = "0";
                                    nextBtn.style.display = "flex"
                                }
                                $(this).turn('center');
                                if (page == 1) {
                                    $(this).turn('peel', 'br');
                                }
                            },
                        }
                    });
                });
            });
        };

        let dir = 'http://localhost/mp/public/media/product2/';
        let pdf = '{{ thema.pdfFile }}';
        let dirx = dir + pdf;
        funcPdfConvertToFlipbook(dirx);

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

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

        $("#prevBtn").click(function () {
            $("#flipbook").turn("previous");
        });
    </script>
{% endblock %}