{% extends 'main_base.html.twig' %}
{% block title %}Prufungsvorbereitung{% endblock %}
{% block description %}Prufungsvorbereitung{% endblock %}
{% block content %}
    <div ignore="1" class="close-btn">
        <img src="{{ asset('assets/main/img/icons/remove.png') }}" alt="remove__icon">
    </div>
    <div class="products-set__section d-flex ">
        <div class="products__fast__access">
            <h1>{{ extra.text|striptags }}
                <button></button>
            </h1>
            <div class="products__fast__access-all__prices"></div>
            <div class="products__fast__access-modules__and__prices">
                <ul class="products__fast__access-modules ps-0">
                    {% for modulx in productModul %}
                        {% if extra.isEnabled == 1 %}
                            <li class="{% if modulx.id == extra.id %}active{% endif %}" id="modul-{{ modulx.id }}">
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_prufungsvorbereitung_modul',{'product':productId,'modul':modulx.id}) }}">{{ modulx.text|striptags }}</a>
                                </div>
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% for extrax in productExtra %}
                        {% if extrax.isEnabled == 1 %}
                            <li class="{% if extrax.id == extra.id %}active{% endif %}" id="extra-{{ extrax.id }}">
                                <div class="products__fast__access-modules-name">
                                    <a href="{{ path('main_prufungsvorbereitung_extra',{'product':productId,'extra':extrax.id}) }}">{{ extra.text|striptags }}</a>
                                </div>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="sets__view__section">
            <div class="sets__view__section-img__wrapper">
                <img src="{{ asset('media/products/extra/'~extra.imageFile) }}" alt="pdf__photo">
            </div>
            <div ignore="1" class="swiper-button-full__screen">
                <button>
                    <i class="fa-solid fa-expand"></i>
                </button>
            </div>
        </div>
        <div class="product__information__wrapper">
            <div class="product__information">
                <div class="circle d-flex justify-content-center align-items-center ">
                    <p>
                        {{ shopAktionButton.text }}
                    </p>
                </div>
                <p>{{ extra.text|raw }}</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="{{ extra.id }}" data-price="{{ extra.price }}" data-type="extra"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">
                                                Einzelpreis
                                            </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ extra.price }}">CHF <span
                                                        class="value">{{ extra.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="{{ extra.id }}" data-price="{{ extra.priceB }}" data-type="extra"
                                             data-name="dataSt">
                                            <h4 class="product__information-option-title">
                                                Einzelpreis
                                            </h4>
                                            <div class="ps-shop-price product__information-option-price"
                                                 data-price="{{ extra.priceB }}">CHF <span
                                                        class="value">{{ extra.priceB|number_format(2)|default }}</span>
                                            </div>
                                        </div>
                                    {% elseif app.user.userTyped.id == 3 %}
                                        {% set priceType = getUserTypeExtraPrices(app.user.id,extra.id) %}
                                        <div class="product__information-option d-flex justify-content-between align-items-center active"
                                             data-id="{{ extra.id }}" data-price="{{ priceType }}" data-type="extra"
                                             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="{{ extra.id }}" data-price="{{ extra.priceC }}" data-type="extra"
                                             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="{{ extra.priceC }}">CHF <span
                                                        class="value">{{ extra.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-id="{{ extra.id }}" data-name="typeSt" data-type="extra"
                                         data-price="{{ extra.price }}">
                                        <h4 class="product__information-option-title">Einzelpreis </h4>
                                        <div class="ps-shop-price product__information-option-price"
                                             data-price="{{ extra.price }}">CHF <span
                                                    class="value">{{ extra.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/index.js') }}"></script>
    <script>
        $('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;
            });
        });
        // 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");
                    }
                })
            })


        })

        // Full Screen
        const fullScreenBtn = document.querySelector(".swiper-button-full__screen button");
        const book = document.querySelector(".sets__view__section");
        const yellowBallon = document.querySelector(".animation__yellow__balloon")
        const header = document.querySelector(".header")
        const productInformation = document.querySelector(".product__information__wrapper")
        const productFastAccess = document.querySelector(".products__fast__access")
        const warningModals = document.querySelector(".warning__modals")
        const closeBtn = document.querySelector("body > .close-btn")

        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"
            productFastAccess.style.opacity = "0"
            if (warningModals) {
                warningModals.style.opacity = "0"
                warningModals.style.pointerEvents = "none"
            }
            productInformation.style.pointerEvents = "none"
            productFastAccess.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"
            productFastAccess.style.opacity = "1"
            productFastAccess.style.pointerEvents = "auto"
            if (warningModals) {
                warningModals.style.opacity = "1"
                warningModals.style.pointerEvents = "auto"
            }
            closeBtn.style.opacity = "0"
            closeBtn.style.pointerEvents = "none"
            document.body.style.overflow = "visible";
            document.body.style.overflowX = "hidden";

        })
    </script>
{% endblock %}